/* ============================================================================
   Chatgun Admin Console — design system (matches the desktop app).
   Brand green + teal, Poppins/Quicksand, slate neutrals, light + dark themes.
   ========================================================================== */

/* Self-hosted brand fonts (CSP-safe: same-origin). Paths resolve via <base href="/admin-spa/">. */
@font-face { font-family:'Poppins'; font-weight:400; font-display:swap; src:url('fonts/Poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:500; font-display:swap; src:url('fonts/Poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-display:swap; src:url('fonts/Poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:700; font-display:swap; src:url('fonts/Poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Quicksand'; font-weight:500; font-display:swap; src:url('fonts/Quicksand-500.woff2') format('woff2'); }
@font-face { font-family:'Quicksand'; font-weight:600; font-display:swap; src:url('fonts/Quicksand-600.woff2') format('woff2'); }
@font-face { font-family:'Quicksand'; font-weight:700; font-display:swap; src:url('fonts/Quicksand-700.woff2') format('woff2'); }

:root {
  /* brand */
  --cg-green-50:#e9fbe6; --cg-green-100:#c8f5c1; --cg-green-400:#25d013; --cg-green-500:#0dc100; --cg-green-600:#0aa300; --cg-green-700:#0a8205; --cg-green-900:#0e5410;
  --cg-teal-500:#01948d; --cg-teal-600:#027a75;
  --gradient-brand:linear-gradient(120deg,#0dc100 0%,#01948d 100%);
  --gradient-brand-v:linear-gradient(180deg,#0dc100 0%,#01948d 100%);
  --gradient-mesh:radial-gradient(circle at 12% 18%,rgba(13,193,0,.10),transparent 42%),radial-gradient(circle at 88% 12%,rgba(1,148,141,.12),transparent 46%);
  /* light surfaces + text */
  --surface-page:#f7f9fb; --surface-card:#ffffff; --surface-sunken:#eef1f6; --surface-rail:#0e2a26; --brand-tint:#e9fbe6;
  --text-strong:#0d1117; --text-body:#344052; --text-muted:#677084; --text-subtle:#98a2b3; --text-link:#027a75;
  --border-subtle:#e3e8ef; --border-default:#cdd5df; --border-strong:#98a2b3;
  /* rail (sidebar) text — light, the rail is a dark green panel in both themes */
  --rail-text:#dffce0; --rail-muted:#8fcaae; --rail-active-bg:rgba(255,255,255,.12); --rail-active-bar:#25d013;
  /* semantic */
  --success:#0dc100; --success-tint:#e9fbe6; --warning:#f59e0b; --warning-tint:#fef4e2; --danger:#e5484d; --danger-tint:#fdeced; --info:#01948d; --info-tint:#e3f7f5;
  /* type */
  --font-display:'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --font-body:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  /* radii + shadows */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --shadow-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 12px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.04);
  --shadow-lg:0 12px 28px rgba(16,24,40,.10),0 4px 8px rgba(16,24,40,.05);
  --shadow-brand:0 8px 20px rgba(13,193,0,.26);
  --focus-ring:0 0 0 3px rgba(13,193,0,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light; /* native select list / scrollbars follow the theme */
}
/* Dark theme — explicit choice. */
[data-theme="dark"] {
  color-scheme:dark;
  --surface-page:#0f172a; --surface-card:#1e293b; --surface-sunken:#0b1220; --surface-rail:#0b231f; --brand-tint:#11352a;
  --text-strong:#f1f5f9; --text-body:#dbe3ec; --text-muted:#a7b6ca; --text-subtle:#8fa3bb; --text-link:#5fd6cf;
  --border-subtle:#334155; --border-default:#475569; --border-strong:#5b6b80;
  --rail-text:#dffce0; --rail-muted:#7fae93;
  --success-tint:#11352a; --warning-tint:#3a2c0e; --danger-tint:#3b1212; --info-tint:#0c2f2d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 6px 20px rgba(0,0,0,.5); --shadow-lg:0 18px 40px rgba(0,0,0,.55);
}
/* First-paint default: follow the OS until the user (app.js) picks a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --surface-page:#0f172a; --surface-card:#1e293b; --surface-sunken:#0b1220; --surface-rail:#0b231f; --brand-tint:#11352a;
    --text-strong:#f1f5f9; --text-body:#dbe3ec; --text-muted:#a7b6ca; --text-subtle:#8fa3bb; --text-link:#5fd6cf;
    --border-subtle:#334155; --border-default:#475569; --border-strong:#5b6b80;
    --rail-muted:#7fae93; --success-tint:#11352a; --warning-tint:#3a2c0e; --danger-tint:#3b1212; --info-tint:#0c2f2d;
    --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 6px 20px rgba(0,0,0,.5); --shadow-lg:0 18px 40px rgba(0,0,0,.55);
  }
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--text-body);
  background:var(--surface-page); -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--font-display); color:var(--text-strong); letter-spacing:-0.01em; margin:0; }
a { color:var(--text-link); text-decoration:none; }
.hidden { display:none !important; }
.muted { color:var(--text-muted); }
.small { font-size:12px; }
.mono { font-family:var(--font-mono); font-size:12.5px; }
.row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.spacer { flex:1; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-family:var(--font-body); font-weight:600; font-size:13.5px; line-height:1;
  padding:.62rem 1rem; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
  background:var(--surface-card); color:var(--text-body); transition:transform var(--ease) .14s, filter .14s, background .14s; white-space:nowrap;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn--primary { background:var(--gradient-brand); color:#fff; box-shadow:var(--shadow-brand); }
.btn--primary:hover { filter:brightness(1.04); }
.btn--ghost { background:transparent; border-color:var(--border-default); color:var(--text-body); }
.btn--ghost:hover { background:var(--surface-sunken); }
.btn--danger { background:var(--danger); color:#fff; }
.btn--danger:hover { filter:brightness(1.05); }
.btn--sm { padding:.4rem .7rem; font-size:12.5px; border-radius:8px; }
.btn--block { width:100%; padding:.8rem; font-size:15px; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

input, select, textarea {
  font-family:var(--font-body); font-size:14px; color:var(--text-strong);
  background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--r-sm);
  padding:.6rem .75rem; width:100%; transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--cg-green-500); box-shadow:var(--focus-ring); }
::placeholder { color:var(--text-subtle); }

/* Branded select — native arrow removed, replaced with a Chatgun chevron; theme-aware. */
select {
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23677084' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:14px;
}
select:hover { border-color:var(--border-strong); }
[data-theme="dark"] select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7b6ca' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
select::-ms-expand { display:none; }

/* ---- Fully-branded dropdown (dom.js dropdown()) — replaces native <select> so the OPEN list is
   ours, not the OS popup. Theme-aware via the same tokens. ---- */
.cgsel { position:relative; }
.cgsel__btn {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.62rem .85rem; border:1px solid var(--border); border-radius:10px; background:var(--surface);
  color:var(--text-strong); font:inherit; cursor:pointer; text-align:left;
}
.cgsel__btn:hover { border-color:var(--border-strong); }
.cgsel.is-open .cgsel__btn, .cgsel__btn:focus { outline:none; border-color:var(--cg-green-500); box-shadow:var(--focus-ring); }
.cgsel__label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cgsel__chev { width:9px; height:9px; flex:none; border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted); transform:rotate(45deg); margin-top:-3px; transition:transform .15s ease; }
.cgsel.is-open .cgsel__chev { transform:rotate(-135deg); margin-top:3px; }
.cgsel__menu {
  position:absolute; z-index:60; top:calc(100% + 5px); left:0; right:0; max-height:300px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:11px; box-shadow:var(--shadow-lg);
  padding:.3rem; display:none;
}
.cgsel.is-open .cgsel__menu { display:block; }
.cgsel__opt {
  display:block; width:100%; text-align:left; padding:.5rem .6rem; border:none; background:none;
  border-radius:7px; color:var(--text); font:inherit; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cgsel__opt:hover { background:var(--surface-sunken); }
.cgsel__opt.is-sel { background:var(--success-tint); color:var(--cg-green-700); font-weight:600; }

/* ---- Sign-in gate ---- */
.gate {
  position:fixed; inset:0; display:grid; place-items:center; padding:1.5rem;
  background:var(--surface-page); background-image:var(--gradient-mesh);
}
.gate__card {
  width:min(420px,100%); background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:2.2rem 2rem; text-align:center;
}
.gate__logo {
  width:64px; height:64px; margin:0 auto 1.1rem; border-radius:18px; display:grid; place-items:center;
  background:var(--gradient-brand); box-shadow:var(--shadow-brand); color:#fff; font-family:var(--font-display); font-weight:700; font-size:30px;
}
.gate__logo img, .sidebar__logo img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.gate__brand { font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--text-strong); margin-bottom:.2rem; }
.gate__brand span { color:var(--cg-teal-600); font-weight:600; }
.gate__card .muted { margin:.4rem 0 1.3rem; font-size:13px; }
.gate__card input { margin-bottom:.9rem; text-align:center; }

/* ---- App shell ---- */
.app { display:grid; grid-template-columns:252px 1fr; height:100vh; }

/* Sidebar — a deep teal-green "control rail": gradient logo lockup, radial brand glow, stroke-icon
   nav with a frosted active pill + sliding accent bar. */
.sidebar {
  display:flex; flex-direction:column; padding:1.1rem .8rem 1rem; gap:.35rem; position:relative; overflow:hidden;
  color:var(--rail-text); border-right:1px solid rgba(255,255,255,.06);
  background:var(--surface-rail);
  background-image:
    radial-gradient(135% 65% at 0% 0%, rgba(13,193,0,.24), transparent 60%),
    radial-gradient(130% 55% at 100% 100%, rgba(1,148,141,.22), transparent 56%);
}
.sidebar::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); }
.sidebar__top { display:flex; align-items:center; gap:.7rem; padding:.45rem .55rem 1.15rem; }
.sidebar__logo {
  width:42px; height:42px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:var(--gradient-brand); color:#fff; font-family:var(--font-display); font-weight:700; font-size:22px;
  box-shadow:0 6px 16px rgba(13,193,0,.42), inset 0 1px 0 rgba(255,255,255,.45);
}
.sidebar__word { font-family:var(--font-display); font-weight:700; font-size:1.22rem; line-height:1.05; color:#fff; letter-spacing:-.01em; }
.sidebar__word span { display:block; font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--rail-muted); margin-top:.28rem; }
.nav { display:flex; flex-direction:column; gap:.22rem; flex:1; padding-top:.1rem; }
.nav__item {
  display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:12px; position:relative;
  color:var(--rail-text); font-weight:500; font-size:13.5px; opacity:.82;
  transition:background .18s var(--ease), opacity .18s, color .18s;
}
.nav__icon { width:19px; height:19px; flex:none; display:grid; place-items:center; }
.nav__icon svg { width:19px; height:19px; }
.nav__item:hover { background:rgba(255,255,255,.07); opacity:1; }
.nav__item.is-active {
  opacity:1; color:#fff; font-weight:600;
  background:linear-gradient(90deg, rgba(37,208,19,.22), rgba(1,148,141,.10));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.nav__item.is-active .nav__icon { color:#7dffb0; }
.nav__item.is-active::before {
  content:""; position:absolute; left:-.8rem; top:50%; transform:translateY(-50%);
  width:4px; height:58%; border-radius:0 4px 4px 0; background:linear-gradient(180deg,#25d013,#01948d);
}
.sidebar__foot { padding-top:.85rem; margin-top:.35rem; border-top:1px solid rgba(255,255,255,.1); }
.sidebar__signout {
  width:100%; justify-content:center; gap:.5rem;
  border-color:rgba(255,255,255,.18); color:var(--rail-text); background:rgba(255,255,255,.04);
}
.sidebar__signout:hover { background:rgba(255,255,255,.12); }
.sidebar__signout-ic { font-size:13px; }

.content { display:flex; flex-direction:column; min-width:0; height:100vh; }
.topbar {
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1.4rem;
  background:var(--surface-card); border-bottom:1px solid var(--border-subtle); position:sticky; top:0; z-index:30;
}
.crumb { font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--text-strong); }
.theme-toggle {
  width:38px; height:38px; padding:0; border-radius:var(--r-pill); border:1px solid var(--border-default);
  background:var(--surface-card); cursor:pointer; font-size:17px; display:grid; place-items:center; color:var(--text-body);
}
.theme-toggle:hover { background:var(--surface-sunken); }
.main { flex:1; overflow:auto; padding:1.5rem; }

/* ---- Cards ---- */
.card {
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:1.2rem 1.3rem; margin-bottom:1.3rem;
}
.card__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.card__head h2 { font-size:1.05rem; }

/* ---- Stats ---- */
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; margin-bottom:1.3rem; }
.stat {
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); padding:1rem 1.1rem; position:relative; overflow:hidden;
}
.stat::after { content:""; position:absolute; right:-20px; top:-20px; width:70px; height:70px; border-radius:50%; background:var(--brand-tint); opacity:.6; }
.stat__label { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.stat__value { font-family:var(--font-display); font-weight:700; font-size:1.8rem; color:var(--text-strong); margin-top:.2rem; position:relative; }
.stat__sub { font-size:12px; color:var(--text-subtle); margin-top:.1rem; }

/* ---- Tables ---- */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
thead th {
  text-align:left; font-weight:600; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted); padding:.6rem .7rem; border-bottom:1px solid var(--border-subtle); white-space:nowrap;
}
tbody td { padding:.6rem .7rem; border-bottom:1px solid var(--border-subtle); color:var(--text-body); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--surface-sunken); }
.empty { padding:2rem; text-align:center; color:var(--text-muted); }
.actions { display:flex; gap:.35rem; flex-wrap:wrap; }

/* ---- Pills ---- */
.pill {
  display:inline-flex; align-items:center; gap:.3rem; font-size:11.5px; font-weight:600;
  padding:.2rem .55rem; border-radius:var(--r-pill); background:var(--surface-sunken); color:var(--text-muted);
}
.pill--ok, .pill--success, .pill--good { background:var(--success-tint); color:var(--cg-green-700); }
.pill--warn, .pill--warning { background:var(--warning-tint); color:#b45309; }
.pill--danger, .pill--err, .pill--bad { background:var(--danger-tint); color:var(--danger); }
.pill--info, .pill--admin { background:var(--info-tint); color:var(--cg-teal-600); }
.pill--muted { background:var(--surface-sunken); color:var(--text-muted); }
[data-theme="dark"] .pill--ok, [data-theme="dark"] .pill--success, [data-theme="dark"] .pill--good { color:#56e046; }
[data-theme="dark"] .pill--warn { color:#fcd34d; }

/* ---- Forms ---- */
.field { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.85rem; }
.field > label, .field-label { font-size:12.5px; font-weight:600; color:var(--text-muted); }
.grid-form { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.grid-form .field--full { grid-column:1 / -1; }

/* ---- Tabs + drill-down ---- */
.drill__head { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.drill__title { font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--text-strong); }
.drill__filter { margin-left:auto; min-width:180px; width:auto; }
.backlink { display:inline-flex; align-items:center; gap:.3rem; font-weight:600; color:var(--text-link); margin-bottom:.6rem; }
.tabs { display:flex; gap:.3rem; flex-wrap:wrap; border-bottom:1px solid var(--border-subtle); margin-bottom:1.2rem; }
.tab {
  padding:.55rem .9rem; border:none; background:transparent; cursor:pointer; font-family:var(--font-body);
  font-weight:600; font-size:13.5px; color:var(--text-muted); border-bottom:2.5px solid transparent; margin-bottom:-1px;
}
.tab:hover { color:var(--text-body); }
.tab.is-active { color:var(--cg-teal-600); border-bottom-color:var(--cg-green-500); }
[data-theme="dark"] .tab.is-active { color:#5fd6cf; }

/* ---- Modal ---- */
.modal {
  position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:1.5rem;
  background:rgba(13,17,23,.55); backdrop-filter:blur(2px);
}
.modal__card { width:min(560px,100%); max-height:88vh; overflow:auto; background:var(--surface-card); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.modal__head { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--border-subtle); position:sticky; top:0; background:var(--surface-card); }
.modal__head h2 { font-size:1.1rem; }
.modal__body { padding:1.3rem; }
.modal__token { font-family:var(--font-mono); font-size:12px; word-break:break-all; background:var(--surface-sunken); border:1px solid var(--border-subtle); border-radius:var(--r-sm); padding:.7rem; margin:.4rem 0 .9rem; }

/* ---- Toasts ---- */
.toasts { position:fixed; right:1.2rem; bottom:1.2rem; z-index:200; display:flex; flex-direction:column; gap:.55rem; }
.toast {
  padding:.7rem 1rem; border-radius:var(--r-sm); background:var(--surface-card); color:var(--text-strong);
  box-shadow:var(--shadow-lg); border-left:4px solid var(--text-muted); font-size:13.5px; max-width:340px;
  animation:toastIn .25s var(--ease);
}
.toast--info { border-left-color:var(--info); }
.toast--success { border-left-color:var(--success); }
.toast--error { border-left-color:var(--danger); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.err { color:var(--danger); font-size:13px; min-height:1.2em; }
.loading { padding:2.5rem; text-align:center; color:var(--text-muted); }
.loading::after { content:"…"; }

/* ---- Responsive ---- */
@media (max-width:760px) {
  .app { grid-template-columns:1fr; }
  .sidebar { flex-direction:row; align-items:center; flex-wrap:wrap; }
  .nav { flex-direction:row; flex-wrap:wrap; }
  .grid-form { grid-template-columns:1fr; }
}