/* Copy Portal — shared section bar.
   Sits directly under each page's own topbar so all three pages read as one portal
   without duplicating the logo / user chip / sign-out chrome.
   Uses the shared Alsayegh tokens, with fallbacks so it renders correctly even on a
   page that has not declared them. */

.cshell{
  display:flex; align-items:center; gap:6px;
  padding:0 28px;
  background:var(--surface,#fff);
  border-bottom:1px solid var(--line,#dde3ea);
  overflow-x:auto; scrollbar-width:none;
  font-family:inherit;
}
.cshell::-webkit-scrollbar{ display:none }

.cshell-eyebrow{
  font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--text-m,#8a96a4);
  padding-right:14px; margin-right:6px;
  border-right:1px solid var(--line,#dde3ea);
  white-space:nowrap; flex-shrink:0;
}

.cshell-link{
  position:relative;
  padding:13px 18px;
  font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text-m,#8a96a4);
  text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.cshell-link:hover{ color:var(--ink,#15324f) }
.cshell-link.on{ color:var(--ink,#15324f); border-bottom-color:var(--accent,#13b6a6) }

/* Count/alert pill, e.g. items waiting in the email review queue */
.cshell-pill{
  display:inline-block; min-width:17px;
  margin-left:7px; padding:1px 6px;
  border-radius:9px;
  background:var(--danger,#d8553f); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:0; text-align:center;
}

.cshell-spacer{ flex:1 }

.cshell-note{
  font-size:11px; color:var(--text-m,#8a96a4);
  white-space:nowrap; padding-left:14px; flex-shrink:0;
}

/* Theme toggle — lives in the shell bar on every page */
.cshell-theme{
  flex-shrink:0; margin-left:10px;
  width:30px; height:26px; border-radius:999px;
  border:1px solid var(--line-2,#c8d1db); background:transparent;
  color:var(--text-m,#8a96a4); font-size:14px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .18s ease, border-color .18s ease;
}
.cshell-theme:hover{ color:var(--ink,#15324f); border-color:var(--ink,#15324f) }

@media (max-width:820px){
  .cshell{ padding:0 12px }
  .cshell-eyebrow{ display:none }
  .cshell-link{ padding:12px 12px; font-size:11px; letter-spacing:.8px }
  .cshell-note{ display:none }
}

/* ===================================================================
   DARK THEME  (opt-in via the toggle; persisted in localStorage)
   Higher specificity than each page's plain :root, so these override
   the light tokens on tasks.html, request.html AND index.html — all
   three link this file. Only structural tokens are flipped; brand
   (navy/primary/accent) and light "soft" badge backgrounds stay put.
   =================================================================== */
:root[data-theme="dark"]{
  --bg:#0e1620; --surface:#16202c; --surface-2:#1b2733;
  --ink:#e8eef5; --text:#aab6c4; --text-s:#9aa7b5; --text-m:#7d8b9a; --muted:#7d8b9a;
  --line:#26333f; --line-2:#33424f; --line-strong:#3a4a58;
  --card:#16202c; --border:#26333f; --border-light:#22303c;
  --sh:0 1px 3px rgba(0,0,0,.5); --sh-l:0 10px 30px rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 6px 20px rgba(0,0,0,.55);
  --shadow:0 1px 2px rgba(0,0,0,.45); --shadow-lg:0 6px 20px rgba(0,0,0,.55); --shadow-xl:0 12px 34px rgba(0,0,0,.6);
}