/* Usho Admin — styles.
   Extracted from index.html so the markup and script are navigable on their own.
   Loaded by <link> from index.html; no build step. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Warm cream page, warm-white chrome. The neutrals carry a little yellow so the dashboard reads as
     paper rather than as a screen; the shadows are warm to match, because a cool grey shadow over a
     cream surface turns visibly violet. */
  --brand: #2f5fe0; --brand-dk: #2249b8; --brand-text: #ffffff; --bg: #f6f3ec; --surface: #fffdf9;
  --surface-2: #f2eee4; --brand-soft: #e9eefc;
  --border: #e7e1d5; --border-strong: #d8d0c0; --text: #23211c; --muted: #6f6a60; --danger: #c2410c;
  --success: #0e7c6b; --warn: #a2590b; --radius: 12px; --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(60,50,30,.05), 0 1px 3px rgba(60,50,30,.04);
  --shadow-md: 0 8px 24px -8px rgba(60,50,30,.16), 0 2px 6px -2px rgba(60,50,30,.06);
  --ring: 0 0 0 3px rgba(47,95,224,.2);
  /* The header is warm white with a rule under it rather than a dark band. Anything sitting ON the
     header keys off --hdr-bg / --hdr-fg, which is what made going light a token change and not a hunt. */
  --hdr-bg: #fffdf9; --hdr-fg: #23211c;
  --hdr: 56px;                      /* header height — also the sticky offset for the nav rail */
  --rail: 236px;                    /* nav rail width */
  --ease: cubic-bezier(.2,.7,.2,1);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Aliases for names a handful of inline styles in index.html already use. Three of them —
     `color: var(--primary)` on two links and a stat — had no fallback and no definition, which makes
     the whole declaration invalid at computed-value time: those links have been rendering as plain
     body text rather than as links. Defining the aliases fixes that without touching the markup. */
  --primary: var(--brand);
  --card: var(--surface);
  --bg-alt: var(--bg);
  --warning: var(--warn);
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.tnum { font-variant-numeric: tabular-nums; }
a { color: var(--brand); }

/* ── auth screens ── */
.auth-screen { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg); overflow: hidden; }
.auth-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(760px 380px at 50% -10%, rgba(47,95,224,.10), transparent 64%),
  radial-gradient(520px 300px at 10% 100%, rgba(14,124,107,.08), transparent 66%); }
/* A faint ledger grid, masked to the middle so it never reaches the edges and turns into wallpaper. */
.auth-screen::after { content: ""; position: absolute; inset: 0; opacity: .7; pointer-events: none;
  background-image: linear-gradient(rgba(120,105,75,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,105,75,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(620px 420px at 50% 40%, #000, transparent 76%);
          mask-image: radial-gradient(620px 420px at 50% 40%, #000, transparent 76%); }
.auth-card { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 36px 40px; width: 100%; max-width: 420px;
  box-shadow: 0 24px 60px -28px rgba(60,50,30,.35); }
.auth-card h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.auth-card .subtitle { color: var(--muted); font-size: 13px; margin-bottom: 24px; }
/* Text-like inputs fill the row — but NOT radios/checkboxes. A radio stretched to width:100% (plus the
   padding and border from the .form-row rule below) becomes a ~200px box that swallows the row: that is what
   wrecked the "Choose a plan" cards on sign-up, where the radios live inside a .form-row. */
.auth-card .form-row input:not([type="radio"]):not([type="checkbox"]) { width: 100%; }
.auth-links { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.auth-links a { color: var(--brand); cursor: pointer; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: -1px; margin-bottom: 22px; }
/* The same gradient tile the marketing page and the footer use, drawn rather than duplicated in markup. */
.auth-logo::before { content: "U"; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(140deg, var(--brand), #6f97ff);
  color: #fff; font-size: 17px; display: grid; place-items: center; letter-spacing: 0; }

/* ── layout ── */
#app { display: flex; flex-direction: column; min-height: 100vh; }
header { position: sticky; top: 0; z-index: 50; background: var(--hdr-bg); color: var(--hdr-fg); padding: 0 22px; display: flex; align-items: center; gap: 14px; height: var(--hdr); border-bottom: 1px solid var(--border); }
header h1 { font-size: 18px; font-weight: 800; letter-spacing: -.4px; color: var(--hdr-fg); }
header span { font-size: 12px; opacity: .75; }
header #store-switcher { background: var(--surface-2); color: var(--hdr-fg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12.5px; font-family: inherit; }
/* The signed-in cluster (bell + email + role + Sign Out). Its layout MUST live here, not in an inline
   style: showAuthedUI() reveals it with `style.display = ''`, which wipes an inline `display:flex` and
   drops the cluster to block — the bell then sits on its own row, overflows the 56px header, and the
   unread badge is clipped by the top of the window. Keep display out of the inline style. */
#header-user { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Twelve tabs never fitted across the top: the strip scrolled sideways, so a third of the app lived off
   the right edge of the screen with nothing to say so. #tabs and every .panel are siblings inside
   <main>, so a grid here turns that strip into a proper rail with NO markup change — the tab buttons
   keep their ids, their data-tab attributes and their inline handlers. */
main { flex: 1; width: 100%; max-width: 1560px; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); align-items: start; }

/* ── nav rail ── */
#tabs { grid-column: 1; grid-row: 1; position: sticky; top: var(--hdr); align-self: start;
  display: flex; flex-direction: column; gap: 2px; padding: 16px 12px;
  min-height: calc(100vh - var(--hdr)); max-height: calc(100vh - var(--hdr)); overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--border); scrollbar-width: none; }
#tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; width: 100%; text-align: left; padding: 9px 12px 9px 14px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--muted); border: none; background: none;
  border-radius: var(--radius-sm); transition: background .15s var(--ease), color .15s var(--ease); }
/* The active marker grows in place rather than blinking between items. */
.tab::before { content: ""; position: absolute; left: 4px; top: 50%; width: 3px; height: 0; border-radius: 2px;
  background: var(--brand); transform: translateY(-50%); transition: height .2s var(--ease); }
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active { color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.tab.active::before { height: 18px; }
/* Account, Billing and Super Admin are about the account rather than about the store, so they sit at
   the foot of the rail. Pure CSS — the markup order is untouched. */
.tab[data-tab="account"] { margin-top: auto; }

/* ── panels ── */
.panel { grid-column: 2; grid-row: 1; display: none; padding: 24px 26px 40px; min-width: 0; }
.panel.active { display: block; animation: panel-in .26s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow); transition: box-shadow .18s var(--ease); }
.card:hover { box-shadow: var(--shadow-md); }
.card h2 { font-size: 15.5px; font-weight: 700; margin-bottom: 14px; letter-spacing: -.2px; }
.card h3 { font-family: var(--mono); font-size: 11.5px; font-weight: 600; margin-bottom: 10px; color: var(--muted); letter-spacing: 0; }

/* ── Settings sub-tabs ──
   Nine cards in one scroll; the sub-nav groups them the way the Super Admin tab already does. Which
   group shows is driven by a data attribute on the panel rather than by JS writing inline styles,
   because two of these cards manage their own visibility — Stores hides itself for a SuperAdmin, and
   Sharing stays hidden until a second store exists. Their inline display:none outranks these rules,
   so they stay hidden; clearing it hands control back here. */
#tab-settings [data-set-group] { display: none; }
#tab-settings[data-set-tab="assistant"] [data-set-group="assistant"],
#tab-settings[data-set-tab="widget"]    [data-set-group="widget"],
#tab-settings[data-set-tab="orders"]    [data-set-group="orders"],
#tab-settings[data-set-tab="stores"]    [data-set-group="stores"],
#tab-settings[data-set-tab="security"]  [data-set-group="security"] { display: block; }

/* ── forms ── */
.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-row label { font-size: 12px; font-weight: 600; color: var(--muted); }
/* Same exclusion as .auth-card above: a radio/checkbox must keep its native box, not a text-field border
   and 9px/11px padding. Several controls around the app carry inline width/margin hacks that only existed
   to undo this — they are now redundant (harmless, but no longer load-bearing). */
.form-row input:not([type="radio"]):not([type="checkbox"]), .form-row textarea, .form-row select {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.form-row textarea { resize: vertical; min-height: 80px; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: .15s; white-space: nowrap; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary  { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,.35); }
.btn-primary:hover { background: var(--brand-dk); }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost    { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--muted); }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-full { width: 100%; justify-content: center; padding: 11px 14px; }
/* Sits on the header. Light now, so it is a ghost button rather than a translucent-white one — the
   old rgba(255,255,255,...) fills were invisible against warm white. */
.btn-header { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-header:hover { background: var(--surface-2); border-color: var(--muted); }

/* ── tables ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:hover td { background: var(--surface-2); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-ok      { background: #e7f7ec; color: #15803d; }
.badge-running { background: #e5efff; color: #1d4ed8; }
.badge-fail    { background: #fdeaea; color: var(--danger); }
.badge-queue   { background: #fdf3d7; color: #b45309; }
.badge-new     { background: #eaf5ff; color: #0369a1; }
.badge-inprog  { background: #fef3c7; color: var(--warn); }
.badge-res     { background: #e7f7ec; color: #15803d; }
.badge-dis     { background: #eef1f5; color: var(--muted); }

/* ── detail drawer ── */
#detail-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; }
#detail-overlay.open { display: block; }
#detail-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 520px; max-width: 95vw;
  background: var(--surface); overflow-y: auto; padding: 24px; box-shadow: -4px 0 20px rgba(0,0,0,.15); }
#detail-drawer h2 { font-size: 16px; margin-bottom: 16px; }
#detail-drawer .close-btn { position: absolute; top: 16px; right: 16px; background: none; border: none;
  font-size: 20px; cursor: pointer; color: var(--muted); line-height: 1; }

/* ── misc ── */
.row-actions { display: flex; gap: 6px; }
.empty { text-align: center; color: var(--muted); padding: 32px; font-size: 13px; }
.alert { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
.alert-ok   { background: #dcfce7; color: var(--success); }
.alert-err  { background: #fee2e2; color: var(--danger); }
.alert-warn { background: #fef9c3; color: var(--warn); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); transition: box-shadow .18s, transform .18s; }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Counts, quotas and money are the merchant's own records, so they are set in mono across the app —
   the same rule the marketing page follows. Tabular figures stop the numbers jittering as they load. */
.stat-card .val { font-family: var(--mono); font-size: 29px; font-weight: 700; letter-spacing: -1.4px; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-card .lbl { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.msg-bubble { padding: 8px 12px; border-radius: 10px; margin-bottom: 6px; font-size: 13px; max-width: 90%; }
.msg-user { background: var(--brand); color: var(--brand-text); margin-left: auto; border-radius: 10px 10px 0 10px; }
.msg-assistant { background: var(--surface-2); border-radius: 10px 10px 10px 0; }
.msg-wrap { display: flex; flex-direction: column; }
.msg-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* A rail costs 236px of width that a laptop can spare and a tablet cannot, so below 1024px the tabs go
   back to being a horizontal strip — same buttons, same handlers, different axis. */
@media (max-width: 1024px) {
  main { grid-template-columns: minmax(0, 1fr); }
  #tabs { grid-column: 1; grid-row: 1; flex-direction: row; gap: 4px; overflow-x: auto;
    min-height: 0; max-height: none; padding: 10px 16px;
    border-right: 0; border-bottom: 1px solid var(--border); }
  .tab { width: auto; white-space: nowrap; padding: 8px 14px; }
  .tab::before { display: none; }        /* the left marker is meaningless on a horizontal strip */
  .tab[data-tab="account"] { margin-top: 0; }
  .panel { grid-column: 1; grid-row: 2; padding: 20px 16px 32px; }
}
@media (max-width: 760px) { .two-col, .grid2, .grid3 { grid-template-columns: 1fr; } #detail-drawer { width: 100%; } .auth-card { padding: 28px 20px; }
  header { padding: 0 16px; height: 52px; } :root { --hdr: 52px; } .card { padding: 18px; overflow-x: auto; } .card table { min-width: 520px; }
  #tab-help > div { gap: 16px; } #tab-help aside { flex: 1 1 100% !important; } #help-content { max-width: 100%; padding: 16px !important; } }
@media (prefers-reduced-motion: reduce) { .stat-card, .tab, .btn, .card { transition: none; } .stat-card:hover { transform: none; }
  .panel.active { animation: none; } .tab::before { transition: none; } }

/* ── Onboarding wizard ── */
.wizard-wrap { min-height: 100vh; display: flex; background: var(--bg); }
.wizard-sidebar { width: 260px; background: linear-gradient(170deg, var(--brand), var(--brand-dk)); color: #fff; padding: 40px 28px; flex-shrink: 0; display: flex; flex-direction: column; }
.wizard-sidebar h2 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.wizard-sidebar .tagline { font-size: 12px; opacity: .65; margin-bottom: 44px; }
.wiz-step-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.wiz-step-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.wiz-step-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.15); flex-shrink: 0; }
.wiz-step-num.done   { background: #22c55e; }
.wiz-step-num.active { background: #fff; color: var(--brand); }
.wiz-step-label { font-size: 13px; opacity: .75; }
.wiz-step-item.active .wiz-step-label { opacity: 1; font-weight: 700; }
.wizard-body { flex: 1; padding: 52px 56px; max-width: 700px; }
.wizard-body h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.wizard-body .sub { color: var(--muted); font-size: 14px; margin-bottom: 32px; line-height: 1.5; }
.platform-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.platform-card { border: 2px solid var(--border); border-radius: 10px; padding: 18px 14px; cursor: pointer; transition: border-color .15s, background .15s; text-align: center; }
.platform-card:hover { border-color: var(--brand); background: var(--brand-soft); }
.platform-card.selected { border-color: var(--brand); background: var(--brand-soft); }
.platform-card .pc-icon { font-size: 30px; margin-bottom: 8px; }
.platform-card .pc-name { font-size: 14px; font-weight: 700; }
.platform-card .pc-desc { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.wizard-nav { display: flex; align-items: center; gap: 10px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.copy-field { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-family: var(--mono); font-size: 12px; margin-bottom: 12px; word-break: break-all; }
.copy-field span { flex: 1; }
.wiz-step-guide { counter-reset: wstep; list-style: none; margin: 16px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.wiz-step-guide li { counter-increment: wstep; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.wiz-step-guide li::before { content: counter(wstep); min-width: 24px; height: 24px; background: var(--brand); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.faq-added { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
@media (max-width: 700px) { .wizard-sidebar { width: 100%; padding: 24px; } .wizard-body { padding: 28px 20px; } .platform-cards { grid-template-columns: 1fr; } }

/* ── CSV upload drop zone ── */
.drop-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 36px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--brand); background: var(--brand-soft); }
.drop-zone .dz-icon { font-size: 32px; margin-bottom: 8px; }
.drop-zone .dz-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.drop-zone .dz-sub { font-size: 12px; color: var(--muted); }
.upload-progress { display: none; margin-top: 12px; }
.upload-progress progress { width: 100%; height: 6px; border-radius: 3px; }

/* ── Domain tag ── */
.domain-tag { display: inline-flex; align-items: center; gap: 6px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; color: #0369a1; margin: 4px 4px 4px 0; }
.domain-tag button { background: none; border: none; color: #0369a1; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }

/* ── Help docs ── */
/* ── Help / docs (Markdown-rendered into #help-content) ── */
.help-list { display:flex; flex-direction:column; gap:2px; }
.help-list .help-link { display:block; padding:8px 11px; border-radius:8px; color:var(--text); text-decoration:none; font-size:14px; line-height:1.35; transition:background .15s, color .15s; }
.help-list .help-link:hover { background:var(--brand-soft); color:var(--brand); }
.help-list .help-link.active { background:var(--brand); color:#fff; font-weight:600; }

/* Give raw Markdown a real reading layout: comfortable measure, vertical rhythm, indented lists. The global
   `* { padding:0 }` reset otherwise collapses list bullets and paragraph spacing, so docs render as a wall of text. */
#help-content { max-width:860px; color:var(--text); }
#help-content > :first-child { margin-top:0; }
#help-content > :last-child { margin-bottom:0; }
#help-content h1 { font-size:26px; font-weight:800; letter-spacing:-.3px; margin:2px 0 6px; }
#help-content h2 { font-size:19px; font-weight:700; letter-spacing:-.2px; margin:30px 0 10px; padding-top:18px; border-top:1px solid var(--border); }
#help-content h3 { font-size:15.5px; font-weight:700; margin:22px 0 8px; }
#help-content h4 { font-size:13px; font-weight:700; margin:18px 0 6px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
#help-content p { font-size:14.5px; line-height:1.7; margin:0 0 14px; }
#help-content ul, #help-content ol { margin:0 0 14px; padding-left:1.45em; }
#help-content li { font-size:14.5px; line-height:1.65; margin:5px 0; }
#help-content li > ul, #help-content li > ol { margin:5px 0 0; }
#help-content a { color:var(--brand); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
#help-content a:hover { color:var(--brand-dk); }
#help-content strong { color:var(--text); font-weight:700; }
#help-content img { max-width:100%; height:auto; border-radius:8px; }
#help-content code { background:var(--surface-2); border:1px solid var(--border); padding:1px 6px; border-radius:5px; font-size:12.5px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
#help-content pre { background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin:0 0 16px; overflow-x:auto; }
#help-content pre code { background:none; border:none; padding:0; font-size:12.5px; }
#help-content blockquote { margin:0 0 16px; padding:10px 16px; border-left:3px solid var(--brand); background:var(--brand-soft); border-radius:0 8px 8px 0; }
#help-content blockquote p:last-child { margin-bottom:0; }
#help-content hr { border:none; border-top:1px solid var(--border); margin:26px 0; }
#help-content table { width:100%; border-collapse:collapse; margin:0 0 16px; font-size:13px; }
#help-content thead th { background:var(--surface-2); }
#help-content th, #help-content td { border:1px solid var(--border); padding:8px 12px; text-align:left; vertical-align:top; font-size:13px; }
#help-content th { font-weight:700; color:var(--text); text-transform:none; letter-spacing:0; white-space:normal; }
#help-content tr:hover td { background:transparent; }

/* ── SuperAdmin tenant table ── */
.tenant-active { color: var(--success); font-weight: 700; }
.tenant-suspended { color: var(--danger); font-weight: 700; }

/* ── Billing ── */
.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.plan-card { border: 2px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; transition: border-color .15s; }
.plan-card.current { border-color: var(--brand); background: var(--brand-soft); }
.plan-card .plan-name { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.plan-card .plan-price { font-family: var(--mono); font-size: 23px; font-weight: 700; letter-spacing: -1px; color: var(--brand); margin: 8px 0; }
.plan-card .plan-limit { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.usage-bar-wrap { background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; height: 10px; margin: 8px 0 4px; overflow: hidden; }
.usage-bar { background: var(--brand); height: 100%; border-radius: 99px; transition: width .3s; }
.usage-bar.warn { background: var(--warn); }
.usage-bar.danger { background: var(--danger); }
@media (max-width: 700px) { .plan-cards { grid-template-columns: 1fr; } }

/* ── Notification centre (header bell + dropdown) ── */
/* Square icon button matching the header's Sign Out height; the SVG inherits the header's white. */
#notif-bell { position: relative; padding: 6px; line-height: 0; }
#notif-bell svg { display: block; }
#notif-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  box-sizing: border-box; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 14px; border-radius: 9px; text-align: center;
  /* `header span` fades every span to .75 — that muddied the count against the blue. Opt back out. */
  opacity: 1;
  /* Ring in the header colour so the badge reads as "cut out" over the icon. Keyed to --hdr-bg rather
     than the brand: the header stopped being blue, and a brand-coloured ring would float over the ink. */
  box-shadow: 0 0 0 2px var(--hdr-bg);
}
#notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 90vw;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(16,24,40,.18); z-index: 60; overflow: hidden;
}
#notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px;
}
#notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: none;
  border-bottom: 1px solid var(--border); cursor: pointer; font: inherit;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: var(--brand-soft); }
.notif-item .notif-subject { font-size: 13px; color: var(--text); display: flex; gap: 8px; align-items: baseline; }
.notif-item .notif-time { font-size: 11px; color: var(--muted); margin-top: 2px; }
.notif-empty { padding: 20px 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── Header on phones ──
   The full header row (logo + bell + email + role + Sign Out) overflows a phone width and the items
   collide. Below 600px, drop the long email address (the role badge still shows who's signed in) and
   tighten spacing so the essentials — bell, role, Sign Out — sit cleanly on one row. */
@media (max-width: 600px) {
  header { gap: 8px; }
  #header-user { gap: 8px; }                   /* tighter than the 12px base rule above */
  #header-email { display: none; }
  #notif-bell { padding: 5px 8px; }
  #header-role, #header-user .btn { white-space: nowrap; }
}

/* ── Notification panel on small screens ──
   The dropdown is anchored to the bell (`right: 0` inside #notif-wrap), but the bell is NOT the
   right-most item — the role badge and Sign Out sit to its right. So the panel's right edge lands well
   short of the viewport edge, and a 340px panel then runs off the LEFT of the screen: measured at
   -162px on a 375px-wide phone and -160px on a 320px one, i.e. half of it unreachable. Leftward
   overflow creates no scrollbar, so nothing hints that content is missing. The anchored dropdown only
   clears the left edge from roughly 726px up, so below 768px pin it under the header as a full-width
   sheet instead, and bound its height to the screen rather than a fixed 380px. */
@media (max-width: 767px) {
  /* Pin to the viewport, not the bell. left+right+margin-left:auto keeps it hugging the right edge and
     capped at 380px where there's room (tablet), while collapsing to a full-width sheet on a phone. */
  #notif-panel {
    position: fixed; top: 56px; left: 8px; right: 8px;
    width: auto; max-width: 380px; margin-left: auto;
  }
  #notif-list { max-height: calc(100vh - 120px); }
}