:root {
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-darker: #064e3b;
  /* Fluid content padding scales smoothly with the viewport width */
  --content-pad: clamp(0.85rem, 2.5vw, 2rem);
}

* { box-sizing: border-box; }
html, body { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #f1f5f9;
}

img, video { max-width: 100%; height: auto; }

.brand-bg {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 55%, var(--brand-darker) 100%);
  color: #fff;
}
.brand-text { color: var(--brand); }

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.btn {
  transition: transform .12s ease, box-shadow .15s ease, background-color .12s ease;
  min-height: 44px;
  font-size: .95rem;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.nav-link {
  cursor: pointer;
  border-left: 3px solid transparent;
  font-size: .95rem;
}
.nav-link.active {
  background: rgba(255,255,255,.18);
  border-left-color: #5eead4;
}
.fade-in { animation: fade .25s ease; }
@keyframes fade { from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:none;} }
.badge { display:inline-block; font-size:.7rem; padding:2px 8px; border-radius:999px; font-weight:600; }

table tbody tr:hover { background:#f8fafc; }
.modal-overlay { background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
/* Modal content never overflows its container horizontally */
.modal-overlay input,
.modal-overlay select,
.modal-overlay textarea { max-width: 100%; }

/* --- UPDATED INPUTS RULE --- */
input, select, textarea {
  outline: none;
  font-size: 16px; /* prevent zoom on iOS */
  width: 100%;
  color: #0f172a !important;            /* Explicitly dark slate text color */
  background-color: #ffffff !important;   /* Explicitly white background */
}

input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

/* --- ADDED AUTOFILL PROTECTION BARRIER --- */
/* Fixes browser autofill rendering text invisible */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a !important;
  transition: background-color 5000s ease-in-out 0s;
}

.field-label {
  display: block;
  font-weight: 600;
  color: #1e293b;                 /* high-contrast slate-800 */
  font-size: .8rem;
  letter-spacing: .01em;
  margin-bottom: 6px;
  line-height: 1.3;
  /* Persistent visibility: never truncate or clip long labels */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.field-label .req { color: #dc2626; margin-left: 2px; font-weight: 700; }
.help-text {
  font-size: .75rem;
  color: #64748b;
  margin-top: 4px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Top-stacked form architecture                                       */
/* Labels sit directly above their input so forms fill vertically,     */
/* eliminating horizontal scroll and boosting mobile completion rates. */
/* ------------------------------------------------------------------ */
.form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;                   /* allow the field to shrink inside grids */
}
.form-field > label,
.form-field > .field-label {
  order: -1;                      /* label always above input */
}
.form-field > input,
.form-field > select,
.form-field > textarea {
  width: 100%;
}
/* Any input/select/textarea placed directly in a form grid gets a
   consistent, high-contrast, comfortably-tappable baseline style. */
.form-grid input,
.form-grid select,
.form-grid textarea,
.form-field input,
.form-field select,
.form-field textarea {
  padding: .6rem .75rem;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  min-height: 44px;               /* touch target */
  line-height: 1.3;
}

/* Fluid, viewport-adaptive form grid.
   Columns auto-fit to the available width and never force horizontal
   scroll: each column is at least min(100%, 220px) wide, so on narrow
   screens fields naturally stack to a single column. */
.form-grid {
  display: grid;
  gap: 1rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: start;
}
.form-grid.tight { gap: .75rem .9rem; }
/* Span helpers that degrade gracefully on small viewports */
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2,
  .form-grid .span-all { grid-column: auto; }
}
.section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: .5rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: .35rem;
}

/* Mobile sidebar */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform .2s ease;
}
.main-area {
  margin-left: 260px;
  width: 100%;
  min-height: 100vh;
  background: #f1f5f9;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: .9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--brand);
  font-size: 1.05rem;
}
#content-wrap { padding: var(--content-pad); }

.table-card { overflow-x: auto; }
.table-card table { width: 100%; min-width: 720px; font-size: .9rem; }

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

/* Fluid grids: columns auto-fit to the viewport instead of a fixed count,
   so layouts scale smoothly across phones, tablets and desktops without
   ever forcing horizontal scroll. */
.responsive-grid { display: grid; gap: 1rem; align-items: start; }
.responsive-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.responsive-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.responsive-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.responsive-grid .col-span-2 { grid-column: span 2; }
@media (max-width: 560px) {
  .responsive-grid .col-span-2 { grid-column: auto; }
}

.upload-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1rem;
  border: 2px dashed #cbd5f5;
  border-radius: 14px;
  background: #f8fafc;
  text-align: center;
  cursor: pointer;
  min-height: 150px;
  color: #475569;
}
.upload-tile.has-image {
  border-style: solid;
  background: #fff;
}
.upload-tile input[type=file] { display: none; }
.upload-tile img { width: 100%; max-height: 130px; object-fit: contain; border-radius: 8px; }

.confirm-modal h3 { color: #b45309; }
.confirm-modal[data-tone="danger"] h3 { color: #b91c1c; }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar { transform: translateX(-105%); box-shadow: 0 12px 24px rgba(15,23,42,.18); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .topbar { padding: .75rem 1rem; }
  .action-bar { justify-content: stretch; }
  .action-bar > * { flex: 1 1 100%; }
  .nav-link { padding: 14px 18px; }
  table { font-size: .85rem; }
}
@media (max-width: 600px) {
  .modal-overlay > div { padding: 1.25rem; }
}

.app-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 25;
  display: none;
}
.app-overlay.show { display: block; }

.btn-icon-only { width: 44px; padding: 0; }

[role="button"], button { touch-action: manipulation; }