/* ── Portal: forms + dashboard ────────────────────────────────
 * Inherits from site.css. Adds form-focused chrome for the auth
 * pages and a narrower content lane for portal screens.
 */

.portal-shell{
    padding:72px 0 96px;
    position:relative;
}
.portal-shell .container{
    max-width:1100px;
}

.portal-card{
    max-width:480px;
    margin:0 auto;
    background:linear-gradient(180deg, rgba(14,20,28,0.85), rgba(7,11,17,0.85));
    border:1px solid var(--line);
    border-radius:3px;
    padding:44px 40px 40px;
    box-shadow:0 12px 32px rgba(0,0,0,0.35);
}
.portal-card--wide{ max-width:720px; }

.portal-tag{
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:10.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:14px;
}
.portal-tag .dot{
    display:inline-block; width:4px; height:4px; background:var(--cyan-2);
    border-radius:50%; vertical-align:2px; margin-right:8px;
}

.portal-card h1{
    font-family:"Instrument Serif", "Times New Roman", serif;
    font-weight:400;
    font-size:34px;
    line-height:1.15;
    letter-spacing:-0.01em;
    margin:0 0 8px;
}
.portal-card h1 em{ color:var(--cyan-2); font-style:italic; }
.portal-card .lede{
    color:var(--paper-2);
    font-size:15px;
    margin:0 0 28px;
}

/* ── Form fields ─────────────────────────────────────────── */
.portal-form .field{ margin-bottom:18px; }
.portal-form .field--inline{
    display:flex; align-items:center; gap:10px;
}
.portal-form label{
    display:block;
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:10.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
}
.portal-form .field--inline label{
    margin:0; text-transform:none; letter-spacing:0; font-size:13px;
    font-family:"Space Grotesk", sans-serif; color:var(--paper-2);
}
.portal-form input[type="text"],
.portal-form input[type="email"],
.portal-form input[type="password"],
.portal-form input[type="tel"],
.portal-form input[type="number"],
.portal-form select,
.portal-form textarea{
    width:100%;
    padding:11px 14px;
    background:rgba(0,0,0,0.4);
    border:1px solid var(--line-2);
    border-radius:2px;
    color:var(--paper);
    font-family:"Space Grotesk", sans-serif;
    font-size:14px;
    transition:border-color .15s, background .15s;
}
.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus{
    outline:none;
    border-color:var(--cyan);
    background:rgba(0,0,0,0.55);
}
.portal-form input[readonly]{
    background:rgba(0,0,0,0.2);
    color:var(--paper-2);
    cursor:not-allowed;
}
.portal-form .help{
    margin-top:6px;
    font-size:12px;
    color:var(--muted);
}
.portal-form input[type="checkbox"]{
    width:16px; height:16px; accent-color:var(--cyan);
}

.portal-form .actions{
    margin-top:24px;
    display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.portal-form .actions .btn{ padding:10px 18px; font-size:13px; }
.portal-form .actions .btn-primary{ min-width:140px; justify-content:center; }

.portal-form .form-foot{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line);
    font-size:13px;
    color:var(--paper-2);
}
.portal-form .form-foot a{ color:var(--cyan-2); text-decoration:none; }
.portal-form .form-foot a:hover{ text-decoration:underline; }

/* ── Flashes ──────────────────────────────────────────────── */
.form-error{
    background:rgba(255, 140, 60, 0.08);
    border:1px solid rgba(255, 140, 60, 0.45);
    border-left-width:3px;
    color:#FFC79A;
    padding:12px 14px;
    margin:0 0 20px;
    font-size:13px;
    border-radius:2px;
}
.flash-success{
    background:rgba(93, 211, 255, 0.06);
    border:1px solid rgba(93, 211, 255, 0.4);
    border-left-width:3px;
    color:var(--cyan-2);
    padding:12px 14px;
    margin:0 0 20px;
    font-size:13px;
    border-radius:2px;
}

/* ── 2FA setup ────────────────────────────────────────────── */
.two-fa-qr{
    display:flex; justify-content:center;
    margin:18px 0 8px;
}
.two-fa-qr svg{
    width:240px; height:240px;
    /* Force white regardless of theme — the QR module fill is dark
       and needs a light backdrop to be scannable. With var(--paper)
       this inverted to dark-on-dark under [data-theme="light"]. */
    background:#FFFFFF;
    padding:12px;
    border-radius:3px;
    border:1px solid var(--line);
}
.two-fa-secret{
    text-align:center;
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:13px;
    color:var(--paper-2);
    letter-spacing:0.08em;
    margin:0 0 24px;
    word-break:break-all;
}
.recovery-codes{
    background:rgba(0,0,0,0.4);
    border:1px dashed var(--line-2);
    padding:16px 20px;
    border-radius:3px;
    columns:2;
    column-gap:24px;
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:14px;
    letter-spacing:0.08em;
    color:var(--paper);
}
.recovery-codes li{ list-style:none; padding:4px 0; }

/* ── Dashboard ────────────────────────────────────────────── */
.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:18px;
    margin-top:32px;
}
.dashboard-card{
    background:rgba(14, 20, 28, 0.6);
    border:1px solid var(--line);
    border-radius:3px;
    padding:24px;
}
.dashboard-card h3{
    margin:0 0 8px;
    font-family:"Instrument Serif", serif;
    font-size:22px;
    font-weight:400;
}
.dashboard-card p{ margin:0; color:var(--paper-2); font-size:14px; }
.dashboard-card .stat{
    font-family:"JetBrains Mono", monospace;
    font-size:32px;
    color:var(--cyan-2);
    margin:8px 0 4px;
}

/* ── Contacts table ───────────────────────────────────────── */
.contacts-table{
    width:100%; border-collapse:collapse; margin-top:18px;
}
.contacts-table th,
.contacts-table td{
    text-align:left;
    padding:11px 14px;
    border-bottom:1px solid var(--line);
    font-size:13px;
}
.contacts-table th{
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:10.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--muted);
    background:rgba(0,0,0,0.25);
}
.contacts-table tr:last-child td{ border-bottom:0; }
.contacts-table .pill{
    display:inline-block;
    background:rgba(93,211,255,0.12);
    border:1px solid rgba(93,211,255,0.35);
    color:var(--cyan-2);
    padding:2px 8px;
    border-radius:99px;
    font-size:11px;
    font-family:"JetBrains Mono", monospace;
    letter-spacing:0.08em;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px){
    .portal-shell{ padding:36px 0 56px; }
    .portal-card{ padding:32px 24px 28px; }
    .portal-card h1{ font-size:28px; }
    .recovery-codes{ columns:1; }
}

/* ── Portal app shell — editorial dark chrome ─────────────────
 * Loaded on portal pages that render the new sidebar+topbar app
 * layout (Dashboard, Account, Tickets, Quotes, Billing, Services).
 * Marketing-style auth forms (.portal-shell / .portal-card above)
 * stay untouched. body[data-portal-app] scopes overflow:hidden so
 * marketing pages don't lose vertical scrolling.
 *
 * Token aliases for tokens not in site.css:
 *   --ink-1, --ink-4, --line-3, --paper-3, --muted-2, --green, --amber, --red
 * are declared here in a scoped fallback. If site.css later adds them,
 * remove the fallback block.
 */
body[data-portal-app]{
  overflow:hidden;
  height:100%;
  /* The marketing layout (views/layout.php) renders in-flow siblings ABOVE
     the .app shell inside this body — the portal announcement notices
     (.portal-notice). A flex column lets those banners take their natural
     height and shrinks .app into whatever's left, instead of .app's old
     hardcoded 100vh overflowing the clipped body and hiding the bottom of
     the scroll area (the "Recent messages" rows clipped off-screen). */
  display:flex;
  flex-direction:column;
  font-size:13px;
  line-height:1.45;
}
html:has(body[data-portal-app]){ height:100% }
body[data-portal-app]::after{ display:none } /* hide the marketing scanline overlay */

body[data-portal-app]{
  --ink-1:#06090E;
  --ink-4:#141C28;
  --line-3:#3A4A5E;
  --paper-3:#9AA6B4;
  --muted-2:#4D5764;
  --green:#3CCB8E;
  --amber:#F0B23A;
  --red:#FF6B6B;
}

/* ── App shell ─────────────────────────────────────── */
body[data-portal-app] .app{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns: 240px 1fr;
  /* flex:1 + min-height:0 (paired with the flex-column body above) makes the
     shell fill the viewport MINUS any portal-notice banners stacked above it,
     so the scrollable .content never spills past the bottom of the page. */
  flex:1;
  min-height:0;
}

/* ── Sidebar ───────────────────────────────────────── */
body[data-portal-app] .sidebar{
  background:var(--ink-1);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  overflow:hidden;
}
body[data-portal-app] .sb-brand{
  padding:18px 18px 16px;
  border-bottom:1px solid var(--line);
}
body[data-portal-app] .sb-brand a{
  font-family:"Instrument Serif", serif; font-size:24px;
  letter-spacing:-0.01em; color:var(--paper);
  text-decoration:none; line-height:1;
}
body[data-portal-app] .sb-brand .brand-text em{ color:var(--cyan-2); font-style:italic }

body[data-portal-app] .sb-account{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
}
body[data-portal-app] .sb-account .avatar{
  width:32px;height:32px;border-radius:3px;
  background:linear-gradient(135deg, var(--cyan), #0F4A66);
  color:var(--paper);
  display:grid;place-items:center;
  font-family:"Instrument Serif",serif;font-style:italic;font-size:18px;
  flex-shrink:0;
}
body[data-portal-app] .sb-account .meta{flex:1; min-width:0}
body[data-portal-app] .sb-account .name{font-size:13px; color:var(--paper); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body[data-portal-app] .sb-account .id{font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--muted); letter-spacing:.08em}

body[data-portal-app] .sb-nav{flex:1; overflow-y:auto; padding:14px 0}
body[data-portal-app] .sb-nav::-webkit-scrollbar{width:6px}
body[data-portal-app] .sb-nav::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
body[data-portal-app] .sb-section{padding:0 16px}
body[data-portal-app] .sb-section + .sb-section{margin-top:18px}
body[data-portal-app] .sb-h{
  font-family:"JetBrains Mono",monospace;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2);
  padding:4px 8px 8px;
}
body[data-portal-app] .sb-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  margin:0 -4px;
  border-radius:4px;
  font-size:13px;
  color:var(--paper-2);
  cursor:pointer;
  position:relative;
  text-decoration:none;
  transition:background .15s, color .15s;
}
body[data-portal-app] .sb-link:hover{background:var(--ink-2); color:var(--paper)}
body[data-portal-app] .sb-link.active{background:var(--ink-3); color:var(--paper)}
body[data-portal-app] .sb-link.active::before{
  content:""; position:absolute; left:-16px; top:6px; bottom:6px; width:2px;
  background:var(--cyan-2); border-radius:0 2px 2px 0;
}
body[data-portal-app] .sb-link .ic{width:16px; height:16px; flex-shrink:0; opacity:.7}
body[data-portal-app] .sb-link.active .ic, body[data-portal-app] .sb-link:hover .ic{opacity:1}
body[data-portal-app] .sb-link .badge{
  margin-left:auto;
  font-family:"JetBrains Mono",monospace;
  font-size:10px; padding:2px 6px; border-radius:99px;
  background:var(--ink-3); color:var(--paper-2);
  letter-spacing:.04em;
}
body[data-portal-app] .sb-link .badge.alert{background:var(--cyan); color:var(--ink)}

body[data-portal-app] .sb-foot{
  border-top:1px solid var(--line);
  padding:12px 14px;
  display:flex; flex-direction:column; gap:8px;
}
body[data-portal-app] .sb-foot .status{
  display:flex; align-items:center; gap:8px;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  color:var(--paper-2);
}
body[data-portal-app] .sb-foot .status .dot{
  width:6px; height:6px; background:var(--green); border-radius:50%;
  box-shadow:0 0 0 0 rgba(60,203,142,.55); animation:portal-app-pulse 2.4s infinite;
}
@keyframes portal-app-pulse{
  0%{box-shadow:0 0 0 0 rgba(60,203,142,.55)}
  70%{box-shadow:0 0 0 8px rgba(60,203,142,0)}
  100%{box-shadow:0 0 0 0 rgba(60,203,142,0)}
}
body[data-portal-app] .sb-foot .twofa{
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--muted);
}
body[data-portal-app] .sb-foot .twofa .lock{
  width:14px;height:14px;border:1px solid var(--green);border-radius:2px;
  color:var(--green); display:grid; place-items:center; font-size:9px;
}
body[data-portal-app] .sb-foot .twofa a{ color:var(--cyan-2); text-decoration:none }

/* ── Main column ───────────────────────────────────── */
body[data-portal-app] .main{
  display:flex; flex-direction:column;
  overflow:hidden;
  min-width:0;
}

/* topbar — scoped under .main to avoid colliding with marketing site.css .topbar */
body[data-portal-app] .main .topbar{
  height:56px;
  position:static;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  padding:0 28px;
  background:rgba(11,16,24,0.6);
  backdrop-filter:blur(10px);
}
/* Light theme: topbar gets a light translucent fill so the dashboard
   content shows through with a hint of opacity, matching the rest of
   the surface. */
:root[data-theme="light"] body[data-portal-app] .main .topbar{
  background:rgba(255,255,255,0.85);
}
body[data-portal-app] .crumb{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
body[data-portal-app] .crumb a{ color:var(--muted); text-decoration:none }
body[data-portal-app] .crumb a:hover{ color:var(--paper) }
body[data-portal-app] .crumb b{color:var(--paper); font-weight:500}
body[data-portal-app] .crumb .sep{color:var(--line-3)}

body[data-portal-app] .main .topbar .tools{display:flex; align-items:center; gap:6px}
body[data-portal-app] .tb-search{
  display:flex; align-items:center; gap:8px;
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:7px 12px;
  border-radius:4px;
  font-size:12.5px;
  /* Wide enough for the full placeholder ("Search services, invoices,
     tickets…") plus the shortcut hint without ellipsing mid-word. */
  width:380px;
  max-width:38vw;
  color:var(--paper-3);
}
body[data-portal-app] .tb-search input{
  min-width:0; /* allow shrink so flex doesn't push kbd off-screen */
}
body[data-portal-app] .tb-search input{
  background:transparent; border:0; color:var(--paper);
  outline:none; flex:1; font-family:inherit; font-size:12.5px;
}
body[data-portal-app] .tb-search kbd{
  font-family:"JetBrains Mono",monospace; font-size:9.5px;
  background:var(--ink-3); padding:2px 6px; border-radius:3px;
  color:var(--muted); border:1px solid var(--line-2); letter-spacing:.04em;
}
body[data-portal-app] .tb-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:4px;
  cursor:pointer;
  color:var(--paper-2);
  position:relative;
  text-decoration:none;
}
body[data-portal-app] .tb-icon:hover{background:var(--ink-2); color:var(--paper)}
body[data-portal-app] .tb-icon .pip{
  position:absolute; top:8px; right:8px;
  width:6px; height:6px; background:var(--cyan-2); border-radius:50%;
  border:2px solid var(--ink-1);
}

/* theme toggle: show moon in dark mode, sun in light mode */
body[data-portal-app] .tb-theme-toggle .ic-sun{ display:none }
body[data-portal-app] .tb-theme-toggle .ic-moon{ display:inline-block }
:root[data-theme="light"] body[data-portal-app] .tb-theme-toggle .ic-sun{ display:inline-block }
:root[data-theme="light"] body[data-portal-app] .tb-theme-toggle .ic-moon{ display:none }

/* content */
body[data-portal-app] .content{
  /* min-height:0 lets this flex child shrink below its content height so its
     own overflow:auto scrolls — without it the column grows past the
     overflow:hidden .main and the last panels (Recent messages) clip off the
     bottom of the page. */
  flex:1; min-height:0; overflow:auto;
  padding:24px 28px 40px;
}
body[data-portal-app] .content::-webkit-scrollbar{width:8px;height:8px}
body[data-portal-app] .content::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}

/* ── Page header ───────────────────────────────────── */
body[data-portal-app] .page-head{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:end;
  gap:20px;
  margin-bottom:24px;
}
body[data-portal-app] .page-head .eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-2); margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
body[data-portal-app] .page-head .eyebrow .dot{width:4px;height:4px;background:var(--cyan-2);border-radius:50%}
body[data-portal-app] .page-head h1{
  font-family:"Instrument Serif", serif; font-weight:400;
  font-size:38px; line-height:1; letter-spacing:-0.02em;
  margin:0; color:var(--paper);
}
body[data-portal-app] .page-head h1 .it{color:var(--cyan-2); font-style:italic}
body[data-portal-app] .page-head .sub{
  color:var(--paper-3); font-size:13px; margin-top:8px;
}
body[data-portal-app] .page-head .actions{display:flex; gap:8px}

/* Buttons — scoped overrides for the .app shell only */
body[data-portal-app] .app .btn{
  font-family:"Space Grotesk", sans-serif;
  font-size:12.5px; font-weight:500;
  padding:8px 14px;
  border-radius:3px;
  background:transparent;
  color:var(--paper);
  border:1px solid var(--line-2);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:all .15s;
  white-space:nowrap;
  text-decoration:none;
}
body[data-portal-app] .app .btn:hover{border-color:var(--line-3); background:var(--ink-2)}
body[data-portal-app] .app .btn-primary{
  background:var(--cyan); color:var(--ink); border-color:var(--cyan);
}
body[data-portal-app] .app .btn-primary:hover{background:var(--cyan-2); border-color:var(--cyan-2); color:var(--ink)}
body[data-portal-app] .app .btn-ghost{border-color:transparent; color:var(--paper-2)}
body[data-portal-app] .app .btn-sm{padding:5px 10px; font-size:11.5px}

/* Native file inputs — theme the browser chrome so uploads match the panel,
   not raw OS widgets. The picker button mirrors a default .btn; the
   "no file chosen" text inherits the muted paper colour. */
body[data-portal-app] input[type="file"]{
  font-family:"Space Grotesk", sans-serif;
  font-size:13px;
  color:var(--paper-2);
  max-width:100%;
}
body[data-portal-app] input[type="file"]::file-selector-button{
  font-family:"Space Grotesk", sans-serif;
  font-size:12.5px; font-weight:500;
  margin-right:12px;
  padding:8px 14px;
  border-radius:3px;
  background:transparent;
  color:var(--paper);
  border:1px solid var(--line-2);
  cursor:pointer;
  transition:all .15s;
}
body[data-portal-app] input[type="file"]:hover::file-selector-button{
  border-color:var(--line-3);
  background:var(--ink-2);
}

/* Generic native controls used OUTSIDE .portal-form / .form-row (e.g. the
   radio Library / Playlists / Rotation panels). Dark default: the browser's
   white control background is unreadable on the dark theme, so give them the
   same panel-input look as .portal-form. Values mirror the .portal-form inputs
   so existing forms are visually unchanged; the [data-theme="light"] generic
   block below handles light mode. */
body[data-portal-app] select,
body[data-portal-app] input[type="text"],
body[data-portal-app] input[type="number"],
body[data-portal-app] input[type="search"],
body[data-portal-app] input[type="url"],
body[data-portal-app] input[type="tel"],
body[data-portal-app] textarea{
  background:rgba(0,0,0,0.4);
  color:var(--paper);
  border:1px solid var(--line-2);
  border-radius:2px;
  padding:11px 14px;
  font-family:"Space Grotesk", sans-serif;
  font-size:14px;
}
body[data-portal-app] select{
  /* custom caret — the native arrow is dark-on-dark / invisible once themed */
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239fb0c0' d='M3 4.5 6 7.5 9 4.5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
  cursor:pointer;
}
/* The open dropdown list (Blink/Gecko honour these; some native popups ignore
   them, but this fixes the white-on-white seen on the radio Library select). */
body[data-portal-app] select option{
  background:var(--ink-2, #11161d);
  color:var(--paper);
}
body[data-portal-app] select:focus,
body[data-portal-app] input[type="text"]:focus,
body[data-portal-app] input[type="number"]:focus,
body[data-portal-app] input[type="search"]:focus,
body[data-portal-app] input[type="url"]:focus,
body[data-portal-app] input[type="tel"]:focus,
body[data-portal-app] textarea:focus{
  outline:none;
  border-color:var(--cyan);
}

/* ── KPI strip ────────────────────────────────────── */
body[data-portal-app] .kpi-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--ink-1);
  margin-bottom:22px;
  overflow:hidden;
}
body[data-portal-app] .kpi{
  padding:16px 18px;
  border-right:1px solid var(--line);
  position:relative;
}
body[data-portal-app] .kpi:last-child{border-right:0}
body[data-portal-app] .kpi .k{
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
body[data-portal-app] .kpi .v{
  font-family:"Instrument Serif",serif; font-style:italic;
  font-size:32px; line-height:1; color:var(--paper);
  letter-spacing:-0.01em;
}
body[data-portal-app] .kpi .v .u{font-size:14px; color:var(--paper-2); margin-left:4px}
body[data-portal-app] .kpi .delta{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.04em;
  margin-top:8px; color:var(--muted);
}
body[data-portal-app] .kpi .delta.up{color:var(--green)}
body[data-portal-app] .kpi .delta.down{color:var(--red)}
body[data-portal-app] .kpi .delta.warn{color:var(--amber)}

/* ── Grid ──────────────────────────────────────────── */
body[data-portal-app] .grid{display:grid; gap:18px}
body[data-portal-app] .grid-2{grid-template-columns:1fr 1fr}
body[data-portal-app] .grid-3{grid-template-columns:repeat(3,1fr)}
body[data-portal-app] .grid-12{grid-template-columns:repeat(12,1fr)}
body[data-portal-app] .col-8{grid-column:span 8}
body[data-portal-app] .col-7{grid-column:span 7}
body[data-portal-app] .col-5{grid-column:span 5}
body[data-portal-app] .col-4{grid-column:span 4}
body[data-portal-app] .col-6{grid-column:span 6}
body[data-portal-app] .col-12{grid-column:span 12}

/* ── Panel ─────────────────────────────────────────── */
body[data-portal-app] .panel{
  background:var(--ink-1);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
body[data-portal-app] .panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  gap:12px;
}
body[data-portal-app] .panel-head h2{
  font-family:"Instrument Serif",serif; font-weight:400;
  font-size:18px; margin:0; line-height:1;
  color:var(--paper); letter-spacing:-0.01em;
}
body[data-portal-app] .panel-head h2 .it{color:var(--cyan-2); font-style:italic}
body[data-portal-app] .panel-head .meta{
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
body[data-portal-app] .panel-head .tools{display:flex; gap:6px; align-items:center}
body[data-portal-app] .panel-link{
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan-2);
  cursor:pointer;
  text-decoration:none;
}
body[data-portal-app] .panel-link:hover{color:var(--paper)}
body[data-portal-app] .panel-body{padding:14px 18px}
body[data-portal-app] .panel-body.flush{padding:0}

/* ── Tables ────────────────────────────────────────── */
body[data-portal-app] table.dt{
  width:100%; border-collapse:collapse;
  font-size:12.5px;
}
body[data-portal-app] table.dt th{
  text-align:left;
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
  padding:10px 18px;
  border-bottom:1px solid var(--line);
  background:var(--ink-2);
}
body[data-portal-app] table.dt td{
  padding:11px 18px;
  border-bottom:1px solid var(--line);
  color:var(--paper-2);
  vertical-align:middle;
}
body[data-portal-app] table.dt tr:last-child td{border-bottom:0}
body[data-portal-app] table.dt tr:hover td{background:rgba(25,167,224,0.03)}
body[data-portal-app] table.dt td .pri{color:var(--paper); font-weight:500}
body[data-portal-app] table.dt td.num{font-family:"JetBrains Mono",monospace; font-feature-settings:"tnum"}

/* ── Pills / badges ────────────────────────────────── */
body[data-portal-app] .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:99px;
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink-3); color:var(--paper-2);
  border:1px solid var(--line-2);
  white-space:nowrap;
}
body[data-portal-app] .pill .d{width:5px; height:5px; border-radius:50%; background:var(--paper-3)}
body[data-portal-app] .pill.green{color:var(--green); border-color:rgba(60,203,142,0.3); background:rgba(60,203,142,0.06)}
body[data-portal-app] .pill.green .d{background:var(--green)}
body[data-portal-app] .pill.cyan{color:var(--cyan-2); border-color:rgba(93,211,255,0.3); background:rgba(93,211,255,0.06)}
body[data-portal-app] .pill.cyan .d{background:var(--cyan-2)}
body[data-portal-app] .pill.amber{color:var(--amber); border-color:rgba(240,178,58,0.3); background:rgba(240,178,58,0.06)}
body[data-portal-app] .pill.amber .d{background:var(--amber)}
body[data-portal-app] .pill.red{color:var(--red); border-color:rgba(255,107,107,0.3); background:rgba(255,107,107,0.06)}
body[data-portal-app] .pill.red .d{background:var(--red)}
body[data-portal-app] .pill.muted{color:var(--muted); background:transparent}

/* ── Service tiles ───────── */
body[data-portal-app] .svc-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0;
}
body[data-portal-app] .svc-tile{
  padding:16px 18px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns: 36px 1fr auto;
  gap:14px;
  align-items:center;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  transition:background .15s;
}
body[data-portal-app] .svc-tile:hover{background:rgba(25,167,224,0.04)}
body[data-portal-app] .svc-tile:nth-child(2n){border-right:0}
body[data-portal-app] .svc-tile .ic{
  width:36px; height:36px;
  border:1px solid var(--line-2);
  border-radius:4px;
  background:var(--ink-2);
  display:grid; place-items:center;
  color:var(--cyan-2);
}
body[data-portal-app] .svc-tile .body{min-width:0}
body[data-portal-app] .svc-tile .name{
  font-size:13px; color:var(--paper); font-weight:500;
  margin-bottom:2px;
}
body[data-portal-app] .svc-tile .detail{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; color:var(--muted); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body[data-portal-app] .svc-tile .meta{
  text-align:right;
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px; color:var(--paper-3);
}
body[data-portal-app] .svc-tile .meta .v{
  color:var(--paper); font-size:13px; font-weight:500;
  display:block;
}

/* ── Activity feed ──────────────────────────────────── */
body[data-portal-app] .feed{display:flex; flex-direction:column}
body[data-portal-app] .feed-item{
  display:grid;
  grid-template-columns: 28px 1fr auto;
  gap:12px; padding:11px 18px;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
}
body[data-portal-app] .feed-item:last-child{border-bottom:0}
body[data-portal-app] .feed-item .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--paper-3);
  margin-top:5px; margin-left:10px;
}
body[data-portal-app] .feed-item .dot.cyan{background:var(--cyan-2)}
body[data-portal-app] .feed-item .dot.green{background:var(--green)}
body[data-portal-app] .feed-item .dot.amber{background:var(--amber)}
body[data-portal-app] .feed-item .text{
  font-size:12.5px; color:var(--paper-2); line-height:1.5;
}
body[data-portal-app] .feed-item .text b{color:var(--paper); font-weight:500}
body[data-portal-app] .feed-item .text .mono{color:var(--paper-3); font-size:11.5px}
body[data-portal-app] .feed-item .time{
  font-family:"JetBrains Mono",monospace;
  font-size:10px; color:var(--muted); letter-spacing:.04em;
  white-space:nowrap;
}

/* ── Renewals timeline ─────────────────────────────── */
body[data-portal-app] .renewals{display:flex; flex-direction:column}
body[data-portal-app] .renew{
  display:grid;
  grid-template-columns: 56px 1fr auto;
  gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
body[data-portal-app] .renew:last-child{border-bottom:0}
body[data-portal-app] .renew .when{
  font-family:"Instrument Serif",serif; font-style:italic;
  font-size:22px; line-height:1; color:var(--cyan-2);
  text-align:center;
}
body[data-portal-app] .renew .when .u{
  display:block;
  font-family:"JetBrains Mono",monospace; font-style:normal;
  font-size:9px; color:var(--muted); letter-spacing:.14em;
  text-transform:uppercase; margin-top:3px;
}
body[data-portal-app] .renew .body .name{font-size:13px; color:var(--paper); font-weight:500}
body[data-portal-app] .renew .body .meta{
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px; color:var(--muted); margin-top:2px;
}
body[data-portal-app] .renew .cost{
  font-family:"JetBrains Mono",monospace;
  font-size:13px; color:var(--paper); font-weight:500;
}

/* ── Quick actions ─────────────────────────────────── */
body[data-portal-app] .quick-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:0;
}
body[data-portal-app] .quick-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  transition:background .15s;
}
body[data-portal-app] .quick-item:hover{background:rgba(25,167,224,0.05)}
body[data-portal-app] .quick-item:nth-child(2n){border-right:0}
body[data-portal-app] .quick-item .ic{
  width:32px; height:32px; border-radius:4px;
  border:1px solid var(--line-2); background:var(--ink-2);
  display:grid; place-items:center; color:var(--cyan-2); flex-shrink:0;
}
body[data-portal-app] .quick-item .label{
  font-size:13px; color:var(--paper); font-weight:500;
}
body[data-portal-app] .quick-item .hint{
  font-family:"JetBrains Mono",monospace;
  font-size:10px; color:var(--muted); letter-spacing:.08em;
  margin-top:1px;
}

/* ── Bars / sparkline ───────────────────────────────── */
body[data-portal-app] .bars{display:flex; align-items:flex-end; gap:3px; height:48px}
body[data-portal-app] .bars .b{flex:1; background:var(--cyan); opacity:.35; border-radius:1px 1px 0 0; min-height:3px}
body[data-portal-app] .bars .b.peak{opacity:1}

/* ── Misc utilities (scoped) ────────────────────────────── */
body[data-portal-app] .dim{color:var(--muted)}
body[data-portal-app] .dim-2{color:var(--paper-3)}
body[data-portal-app] .right{text-align:right}
body[data-portal-app] .flex{display:flex}
body[data-portal-app] .gap-8{gap:8px}
body[data-portal-app] .gap-12{gap:12px}
body[data-portal-app] .gap-18{gap:18px}
body[data-portal-app] .between{justify-content:space-between}
body[data-portal-app] .center{align-items:center}
body[data-portal-app] .mb-0{margin-bottom:0}
body[data-portal-app] .mb-12{margin-bottom:12px}
body[data-portal-app] .mb-18{margin-bottom:18px}
body[data-portal-app] .mb-24{margin-bottom:24px}
body[data-portal-app] .mt-8{margin-top:8px}
body[data-portal-app] .mt-18{margin-top:18px}

/* Forms inside the portal app (used by Account, Tickets, etc.) */
body[data-portal-app] .form-row{ margin-bottom:14px; display:flex; flex-direction:column; gap:6px }
body[data-portal-app] .form-row label{
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
body[data-portal-app] .form-row input[type=text],
body[data-portal-app] .form-row input[type=email],
body[data-portal-app] .form-row input[type=tel],
body[data-portal-app] .form-row input[type=password],
body[data-portal-app] .form-row input[type=number],
body[data-portal-app] .form-row select,
body[data-portal-app] .form-row textarea{
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:3px; padding:9px 12px; color:var(--paper);
  font-family:"Space Grotesk",sans-serif; font-size:13px;
  outline:none;
}
body[data-portal-app] .form-row input:focus,
body[data-portal-app] .form-row textarea:focus,
body[data-portal-app] .form-row select:focus{ border-color:var(--cyan); }
body[data-portal-app] .form-row .hint{ font-size:11px; color:var(--muted) }

body[data-portal-app] .flash{
  padding:10px 14px; margin-bottom:18px; border-radius:3px;
  border:1px solid var(--line); background:var(--ink-2); color:var(--paper-2);
  font-size:12.5px;
}
body[data-portal-app] .flash.ok{ border-color:rgba(60,203,142,.4); background:rgba(60,203,142,.06); color:#bff1da }
body[data-portal-app] .flash.warn{ border-color:rgba(240,178,58,.4); background:rgba(240,178,58,.06); color:#f6dfae }
body[data-portal-app] .flash.err{ border-color:rgba(255,107,107,.4); background:rgba(255,107,107,.06); color:#ffd5d5 }

/* ── Responsive ────────────────────────────────────── */
@media (max-width:1100px){
  body[data-portal-app] .app{grid-template-columns:64px 1fr}
  body[data-portal-app] .sidebar .sb-account .meta,
  body[data-portal-app] .sidebar .sb-h,
  body[data-portal-app] .sb-link span:not(.badge),
  body[data-portal-app] .sb-foot{display:none}
  body[data-portal-app] .sb-link{justify-content:center; padding:8px}
  body[data-portal-app] .kpi-strip{grid-template-columns:repeat(2,1fr)}
  body[data-portal-app] .kpi{border-bottom:1px solid var(--line)}
  body[data-portal-app] .grid-12 > *{grid-column:span 12}
}

/* Hamburger hidden by default; shown only inside the ≤768px block */
body[data-portal-app] .tb-hamburger{display:none}

/* ── Mobile (≤ 768px): full-width layout, drawer sidebar ── */
@media (max-width:768px){
  /* App grid: sidebar removed from flow */
  body[data-portal-app] .app{grid-template-columns:1fr}

  /* Sidebar becomes a fixed off-screen drawer */
  body[data-portal-app] .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:200;
    width:240px;
    transform:translateX(-100%);
    transition:transform 0.22s ease;
    /* Restore text labels hidden by the 1100px rule */
    display:flex !important;
  }
  /* Momentum scroll on iOS so all 40+ nav items are reachable */
  body[data-portal-app] .sb-nav{
    -webkit-overflow-scrolling:touch;
    overflow-y:auto;
  }
  body[data-portal-app] .sidebar .sb-account .meta,
  body[data-portal-app] .sidebar .sb-h,
  body[data-portal-app] .sb-link span:not(.badge),
  body[data-portal-app] .sb-foot{display:flex}
  body[data-portal-app] .sidebar .sb-h,
  body[data-portal-app] .sb-foot{display:block}
  body[data-portal-app] .sidebar .sb-account .meta{display:block}
  body[data-portal-app] .sidebar .sb-link span:not(.badge){display:inline}
  body[data-portal-app] .sb-link{justify-content:flex-start; padding:8px 10px}

  /* Sidebar open — slide in + overlay */
  body[data-portal-app] .app.sidebar-open .sidebar{transform:translateX(0)}
  body[data-portal-app] .app.sidebar-open::before{
    content:''; position:fixed; inset:0; z-index:199;
    background:rgba(0,0,0,0.55);
  }

  /* Hamburger button — visible only inside this breakpoint */
  body[data-portal-app] .tb-hamburger{
    display:grid; place-items:center;
    width:34px; height:34px; border-radius:4px;
    background:transparent; border:none; cursor:pointer;
    color:var(--paper-2); padding:0; flex-shrink:0;
  }
  body[data-portal-app] .tb-hamburger:hover{background:var(--ink-2); color:var(--paper)}

  /* Topbar: tighter padding, hide search box */
  body[data-portal-app] .main .topbar{padding:0 10px; gap:4px}
  body[data-portal-app] .tb-search{display:none}

  /* Content: reduce padding */
  body[data-portal-app] .content{padding:16px 14px 32px}

  /* Tables: horizontal scroll within panel */
  body[data-portal-app] .panel{overflow:visible}
  body[data-portal-app] .panel-body{overflow-x:auto; -webkit-overflow-scrolling:touch}
  body[data-portal-app] .panel-body.flush{overflow-x:auto}
  body[data-portal-app] table.dt{min-width:480px}

  /* KPI strip: 2-up then scrollable */
  body[data-portal-app] .kpi-strip{
    grid-template-columns:repeat(2,1fr);
    overflow-x:auto;
  }
  body[data-portal-app] .kpi{border-bottom:1px solid var(--line)}

  /* Page head: single column */
  body[data-portal-app] .page-head{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* Grid: stack all columns */
  body[data-portal-app] .grid-2,
  body[data-portal-app] .grid-3{grid-template-columns:1fr}
  body[data-portal-app] .grid-12 > *{grid-column:span 12}

  /* Crumb: allow overflow truncation */
  body[data-portal-app] .crumb{
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    min-width:0; flex:1;
  }
}

/* ============================================================
   Light-mode overrides
   ----------------------------------------------------------------
   The dark-first stylesheet sprays a lot of hardcoded `rgba(0,0,0,…)`
   backgrounds and surfaces tinted with literal hex codes. `var(--paper)`
   swaps to dark text under [data-theme="light"], which means any of those
   hardcoded-dark surfaces become "dark text on dark fill" — invisible.
   These rules retarget every dark-tinted surface to a light equivalent
   so the existing markup works without touching individual views.
   ============================================================ */

:root[data-theme="light"] .portal-card{
  background:linear-gradient(180deg, #FFFFFF, #F4F6F9);
  box-shadow:0 8px 28px rgba(15,23,42,.08);
}

:root[data-theme="light"] .portal-form input[type="text"],
:root[data-theme="light"] .portal-form input[type="email"],
:root[data-theme="light"] .portal-form input[type="password"],
:root[data-theme="light"] .portal-form input[type="tel"],
:root[data-theme="light"] .portal-form input[type="number"],
:root[data-theme="light"] .portal-form select,
:root[data-theme="light"] .portal-form textarea{
  background:#FFFFFF;
  border-color:var(--line);
  color:var(--paper);
}
:root[data-theme="light"] .portal-form input:focus,
:root[data-theme="light"] .portal-form select:focus,
:root[data-theme="light"] .portal-form textarea:focus{
  background:#FFFFFF;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(25,167,224,.12);
}
:root[data-theme="light"] .portal-form input[readonly]{
  background:#F1F4F8;
  color:var(--paper-2);
}

:root[data-theme="light"] .recovery-codes{
  background:#F4F6F9;
  border-color:var(--line-2);
  color:var(--paper);
}

:root[data-theme="light"] .dashboard-card{
  background:#FFFFFF;
  border-color:var(--line);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

:root[data-theme="light"] .contacts-table th{
  background:#F1F4F8;
}

/* Search box in the topbar (uses --ink-2 which is white in light mode,
   but its inner input has no explicit theme rule). */
:root[data-theme="light"] body[data-portal-app] .tb-search{
  background:#F1F4F8;
  border:1px solid var(--line);
}
:root[data-theme="light"] body[data-portal-app] .tb-search input{
  color:var(--paper);
  background:transparent;
}
:root[data-theme="light"] body[data-portal-app] .tb-search input::placeholder{
  color:var(--muted);
}

/* Generic .input/.select/.textarea used outside .portal-form (page-edit
   modal, admin filters, etc. when rendered on portal pages). */
:root[data-theme="light"] body[data-portal-app] input[type="text"],
:root[data-theme="light"] body[data-portal-app] input[type="email"],
:root[data-theme="light"] body[data-portal-app] input[type="password"],
:root[data-theme="light"] body[data-portal-app] input[type="search"],
:root[data-theme="light"] body[data-portal-app] input[type="number"],
:root[data-theme="light"] body[data-portal-app] input[type="url"],
:root[data-theme="light"] body[data-portal-app] input[type="tel"],
:root[data-theme="light"] body[data-portal-app] select,
:root[data-theme="light"] body[data-portal-app] textarea{
  color:var(--paper);
}

/* Flash banners — were dark-amber / dark-red text on dark-tint bgs;
   swap to darker text on the same tinted background so contrast holds
   in light mode too. */
:root[data-theme="light"] body[data-portal-app] .flash.ok   { color:#0d6e3d; }
:root[data-theme="light"] body[data-portal-app] .flash.warn { color:#8a5a00; }
:root[data-theme="light"] body[data-portal-app] .flash.err  { color:#a4161a; }

/* Table row hover already uses semi-transparent cyan — works on both
   themes — but the table header `--muted` text can be tweaked for
   light-mode readability against a white panel. No-op for now;
   `--muted` is intentionally identical across themes. */

/* ── Radio schedule grid ─────────────────────────────────────────────────── */
body[data-portal-app] .radio-sched-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-2);
  border-radius:8px;
  margin-bottom:18px;
}
body[data-portal-app] .radio-sched-table{
  border-collapse:collapse;
  table-layout:fixed;
  font-size:11px;
  min-width:700px;
  width:100%;
}
body[data-portal-app] .radio-sched-table th,
body[data-portal-app] .radio-sched-table td{
  border:1px solid rgba(255,255,255,0.06);
  padding:0;
  text-align:center;
  vertical-align:middle;
}
body[data-portal-app] .radio-sched-table thead th{
  background:rgba(255,255,255,0.04);
  padding:6px 4px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--paper-2,#9fb0c0);
  position:sticky;
  top:0;
  z-index:2;
}
body[data-portal-app] .radio-sched-table .radio-sched-time{
  width:46px;
  font-size:10px;
  color:var(--paper-2,#9fb0c0);
  background:rgba(255,255,255,0.02);
  padding:2px 4px;
  white-space:nowrap;
  font-family:"JetBrains Mono",ui-monospace,monospace;
}
body[data-portal-app] .radio-sched-cell{
  width:calc((100% - 46px) / 7);
  height:20px;
  cursor:crosshair;
  background:transparent;
  transition:background 0.08s;
}
body[data-portal-app] .radio-sched-cell:hover{
  background:rgba(93,211,255,0.12);
}
body[data-portal-app] .radio-sched-cell.is-painted{
  cursor:pointer;
}
body[data-portal-app] .radio-sched-cell.is-selected{
  outline:2px solid var(--cyan,#5dd9ff);
  outline-offset:-2px;
  z-index:1;
  position:relative;
}
/* Palette */
body[data-portal-app] .radio-sched-palette{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
  align-items:center;
}
body[data-portal-app] .radio-sched-palette .sched-pl-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:6px;
  border:2px solid transparent;
  background:rgba(255,255,255,0.05);
  color:var(--paper-2,#9fb0c0);
  font-size:12px;
  cursor:pointer;
  transition:border-color 0.12s,background 0.12s;
}
body[data-portal-app] .radio-sched-palette .sched-pl-btn:hover{
  background:rgba(255,255,255,0.09);
}
body[data-portal-app] .radio-sched-palette .sched-pl-btn.active{
  border-color:var(--cyan,#5dd9ff);
  color:var(--paper,#e6edf3);
}
body[data-portal-app] .radio-sched-palette .sched-pl-swatch{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:3px;
  flex:none;
}
body[data-portal-app] .radio-sched-palette .sched-erase-btn{
  padding:5px 10px;
  border-radius:6px;
  border:2px solid transparent;
  background:rgba(255,255,255,0.05);
  color:#f87171;
  font-size:12px;
  cursor:pointer;
}
body[data-portal-app] .radio-sched-palette .sched-erase-btn.active{
  border-color:#f87171;
}
/* Per-block detail panel */
body[data-portal-app] .radio-sched-detail{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line-2,rgba(255,255,255,0.10));
  border-radius:8px;
  padding:16px 18px;
  margin-bottom:14px;
  font-size:13px;
}
body[data-portal-app] .radio-sched-detail h4{
  margin:0 0 12px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--paper-2,#9fb0c0);
}
body[data-portal-app] .radio-sched-detail label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  margin-bottom:8px;
  color:var(--paper,#e6edf3);
}
body[data-portal-app] .radio-sched-detail select,
body[data-portal-app] .radio-sched-detail input[type="number"],
body[data-portal-app] .radio-sched-detail input[type="text"]{
  padding:5px 8px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05);
  color:var(--paper,#e6edf3);
  font-size:12px;
}
body[data-portal-app] .radio-sched-detail .sched-rotation-fields{
  padding-left:22px;
  margin-top:6px;
}
body[data-portal-app] .radio-sched-detail .sched-rotation-fields label{
  font-size:12px;
  color:var(--paper-2,#9fb0c0);
}
body[data-portal-app] .radio-sched-detail .sched-close-btn{
  float:right;
  background:none;
  border:none;
  color:var(--paper-2,#9fb0c0);
  font-size:16px;
  cursor:pointer;
  line-height:1;
  padding:0 2px;
}
body[data-portal-app] .radio-sched-detail .sched-close-btn:hover{
  color:var(--paper,#e6edf3);
}
/* Light-mode adjustments */
:root[data-theme="light"] body[data-portal-app] .radio-sched-table thead th{
  background:rgba(0,0,0,0.04);
  color:var(--paper-2,#4a5568);
}
:root[data-theme="light"] body[data-portal-app] .radio-sched-table th,
:root[data-theme="light"] body[data-portal-app] .radio-sched-table td{
  border-color:rgba(0,0,0,0.08);
}
:root[data-theme="light"] body[data-portal-app] .radio-sched-time{
  background:rgba(0,0,0,0.02);
  color:var(--paper-2,#4a5568);
}
:root[data-theme="light"] body[data-portal-app] .radio-sched-detail{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.12);
}
:root[data-theme="light"] body[data-portal-app] .radio-sched-palette .sched-pl-btn{
  background:rgba(0,0,0,0.05);
}

/* ── Radio station detail — tab scaffold (D1) ──────────────────────────────
 * No-JS fallback: all .radio-tab-section elements are visible by default.
 * When radio-tabs.js loads it adds `has-js` to <html>; only then do we hide
 * inactive sections and show the nav bar.
 * ────────────────────────────────────────────────────────────────────────── */

/* Tab nav — hidden until JS confirms it works */
body[data-portal-app] .radio-tab-nav{
  display:none;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding-bottom:0;
}
html.has-js body[data-portal-app] .radio-tab-nav{
  display:flex;
}

body[data-portal-app] .radio-tab-nav__btn{
  position:relative;
  display:inline-block;
  padding:8px 16px;
  font-size:13px;
  font-weight:500;
  color:var(--paper-2,#9fb0c0);
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  border-radius:6px 6px 0 0;
  cursor:pointer;
  white-space:nowrap;
  transition:color 0.15s, border-color 0.15s, background 0.15s;
  margin-bottom:-1px; /* sit on the border-bottom of the nav */
  line-height:1.4;
}
body[data-portal-app] .radio-tab-nav__btn:hover{
  color:var(--paper,#e6edf3);
  background:rgba(255,255,255,0.05);
}
body[data-portal-app] .radio-tab-nav__btn.is-active{
  color:var(--paper,#e6edf3);
  border-bottom-color:var(--cyan-2,#57d9a3);
  background:rgba(255,255,255,0.03);
}

/* Tab sections — all visible without JS; hidden by JS via is-active toggle */
body[data-portal-app] .radio-tab-section{
  display:block;
}
html.has-js body[data-portal-app] .radio-tab-section{
  display:none;
}
html.has-js body[data-portal-app] .radio-tab-section.is-active{
  display:block;
}

/* Light-mode adjustments */
:root[data-theme="light"] body[data-portal-app] .radio-tab-nav{
  border-bottom-color:rgba(0,0,0,0.10);
}
:root[data-theme="light"] body[data-portal-app] .radio-tab-nav__btn{
  color:var(--paper-2,#4a5568);
}
:root[data-theme="light"] body[data-portal-app] .radio-tab-nav__btn:hover{
  color:var(--paper,#1a202c);
  background:rgba(0,0,0,0.04);
}
:root[data-theme="light"] body[data-portal-app] .radio-tab-nav__btn.is-active{
  color:var(--paper,#1a202c);
  border-bottom-color:var(--cyan-2,#38a169);
  background:rgba(0,0,0,0.02);
}

/* ── Radio station detail — Overview hero (D2) ─────────────────────────────
 * .radio-hero          full-width hero card inside the Overview tab
 * .radio-onair-badge   live/AutoDJ/off-air pill badge (data-state drives colour)
 * .radio-sparkline     inline SVG listener trend
 * ────────────────────────────────────────────────────────────────────────── */

body[data-portal-app] .radio-hero{
  background:var(--ink-4,#141C28);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:14px;
  padding:24px;
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* ── Hero top row: badge + now-playing ─────────────────────────── */
body[data-portal-app] .radio-hero__top{
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}
body[data-portal-app] .radio-hero__badge-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  flex:none;
  min-width:90px;
}

/* On-air badge */
body[data-portal-app] .radio-onair-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.07em;
  white-space:nowrap;
  /* default = off-air */
  background:rgba(100,116,139,0.12);
  border:1px solid rgba(100,116,139,0.35);
  color:var(--paper-3,#9AA6B4);
  transition:background 0.25s,border-color 0.25s,color 0.25s;
}
body[data-portal-app] .radio-onair-badge__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  flex:none;
  background:currentColor;
}
/* AutoDJ */
body[data-portal-app] .radio-onair-badge[data-state="autodj"]{
  background:rgba(87,217,163,0.10);
  border-color:rgba(87,217,163,0.35);
  color:var(--cyan-2,#57d9a3);
}
/* LIVE — animated pulse dot */
body[data-portal-app] .radio-onair-badge[data-state="live"]{
  background:rgba(239,68,68,0.14);
  border-color:rgba(239,68,68,0.45);
  color:#f87171;
}
body[data-portal-app] .radio-onair-badge[data-state="live"] .radio-onair-badge__dot{
  animation:radio-pulse 1.4s ease-in-out infinite;
}
@keyframes radio-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%     { opacity:.5; transform:scale(0.75); }
}

/* Live-DJ secondary indicator */
body[data-portal-app] .radio-live-indicator{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:600;
  color:#f87171;
  letter-spacing:0.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
body[data-portal-app] .radio-live-indicator--hidden{
  display:none;
}
body[data-portal-app] .radio-live-indicator__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#f87171;
  flex:none;
  animation:radio-pulse 1.2s ease-in-out infinite;
}

/* Now-playing block */
body[data-portal-app] .radio-hero__nowplaying{
  flex:1;
  min-width:0;
  padding:12px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;
}
body[data-portal-app] .radio-hero__np-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--paper-3,#9AA6B4);
  margin-bottom:5px;
}
body[data-portal-app] .radio-hero__np-title{
  font-size:16px;
  font-weight:600;
  color:var(--paper,#e6edf3);
  word-break:break-word;
  line-height:1.3;
}
body[data-portal-app] .radio-hero__np-title--empty{
  color:var(--paper-3,#9AA6B4);
  font-weight:400;
}
body[data-portal-app] .radio-hero__np-artist{
  font-size:13px;
  color:var(--paper-2,#9fb0c0);
  margin-top:3px;
}

/* ── Stat tiles row ────────────────────────────────────────────── */
body[data-portal-app] .radio-hero__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@media(max-width:640px){
  body[data-portal-app] .radio-hero__stats{
    grid-template-columns:repeat(2,1fr);
  }
}
body[data-portal-app] .radio-hero__stat{
  background:rgba(87,217,163,0.05);
  border:1px solid rgba(87,217,163,0.12);
  border-radius:10px;
  padding:14px 16px;
}
body[data-portal-app] .radio-hero__stat-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--paper-3,#9AA6B4);
  margin-bottom:6px;
}
body[data-portal-app] .radio-hero__stat-value{
  font-size:20px;
  font-weight:600;
  color:var(--paper,#e6edf3);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}

/* ── Sparkline ─────────────────────────────────────────────────── */
body[data-portal-app] .radio-hero__sparkline-wrap{
  position:relative;
}
body[data-portal-app] .radio-hero__sparkline-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--paper-3,#9AA6B4);
  margin-bottom:8px;
}
body[data-portal-app] .radio-sparkline{
  display:block;
  width:100%;
  height:80px;
  overflow:visible;
}
body[data-portal-app] .radio-sparkline__line{
  fill:none;
  stroke:var(--cyan-2,#57d9a3);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
body[data-portal-app] .radio-sparkline__fill{
  fill:rgba(87,217,163,0.10);
  stroke:none;
}
body[data-portal-app] .radio-sparkline__empty{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:12px;
  color:var(--paper-3,#9AA6B4);
  pointer-events:none;
}

/* ── Controls row: AutoDJ + connection summary ─────────────────── */
body[data-portal-app] .radio-hero__controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  flex-wrap:wrap;
}
@media(max-width:600px){
  body[data-portal-app] .radio-hero__controls{
    grid-template-columns:1fr;
  }
}
body[data-portal-app] .radio-hero__autodj,
body[data-portal-app] .radio-hero__connection{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:14px 16px;
}
body[data-portal-app] .radio-hero__control-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--paper-3,#9AA6B4);
  margin-bottom:10px;
}

/* ── Recently played ───────────────────────────────────────────── */
body[data-portal-app] .radio-hero__recent{
  border-top:1px solid rgba(255,255,255,0.07);
  padding-top:16px;
}
body[data-portal-app] .radio-recent-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
body[data-portal-app] .radio-recent-track{
  font-size:12px;
  color:var(--paper-2,#9fb0c0);
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
body[data-portal-app] .radio-recent-track:last-child{
  border-bottom:none;
}
body[data-portal-app] .radio-recent-track__title{
  color:var(--paper,#e6edf3);
  font-weight:500;
}
body[data-portal-app] .radio-recent-track__sep{
  color:var(--paper-3,#9AA6B4);
}
body[data-portal-app] .radio-recent-track__artist{
  color:var(--paper-2,#9fb0c0);
}

/* ── Light-mode adjustments ────────────────────────────────────── */
:root[data-theme="light"] body[data-portal-app] .radio-hero{
  background:rgba(0,0,0,0.02);
  border-color:rgba(0,0,0,0.09);
}
:root[data-theme="light"] body[data-portal-app] .radio-hero__nowplaying{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.09);
}
:root[data-theme="light"] body[data-portal-app] .radio-hero__stat{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,120,80,0.15);
}
:root[data-theme="light"] body[data-portal-app] .radio-onair-badge{
  background:rgba(0,0,0,0.06);
  border-color:rgba(0,0,0,0.18);
  color:var(--paper-2,#4a5568);
}
:root[data-theme="light"] body[data-portal-app] .radio-onair-badge[data-state="autodj"]{
  background:rgba(0,120,80,0.08);
  border-color:rgba(0,120,80,0.30);
  color:#1a7a50;
}
:root[data-theme="light"] body[data-portal-app] .radio-onair-badge[data-state="live"]{
  background:rgba(200,30,30,0.08);
  border-color:rgba(200,30,30,0.35);
  color:#c01f1f;
}
:root[data-theme="light"] body[data-portal-app] .radio-live-indicator{
  color:#c01f1f;
}
:root[data-theme="light"] body[data-portal-app] .radio-live-indicator__dot{
  background:#c01f1f;
}
:root[data-theme="light"] body[data-portal-app] .radio-sparkline__line{
  stroke:var(--cyan-2,#38a169);
}
:root[data-theme="light"] body[data-portal-app] .radio-sparkline__fill{
  fill:rgba(0,120,80,0.08);
}
:root[data-theme="light"] body[data-portal-app] .radio-hero__autodj,
:root[data-theme="light"] body[data-portal-app] .radio-hero__connection{
  background:rgba(0,0,0,0.02);
  border-color:rgba(0,0,0,0.08);
}
:root[data-theme="light"] body[data-portal-app] .radio-hero__recent{
  border-top-color:rgba(0,0,0,0.08);
}
:root[data-theme="light"] body[data-portal-app] .radio-recent-track{
  border-bottom-color:rgba(0,0,0,0.07);
}