/* Control Center — Carbon Titanium (black + titanium blue), Helvetica.
   Single source of truth. Old class/var names (gold, parchment) are kept
   so we don't have to rewrite every view — they just resolve to the new
   black + titanium-blue palette. */
:root {
  /* Layered carbon-black */
  --bg-void:   #0c0d0e;
  --bg-base:   #101214;
  --bg-raised: #14171a;
  --bg-panel:  #15181c;
  --bg-hover:  #1c2024;
  --bg-active: #232830;

  --border:       #262b32;
  --border-light: #1c2026;
  --border-blue:  #3a6d85;

  /* Titanium blue accent ladder (matches main app's Carbon Titanium theme) */
  --blue:        #6db4d4;
  --blue-bright: #8fcce7;
  --blue-deep:   #3a6d85;
  --blue-glow:   rgba(109, 180, 212, 0.22);
  --blue-dim:    rgba(109, 180, 212, 0.14);
  --blue-faint:  rgba(109, 180, 212, 0.06);

  /* Aliases so old markup keeps working (gold → blue everywhere) */
  --gold:        var(--blue);
  --gold-bright: var(--blue-bright);
  --gold-dim:    var(--blue-dim);

  --white:     #f4f6fb;
  --off-white: #cdd4e3;
  --muted:     #8693ac;
  --faint:     #5b667c;

  --green: #3dd584;
  --red:   #ff5d6b;
  --amber: #ffb547;

  --sidebar-w: 240px;
  --topbar-h:  56px;

  --radius:    8px;
  --radius-lg: 12px;

  --font-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-void);
  color: var(--white);
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-bright); text-decoration: underline; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.dim { color: var(--muted); }
.faint { color: var(--faint); }

/* Force all Helvetica — overrides any inline Cormorant Garamond / DM Sans /
   DM Mono references inherited from the old parchment theme. */
[style*="Cormorant Garamond"],
[style*="DM Sans"] {
  font-family: var(--font-base) !important;
}
[style*="DM Mono"] { font-family: var(--font-mono) !important; }

h1, h2, h3, h4 {
  font-family: var(--font-base);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white);
}

/* ----------------- AUTH ----------------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: radial-gradient(circle at 50% -10%, #1d2a30 0%, var(--bg-void) 55%);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(79,140,255,0.06) inset;
}
.brand { text-align: center; margin-bottom: 24px; }
.brand-eyebrow {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue); font-weight: 600;
}
.brand-title {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 8px 0 6px;
  color: var(--white);
}
.brand-sub { color: var(--muted); font-size: 13px; margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.lbl, .fld label, label.lbl {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--off-white);
  font-weight: 600;
  margin-bottom: -8px;
}

.ipt, .fld input, .fld select, .fld textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--white);
  transition: border-color 120ms, box-shadow 120ms;
}
.ipt:focus, .fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
.ipt-sm { padding: 8px 12px; font-size: 13px; }
.code-input {
  letter-spacing: 8px; text-align: center;
  font-family: var(--font-mono); font-size: 22px;
}

/* ----------------- BUTTONS (everything blue) ----------------- */
.btn, .btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue-deep);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.btn:hover, .btn-gold:hover {
  background: var(--blue-bright);
  border-color: var(--blue);
  text-decoration: none;
  color: #fff;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
}
.btn-outline:hover { background: var(--blue-dim); color: var(--blue-bright); }
.btn-danger { background: var(--red); border-color: #b8323e; }
.btn-danger:hover { background: #ff7682; border-color: var(--red); }
.btn-warn { background: var(--amber); border-color: #c98a2f; color: #1a1814; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border);
  color: var(--off-white);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-family: var(--font-base); font-size: 13px; cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--blue-deep); color: var(--white); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.link-btn { background: none; border: none; color: var(--blue); cursor: pointer; font-family: inherit; padding: 8px; }
.link { color: var(--blue); text-decoration: none; font-weight: 500; }
.link:hover { color: var(--blue-bright); text-decoration: underline; }
.back { color: var(--blue); text-decoration: none; font-size: 12.5px; display: inline-block; margin-bottom: 14px; }
.back::before { content: "← "; }
.back:hover { text-decoration: underline; }

.err {
  background: rgba(255,93,107,0.08);
  color: var(--red);
  border: 1px solid rgba(255,93,107,0.25);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
}
.footnote, .footnote-form {
  text-align: center; margin-top: 18px;
  font-size: 12px; color: var(--muted);
}

/* ----------------- TOP / SIDEBAR APP SHELL ----------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: linear-gradient(180deg, #14181d 0%, #0a0c0e 100%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 20px 14px 14px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  padding: 0 10px 18px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-brand .brand-mini-title {
  font-family: var(--font-base);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
}

.sidenav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.sidenav-group-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 12px 12px 6px;
  font-weight: 700;
}
.sidenav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  color: var(--off-white);
  text-decoration: none;
  font-size: 13.5px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.sidenav-link .ic {
  color: var(--blue);
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sidenav-link .ic svg { width: 16px; height: 16px; }
.sidenav-link:hover {
  background: var(--bg-hover);
  color: var(--white);
  text-decoration: none;
}
.sidenav-link.is-active {
  background: var(--blue-dim);
  color: var(--white);
  border-color: var(--blue-deep);
  font-weight: 600;
}
.sidenav-link.is-active .ic { color: var(--blue-bright); }
.sidebar-foot {
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 10px;
}
.me-block { padding: 0 8px; }
.me-label {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); font-weight: 700;
}
.me-email { font-size: 12px; color: var(--off-white); word-break: break-all; margin-top: 2px; }

.app-main { flex: 1; min-width: 0; background: var(--bg-void); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 24px; }
.brand-mini { display: flex; align-items: baseline; gap: 10px; }
.topnav { display: flex; gap: 6px; }
.topnav-link {
  color: var(--off-white); text-decoration: none;
  padding: 6px 12px; border-radius: var(--radius); font-size: 13px;
}
.topnav-link.is-active { background: var(--blue-dim); color: var(--blue-bright); }
.topnav-link:hover { background: var(--bg-hover); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.me { color: var(--muted); font-size: 12.5px; font-family: var(--font-mono); }

.page {
  padding: 28px 32px 60px;
  max-width: 100%;
  margin: 0;
}
.page-title {
  font-family: var(--font-base);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--white);
}
.page-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 22px;
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  background: transparent; border: 1px solid var(--border);
  color: var(--white); padding: 8px 10px; border-radius: var(--radius);
  cursor: pointer; font-size: 14px;
}

/* ----------------- KPI ----------------- */
.kpi-row, .bigkpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.kpi, .bigkpi {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  position: relative;
  transition: border-color 120ms;
}
.kpi:hover, .bigkpi:hover { border-color: var(--border-blue); }
.kpi-label, .bigkpi .lbl {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.kpi-value, .bigkpi .val {
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--white);
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.bigkpi .val { font-size: 28px; }
.bigkpi .sub { font-size: 11.5px; color: var(--faint); margin-top: 4px; }

/* ----------------- CARD ----------------- */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  gap: 16px; flex-wrap: wrap;
}
.card-title {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--white);
}
.search-wrap { display: flex; gap: 8px; align-items: center; }

/* ----------------- TABLE ----------------- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  text-align: left;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  position: sticky; top: 0;
}
.tbl tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--off-white);
}
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.empty { text-align: center; padding: 28px; color: var(--muted); }

/* ----------------- STATUS PILLS ----------------- */
.status {
  display: inline-block;
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: lowercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.status-active, .status-trialing,
.status-paid, .status-success, .status-succeeded {
  background: rgba(61,213,132,0.10); color: var(--green); border-color: rgba(61,213,132,0.25);
}
.status-past_due, .status-incomplete, .status-pending {
  background: rgba(255,181,71,0.10); color: var(--amber); border-color: rgba(255,181,71,0.25);
}
.status-canceled, .status-inactive, .status-unpaid, .status-failed, .status-fail {
  background: rgba(255,93,107,0.10); color: var(--red); border-color: rgba(255,93,107,0.25);
}
.badge {
  background: var(--blue-dim); color: var(--blue-bright);
  font-size: 10px; padding: 2px 8px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.08em; margin-left: 4px;
  border: 1px solid var(--blue-deep);
}

/* ----------------- USER DETAIL ----------------- */
.user-head { margin-bottom: 22px; }
.user-title {
  font-family: var(--font-base);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--white);
}
.user-sub { color: var(--muted); font-size: 13px; }
.dl {
  display: grid; grid-template-columns: 200px 1fr; gap: 8px 24px;
  padding: 16px 20px; margin: 0;
}
.dl dt {
  color: var(--muted); font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.dl dd { color: var(--white); margin: 0; font-size: 14px; word-break: break-word; }

/* ----------------- FORMS / ACTIONS / TOASTS ----------------- */
.btn-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
}
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.toast-tray {
  position: fixed; top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 1000;
}
.toast {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--white);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-width: 340px;
}
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }

/* ----------------- ACTION GRID ON USER DETAIL ----------------- */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px 20px;
}
.action-card {
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.action-card .a-title { font-size: 13px; font-weight: 600; color: var(--white); }
.action-card .a-desc { font-size: 12px; color: var(--muted); flex: 1; }

/* ----------------- SECTIONS / GRID ----------------- */
.section-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 18px;
}
@media (max-width: 1100px) { .section-grid { grid-template-columns: 1fr; } }

.col-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .col-grid-2 { grid-template-columns: 1fr; } }

.live-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green);
  margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(61,213,132,0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,213,132,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(61,213,132,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,213,132,0); }
}

/* ----------------- DELTA / TREND ----------------- */
.delta { font-size: 11px; margin-top: 2px; font-family: var(--font-mono); }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.delta.flat { color: var(--muted); }

/* ----------------- SPARKBAR ----------------- */
.sparkbar {
  display: flex; align-items: flex-end; gap: 2px;
  height: 42px; margin-top: 8px;
}
.sparkbar > span {
  flex: 1; background: var(--blue-dim);
  border-radius: 2px 2px 0 0; min-height: 2px;
  transition: background 120ms;
}
.sparkbar > span.hi { background: var(--blue); }
.sparkbar > span:hover { background: var(--blue-bright); }

/* ----------------- HEALTH ----------------- */
.health { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; }
.health-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--bg-void);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.health-row .label { font-size: 13px; color: var(--off-white); }
.health-row .val { font-family: var(--font-mono); font-size: 13px; color: var(--white); }
.health-ok { color: var(--green); }
.health-warn { color: var(--amber); }
.health-bad { color: var(--red); }

/* ----------------- BILLING ----------------- */
.bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .bill-grid { grid-template-columns: 1fr; } }
.bill-card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0; overflow: hidden;
}
.bill-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: center;
}
.bill-card-head h3 {
  margin: 0;
  font-family: var(--font-base);
  font-size: 15px; font-weight: 600;
}
.bill-card-body { padding: 14px 18px; }

.pm-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border-light);
}
.pm-row:last-child { border-bottom: none; }
.pm-card-line { font-family: var(--font-mono); font-size: 13px; }
.default-tag {
  background: var(--blue-dim); color: var(--blue-bright);
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px;
  border: 1px solid var(--blue-deep);
}

.notice {
  background: var(--bg-void); border: 1px dashed var(--border);
  padding: 12px 14px; border-radius: var(--radius);
  color: var(--off-white); font-size: 13px;
}
.notice.warn { border-color: rgba(255,181,71,0.35); color: var(--amber); }
.notice.err  { border-color: rgba(255,93,107,0.4);  color: var(--red); }

/* ----------------- LIVE TABLE ACTIONS ----------------- */
.tbl tbody td.actions { text-align: right; white-space: nowrap; }
.tbl tbody td.actions form { display: inline-block; margin-left: 4px; }
.tbl tbody td .mini {
  padding: 4px 10px; font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--off-white);
  cursor: pointer;
  font-family: var(--font-base);
}
.tbl tbody td .mini:hover { background: var(--bg-hover); border-color: var(--blue-deep); color: var(--white); }
.tbl tbody td .mini.danger { color: var(--red); border-color: rgba(255,93,107,0.3); }
.tbl tbody td .mini.danger:hover { background: rgba(255,93,107,0.08); }

/* ----------------- OPERATIONS / EVENT FEED ----------------- */
.event-feed { padding: 4px 0; }
.event-row {
  display: grid;
  grid-template-columns: 110px 110px 1fr 130px;
  gap: 14px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.event-row:last-child { border-bottom: none; }
.event-row:hover { background: var(--bg-hover); }
.event-kind {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-void);
  color: var(--off-white);
  width: fit-content;
}
.event-kind.inventory { color: var(--blue-bright); border-color: var(--blue-deep); background: var(--blue-dim); }
.event-kind.deal      { color: #b78cff;          border-color: #5b3da3; background: rgba(123,86,224,0.12); }
.event-kind.invoice   { color: var(--amber);     border-color: rgba(255,181,71,0.4); background: rgba(255,181,71,0.08); }
.event-kind.payment   { color: var(--green);     border-color: rgba(61,213,132,0.4); background: rgba(61,213,132,0.10); }
.event-kind.listing   { color: #6ad9ff;          border-color: #2a76a3; background: rgba(106,217,255,0.10); }
.event-kind.sale      { color: var(--green);     border-color: rgba(61,213,132,0.4); background: rgba(61,213,132,0.10); }
.event-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.event-user { color: var(--off-white); font-size: 13px; }
.event-desc { color: var(--white); font-size: 13px; }
.event-amount { text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--white); }

/* ----------------- RESPONSIVE ----------------- */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: calc(-1 * var(--sidebar-w)); top: 0;
    transition: left 220ms ease;
    z-index: 50;
    box-shadow: 12px 0 32px rgba(0,0,0,0.5);
  }
  .sidebar.open { left: 0; }
  .mobile-menu-btn { display: inline-flex; }
  .event-row {
    grid-template-columns: 90px 1fr;
    grid-template-areas:
      "kind   amount"
      "user   when"
      "desc   desc";
    gap: 4px 12px;
  }
  .event-kind   { grid-area: kind; }
  .event-amount { grid-area: amount; }
  .event-user   { grid-area: user; font-size: 12px; }
  .event-when   { grid-area: when; text-align: right; }
  .event-desc   { grid-area: desc; padding-top: 4px; }
}
@media (max-width: 700px) {
  .topbar { padding: 10px 14px; }
  .page { padding: 18px 16px 60px; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dd { margin-bottom: 8px; }
  .section-grid { grid-template-columns: 1fr; }
  .user-title { font-size: 22px; }
  .page-title { font-size: 20px; }
}

/* ----------------- MOBILE OVERLAY BACKDROP ----------------- */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 49;
  opacity: 0;
  transition: opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-backdrop.show { display: block; opacity: 1; }
body.sidebar-locked { overflow: hidden; }

/* =========================================================
   MOBILE PASS (≤900px) — does not touch desktop styles above.
   Goal: comfortable phone layout, no horizontal page scroll,
   readable type, finger-sized tap targets, gracefully scrolling
   tables, stacked filter rows, fluid KPIs.
   ========================================================= */
@media (max-width: 900px) {
  html, body { font-size: 14.5px; -webkit-text-size-adjust: 100%; }

  /* Sidebar drawer: wider, push-on-top, smooth */
  .sidebar {
    width: min(82vw, 320px);
    padding: 16px 12px 12px;
  }
  .sidebar-foot { padding-bottom: env(safe-area-inset-bottom, 0); }

  /* Mobile topbar (already shown via JS) — tighten, safe-area aware */
  #mobile-topbar.topbar {
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0));
    gap: 10px;
  }
  .mobile-menu-btn {
    width: 38px; height: 38px;
    min-width: 38px; min-height: 38px;
    padding: 0; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
  }

  /* Page padding tuned for thumb reach + safe areas */
  .page {
    padding: 18px 14px calc(72px + env(safe-area-inset-bottom, 0));
  }
  .page-title { font-size: 21px; }
  .page-sub { font-size: 12.5px; margin-bottom: 16px; }

  /* KPI grids: 2-col on phones, 1-col on tiny */
  .kpi-row, .bigkpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }
  .kpi, .bigkpi { padding: 12px 13px; min-width: 0; }
  .kpi-value, .bigkpi .val { font-size: 20px; }
  .bigkpi .val { font-size: 22px; }
  .kpi-label, .bigkpi .lbl { font-size: 9.5px; letter-spacing: 0.14em; }
  .bigkpi .sub { font-size: 10.5px; }
  /* Dashboard sparkline card spans full width on mobile */
  .bigkpi[style*="grid-column"] { grid-column: 1 / -1 !important; }
  .kpi-arrow { top: 10px; right: 12px; font-size: 12px; }

  /* Cards: zero outside margin slop, lighter inner padding */
  .card { border-radius: 10px; margin-bottom: 16px; }
  .card-header {
    padding: 12px 14px;
    gap: 10px;
    align-items: stretch;
  }
  .card-title { font-size: 14px; }

  /* Search / filter rows: stack vertically, full width, big targets */
  .search-wrap {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .search-wrap input,
  .search-wrap select,
  .search-wrap .ipt,
  .search-wrap .btn-ghost,
  .search-wrap .btn {
    flex: 1 1 140px;
    min-height: 40px;
    font-size: 14px; /* prevents iOS zoom-on-focus */
  }
  .search-wrap input[type="search"] { flex-basis: 100%; }
  .search-wrap .link-btn { flex: 0 0 auto; }

  /* Tables: horizontal scroll with momentum + clear edge */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 0 0 10px 10px;
  }
  .tbl { font-size: 12.5px; min-width: 560px; }
  .tbl thead th { padding: 10px 12px; font-size: 10px; }
  .tbl tbody td { padding: 10px 12px; }
  .tbl tbody td.actions { white-space: nowrap; }
  .tbl tbody td .mini { padding: 6px 10px; font-size: 12px; }

  /* Definition list (user → Account) already stacks at 700px;
     here just keep DD breathing room */
  .dl { padding: 12px 14px; }

  /* Action grid for admin actions — fill phone width */
  .action-grid {
    grid-template-columns: 1fr;
    padding: 12px 14px;
    gap: 10px;
  }
  .action-card { padding: 12px 14px; }
  .action-card .btn,
  .action-card .btn-outline,
  .action-card .btn-danger,
  .action-card .btn-warn { width: 100%; min-height: 42px; }
  .action-card select { min-height: 42px; font-size: 14px; }

  /* Generic button-row inside cards: stack full-width, big tap */
  .btn-row {
    padding: 12px 14px;
    gap: 8px;
  }
  .btn, .btn-gold, .btn-outline, .btn-ghost, .btn-danger, .btn-warn {
    min-height: 40px;
  }
  .btn-sm { padding: 8px 12px; font-size: 12.5px; min-height: 36px; }

  /* Forms inside modals/cards: prevent iOS zoom & full-width */
  .ipt, .fld input, .fld select, .fld textarea {
    font-size: 16px; /* iOS no-zoom floor */
    padding: 12px 14px;
  }
  .ipt-sm { font-size: 14px; padding: 10px 12px; }

  /* Sidebar nav: bigger touch targets in drawer */
  .sidenav-link { padding: 12px 12px; font-size: 14.5px; }
  .me-email { font-size: 11.5px; }

  /* Toasts on phones: pinned bottom, full-bleed-ish */
  .toast-tray {
    top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0));
    left: 12px; right: 12px;
    align-items: stretch;
  }
  .toast { max-width: none; }

  /* User detail head: don't crowd */
  .user-title { font-size: 22px; }
  .user-sub { font-size: 12.5px; }

  /* Auth card on small screens */
  .auth-card { padding: 24px 20px; border-radius: 12px; }
  .brand-title { font-size: 24px; }
  .code-input { font-size: 20px; letter-spacing: 6px; }

  /* Notice/health rows */
  .health, .health-row { padding: 10px 12px; }
  .health-row { flex-wrap: wrap; gap: 4px 12px; }
}

/* Extra-small phones (≤480px) — drop KPIs to single column */
@media (max-width: 480px) {
  .kpi-row, .bigkpi-row {
    grid-template-columns: 1fr;
  }
  .kpi-value, .bigkpi .val { font-size: 22px; }
  .bigkpi .val { font-size: 24px; }
  .page { padding: 14px 12px calc(72px + env(safe-area-inset-bottom, 0)); }
  .page-title { font-size: 19px; }
  .card-header { flex-direction: column; align-items: stretch; }
  .card-header > * { width: 100%; }
  .tbl { min-width: 480px; }
}

/* Tiny phones (≤360px) — last-resort tightening */
@media (max-width: 360px) {
  html, body { font-size: 13.5px; }
  .page-title { font-size: 18px; }
  .kpi, .bigkpi { padding: 11px 12px; }
  .kpi-value, .bigkpi .val { font-size: 20px; }
}

/* Landscape phone: keep sidebar drawer narrow so content stays usable */
@media (max-width: 900px) and (orientation: landscape) {
  .sidebar { width: min(60vw, 300px); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: #2a3036; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a4250; }

/* ----------------- CLICKABLE KPI CARDS ----------------- */
a.kpi, a.bigkpi {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
a.kpi:hover, a.bigkpi:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue-dim), 0 0 14px var(--blue-faint);
  text-decoration: none;
}
a.kpi:hover .kpi-value,
a.bigkpi:hover .val { color: var(--blue-bright); }
.kpi .kpi-arrow, .bigkpi .kpi-arrow {
  position: absolute; top: 12px; right: 14px;
  color: var(--faint); font-size: 14px;
  transition: color 120ms, transform 120ms;
}
a.kpi:hover .kpi-arrow, a.bigkpi:hover .kpi-arrow {
  color: var(--blue); transform: translateX(2px);
}