/* Field Command — shared layout/form foundation (all portals).
 *
 * Load BEFORE portal-specific CSS (dashboard.css, public.css, SA, operator).
 * Tokens assume host page defines --page/--surface/--accent OR --fc-*.
 * Brand cache-bust via ?v=BRAND_VERSION on the <link>.
 *
 * Goals: symmetric gutters, consistent control heights, touch ≥44px on
 * phone, iOS 16px inputs (no zoom), safe-area, future-proof form/stack
 * patterns for admin · operator · super-admin · public.
 */

/* ── Design scale (4px base) ─────────────────────────────────── */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;

  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:11px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-pill:999px;

  /* Touch / control */
  --touch-min:44px;
  --control-h:48px;
  --control-h-sm:40px;
  --control-h-xs:34px;
  --control-font:16px; /* ≥16px on narrow viewports = no iOS zoom */

  /* Page shell */
  --gutter:16px;
  --gutter-lg:24px;
  --content-max:1200px;
  --form-max:480px;
  --card-pad:var(--space-4);
  --section-gap:var(--space-4);

  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  /* Color tokens stay on each portal (:root in dashboard / public / SA / operator).
     Do not re-declare --page/--accent here (circular fallback risk). */
}

/* Prefer host :root tokens when both defined — the var(fallback) chain above
   only applies if the custom property is literally missing. Portals already
   set --page etc.; public sets --fc-*. Map public → shared aliases: */
.public-page,
.booking-page,
.renew-page,
.quote-page{
  --page:var(--fc-page);
  --surface:var(--fc-surface);
  --elevated:var(--fc-elevated);
  --text:var(--fc-text);
  --text-muted:var(--fc-text-3);
  --border:var(--fc-border);
  --border-strong:var(--fc-border-strong);
  --input-bg:var(--fc-input-bg);
  --input-border:var(--fc-input-border);
  --accent:var(--fc-accent);
  --danger:var(--fc-danger);
  --success:var(--fc-success);
}

/* ── Box model baseline ──────────────────────────────────────── */
.fc-foundation,
.fc-page,
.fc-shell{
  box-sizing:border-box;
}
.fc-foundation *,
.fc-page *,
.fc-shell *{box-sizing:border-box;}

/* ── Symmetric page shell ────────────────────────────────────── */
.fc-page{
  min-height:100dvh;
  padding-top:calc(var(--gutter) + var(--safe-top));
  padding-right:calc(var(--gutter) + var(--safe-right));
  padding-bottom:calc(var(--gutter) + var(--safe-bottom));
  padding-left:calc(var(--gutter) + var(--safe-left));
}
.fc-shell{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
}
.fc-shell-narrow{
  width:100%;
  max-width:var(--form-max);
  margin-inline:auto;
}

/* ── Layout primitives (use in new markup) ───────────────────── */
.fc-stack{display:flex;flex-direction:column;gap:var(--section-gap);}
.fc-stack-sm{display:flex;flex-direction:column;gap:var(--space-2);}
.fc-stack-lg{display:flex;flex-direction:column;gap:var(--space-6);}
.fc-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-2) var(--space-3);
}
.fc-row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);}
.fc-grid-2{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
}
.fc-grid-3{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
}
.fc-grid-4{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);
}

/* ── Cards (symmetric padding) ───────────────────────────────── */
.fc-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--card-pad);
}
.fc-card-tight{padding:var(--space-3);border-radius:var(--radius-md);}
.fc-card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;
}
.fc-card-title{
  font-size:12px;font-weight:800;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;margin:0;
}

/* ── Forms (all portals) ─────────────────────────────────────── */
.fc-field{
  display:flex;flex-direction:column;gap:var(--space-2);
  margin:0 0 var(--space-4);
  min-width:0;
}
.fc-field:last-child{margin-bottom:0;}
.fc-field > label,
.fc-label{
  font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.3;
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
}
.fc-hint,.field-hint{
  font-size:12px;color:var(--text-muted);line-height:1.45;margin-top:var(--space-1);
}

/* Canonical control look — opt-in class OR layered onto .fg / common inputs */
.fc-control,
.fg input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.fg select,
.fg textarea,
.sett-input,
.sa-control,
.public-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.public-page select,
.public-page textarea,
.booking-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.booking-page select,
.booking-page textarea,
.renew-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.renew-page select,
.renew-page textarea,
.quote-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.quote-page select,
.quote-page textarea{
  width:100%;
  min-height:var(--control-h-sm);
  padding:10px 12px;
  font-size:var(--control-font);
  font-family:inherit;
  line-height:1.35;
  color:var(--text);
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius-md);
  outline:none;
  box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;
  appearance:none;
}
.fc-control:focus,
.fg input:focus,.fg select:focus,.fg textarea:focus,
.sett-input:focus,
.public-page input:focus,.public-page select:focus,.public-page textarea:focus,
.booking-page input:focus,.booking-page select:focus,.booking-page textarea:focus,
.renew-page input:focus,.renew-page select:focus,.renew-page textarea:focus,
.quote-page input:focus,.quote-page select:focus,.quote-page textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
textarea.fc-control,
.fg textarea,
.public-page textarea,
.booking-page textarea,
.renew-page textarea,
.quote-page textarea{
  min-height:96px;
  resize:vertical;
}

/* Buttons — symmetric padding + touch floor on narrow */
.fc-btn,
.fc-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--control-h-sm);
  padding:10px 16px;
  border-radius:var(--radius-md);
  font-size:14px;font-weight:700;font-family:inherit;
  border:1px solid transparent;cursor:pointer;
  text-align:center;text-decoration:none;
}
.fc-btn-primary,
.fc-btn.primary{
  background:var(--accent);color:#0b0a0c;border-color:transparent;
}
.fc-btn-primary:hover{opacity:.92;}
.fc-btn-primary:disabled,
.fc-btn:disabled{opacity:.5;cursor:not-allowed;}
.fc-btn-block{width:100%;}
.fc-btn-row{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);
}
.fc-btn-row .fc-btn,
.fc-btn-row .fc-btn-primary,
.fc-btn-row button{width:100%;}

/* Checkbox / radio rows stay usable */
.fc-check-row{
  display:flex;align-items:flex-start;gap:var(--space-3);
  min-height:var(--touch-min);padding:var(--space-2) 0;
}
.fc-check-row input[type="checkbox"],
.fc-check-row input[type="radio"]{
  width:20px;height:20px;min-height:20px;margin-top:2px;flex-shrink:0;
  accent-color:var(--accent);
}

/* ── Modal / auth form helpers (all portals) ─────────────────── */
.fc-modal-lead{
  font-size:13px;color:var(--text-muted);line-height:1.55;
  margin:0 0 var(--space-4);
}
.fc-form-msg{
  font-size:12px;color:var(--text-muted);min-height:18px;
  margin:0 0 var(--space-3);line-height:1.4;
}
.fc-form-msg.err,.fc-form-msg.is-error{color:var(--danger);}
.fc-otp{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:20px;letter-spacing:.28em;text-align:center;
  font-variant-numeric:tabular-nums;
}
.fc-divider-or{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:11px;color:var(--text-muted);
  margin:var(--space-3) 0;
}
.fc-divider-or::before,
.fc-divider-or::after{
  content:"";flex:1;height:1px;background:var(--border);
}
.fc-link-muted{
  font-size:12px;color:var(--text-muted);text-decoration:none;
}
.fc-link-muted:hover{color:var(--accent);text-decoration:underline;}
.fc-modal-narrow{max-width:420px;}
.fc-modal-foot-note{
  font-size:12px;color:var(--text-muted);margin-top:var(--space-4);
  text-align:center;line-height:1.45;
}
/* Segmented choice chips (payment method, filters) */
.fc-chip-row{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  margin:0 0 var(--space-4);
}
.fc-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--touch-min);
  padding:8px 12px;
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  font-size:12px;font-weight:600;font-family:inherit;
  cursor:pointer;
}
.fc-chip.active,.fc-chip[aria-pressed="true"]{
  background:color-mix(in srgb, var(--success) 15%, transparent);
  border-color:var(--success);
  color:var(--success);
  font-weight:700;
}

/* ── Tables: horizontal scroll shell (no layout blowout) ─────── */
.fc-table-wrap{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);
}
.fc-table-wrap table{min-width:560px;width:100%;border-collapse:collapse;}

/* ── Responsive breakpoints ──────────────────────────────────── */
/* sm ≤480 · md ≤768 · lg ≤1024 · xl ≤1280 */

@media (max-width:1024px){
  :root{--gutter:14px;--gutter-lg:18px;}
  .fc-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fc-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:768px){
  :root{
    --gutter:12px;
    --gutter-lg:16px;
    --card-pad:var(--space-3);
    --section-gap:var(--space-3);
    --control-h:48px;
    --control-h-sm:48px;
    --control-font:16px;
  }
  /* iOS zoom guard — all form controls on phone */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
  select,textarea,
  .fc-control,.sett-input{
    font-size:16px !important;
    min-height:var(--touch-min);
  }
  .fc-btn,.fc-btn-primary,
  button.btn-primary,button.btn-secondary,button.btn-ghost,
  .btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-success{
    min-height:var(--touch-min);
  }
  .fc-grid-2,.fc-grid-3,.fc-grid-4{grid-template-columns:1fr;}
  .fc-btn-row{grid-template-columns:1fr;}
  /* Full-bleed-safe modal padding */
  .overlay,.fc-modal-pad{
    padding:var(--space-3);
    padding-bottom:calc(var(--space-3) + var(--safe-bottom));
  }
}

@media (max-width:480px){
  :root{--gutter:10px;--radius-lg:12px;}
  .fc-card{border-radius:var(--radius-md);}
}

@media (min-width:1280px){
  :root{--gutter:var(--gutter-lg);--content-max:1280px;}
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fc-control,.fc-btn,.fc-btn-primary{transition:none !important;}
}