/* ================================================================
   aiSnooker.app — Shared Design System
   All pages import this file.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Exo+2:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --green:      #1db954;
  --green-d:    #0e8c3a;
  --green-l:    #4eff8c;
  --green-lo:   rgba(29,185,84,0.10);
  --green-glow: 0 0 28px rgba(29,185,84,0.30);
  --gold:       #f5c518;
  --gold-lo:    rgba(245,197,24,0.12);
  --red:        #e53935;
  --red-lo:     rgba(229,57,53,0.12);
  --blue:       #60a5fa;
  --white:      #f0f4f0;
  --off:        #8a9e8a;
  --bg:         #060d06;
  --bg2:        #0a140a;
  --bg3:        #0f1c0f;
  --panel:      #111a11;
  --panel2:     #162016;
  --border:     rgba(29,185,84,0.16);
  --border2:    rgba(255,255,255,0.08);
  --radius:     10px;
  --radius-sm:  6px;
  --nav-h: 62px;
  --font:       'Exo 2', sans-serif;
  --font-head:  'Rajdhani', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── SHARED NAV ───────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  padding: env(safe-area-inset-top, 0px) 28px 0;
  background: rgba(6,13,6,0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-decoration: none;
}
.nav-brand-row { display: flex; align-items: center; gap: 8px; }
.nav-brand-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;   /* makes black bg transparent on dark nav */
}
.nav-brand-text { display: none; }  /* logo already contains the name */
.nav-brand-sub {
  font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--off); margin-top: 2px;
}
/* Club branding to the LEFT of our logo on club sites */
.nav-brand .nav-club-name { font-weight: 700; font-size: 0.7rem; line-height: 1.1; color: #cdd8e8; letter-spacing: .3px; text-align: left; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-brand .nav-club-logo { height: 34px; width: auto; max-width: 84px; object-fit: contain; }
.nav-brand .nav-brand-div { width: 1px; height: 24px; background: var(--border); display: inline-block; opacity: .55; }
/* 慧眼ai — the Chinese brand (rendered as text so CJK glyphs are reliable) */
.nav-brand-zh { display: flex; align-items: center; gap: 8px; }
.nav-zh-mark { height: 40px; width: auto; object-fit: contain; mix-blend-mode: screen; }
.nav-zh-txt { font-size: 1.4rem; font-weight: 800; color: var(--white, #fff); letter-spacing: 1px; }
.nav-zh-txt b { color: var(--gold, #e9b949); font-weight: 800; }
.nav-lang { background: transparent; color: var(--off); border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px; font-size: .8rem; cursor: pointer; }
.nav-lang option { background: #0a1120; color: #fff; }

/* ── Main nav menu — a dropdown at EVERY width ──────────────────────────────
   This was a horizontal row on desktop and only became a dropdown at <=700px. Logged in it
   carries up to fourteen destinations (Scoreboard, Tables, Players, Rankings, My Stats, My
   Breaks, Nice Shots, Profile, Matches, Find a Club, Commentary, Tournaments, Sponsors), which
   no desktop row holds without wrapping or spilling. One dropdown now serves portrait,
   landscape and desktop alike.

   The panel is a deep slate box, deliberately NOT the green-tinted near-black of the nav bar
   (rgba(6,13,6,.94)) or of --panel2 — it should read as a distinct surface floating above the
   chrome, not a continuation of it. Text is bright rather than the muted --off used in the old
   inline row, since it is now on its own dark field with nothing else competing.

   .nav-actions (language, username, Admin, Sign Out) stays in the bar on desktop and is
   mirrored into the panel as .nav-mob-only below 700px, exactly as before. */
.nav-links {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  list-style: none;
  position: absolute;
  top: calc(100% - 4px);
  right: 16px;
  left: auto;
  z-index: 300;
  width: min(300px, calc(100vw - 24px));
  /* Fourteen items overflow most screens, so the panel scrolls rather than running off the
     bottom — with a visible scrollbar, unlike the sub-nav row this replaces. */
  max-height: min(72vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  background: #0b1220;
  border: 1px solid rgba(29,185,84,0.38);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.68);
  padding: 7px;
}
.nav-links::-webkit-scrollbar { width: 9px; }
.nav-links::-webkit-scrollbar-thumb {
  background: rgba(29,185,84,0.32); border-radius: 5px;
}
.nav-links.nav-open { display: flex; }
.nav-links li { width: 100%; list-style: none; }
.nav-links a {
  display: block;
  padding: 11px 14px; border-radius: 8px;
  color: #f1f5f9; text-decoration: none;
  font-size: 0.9rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--white); background: var(--green-lo);
}

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 0.88rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: all 0.18s; white-space: nowrap;
}
.btn-primary {
  background: var(--green); color: #000;
  box-shadow: 0 3px 16px rgba(29,185,84,0.28);
}
.btn-primary:hover { background: var(--green-l); transform: translateY(-1px); }

.btn-outline {
  background: transparent; color: var(--white);
  border: 1px solid var(--border2);
}
.btn-outline:hover { border-color: var(--green); color: var(--green); background: var(--green-lo); }

.btn-ghost {
  background: var(--panel2); color: var(--white);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--green); background: var(--green-lo); }

.btn-danger {
  background: var(--red-lo); color: #fca5a5;
  border: 1px solid rgba(229,57,53,0.35);
}
.btn-danger:hover { background: rgba(229,57,53,0.22); }

.btn-sm { padding: 6px 13px; font-size: 0.8rem; }
.btn-lg { padding: 13px 28px; font-size: 1rem; }

/* ── PAGE WRAPPER ─────────────────────────────────────────── */
.page-body {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  min-height: 100vh;
}
/* Pages with custom content wrappers (not .page-body) get the same fixed-nav offset.
   main.<class> out-specifies the pages' inline `.<class>{padding:…}` shorthand. */
main.adm, main.cw, main.sw {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}
.container {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
}
.container-sm { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.container-xs { max-width: 480px; margin: 0 auto; padding: 0 24px; }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.card:hover { border-color: rgba(29,185,84,0.28); }
.card-flat { background: var(--panel2); border-radius: var(--radius); padding: 20px 22px; }

/* ── SECTION LABELS ───────────────────────────────────────── */
.section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 3px;
  color: var(--green); text-transform: uppercase;
  margin-bottom: 10px;
}
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.1; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
.text-green  { color: var(--green); }
.text-gold   { color: var(--gold); }
.text-off    { color: var(--off); }
.text-mono   { font-family: var(--font-mono); }

/* ── FORMS ────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: var(--off); letter-spacing: 0.4px; margin-bottom: 7px;
}
.form-control {
  width: 100%; padding: 10px 14px;
  background: var(--panel2); border: 1px solid var(--border);
  color: var(--white); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 0.93rem;
  outline: none; transition: border-color 0.2s;
  appearance: none;
}
.form-control:focus { border-color: var(--green); }
.form-control::placeholder { color: rgba(255,255,255,0.22); }
.form-control option { background: var(--panel2); }

/* ── BADGES ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
}
.badge-green { background: var(--green-lo); color: var(--green); border: 1px solid var(--border); }
.badge-gold  { background: var(--gold-lo);  color: var(--gold);  border: 1px solid rgba(245,197,24,0.25); }
.badge-red   { background: var(--red-lo);   color: #fca5a5;      border: 1px solid rgba(229,57,53,0.3); }
.badge-live  { background: var(--green-lo); color: var(--green); border: 1px solid var(--border); }
.badge-live::before {
  content: ''; width: 6px; height: 6px; background: var(--green);
  border-radius: 50%; animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.4; transform:scale(0.7); }
}

/* ── DIVIDER ──────────────────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.78rem; color: var(--off); margin: 18px 0;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── ALERTS ───────────────────────────────────────────────── */
.alert {
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 0.88rem; display: none;
}
.alert-error   { background: var(--red-lo); border: 1px solid rgba(229,57,53,0.3); color: #fca5a5; }
.alert-success { background: var(--green-lo); border: 1px solid var(--border); color: var(--green); }
.alert.show { display: block; }

/* ── PAGE HEADER ──────────────────────────────────────────── */
.page-header {
  padding: 14px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.page-header-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.page-title { margin-bottom: 4px; }
.page-subtitle { color: var(--off); font-size: 0.92rem; line-height: 1.5; }

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 28px;
  margin-top: 60px;
}
.site-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  font-size: 0.82rem; color: var(--off);
}
.site-footer-brand {
  display: flex; align-items: center; gap: 9px;
}
.site-footer-brand img { height: 28px; opacity: 0.7; }

/* ── SCOREBOARD SUB-NAV ───────────────────────────────────────
   Rendered as a dropdown at every width — portrait, landscape and desktop.

   It used to be a single horizontal row with `overflow-x:auto` and the scrollbar suppressed
   (scrollbar-width:none + a hidden ::-webkit-scrollbar). On the tournaments layout that row
   carries up to eight items, so past a certain width the tail simply vanished: no scrollbar to
   show there was more, and on desktop no practical way to scroll a horizontal strip with a
   mouse. A dropdown fits any width, and the panel scrolls vertically with a real scrollbar.

   The markup is untouched — _nav.php wraps the existing .sb-subnav-inner at runtime and adds
   the trigger. Without JS the rules below never apply and the original scrollable row remains,
   so the menu is always usable. */
.sb-subnav {
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid var(--border2);
  padding: 0 24px;
  position: relative; z-index: 150;
}
.sb-subnav-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; gap: 2px; align-items: center; height: 42px;
  overflow-x: auto; scrollbar-width: none;
}
.sb-subnav-inner::-webkit-scrollbar { display: none; }
.sb-nav-link {
  padding: 6px 13px; border-radius: 6px;
  font-size: 0.83rem; font-weight: 600; text-decoration: none;
  color: rgba(255,255,255,0.55); white-space: nowrap;
  transition: all 0.18s;
}
.sb-nav-link:hover { color: var(--white); background: rgba(255,255,255,0.07); }
.sb-nav-link.active { background: rgba(255,255,255,0.13); color: var(--white); }

/* ── Sub-nav as a dropdown (JS present) ─────────────────────── */
.sb-subnav-shell {
  max-width: 1100px; margin: 0 auto;
  height: 42px; display: flex; align-items: center; position: relative;
}
.sb-menu-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 30px; padding: 0 12px; border-radius: 7px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--border2);
  color: var(--white); font-size: 0.83rem; font-weight: 600;
  font-family: inherit; cursor: pointer; max-width: 100%;
  transition: background 0.18s, border-color 0.18s;
}
.sb-menu-btn:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.25); }
.sb-menu-btn .sb-menu-cur {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-menu-btn .sb-menu-caret {
  font-size: 0.62rem; opacity: 0.7; margin-left: auto; flex-shrink: 0;
  transition: transform 0.18s;
}
.sb-subnav.sb-open .sb-menu-btn { background: rgba(255,255,255,0.15); }
.sb-subnav.sb-open .sb-menu-btn .sb-menu-caret { transform: rotate(180deg); }

/* The link row becomes the panel. Vertical, and genuinely scrollable when it outgrows
   the viewport — which is the whole point of the change. */
html.sb-js .sb-subnav-inner {
  position: absolute; top: 37px; left: 0;
  display: none; flex-direction: column; align-items: stretch;
  gap: 2px; height: auto; margin: 0;
  min-width: 226px; max-width: min(330px, calc(100vw - 32px));
  max-height: min(70vh, 420px);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  background: var(--panel2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  z-index: 300;
}
html.sb-js .sb-subnav-inner::-webkit-scrollbar { display: block; width: 8px; }
html.sb-js .sb-subnav-inner::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 4px;
}
html.sb-js .sb-subnav.sb-open .sb-subnav-inner { display: flex; }
html.sb-js .sb-subnav-inner .sb-nav-link {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 9px 12px; font-size: 0.86rem; border-radius: 7px;
}

/* Landscape phones give up vertical room, so cap the panel harder there. */
@media (max-height: 480px) {
  html.sb-js .sb-subnav-inner { max-height: calc(100vh - 96px); }
}

/* ── MATCH CARD ───────────────────────────────────────────── */
.match-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.match-card:hover { border-color: rgba(29,185,84,0.3); }
.match-card-players {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 600;
  margin-bottom: 5px;
}
.match-card-players .pa { color: var(--blue); }
.match-card-players .pb { color: var(--gold); }
.match-card-meta { font-size: 0.8rem; color: var(--off); line-height: 1.6; }
.match-card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.match-card-score {
  font-family: var(--font-mono); font-size: 1.1rem;
  color: var(--white); letter-spacing: 1px;
}

/* ── TABLE GROUP HEADER ───────────────────────────────────── */
.table-group-head {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--green);
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 8px;
}
.table-group-head::after {
  content: ''; flex: 1; height: 1px; background: rgba(29,185,84,0.15);
}

/* ── MODAL ────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 9000; display: none; }
.modal.open { display: block; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.65);
}
.modal-card {
  position: relative; z-index: 2;
  width: min(540px, calc(100vw - 24px));
  margin: 60px auto;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; }
.modal-close {
  background: none; border: none; color: var(--off);
  font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 2px 6px;
  border-radius: 4px; transition: color 0.2s;
}
.modal-close:hover { color: var(--white); }
.modal-body { padding: 18px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 0 18px 18px;
}

/* ── UTILITIES ────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.mt-1   { margin-top: 4px; }
.mt-2   { margin-top: 8px; }
.mt-3   { margin-top: 12px; }
.mt-4   { margin-top: 16px; }
.mt-6   { margin-top: 24px; }
.mb-2   { margin-bottom: 8px; }
.mb-3   { margin-bottom: 12px; }
.mb-4   { margin-bottom: 16px; }
.mb-6   { margin-bottom: 24px; }
.w-full { width: 100%; }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.font-bold { font-weight: 700; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* ── RESPONSIVE ───────────────────────────────────────────── */

/* ── Stat cards ────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color .18s;
}
.stat-card:hover { border-color: rgba(29,185,84,.3); }
.stat-card .sv {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card .sl {
  font-size: .72rem;
  color: var(--off);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.stat-card .sh {
  font-size: .68rem;
  color: var(--off);
  margin-top: 3px;
  line-height: 1.3;
}
.sv.green { color: var(--green); }
.sv.gold  { color: var(--gold); }
.sv.blue  { color: #60a5fa; }

@media (max-width: 700px) {
  .site-nav { padding: env(safe-area-inset-top, 0px) 16px 0; }
  /* (.nav-links is hidden by default in the base rules now — it is a dropdown at every width,
     so there is nothing mobile-specific left to hide here.) */
  .container, .container-sm, .container-xs { padding: 0 14px; }
  .hide-mobile { display: none !important; }
  h1 { font-size: 2rem; }
  /* shrink the (wide) brand wordmark so it doesn't shove the club name off-screen */
  .nav-brand-logo { height: 34px; max-width: 56vw; }
  .nav-brand-sub { font-size: 0.6rem; letter-spacing: 1px; }
}

/* ── Hamburger — shown at every width now that the menu is always a dropdown ── */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: all .25s; transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mob-only { display: none; }

@media (max-width: 700px) {
  .site-nav { flex-wrap: wrap; position: relative; }
  /* Nav is in-flow (relative) on mobile, so it already occupies its height at the
     top. Drop the fixed-nav offset here — otherwise content is pushed down a second
     nav-height, leaving a big empty gap under the nav on every page. */
  .page-body,
  main.adm, main.cw, main.sw { padding-top: 0; }
  .nav-actions { display: none !important; }
  .nav-mob-only { display: block; }

  /* The panel itself is styled once in the base rules — it is a dropdown at every width now,
     so the full-width green-tinted copy that used to live here has gone. Only the phone-sized
     fit is adjusted: sit a little closer to the screen edges on a narrow viewport. */
  .nav-links {
    right: 10px;
    width: min(310px, calc(100vw - 20px));
  }

  /* Sign out / admin inside menu — present but quieter than the main destinations. */
  .nav-mob-only a {
    color: var(--off, #8a9e8a);
    font-weight: 500;
  }
  .nav-mob-only span { color: var(--off, #8a9e8a); }
  .nav-mob-only a[href*="logout"] {
    color: #dc2626;
  }
  /* Username label in menu — the last light-theme leftover in the dropdown. */
  .nav-mob-only span {
    padding: 10px 24px 2px;
    display: block;
    font-size: .78rem;
    color: var(--off, #8a9e8a);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--border2, rgba(255,255,255,.08));
  }
}

/* ══════════════════════════════════════════════════════════════
   v1.4 — dark native menus + colour polish
   ══════════════════════════════════════════════════════════════ */
:root { color-scheme: dark; }                 /* native selects/scrollbars/date-pickers render dark */

/* Dropdowns: dark option lists everywhere (incl. inline-styled selects) */
select { color-scheme: dark; }
select option, select optgroup { background: var(--panel2); color: var(--white); }

/* Focus glow on all form controls */
select:focus, input:focus, textarea:focus, .form-control:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px var(--green-lo);
  outline: none;
}

/* Nav: clearer, more colourful active / hover.
   The active marker used to be a 2px underline along the bottom of the item, which read as an
   underline in a horizontal row. In a vertical dropdown that just looks like a stray divider,
   so it is now a bright bar down the leading edge — the usual vertical-menu convention. */
.nav-links a { position: relative; }
.nav-links a:hover  { color: var(--white);   background: rgba(29,185,84,0.14); }
.nav-links a.active { color: var(--green-l);  background: rgba(29,185,84,0.20); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  background: linear-gradient(180deg, var(--green), var(--gold)); border-radius: 0 3px 3px 0;
}

/* Primary buttons: gradient + lift */
.btn-primary { background: linear-gradient(135deg, var(--green-l), var(--green)); color: #05210f; }
.btn-primary:hover { background: linear-gradient(135deg, var(--green-l), #17a44a); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(29,185,84,0.42); }

/* Cards: hover glow; clickable cards lift */
.card { transition: border-color .18s, box-shadow .2s, transform .18s; }
.card:hover { border-color: rgba(29,185,84,0.38); box-shadow: 0 6px 24px rgba(0,0,0,0.32); }
a.card:hover, .admin-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 22px rgba(29,185,84,0.10); }
.admin-card { transition: border-color .18s, box-shadow .2s, transform .18s; }
.admin-card:hover { border-color: rgba(29,185,84,0.45); }

/* Badges: a touch more pop */
.badge { font-weight: 700; letter-spacing: .3px; }

/* ══ Admin pages — shared responsive layer ═══════════════════════════════════
   Every admin page carries its own <style> block with near-identical rules, and
   none of them handled narrow screens: wide data tables pushed the whole page
   sideways, grids stayed multi-column, and long values overflowed their cards.
   These rules live here so all 20 admin pages get the same behaviour without
   touching each file. Selectors are one level more specific than the per-page
   blocks (which are inline, so they win on a tie).                            */

/* Desktop: use the width that is there. Pages cap themselves at 960px while the
   rest of the site runs to 1100px, so wide tables were cramped for no reason. */
main.adm, main.cw, main.sw, .admin-wrap, .av-wrap { max-width: 1100px; }

/* A data table scrolls inside its own box instead of widening the page. */
main.adm table, main.cw table, main.sw table, .admin-wrap table, .av-wrap table { max-width: 100%; }

/* Nothing in a card may exceed it — long emails, keys and URLs were the usual
   culprits for a page that scrolled sideways on a phone. */
main.adm input, main.adm select, main.adm textarea,
main.cw input, main.cw select, main.cw textarea,
main.sw input, main.sw select, main.sw textarea,
.admin-wrap input, .admin-wrap select, .admin-wrap textarea,
.av-wrap input, .av-wrap select, .av-wrap textarea { max-width: 100%; box-sizing: border-box; }
main.adm code, main.cw code, main.sw code, .admin-wrap code, .av-wrap code { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  main.adm, main.cw, main.sw, .admin-wrap, .av-wrap { padding-left: 12px; padding-right: 12px; }

  /* display:block turns the table into its own scroll container. Columns no
     longer stretch to full width, which is the trade for the page not moving. */
  main.adm table, main.cw table, main.sw table, .admin-wrap table, .av-wrap table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  main.adm table th, main.adm table td, main.cw table th, main.cw table td,
  main.sw table th, main.sw table td, .admin-wrap table th, .admin-wrap table td,
  .av-wrap table th, .av-wrap table td { padding-left: 8px; padding-right: 8px; }

  /* Every admin page defines these; only a few collapsed them on mobile. */
  main.adm .grid2, main.adm .grid3, main.adm .grid4,
  main.cw .grid2, main.cw .grid3, main.sw .grid2, main.sw .grid3,
  .admin-wrap .grid2, .admin-wrap .grid3, .admin-wrap .grid4,
  .av-wrap .grid2, .av-wrap .grid3 { grid-template-columns: 1fr; }

  /* Action rows: wrap rather than run off the edge. */
  main.adm .flex, main.cw .flex, main.sw .flex, .admin-wrap .flex, .av-wrap .flex { flex-wrap: wrap; }
  main.adm .card, main.cw .card, main.sw .card, .admin-wrap .card, .av-wrap .card { padding: 14px; }
  main.adm h1, main.cw h1, main.sw h1, .admin-wrap h1, .av-wrap h1 { font-size: 1.5rem; }
  main.adm h2, main.cw h2, main.sw h2, .admin-wrap h2, .av-wrap h2 { font-size: 1.25rem; }
}