/* Experts Content Hub — same dashboard layout as the MOVE hub, in the Experts gold palette on deep dark.
   sticky blurred header with the navigation as tabs across the top. Loaded after app.css.
   The previous violet design is kept in theme-violet.css (swap the <link> in index.html to go back). */

/* ---- dashboard palette, in every theme (the dashboard is dark only) ---- */
:root:not(#x), :root[data-theme]:not(#x) {
  --font: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: var(--font);
  --bg: #0E1116; --surface: #181C23; --sunk: #13161C; --line: #2A2F38; --line-2: rgba(157,176,201,.12);
  --ink: #e8eefb; --muted: #9db0c9; --faint: #6f84a3;
  --brand: #E9C46A; --brand-2: #C9A24B; --brand-hover: #F3D98B; --brand-ink: #F3D98B; --brand-soft: rgba(233,196,106,.10);
  --brand-grad: linear-gradient(90deg, #C9A24B, #8A6A22);
  --black-grad: radial-gradient(900px 400px at 80% -10%, #2A2314 0%, #0E1116 60%);
  --tint-1: #E9C46A; --tint-2: #D9B65C; --tint-3: #C9A24B; --tint-4: #B8913A; --tint-5: #F1E3B8;
  --side-bg: rgba(14,17,22,.85); --side-ink: #e8eefb; --side-muted: #9db0c9; --side-active: #181C23;
  --top-bg: rgba(14,17,22,.85); --top-ink: #e8eefb;
  --ok: #34d399; --ok-bg: rgba(52,211,153,.15); --warn: #fbbf24; --warn-bg: rgba(251,191,36,.15); --bad: #f87171; --bad-bg: rgba(248,113,113,.15);
  --info: #E9C46A; --info-bg: rgba(233,196,106,.10); --vio: #B8913A; --vio-bg: rgba(184,145,58,.15); --grey-bg: rgba(157,176,201,.12);
  --c-pub: #34d399; --c-plan: #B8913A;
  --shadow: none; --radius: 14px;
  color-scheme: dark;
}
body { background: radial-gradient(1200px 600px at 80% -10%, #2A2314 0%, #0E1116 55%) fixed, #0E1116; color: var(--ink); font-family: var(--font); font-size: 14px; }
h1, h2, h3 { font-family: var(--font); }
h1 { font-size: 20px; font-weight: 700; } h2 { font-size: 16px; font-weight: 700; } h3 { font-size: 15px; font-weight: 700; }
a { color: var(--brand); }
[data-act="theme"] { display: none !important; }   /* the dashboard has one (dark) look */

/* ---- shell: navigation as tabs in a sticky top header ---- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.side { position: sticky; top: 0; z-index: 50; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 12px 22px; background: var(--side-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0; border-bottom: 1px solid var(--line); color: var(--ink); transform: none !important; width: auto; inset: auto; }
.side .logo { padding: 0; display: flex; align-items: center; gap: 10px; }
.side .logo img { width: auto; height: 34px; }
.side .logo .sub { margin: 0; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.side nav { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; flex: 1; }
.side .grp { display: none; }
.side a.nav { padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px; gap: 6px; white-space: nowrap; }
.side a.nav svg { width: 16px; height: 16px; opacity: .85; }
.side a.nav:hover { color: var(--ink); background: var(--sunk); }
.side a.nav.on, :root[data-theme="dark"] .side a.nav.on { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .side a.nav.on { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: none; } }
.side .me { display: none; }
.main { min-width: 0; }
.top { position: static; background: transparent; border: 0; border-image: none; padding: 14px 22px 0; max-width: 1500px; width: 100%; margin: 0 auto; color: var(--ink); }
.top .crumb { color: var(--muted); font-size: 13px; font-weight: 600; }
.top .menu-btn { display: none !important; }
.top .icon-btn { color: var(--muted); border: 1px solid var(--line); background: var(--sunk); border-radius: 10px; }
.top .icon-btn:hover { color: var(--ink); border-color: var(--brand); background: var(--sunk); }
.page { padding: 18px 22px 60px; max-width: 1500px; margin: 0 auto; }
#page > * { animation: tab-fade-in .15s ease-out both; }
@keyframes tab-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-head h1::after { display: none; }
.page-head p { color: var(--muted); }

/* ---- cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.card-h { border-bottom-color: var(--line); }
.kpi::before { display: none; }
.kpi .lbl { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; gap: 8px; }
.kpi .lbl svg { width: 18px; height: 18px; flex: none; color: var(--brand); }
.kpi .val { font-size: 26px; font-weight: 800; }
.kpi3 .kpi.big .val { font-size: 36px; }
.idea:hover, .dz-card:hover, .ev-kpi:hover, a.card:hover, button.card:hover, .wr-card:hover { border-color: var(--brand); background: rgba(233,196,106,.05); }
.hero-27, .month-hero, .plans .month-card .mh { background: radial-gradient(600px 240px at 90% -20%, #1e3a6b, transparent 70%), var(--sunk); border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.hero-27 .mn, .month-hero .mn, .plans .month-card .mh .mn { color: var(--brand); } .hero-27 p { color: var(--muted); }
.month-hero h2, .plans .month-card .mh h2 { color: var(--ink); }

/* ---- controls ---- */
.btn { border: 1px solid var(--line); background: var(--sunk); color: var(--ink); border-radius: 10px; font-weight: 600; box-shadow: none; }
.btn:hover { border-color: var(--brand); background: var(--sunk); }
.btn.primary { background: linear-gradient(90deg, #E9C46A, #C9A24B); border: none; color: #14110A; box-shadow: none; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; border-color: transparent; }
input.i, select.i, textarea.i { background: var(--sunk); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; }
input.i:focus, select.i:focus, textarea.i:focus { border-color: var(--brand); box-shadow: none; }
select option { background: #13161C; color: #e8eefb; }
.seg { background: var(--sunk); border: 1px solid var(--line); border-radius: 10px; }
.seg button { color: var(--muted); border-radius: 8px; }
.seg button.on, :root[data-theme="dark"] .seg button.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button.on { background: var(--surface); color: var(--ink); } }
.tabs button.on { color: var(--ink); border-bottom-color: var(--brand); }
.month-chips button { background: var(--sunk); border-color: var(--line); color: var(--muted); }
.month-chips button:hover { color: var(--ink); border-color: var(--brand); }
.month-chips button.on { background: linear-gradient(90deg, #E9C46A, #B8913A); color: #06121f; border-color: transparent; box-shadow: none; }
.cat-bar button { background: var(--sunk); border-color: var(--line); color: var(--muted); }
.cat-bar button:first-child.on { background: linear-gradient(90deg, #C9A24B, #8A6A22); }
.note { background: rgba(233,196,106,.08); border: 1px solid rgba(233,196,106,.3); border-inline-start-width: 4px; color: var(--ink); }
.note.warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.3); }
.note.bad { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.3); }
.note.ok { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.3); }

/* ---- tables ---- */
table.t th { background: var(--surface); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; border-bottom-color: var(--line); }
table.t td { border-bottom-color: rgba(157,176,201,.12); }
table.t tbody tr:hover td, table.t tr.click:hover td { background: rgba(233,196,106,.06); color: var(--brand); }

/* ---- calendars ---- */
.month-grid, .month-grid .dow, .month-grid .day { border-color: var(--line); }
.month-grid .dow { background: var(--sunk); }
.month-grid .day { background: var(--surface); }
.month-grid .day.out { background: var(--sunk); }
.month-grid .day.today { box-shadow: inset 0 0 0 2px var(--brand); }

/* ---- overlays ---- */
.overlay { background: rgba(5,9,18,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 40px 100px rgba(0,0,0,.55); animation: modal-in .15s ease-out both; overflow: hidden; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal .mh, .modal .mf { border-color: var(--line); } .modal .mf { background: transparent; }
.drawer { background: var(--surface); border-inline-start: 1px solid var(--line); }
.notif.unread { background: rgba(233,196,106,.08); }
.toast { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.toast.err { background: #7f1d1d; border-color: #b91c1c; color: #fff; }
.auth { background: radial-gradient(1200px 600px at 80% -10%, #2A2314 0%, #0E1116 55%); }
.auth .box { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.auth .brandline img, :root[data-theme="dark"] .auth .brandline img { filter: none; }

/* ---- event page tiles keep their colours ---- */
.ev-kpi { border-top: 3px solid var(--cc); }
.ev-table td:nth-child(2) { min-width: 250px; } .ev-table td:nth-child(4) { min-width: 120px; }

/* ---- phones: tabs scroll sideways ---- */
@media (max-width: 820px) {
  .side { padding: 8px 12px; gap: 8px; }
  .side .logo .sub { display: none; }
  .side nav { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.nav-open::after { display: none; }
  .top { padding: 10px 12px 0; }
  .page { padding: 12px 12px 56px; }
  html, body { overflow-x: clip; }
}