/* ==========================================================================
   KasieFM Admin — Common Stylesheet
   Shared design tokens, resets, typography and reusable components.
   Load this BEFORE any page-specific stylesheet.
   ========================================================================== */

/* The UA default for [hidden] is display:none, but any author rule with a
   class selector (e.g. .btn{display:inline-flex}) outranks it by
   specificity, so an element that is both .btn and [hidden] stays visible.
   Reviewed live (Dashboard Phase 3 round 1): gate(el, perm, 'hide') set
   `hidden` correctly but the button stayed on screen at full size. This one
   rule, ranked above every component rule below, is what makes `hidden`
   actually hide anything in this branch, permanently. */
[hidden]{display:none!important;}

/* ---- Design tokens -------------------------------------------------------*/
:root{
  /* Tells the browser to render native controls (checkboxes, radios,
     date/time pickers and their popups, select dropdowns, etc.) using its
     dark UI variant instead of the light default, so they match the app. */
  color-scheme:dark;

  /* Colors (Material3-style dark palette, shared by every screen) */
  --color-on-primary-fixed:#001a42;
  --color-outline:#8c909f;
  --color-primary:#adc6ff;
  --color-surface-container-lowest:#0c0f10;
  --color-surface-container-low:#191c1d;
  --color-error:#ffb4ab;
  --color-secondary-fixed-dim:#eec200;
  --color-inverse-on-surface:#2e3132;
  --color-secondary:#ffe083;
  --color-error-container:#93000a;
  --color-on-primary:#002e6a;
  --color-secondary-fixed:#ffe083;
  --color-inverse-surface:#e1e3e4;
  --color-on-tertiary-fixed-variant:#005236;
  --color-surface-bright:#373a3b;
  --color-on-secondary-fixed-variant:#574500;
  --color-secondary-container:#eec200;
  --color-surface-container-high:#272a2b;
  --color-on-secondary-fixed:#231b00;
  --color-on-error:#690005;
  --color-on-tertiary-fixed:#002113;
  --color-tertiary-fixed-dim:#4edea3;
  --color-surface-dim:#111415;
  --color-surface:#111415;
  --color-on-surface:#e1e3e4;
  --color-primary-fixed-dim:#adc6ff;
  --color-outline-variant:#424754;
  --color-surface-tint:#adc6ff;
  --color-tertiary-fixed:#6ffbbe;
  --color-primary-fixed:#d8e2ff;
  --color-on-primary-container:#00285d;
  --color-on-surface-variant:#c2c6d6;
  --color-inverse-primary:#005ac2;
  --color-primary-container:#4d8eff;
  --color-on-background:#e1e3e4;
  --color-surface-container-highest:#323536;
  --color-surface-container:#1d2021;
  --color-on-tertiary:#003824;
  --color-on-error-container:#ffdad6;
  --color-on-secondary-container:#645000;
  --color-tertiary:#4edea3;
  --color-on-tertiary-container:#00311f;
  --color-on-secondary:#3c2f00;
  --color-surface-variant:#323536;
  --color-tertiary-container:#00a572;
  --color-background:#111415;

  /* Radius */
  --radius-default:0.125rem;
  --radius-lg:0.25rem;
  --radius-xl:0.5rem;
  --radius-full:0.75rem;

  /* Spacing */
  --space-unit:4px;
  --space-stack-sm:8px;
  --space-stack-md:16px;
  --space-stack-lg:32px;
  --space-gutter:16px;
  --space-container-margin:24px;

  /* Fonts */
  --font-mono-label:'JetBrains Mono', monospace;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --font-headline:'Hanken Grotesk', sans-serif;
}

/* ---- Reset ---------------------------------------------------------------*/
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background-color:var(--color-background);
  color:var(--color-on-surface);
  font-family:var(--font-body);
  font-size:14px;
  line-height:20px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input,select,textarea{ font-family:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

/* ---- Material Symbols -----------------------------------------------------*/
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}
.material-symbols-outlined.filled{ font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }

/* ---- Typography ------------------------------------------------------------*/
.text-mono-label{ font-family:var(--font-mono-label); font-size:12px; line-height:16px; font-weight:400; }
.text-body-lg{ font-family:var(--font-body); font-size:16px; line-height:24px; font-weight:400; }
.text-headline-md{ font-family:var(--font-headline); font-size:24px; line-height:32px; font-weight:600; }
.text-headline-sm{ font-family:var(--font-headline); font-size:20px; line-height:28px; font-weight:600; }
.text-headline-lg{ font-family:var(--font-headline); font-size:32px; line-height:40px; letter-spacing:-0.01em; font-weight:600; }
.text-body-md{ font-family:var(--font-body); font-size:14px; line-height:20px; font-weight:400; }
.text-body-sm{ font-family:var(--font-body); font-size:12px; line-height:16px; font-weight:400; }
.text-title-lg{ font-family:var(--font-body); font-size:18px; line-height:24px; font-weight:600; }
.text-label-md{ font-family:var(--font-body); font-size:12px; line-height:16px; letter-spacing:0.05em; font-weight:600; }
.text-display-lg{ font-family:var(--font-headline); font-size:48px; line-height:56px; letter-spacing:-0.02em; font-weight:700; }

.text-primary{ color:var(--color-primary); }
.text-secondary{ color:var(--color-secondary); }
.text-tertiary{ color:var(--color-tertiary); }
.text-error{ color:var(--color-error); }
.text-outline{ color:var(--color-outline); }
.text-on-surface-variant{ color:var(--color-on-surface-variant); }
.uppercase{ text-transform:uppercase; }
.tracking-wide{ letter-spacing:0.05em; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Scrollbars --------------------------------------------------------------
   Applied globally (not just to elements opted in via .custom-scrollbar) so
   every scrollable surface in the app — page body, tables, modals, textareas,
   dropdowns — matches the platform look instead of falling back to the
   browser/OS default scrollbar.
   ------------------------------------------------------------------------- */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--color-surface-container-highest) var(--color-background);
}
*{
  scrollbar-width:thin;
  scrollbar-color:var(--color-surface-container-highest) var(--color-background);
}
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--color-background); }
::-webkit-scrollbar-thumb{ background:var(--color-surface-container-highest); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--color-outline-variant); }

/* ---- Native checkboxes & radios ---------------------------------------------
   Baseline theming for any plain checkbox/radio that isn't already replaced
   by a custom component (toggle switches, event-status cards, etc. keep
   their own more-specific rules and override this safely). */
input[type="checkbox"],
input[type="radio"]{
  width:16px; height:16px;
  accent-color:var(--color-primary);
  cursor:pointer;
}

/* ---- Layout shell: sidebar -------------------------------------------------*/
.admin-shell{ min-height:100vh; }

.admin-sidebar{
  position:fixed; left:0; top:0; height:100vh; width:256px;
  background:var(--color-surface-container);
  display:flex; flex-direction:column;
  padding:var(--space-container-margin) 0;
  z-index:50;
}
.sidebar-brand{ display:flex; align-items:center; gap:12px; padding:0 24px; margin-bottom:32px; }
.sidebar-brand img{ width:40px; height:40px; border-radius:50%; overflow:hidden; object-fit:cover; border:1px solid rgba(173,198,255,0.2); }
.sidebar-brand h1{ font-family:var(--font-body); font-size:18px; line-height:24px; font-weight:700; color:var(--color-primary); }
.sidebar-brand p{ font-size:12px; line-height:16px; letter-spacing:0.05em; font-weight:600; color:var(--color-on-surface-variant); }

.sidebar-nav{ flex:1; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.nav-link{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  color:var(--color-on-surface-variant);
  transition:background-color .15s;
  border-left:2px solid transparent;
}
.nav-link:hover{ background:var(--color-surface-container-high); }
.nav-link .text-label-md{ color:inherit; }
.nav-link.active{
  color:var(--color-primary);
  border-left-color:var(--color-primary);
  background:rgba(173,198,255,0.1);
}

.sidebar-footer{ margin-top:auto; padding:0 16px; display:flex; flex-direction:column; gap:4px; }
.sidebar-status{
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; margin-bottom:8px;
  border-radius:8px; background:var(--color-surface-container-highest);
}
.status-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--color-tertiary);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* ---- Top navigation bar ----------------------------------------------------*/
.admin-topbar{
  position:fixed; top:0; left:256px; right:0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-gutter);
  background:var(--color-surface);
  border-bottom:1px solid rgba(66,71,84,0.1);
  z-index:40;
}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px; border-radius:12px; color:var(--color-on-surface-variant);
  transition:background-color .15s, transform .1s;
}
.icon-btn:hover{ background:var(--color-surface-container-low); }
.icon-btn:active{ transform:scale(.95); }

.topbar-divider{ width:1px; height:32px; background:var(--color-outline-variant); margin:0 8px; }

.user-chip{ display:flex; align-items:center; gap:12px; }
.user-chip img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--color-outline-variant); }
.user-chip .user-name{ font-size:12px; line-height:16px; font-weight:700; }
.user-chip .user-role{ font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-outline); }

.user-menu-wrap{ position:relative; }
.user-menu-wrap .user-chip{
  cursor:pointer; padding:4px; border-radius:12px;
  transition:background-color .15s;
}
.user-menu-wrap .user-chip:hover{ background:var(--color-surface-container-low); }
.user-menu-wrap .user-chip .chip-caret{ font-size:18px; color:var(--color-outline); }
.user-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:var(--color-surface-container-low); border:1px solid var(--color-outline-variant);
  border-radius:12px; box-shadow:0 10px 30px -6px rgba(0,0,0,0.4);
  padding:6px; z-index:50; display:flex; flex-direction:column; gap:2px;
}
.user-menu[hidden]{ display:none; }
.user-menu-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border-radius:8px; font-size:13px; font-weight:600;
  color:var(--color-on-surface); text-align:left; background:none; border:none; cursor:pointer;
}
.user-menu-item .material-symbols-outlined{ font-size:18px; color:var(--color-on-surface-variant); }
.user-menu-item:hover{ background:var(--color-surface-container-high); }
.user-menu-item.danger{ color:var(--color-error); }
.user-menu-item.danger .material-symbols-outlined{ color:var(--color-error); }
.user-menu-divider{ height:1px; background:var(--color-outline-variant); margin:4px 2px; }

/* ---- Buttons ---------------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:12px; letter-spacing:0.05em;
  border-radius:12px; padding:8px 24px;
  transition:filter .15s, transform .1s, background-color .15s;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--color-primary); color:var(--color-on-primary); box-shadow:0 8px 16px -4px rgba(173,198,255,0.2); }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-secondary{ background:var(--color-surface-container-highest); color:var(--color-on-surface); }
.btn-secondary:hover{ background:var(--color-surface-bright); }
.btn-outline{ background:transparent; border:1px solid var(--color-outline-variant); color:var(--color-on-surface); }
.btn-outline:hover{ background:var(--color-surface-container-high); }
.btn-outline-primary{ background:transparent; border:1px solid rgba(173,198,255,0.3); color:var(--color-primary); }
.btn-outline-primary:hover{ background:rgba(173,198,255,0.1); }
.btn-tertiary{ background:var(--color-tertiary); color:var(--color-on-tertiary); }
.btn-tertiary:hover{ filter:brightness(1.1); }
.btn.pressed{ transform:scale(.95); }
.btn-block{ width:100%; }
.btn .spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(0,46,106,0.25); border-top-color:currentColor;
  animation:btn-spin 0.8s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.btn.success{ background:var(--color-tertiary); color:var(--color-on-tertiary); }

/* permission-disabled: a control that shows as disabled but isn't a native
   form control (an anchor styled as a button) has no browser-enforced
   disabled state — this is the only thing making it look and behave
   disabled. gate() in js/permissions.js sets aria-disabled and this class
   together; the click suppression for non-form elements lives there too.
   No pointer-events:none here — that would block the `title` tooltip's
   hover trigger along with clicks, and it's not needed for the blocking
   itself: native controls are inert via the real disabled attribute, and
   gate()'s capturing click listener already suppresses activation on
   anchors via aria-disabled. */
.permission-disabled{ opacity:0.5; cursor:not-allowed; }

/* not-available-state: permissions.md §8.2 row 2 — direct navigation to a
   page whose domain view permission is missing. Replaces the page's <main>
   content entirely (the shell/nav is untouched — that's already gated by
   applyKasieShellNavigation()). dashboard-empty-state: §8.3 — shown only
   when every dashboard widget is hidden, instead of an all-collapsed grid. */
.not-available-state,.dashboard-empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:64px 24px; text-align:center; color:var(--color-on-surface-variant);
}
.not-available-state .material-symbols-outlined,.dashboard-empty-state .material-symbols-outlined{
  font-size:40px; color:var(--color-outline);
}
.not-available-state h2{ font-size:20px; font-weight:700; color:var(--color-on-surface); }

/* resource-state-row: js/resource-page.js's loading/empty/error states,
   rendered as the table's only <tr> while that state applies — shares the
   not-available-state look (icon + message, centered) rather than a new
   visual language for what's conceptually the same "nothing to show, here's
   why" shape. */
.resource-state-row td{ padding:0 !important; }
.resource-loading,.resource-empty,.resource-error{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:48px 24px; text-align:center; color:var(--color-on-surface-variant);
}
.resource-loading .spinner{
  width:24px; height:24px; border-radius:50%;
  border:3px solid var(--color-outline-variant, rgba(0,0,0,0.1)); border-top-color:var(--color-primary);
  animation:btn-spin 0.8s linear infinite;
}
.resource-error .material-symbols-outlined{ font-size:32px; color:var(--color-error); }

/* kasie-banner: the visible surface for the two permission-layer events
   js/api.js and js/auth.js dispatch on a denied or unverifiable action, plus
   every showKasieBanner() success/error confirmation across the dashboard.
   Fixed bottom-right (banner-fix-plan.md) — a sticky top strip previously
   sat over the topbar at z-index 60 and swallowed clicks on Add New, the
   search box, and the account menu until manually dismissed. */
.kasie-banner{
  position:fixed; bottom:16px; right:16px; left:auto; z-index:60;
  max-width:min(420px, calc(100vw - 32px));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:12px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);
  font-size:14px; font-weight:600;
}
.kasie-banner-success{ background:var(--color-tertiary-container); color:var(--color-on-tertiary-container); }
.kasie-banner-error{ background:var(--color-error-container); color:var(--color-on-error-container); }
.kasie-banner-warning{ background:var(--color-secondary-container); color:var(--color-on-secondary-container); }
.kasie-banner-dismiss{
  background:none; border:none; color:inherit; font-size:18px; line-height:1;
  cursor:pointer; padding:0 4px;
}

/* ---- Form fields ------------------------------------------------------------*/
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:12px; font-weight:700; color:var(--color-on-surface-variant); }
.field-icon{ position:relative; }
.field-icon .material-symbols-outlined{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--color-outline); }
input[type="text"],input[type="email"],input[type="password"],input[type="date"],
input[type="time"],input[type="datetime-local"],input[type="number"],input[type="url"],select,textarea{
  width:100%; background:var(--color-surface-container-low);
  border:1px solid var(--color-outline-variant);
  border-radius:8px; padding:10px 16px;
  font-size:14px; color:var(--color-on-surface); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field-icon input{ padding-left:48px; }
input::placeholder,textarea::placeholder{ color:var(--color-outline-variant); }
input:focus,select:focus,textarea:focus{ border-color:var(--color-primary); box-shadow:0 0 0 1px var(--color-primary); }
select{ appearance:none; cursor:pointer; }
.select-wrap{ position:relative; }
.select-wrap .material-symbols-outlined{ position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--color-on-surface-variant); }

.topbar-search{ position:relative; width:100%; max-width:420px; }
.topbar-search .material-symbols-outlined{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--color-on-surface-variant); font-size:20px;
}
.topbar-search input{
  width:100%; background:var(--color-surface-container-low);
  border:none; border-radius:12px;
  padding:8px 16px 8px 40px;
  font-size:14px; color:var(--color-on-surface);
  outline:none; transition:box-shadow .15s;
}
.topbar-search input:focus{ box-shadow:0 0 0 1px var(--color-primary); }
.topbar-search input::placeholder{ color:var(--color-outline); }

/* Toggle switch */
.toggle{ position:relative; display:inline-flex; width:36px; height:20px; flex-shrink:0; }
.toggle input{ position:absolute; opacity:0; width:0; height:0; }
.toggle .track{
  position:absolute; inset:0; background:var(--color-surface-container-highest);
  border-radius:999px; transition:background-color .15s;
}
.toggle .track::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  background:#fff; border-radius:50%; transition:transform .15s;
}
.toggle input:checked + .track{ background:var(--color-primary); }
.toggle input:checked + .track::after{ transform:translateX(16px); }

/* Tags / chips */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  background:rgba(173,198,255,0.2); border:1px solid rgba(173,198,255,0.3);
  color:var(--color-primary); font-size:12px; font-weight:600;
}
.chip button{ display:inline-flex; }
.chip .material-symbols-outlined{ font-size:14px; cursor:pointer; }

/* ---- Status pills / badges -------------------------------------------------*/
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
}
.badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-tertiary{ background:rgba(78,222,163,0.1); color:var(--color-tertiary); }
.badge-secondary{ background:rgba(255,224,131,0.1); color:var(--color-secondary); }
.badge-primary{ background:rgba(173,198,255,0.1); color:var(--color-primary); }
.badge-error{ background:rgba(255,180,171,0.1); color:var(--color-error); }
.badge-neutral{ background:rgba(140,144,159,0.2); color:var(--color-on-surface-variant); }

/* ---- Quick stats row ---------------------------------------------------------
   Shared across every listing page (Users, Events, Shows, News, Polls,
   Podcasts, Talent, Logs) so each one's "before the table" summary cards
   look and behave the same way. Card count varies per page (3-4), so the
   grid auto-fits rather than assuming a fixed column count. */
.quick-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:var(--space-stack-lg); }
.quick-stat{ background:var(--color-surface-container); padding:16px; border-radius:12px; border:1px solid rgba(66,71,84,0.1); }
.quick-stat .label{ font-size:12px; color:var(--color-on-surface-variant); }
.quick-stat .row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:8px; }
.quick-stat .row h3{ font-family:var(--font-headline); font-size:24px; font-weight:600; }
.quick-stat .trend{ font-size:12px; display:flex; align-items:center; gap:2px; }
.quick-stat .trend.up{ color:var(--color-tertiary); }
.quick-stat .trend.down{ color:var(--color-error); }

/* ---- Status filter popover ----------------------------------------------------
   Shared "Filter" button behavior: a small popover of status checkboxes that
   hides non-matching table rows via the existing .filtered-out convention. */
.status-filter-trigger{ position:relative; }
.status-filter-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:200;
  background:var(--color-surface-container-low); border:1px solid var(--color-outline-variant);
  border-radius:12px; box-shadow:0 10px 30px -6px rgba(0,0,0,0.4);
  padding:12px; display:flex; flex-direction:column; gap:8px; min-width:190px;
}
.status-filter-panel[hidden]{ display:none; }
.status-filter-option{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.status-filter-option input{ width:16px; height:16px; accent-color:var(--color-primary); cursor:pointer; }
.status-filter-clear{
  margin-top:4px; padding-top:8px; border-top:1px solid rgba(66,71,84,0.2);
  font-size:12px; font-weight:600; color:var(--color-primary); text-align:left;
}
.status-filter-clear:hover{ color:var(--color-primary-container); }

/* ---- Tables -----------------------------------------------------------------*/
.data-table-wrap{ background:var(--color-surface-container-low); border:1px solid var(--color-outline-variant); border-radius:12px; overflow:hidden; }
table.data-table{ width:100%; border-collapse:collapse; text-align:left; }
table.data-table thead{ background:rgba(39,42,43,0.5); position:sticky; top:0; z-index:1; }
table.data-table th{
  padding:16px 24px; font-size:12px; font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--color-on-surface-variant);
}
table.data-table td{ padding:12px 24px; border-top:1px solid rgba(66,71,84,0.1); }
table.data-table tbody tr{ transition:background-color .15s; cursor:pointer; }
table.data-table tbody tr:hover{ background:rgba(173,198,255,0.05); }
table.data-table tbody tr.selected{ background:rgba(173,198,255,0.1); border-left:4px solid var(--color-primary); }
.table-avatar{
  width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; object-fit:cover; /* only applies when this class is on an <img> */
}

.pagination{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-top:1px solid var(--color-outline-variant); background:rgba(29,32,33,0.3); }
.pagination .pages{ display:flex; gap:8px; }
.page-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--color-outline-variant); font-size:14px; transition:background-color .15s; }
.page-btn:hover{ background:var(--color-surface-container-high); }
.page-btn.active{ background:var(--color-primary); color:var(--color-on-primary); font-weight:700; border-color:transparent; }
.page-btn:disabled{ opacity:.3; cursor:default; }

/* Rows hidden by a page's own search/filter logic (.filtered-out) or by the
   shared pagination helper (.paged-out) — both simply hide the row. */
tr.filtered-out, tr.paged-out{ display:none; }

/* ---- Sortable table headers -------------------------------------------------*/
th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover{ color:var(--color-on-surface); }
th.sortable::after{ content:'\2195'; display:inline-block; margin-left:6px; font-size:10px; opacity:.35; }
th.sortable.sort-asc::after{ content:'\2191'; opacity:1; color:var(--color-primary); }
th.sortable.sort-desc::after{ content:'\2193'; opacity:1; color:var(--color-primary); }

/* ---- Cards / panels ----------------------------------------------------------*/
.panel{ background:var(--color-surface-container); border:1px solid rgba(66,71,84,0.1); border-radius:12px; padding:16px; }
.glass-panel{ background:rgba(28,31,33,0.8); backdrop-filter:blur(12px); border:1px solid rgba(66,71,84,0.3); }

/* ---- Modal --------------------------------------------------------------------*/
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:50;
  transition:opacity .3s;
}
.modal-overlay.hidden{ opacity:0; pointer-events:none; }
.modal-container{
  width:100%; max-width:576px; background:var(--color-surface-container-high);
  border:1px solid rgba(66,71,84,0.3); border-radius:12px; box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);
  transform:scale(1); transition:transform .3s;
}
.modal-overlay.hidden .modal-container{ transform:scale(.95); }
.modal-header{ padding:24px; border-bottom:1px solid rgba(66,71,84,0.2); display:flex; justify-content:space-between; align-items:center; }
.modal-header-icon{ width:40px; height:40px; border-radius:8px; background:var(--color-primary-container); color:var(--color-on-primary-container); display:flex; align-items:center; justify-content:center; }
.modal-body{ padding:32px 24px; display:flex; flex-direction:column; gap:16px; }
.modal-footer{ padding:16px 24px; background:var(--color-surface-container); border-top:1px solid rgba(66,71,84,0.2); display:flex; justify-content:flex-end; gap:12px; border-radius:0 0 12px 12px; }
.blurred{ filter:blur(4px) brightness(.5); }

/* ---- Misc utility ---------------------------------------------------------------*/
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.flex{ display:flex; }
.flex-col{ flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-sm{ gap:8px; }
.gap-md{ gap:16px; }

/* Phase 2 responsive contract. Page styles must use these four tiers so the
   dashboard responds consistently without changing desktop (>=1024px) output. */
:root{ --kasie-breakpoint-tier:desktop; }
@media (max-width:1023px){ :root{ --kasie-breakpoint-tier:tablet; } }
@media (max-width:767px){ :root{ --kasie-breakpoint-tier:mobile; } }
@media (max-width:480px){ :root{ --kasie-breakpoint-tier:small; } }

.shell-menu-toggle,.shell-backdrop{ display:none; }
@media (max-width:1023px){
  html,body{ overflow-x:clip; }
  .icon-btn,.icon-only,.shell-menu-toggle,.page-btn{ min-width:44px; min-height:44px; }
  button.icon-btn,button.icon-only{ min-width:44px !important; min-height:44px !important; }
  .admin-sidebar{ transform:translateX(-100%); transition:transform .2s ease; z-index:310; }
  body.shell-menu-open .admin-sidebar{ transform:translateX(0); }
  .admin-topbar,.shows-topbar,.builder-topbar{ left:0 !important; }
  .shell-menu-toggle{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; flex:0 0 44px; }
  .shell-backdrop{ position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.55); border:0; }
  body.shell-menu-open .shell-backdrop{ display:block; }
  .data-table-wrap{ overflow-x:auto; overflow-y:hidden; scrollbar-color:var(--color-primary) var(--color-surface-container); }
  .data-table-wrap table.data-table{ min-width:720px; }
}
@media (max-width:767px){
  button:has(.material-symbols-outlined){ min-width:48px !important; min-height:48px !important; }
  .modal-overlay{ align-items:flex-end; padding:0; }
  .modal-container,.modal-container.modal-container-wide{ width:100%; max-width:none; max-height:92vh; margin:0; overflow:auto; border-radius:16px 16px 0 0; }
  .show-modal{ width:100vw !important; max-width:none !important; left:0 !important; right:0 !important; transform:none !important; }
  .episode-drawer,.review-panel{ position:fixed !important; inset:auto 0 0 0 !important; width:100vw !important; max-width:none !important; transform:none !important; }
}