/* ═════════════════════════════════════════════════════════════════════
   base.css  ·  Relay operator dashboard (relay-app)
   Page chrome: design tokens, reset, fonts, top nav, title row, filter
   bar, and the global toast.

   ADAPTED FROM the Expedited admin reference. The one structural change
   for multi-tenant: the single brand accent is now a CSS variable
   (--accent / --accent-light) injected per tenant at the shell level
   (see functions/index.js, which inlines :root{--accent:…} from the
   tenant's site.theme.accent). The neutral navy chrome stays static;
   only the accent is tenant-skinned.
   ═════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* ── Static chrome (same for every tenant) ───────────────────── */
  --bg:#07090f; --surface:#0d1118; --card:#111720; --card2:#16202e; --border:#1c2840;
  --blue:#2563eb; --blue-light:#3b82f6; --blue-glow:rgba(37,99,235,.14);
  --green:#22c55e; --red:#f87171;
  --text:#eae8e7; --muted:#6f6a64; --muted2:#968f86;

  /* ── Per-tenant accent (DEFAULT — overridden by the themed shell) ─
     functions/index.js replaces these with the tenant's accent so a
     fresh tenant renders branded on first paint (no FOUC). This default
     (the reference gold) is the fallback when no theme is resolved. */
  --accent:#f59e0b; --accent-light:#fbbf24;
  --accent-glow:rgba(245,158,11,.14);
}

html{ background: var(--bg); }

body{
  font-family:'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* Prevent the rubber-band overscroll revealing a non-themed gutter in
   * the installed PWA. */
  overscroll-behavior-y: none;
}

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL INPUT-ZOOM FLOOR — the rule for everything.
   iOS Safari auto-zooms when a focused control's font-size is < 16px.
   The reference inputs were all under it (.8rem / .76rem / 15px) and so
   they zoom on focus. 16px is the real lever; keep a compact LOOK with
   padding/line-height, never by dropping font-size below 16. The
   maximum-scale=1 in the viewport meta is belt-and-suspenders for the
   standalone PWA.
   ───────────────────────────────────────────────────────────────────── */
input, select, textarea, button {
  font-size: 16px;
  font-family: inherit;
}

/* ─── Top nav ──────────────────────────────────────────── */
/* <nav> stretches behind the iOS status bar via safe-area padding; the
 * inner .nav-inner is the actual 52px content row, so the centered
 * content isn't shoved up on notched devices. */
nav{
  position:sticky; top:0; z-index:100;
  padding-top: env(safe-area-inset-top);
  background:rgba(7,9,15,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  height:52px; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .14s;
}
.nav-logo:hover{ opacity:.82; }
.nav-logo:active{ opacity:.7; }
.nav-logo-img{
  display:block; height:22px; width:auto;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
}
/* Text fallback when a tenant hasn't uploaded a logo — the shell renders
 * the business name here in the display face. */
.nav-logo-text{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.15rem; letter-spacing:.04em; line-height:1;
  color: var(--text);
}
.nav-tag{
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--accent-light);
  background: var(--accent-glow);
  border:1px solid var(--accent-glow);
  border-radius:100px; padding:3px 9px;
}

.main{ padding:8px 20px 60px; width:100%; margin:0 auto; }

/* ─── Title row (page title + alerts pill) ─────────────── */
.title-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; position:relative; margin-bottom:18px;
}
.title-block{ min-width:0; flex:1; }
.page-title{
  font-family:'Inter', sans-serif; font-weight:800;
  font-size:1.55rem; letter-spacing:-.02em; margin-bottom:3px; line-height:1.08;
}
.page-title em{ font-style:normal; color: #fff; }
.page-sub{ color: var(--muted2); font-size:.78rem; margin-top:6px; }

/* ─── Alerts pill (toggles the popover) ────────────────── */
.alerts-pill{
  display:inline-flex; align-items:center; gap:7px;
  background: var(--card);
  border:1.5px solid var(--border); border-radius:100px;
  padding:7px 13px 7px 11px;
  color: var(--muted2);
  font-size:.7rem; font-weight:700; letter-spacing:.04em;
  cursor:pointer; transition: all .14s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink:0; margin-top:2px;
}
.alerts-pill:hover{ border-color: var(--accent); color: var(--accent-light); }
.alerts-pill:active{ transform: scale(.96); }
.alerts-pill[aria-expanded="true"]{
  border-color: var(--accent); color: var(--accent-light); background: var(--accent-glow);
}
.alerts-pill-dot{
  width:7px; height:7px; border-radius:100px;
  background: var(--muted); flex-shrink:0;
  transition: background .14s, box-shadow .14s;
}
.alerts-pill.on .alerts-pill-dot{
  background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.alerts-pill-label{ white-space: nowrap; }

/* ─── Alerts popover ───────────────────────────────────── */
.alerts-popover{
  position:absolute; top:calc(100% + 8px); right:0;
  width:280px; max-width:calc(100vw - 40px);
  background: var(--card);
  border:1px solid var(--border); border-radius:11px;
  padding:13px; z-index:50;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  opacity:0; transform: translateY(-6px); pointer-events:none;
  transition: opacity .15s, transform .15s;
}
.alerts-popover.open{ opacity:1; transform: translateY(0); pointer-events:auto; }

.alerts-status{
  display:flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:600;
  padding:0 2px 11px; border-bottom:1px solid var(--border); margin-bottom:11px;
}
.alerts-status .dot{ width:7px; height:7px; border-radius:100px; flex-shrink:0; }
.alerts-status.on .dot{ background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.alerts-status.off .dot{ background: var(--muted); }
.alerts-status .text{ color: var(--muted2); letter-spacing:.02em; }
.alerts-status.on .text{ color: #86efac; }

.alerts-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.alerts-btn{
  flex:1;
  background: var(--accent); color:#07090f;
  border:0; border-radius:7px;
  font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:8px 10px; cursor:pointer;
  transition: background .12s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.alerts-btn:hover{ background: var(--accent-light); }
.alerts-btn:active{ transform: scale(.96); }
.alerts-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.alerts-btn.ghost{
  background:transparent; color: var(--muted2); border:1.5px solid var(--border);
}
.alerts-btn.ghost:hover{ border-color: var(--accent); color: var(--accent-light); background: var(--accent-glow); }

.alerts-hint{
  background: var(--accent-glow);
  border:1px solid var(--accent-glow);
  border-radius:8px; padding:10px 12px;
  font-size:.7rem; color: var(--text); margin-top:11px; line-height:1.5;
}
.alerts-hint b{ color: var(--accent-light); }
.alerts-hidden{ display:none !important; }

/* ─── Filter / sort bar ────────────────────────────────── */
.filter-bar{ display:flex; gap:8px; margin-bottom:20px; align-items:center; }
.select{
  flex:1; min-width:0;
  background: var(--card);
  border:1.5px solid var(--border); border-radius:9px;
  color: var(--text);
  font-size:13px; /* selects open a native picker — no iOS focus-zoom (that's text inputs) */
  font-weight:600;
  padding:9px 32px 9px 12px;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8eaf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; background-size:13px;
  transition: border-color .14s;
}
.select:focus{ outline:none; border-color: var(--accent); }
.select:hover{ border-color: var(--muted2); }

/* ─── Global toast ─────────────────────────────────────── */
.toast{
  position:fixed; bottom:28px; left:50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--card);
  border:1.5px solid var(--accent); border-radius:10px;
  padding:10px 18px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  color: var(--accent-light);
  z-index:300; opacity:0; pointer-events:none;
  transition: opacity .22s, transform .22s;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ─── Skeleton loaders (shimmer) ───────────────────────── */
.sk{ position:relative; overflow:hidden; background:var(--card); }
.sk::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
@keyframes sk-shimmer{ to{ transform:translateX(100%); } }
.sk-group{
  background:var(--surface); border:1px solid var(--border);
  border-radius:11px; padding:10px; margin-bottom:8px;
}
.sk-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px; border-radius:8px; margin-bottom:6px; height:auto;
}
.sk-row:last-child{ margin-bottom:0; }
.sk-row-l{ flex:1; min-width:0; }
.sk-line{ height:12px; border-radius:6px; }
/* skeleton tiles also used inside the detail sheet */
.sk-card{ height:70px; border-radius:12px; margin:0 0 10px; }

/* ─── Centered page states (apex redirect / no access) ─── */
.center-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:12px; min-height:50vh; padding:40px 24px;
}
.cs-title{ font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:.04em; }
.cs-msg{ color:var(--muted2); font-size:.86rem; line-height:1.5; max-width:340px; }
.cs-link{ color:var(--accent-light); text-decoration:none; font-size:.8rem; font-weight:600; }
.cs-link:hover{ text-decoration:underline; }
.cs-btn{
  display:inline-block; margin-top:4px; padding:10px 20px; border-radius:8px;
  background:var(--accent); color:#1a1a1a; font-weight:700; font-size:.85rem;
  letter-spacing:.01em; text-decoration:none;
}
.cs-btn:hover{ background:var(--accent-light); }
/* Auth gate (login / no-access): full-page state, no dashboard chrome. */
body.auth-gate nav, body.auth-gate footer{ display:none; }
.cs-spinner{
  width:30px; height:30px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--accent);
  animation: cs-spin .8s linear infinite;
}
@keyframes cs-spin{ to{ transform:rotate(360deg); } }

/* ─── Operator chip (top-right) ────────────────────────── */
.nav-user{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.nav-avatar{
  width:27px; height:27px; border-radius:100px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-glow); color: var(--accent-light);
  border:1px solid var(--accent-glow);
  font-size:.72rem; font-weight:800; text-transform:uppercase; line-height:1;
}
.nav-email{
  font-size:.78rem; font-weight:600; color: var(--text);
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:430px){ .nav-email{ max-width:120px; } }

/* ─── iOS-style toggle (push alerts) ───────────────────── */
.alerts-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.alerts-toggle-title{ font-size:.84rem; font-weight:600; color: var(--text); }
.alerts-toggle-sub{ font-size:.7rem; color: var(--muted2); margin-top:2px; }
.ios-toggle{
  position:relative; width:46px; height:28px; border-radius:100px; flex-shrink:0;
  background: var(--border); border:none; padding:0; cursor:pointer;
  transition: background .22s ease; -webkit-tap-highlight-color:transparent;
}
.ios-toggle[aria-checked="true"]{ background: var(--green); }
.ios-toggle[disabled]{ opacity:.4; cursor:not-allowed; }
.ios-toggle-knob{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:100px;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition: transform .24s cubic-bezier(.3,.7,.4,1.2);
}
.ios-toggle[aria-checked="true"] .ios-toggle-knob{ transform: translateX(18px); }
.alerts-link{
  display:block; margin-top:13px; padding:0; background:none; border:none;
  color: var(--accent-light); font-family:inherit; font-size:.74rem; font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.alerts-link:hover{ text-decoration:underline; }

/* ─── App footer (subtle branding) ─────────────────────── */
.app-footer{
  max-width:960px; margin:10px auto 0;
  padding:18px 20px max(16px, env(safe-area-inset-bottom));
}
.foot-inner{
  
}
.foot-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.foot-mark{
  font-family:'Bebas Neue', sans-serif; font-size:1rem; letter-spacing:.04em;
  color: var(--muted2);
}
.foot-mark span{ color: var(--muted); }
.foot-build{ font-size:.66rem; color: var(--muted); letter-spacing:.02em; }
.foot-links{ display:flex; gap:16px; flex-wrap:wrap; }
.foot-links a{
  font-size:.72rem; color: var(--muted2); text-decoration:none; border:none; transition: color .14s;
  -webkit-tap-highlight-color:transparent;
}
.foot-links a:hover{ color: var(--accent-light); }
@media (max-width:480px){
  .foot-inner{ flex-direction:column; align-items:flex-start; gap:11px; }
}

/* ─── Standalone alerts switch (no popover) ────────────── */
.alerts-switch{ display:inline-flex; align-items:center; gap:9px; flex-shrink:0; }
.alerts-switch-label{
  font-size:.74rem; font-weight:600; color: var(--muted2); white-space:nowrap;
}
.alerts-switch.on .alerts-switch-label{ color:#86efac; }
.alerts-switch.on .alerts-pill-dot{
  background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
@media (max-width:430px){ .alerts-switch-label{ display:none; } }

/* ─── Boot splash (loading screen) ─────────────────────── */
.boot-splash{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background: var(--bg);
  transition: opacity .35s ease;
}
.boot-splash.hide{ opacity:0; pointer-events:none; }
.boot-logo{ width:74px; height:auto; opacity:.96; user-select:none; -webkit-user-drag:none; }
.boot-spinner{
  width:26px; height:26px; border-radius:50%;
  border:3px solid var(--border); border-top-color: var(--accent);
  animation: cs-spin .8s linear infinite;
}

/* ─── Footer mono logo (subtle) ────────────────────────── */
.foot-logo{
  height:18px; width:auto; opacity:.55; user-select:none; -webkit-user-drag:none;
  transition: opacity .14s;
}
.foot-logo:hover{ opacity:.8; }

/* ─── Polish pass: sticky footer + labeled alerts control ─ */
/* Footer pins to the viewport bottom when content is short — kills the
 * mid-page footer + void-below look. */
/* Footer flows after content (no sticky-footer flex — that pinned it to
 * the viewport bottom and opened a gap above it on tall iOS screens, since
 * 100dvh grows as the toolbar hides). overflow-x:clip stays as the
 * no-horizontal-scroll guard. */
body{ overflow-x:clip; }

/* Standalone PWA only: pin the footer to the bottom so short pages don't leave
 * a void below it. Scoped to standalone because the installed PWA has no
 * dynamic browser toolbar — so 100dvh is a fixed full-screen height and won't
 * grow-and-gap the way it does in Safari. In Safari we stay in natural flow
 * (rule above) precisely to avoid that toolbar-driven gap. */
@media all and (display-mode: standalone){
  body{ min-height:100dvh; display:flex; flex-direction:column; }
  /* Installed PWA: ONE uniform gutter on .main is the single source of the
   * left edge — the title row, filters, section headers and cards all sit
   * on it. (Re-adding padding per-child fought pipeline.css's later
   * .section-head rule and staggered the edges into three different insets.)
   * Trim from the default 20px for a fuller-width feel; no max-width cap.
   * One knob: change the 12px below to taste (8 = tighter, 0 = edge-to-edge). */
  .main{ flex:1 1 auto; min-width:0; max-width:100%; padding:18px 12px 60px; }
}

/* Alerts: a deliberate labeled control, not a floating switch. The label
 * STAYS VISIBLE at all widths (overrides the earlier 430px hide that left
 * a naked toggle); state shows via the toggle + a green-tinted label. */
.alerts-switch{ gap:8px; }
.alerts-switch-label{
  font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color: var(--muted2);
}
.alerts-switch.on .alerts-switch-label{ color:#86efac; }
@media (max-width:430px){ .alerts-switch-label{ display:inline; } }