/* Shared admin sidebar — injected by sidebar.js into every admin page so
   navigation is always visible and consistent (single source, not copied
   into each page).

   2026-07-13 visual redesign (Varun, "ui ux rich kr diya, professional look
   lagna chahiye, world class RA OS ka"): this is the single highest-leverage
   file for the admin visual pass, since it touches every admin page at once.
   Extends the SAME token system every admin page's own <style> already
   defines (--bg/--panel/--panel-2/--border/--ink/--ink-dim/--accent/etc.,
   confirmed via theme.js's own LIGHT override map before touching anything)
   via the existing var(--name, <fallback>) convention already used
   throughout this file — no new :root block was added here (this file has
   no <style> of its own to declare one in), and no existing variable name
   was renamed. Two new, purely-decorative fallback values are introduced
   this pass, following the exact pattern the client-portal redesign used
   (radius-lg / shadow-card): var(--radius-lg, 14px) and the two-layer
   shadow used below — both fall back cleanly on every existing admin page,
   and pick up a page's own --radius-lg/--shadow-card automatically if one
   is ever added to that page's :root. */
body.admin-has-sidebar { display: flex; min-height: 100vh; margin: 0; padding: 0 !important; }

.admin-sidebar {
  width: 226px; min-width: 226px; background: var(--panel, #11151D);
  border-right: 1px solid var(--border, #232838); padding: 16px 10px 14px;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  transition: width .15s ease, min-width .15s ease, padding .15s ease;
  /* Subtle depth against the page's own background — the same restrained
     two-layer shadow language as the client-portal cards (--shadow-card),
     scaled down and applied edge-on since this is a vertical panel, not a
     floating card. Decorative only; never affects layout. */
  box-shadow: 3px 0 20px -14px rgba(0,0,0,.6);
}
.admin-sidebar.collapsed { width: 40px; min-width: 40px; padding: 14px 4px; align-items: center; }
.admin-sidebar.collapsed .admin-sidebar-brand,
.admin-sidebar.collapsed .nav-item,
.admin-sidebar.collapsed .nav-group-label,
.admin-sidebar.collapsed .admin-sidebar-footer { display: none; }
/* A small anchor mark shown ONLY in the collapsed rail, so a fully-collapsed
   sidebar still reads as "this is RA OS", not an unlabeled stray arrow. */
.admin-sidebar-mark { display: none; }
.admin-sidebar.collapsed .admin-sidebar-mark {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; margin-bottom: 10px;
  background: rgba(63,169,245,.14); color: var(--accent, #3FA9F5);
  font-weight: 800; font-size: 11px; letter-spacing: -.02em; flex: none;
}
@media (prefers-reduced-motion: reduce) { .admin-sidebar { transition: none; } }

/* Visible scrollbar (2026-07-29, Varun: "bina mouse ke scroll hai ya nahi pata
   nahi chalta, side mein kuch dikhna chahiye") — the earlier version used the
   same near-invisible --border color as the thumb, so a trackpad/touch user
   had no visual cue the 25+-item nav list even scrolls. Now uses the accent
   color at partial opacity (full on hover) and a slightly wider 8px track so
   it reads clearly against the dark panel while staying unobtrusive. Firefox/
   other browsers get the equivalent via scrollbar-width/scrollbar-color. */
.admin-sidebar { scrollbar-width: thin; scrollbar-color: var(--accent, #3FA9F5) transparent; }
.admin-sidebar::-webkit-scrollbar { width: 8px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent, #3FA9F5) 55%, transparent); border-radius: 4px; }
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent, #3FA9F5); }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }

.admin-sidebar-toggle {
  align-self: flex-end; background: none; border: 1px solid transparent; color: var(--ink-dim, #8B93A7);
  cursor: pointer; font-size: 13px; padding: 5px 9px; margin-bottom: 10px; border-radius: 7px;
  font-family: system-ui, sans-serif; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.admin-sidebar.collapsed .admin-sidebar-toggle { align-self: center; }
.admin-sidebar-toggle:hover { background: var(--panel-2, #161B25); color: var(--ink, #E7EAF0); border-color: var(--border, #232838); }
.admin-sidebar-toggle:focus-visible { outline: 2px solid var(--accent, #3FA9F5); outline-offset: 2px; }

/* Brand — a wordmark + a small "Admin Console" tagline instead of a single
   bare label, so the sidebar has a genuine typographic top-of-hierarchy
   moment (matches the client dashboard's own h1/sub pairing convention). */
.admin-sidebar-brand {
  padding: 6px 8px 16px; border-bottom: 1px solid var(--border, #232838); margin-bottom: 12px;
}
.admin-sidebar-brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-sidebar-logo {
  font-family: system-ui, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.01em;
  color: var(--ink, #E7EAF0);
}
.admin-sidebar-logo-accent { color: var(--accent, #3FA9F5); }
.admin-sidebar-tagline {
  font-family: system-ui, sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-dim, #8B93A7);
}

/* Global client search (2026-07-23) — one shared search box injected here
   since sidebar.js already runs on all 28 admin pages; hidden entirely when
   collapsed (same as brand/nav-group-label) since there's no room for it. */
.admin-sidebar-search { position: relative; padding: 0 8px 14px; margin-bottom: 4px; }
.admin-sidebar.collapsed .admin-sidebar-search { display: none; }
.admin-sidebar-search-input {
  width: 100%; box-sizing: border-box; background: var(--panel-2, #161B25);
  border: 1px solid var(--border, #232838); border-radius: var(--radius-md, 8px);
  color: var(--ink, #E7EAF0); font-size: 12.5px; font-family: system-ui, sans-serif;
  padding: 8px 10px; outline: none; transition: border-color .13s ease;
}
.admin-sidebar-search-input::placeholder { color: var(--ink-dim, #8B93A7); }
.admin-sidebar-search-input:focus { border-color: var(--accent, #3FA9F5); }
.admin-sidebar-search-results {
  display: none; position: absolute; left: 8px; right: 8px; top: calc(100% - 6px); z-index: 40;
  background: var(--panel, #11151D); border: 1px solid var(--border, #232838);
  border-radius: var(--radius-md, 8px); box-shadow: 0 10px 26px -10px rgba(0,0,0,.55);
  max-height: 320px; overflow-y: auto; padding: 5px;
}
.admin-sidebar-search-results.open { display: block; }
.admin-sidebar-search-empty {
  padding: 10px 8px; font-size: 12px; color: var(--ink-dim, #8B93A7); font-family: system-ui, sans-serif;
}
.admin-sidebar-search-row {
  display: block; padding: 7px 9px; border-radius: 6px; text-decoration: none;
  color: var(--ink, #E7EAF0); font-family: system-ui, sans-serif; margin-bottom: 2px;
}
.admin-sidebar-search-row:hover { background: var(--panel-2, #161B25); }
.admin-sidebar-search-row .asr-name { font-size: 13px; font-weight: 600; }
.admin-sidebar-search-row .asr-sub { font-size: 11px; color: var(--ink-dim, #8B93A7); margin-top: 2px; }

/* Section group headers — same "small accent bar before uppercase label"
   language as the client dashboard's own h2::before pattern (reused, not
   reinvented), giving the 25+ nav items real visual hierarchy instead of one
   undifferentiated list.
   2026-08-12 (Varun: "Overview Practice jo main tab ka title h wo bade font m
   dark bold m likho taki main tab kaun sa h wo dikhe") — enlarged from 10px to
   13px and switched from the dim --ink-dim color to the full --ink color, so
   each section heading reads as a clear, prominent title instead of a subtle
   label easy to miss while scrolling a long nav list. */
.nav-group-label {
  display: flex; align-items: center; gap: 7px; margin: 18px 10px 7px;
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink, #E7EAF0);
}
.nav-group-label::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--accent, #3FA9F5); opacity: .9; flex: none; }
.nav-group-label.first { margin-top: 2px; }

/* Nav items — 2026-07-15 clarity pass (Varun: "confusion hota, clarity nahi
   lagti, thoda bold, clear hover, active tab rich"). Resting text is now the
   full --ink color at ~78% opacity + weight 600, so every tab reads as a clear
   label rather than a dim grey afterthought (the old --ink-dim resting color
   was the root of the "no clarity" feel). Hover and active brighten to full
   opacity. --ink is theme-driven (theme.js overrides it in light mode), so this
   stays legible in both themes. */
.admin-sidebar .nav-item {
  display: block; position: relative; padding: 9px 12px; border-radius: var(--radius-md, 8px);
  color: var(--ink, #E7EAF0); opacity: .78; text-decoration: none; font-size: 13.5px; font-weight: 600;
  /* 2026-08-12 (Varun: "small tabs ko italic m krdo") — every individual nav
     item (smaller than the now-enlarged bold group headers above) is italic,
     so the two levels of the sidebar hierarchy read differently at a glance. */
  font-style: italic;
  letter-spacing: -.005em; margin-bottom: 3px; font-family: system-ui, sans-serif;
  box-shadow: inset 3px 0 0 0 transparent;
  transition: background-color .13s ease, color .13s ease, box-shadow .13s ease, opacity .13s ease;
}
/* Clear, unmistakable hover — full-opacity text, a filled row, and a left
   accent stripe that animates in so the pointer target is never ambiguous. */
.admin-sidebar .nav-item:hover {
  background: var(--panel-2, #161B25); color: var(--ink, #E7EAF0); opacity: 1;
  box-shadow: inset 3px 0 0 0 var(--accent, #3FA9F5);
}
.admin-sidebar .nav-item:focus-visible { outline: 2px solid var(--accent, #3FA9F5); outline-offset: -2px; opacity: 1; }

/* Per-section item color coding (2026-08-12, Varun: "other tabs ko har tab
   alag2 colors m krdo taki clarity ke sath dikhe") — each nav group gets its
   own distinct hue on its items' resting + hover text/stripe, keyed off the
   data-raos-group attribute sidebar.js now stamps on every <a>, so which
   section is being viewed reads at a glance while scrolling a 30+-item list.
   Deliberately does NOT touch .nav-item.active below (a different signal —
   "current page", not "which section" — stays the universal solid accent-blue
   block for maximum contrast regardless of section); .active is defined AFTER
   this block so it still wins at equal CSS specificity. */
.admin-sidebar .nav-item[data-raos-group="Overview"] { color: #3FA9F5; }
.admin-sidebar .nav-item[data-raos-group="Overview"]:hover { color: #3FA9F5; box-shadow: inset 3px 0 0 0 #3FA9F5; }
.admin-sidebar .nav-item[data-raos-group="Practice"] { color: #2ECC71; }
.admin-sidebar .nav-item[data-raos-group="Practice"]:hover { color: #2ECC71; box-shadow: inset 3px 0 0 0 #2ECC71; }
.admin-sidebar .nav-item[data-raos-group="Compliance"] { color: #E67E22; }
.admin-sidebar .nav-item[data-raos-group="Compliance"]:hover { color: #E67E22; box-shadow: inset 3px 0 0 0 #E67E22; }
.admin-sidebar .nav-item[data-raos-group="Communication"] { color: #B26BD1; }
.admin-sidebar .nav-item[data-raos-group="Communication"]:hover { color: #B26BD1; box-shadow: inset 3px 0 0 0 #B26BD1; }
.admin-sidebar .nav-item[data-raos-group="Reports & Content"] { color: #E4C441; }
.admin-sidebar .nav-item[data-raos-group="Reports & Content"]:hover { color: #E4C441; box-shadow: inset 3px 0 0 0 #E4C441; }
.admin-sidebar .nav-item[data-raos-group="Platform (B2B)"] { color: #EC4899; }
.admin-sidebar .nav-item[data-raos-group="Platform (B2B)"]:hover { color: #EC4899; box-shadow: inset 3px 0 0 0 #EC4899; }
.admin-sidebar .nav-item[data-raos-group="Resources"] { color: #1ABC9C; }
.admin-sidebar .nav-item[data-raos-group="Resources"]:hover { color: #1ABC9C; box-shadow: inset 3px 0 0 0 #1ABC9C; }
.admin-sidebar .nav-item[data-raos-group="Team & Automation"] { color: #D9564B; }
.admin-sidebar .nav-item[data-raos-group="Team & Automation"]:hover { color: #D9564B; box-shadow: inset 3px 0 0 0 #D9564B; }
.admin-sidebar .nav-item[data-raos-group="Internal"] { color: #9AA5B1; }
.admin-sidebar .nav-item[data-raos-group="Internal"]:hover { color: #9AA5B1; box-shadow: inset 3px 0 0 0 #9AA5B1; }
/* Active page — 2026-07-13, Varun's explicit ask: the earlier subtle 14%-
   opacity tint + same-as-normal-text-color treatment read as unclear,
   especially in light theme (a pale blue wash against a light background is
   low-contrast). Switched to a SOLID accent-blue background + white text —
   this pairing keeps strong contrast regardless of which theme is active
   (a saturated color block with white text never depends on the
   surrounding theme's own palette), while staying on-brand (blue, not an
   alarming red that could read as an error/danger state instead of "this
   is the current page"). Left accent stripe kept as a secondary cue. */
.admin-sidebar .nav-item.active {
  background: var(--accent, #3FA9F5); color: #FFFFFF; font-weight: 700; opacity: 1;
  /* Richer than a flat block (Varun, 2026-07-15): a bright white inner
     top-edge highlight gives the row a lit, raised feel, and a soft accent-
     tinted outer glow lifts the current tab off the panel so "you are here"
     is unmistakable. Purely decorative — no layout impact. */
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.28),
    inset 3px 0 0 0 rgba(255,255,255,.55),
    0 6px 16px -6px rgba(63,169,245,.55);
}
.admin-sidebar .nav-item.active:hover { background: var(--accent, #3FA9F5); color: #FFFFFF; opacity: 1; filter: brightness(1.08); }
.admin-sidebar-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border, #232838); }
.admin-sidebar-footer button.nav-item,
.admin-sidebar-topbar button.nav-item {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
}
/* Sign out moved to the top (Varun, 2026-07-09) — the floating Q&A bot
   bubble sits bottom-left and was covering the old bottom-footer sign-out
   link, making it unreachable on some pages/screens. */
.admin-sidebar-topbar { padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border, #232838); }
.admin-sidebar.collapsed .admin-sidebar-topbar { display: none; }
.admin-main { flex: 1; min-width: 0; overflow-x: auto; }

/* "Refresh All Pages" self-heal bar (2026-07-27; moved into the sidebar
   2026-07-27 after Varun saw a screenshot of the earlier content-area
   placement — same final spot the sibling Rankpur/PXE CMS admin panels use:
   right below the brand/logo block, above Search/Sign out — see sidebar.js
   buildSidebar()). Lives in the sidebar's own 226px column, not the content
   area, so button + status stack VERTICALLY (not the old horizontal layout)
   to fit the narrower width. Never a floating/fixed overlay — a real in-flow
   sidebar element. Hidden only when the sidebar itself is collapsed to its
   narrow icon rail (same pattern as Search/Sign out below). */
.admin-fixbar {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 8px 14px; padding: 9px 9px 8px;
  border: 1px solid var(--border, #232838); border-radius: var(--radius-md, 8px);
  background: var(--panel-2, #161B25);
}
.admin-sidebar.collapsed .admin-fixbar { display: none; }
.admin-fixbar-btn {
  width: 100%; font-family: system-ui, sans-serif; font-size: 12px; font-weight: 700;
  padding: 7px 10px; border-radius: 6px; border: 1px solid var(--accent, #3FA9F5);
  background: none; color: var(--accent, #3FA9F5); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.admin-fixbar-btn:hover:not(:disabled) { background: var(--accent, #3FA9F5); color: #FFFFFF; }
.admin-fixbar-btn:disabled { opacity: .55; cursor: default; }
.admin-fixbar-status {
  font-family: system-ui, sans-serif; font-size: 10.5px; line-height: 1.4;
  color: var(--ink-dim, #8B93A7); word-break: break-word;
}
.admin-back-link {
  display: inline-block; font-size: 12px; color: var(--ink-dim, #8B93A7); text-decoration: none;
  margin-bottom: 10px; font-family: system-ui, sans-serif;
}
.admin-back-link:hover { color: var(--accent, #3FA9F5); }

/* Fixed bottom horizontal scrollbar (2026-08-13, Varun: "bottom pr scroller
   chahiye har page pr chahiye ra os m" — a horizontal scroller must always be
   reachable at the bottom of the VIEWPORT, on every admin page, without first
   scrolling all the way down through a long page to find a table's own
   scrollbar). Single source in sidebar.js/sidebar.css (same convention as
   every other shared admin-chrome piece in this file) — auto-attaches itself
   to whichever element on the current page is actually wide enough to need
   horizontal scrolling (a .table-scroll wrapper, or the page content itself),
   and hides completely when nothing on the page overflows. Fixed to the
   viewport bottom edge (not the content's own bottom) so it's reachable the
   instant a page loads, before any vertical scrolling. Sits above the sidebar
   in stacking order but never overlaps it (left offset tracks collapsed/
   expanded sidebar width). */
.admin-bottom-scrollbar {
  position: fixed; bottom: 0; left: 226px; right: 0; height: 14px; z-index: 55;
  overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  background: var(--panel-2, #161B25); border-top: 2px solid var(--accent, #3FA9F5);
  box-shadow: 0 -8px 18px -10px rgba(0,0,0,.55);
  transition: left .15s ease;
  display: none;
}
.admin-bottom-scrollbar.visible { display: block; }
.admin-bottom-scrollbar-inner { height: 1px; }
.admin-bottom-scrollbar::-webkit-scrollbar { height: 14px; }
.admin-bottom-scrollbar::-webkit-scrollbar-track { background: var(--panel-2, #161B25); }
.admin-bottom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--accent, #3FA9F5); border-radius: 7px; border: 3px solid var(--panel-2, #161B25);
}
.admin-bottom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--accent, #3FA9F5); filter: brightness(1.15); }

/* Shared sticky colored jump-nav (2026-08-14, Varun — "har page m jo tabs
   hote h wo top pr hona chahiye... attractive menu banao... colours ka
   use karo... organised karo, clarity se dikhna chahiye"). Extracted from
   settings.html's own proven .nav-pill system (built 2026-07-12/13, six
   theme-aware hues, already tuned for both light and dark) into this
   shared file so EVERY admin page can use the exact same attractive,
   colorful jump-menu with zero duplicated CSS — just add
   `<nav class="jump-nav"><a href="#section-id" class="nav-pill c1">Label</a>...</nav>`
   at the top of the page, cycling c1..c6. Any page that already defined
   its own .nav-pill/.report-nav locally (settings.html, reports.html)
   keeps working unchanged — CSS specificity/last-definition-wins is a
   non-issue here since the color VALUES are identical, this is purely
   making the same system available everywhere else too. */
.jump-nav{ position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; gap:8px;
  background:var(--bg); padding:10px 0 14px; margin-bottom:8px; border-bottom:1px solid var(--border); }
/* Any element a .jump-nav pill anchors to needs this so jumping to it
   doesn't tuck the heading right under the sticky nav bar. */
h2[id], div[id].card{ scroll-margin-top:70px; }
.nav-pill{ display:inline-flex; align-items:center; font-size:12px; font-weight:600; text-decoration:none;
  padding:6px 12px; border-radius:999px; white-space:nowrap; border:1px solid transparent;
  transition:filter .15s ease, transform .1s ease, background-color .15s ease, color .15s ease; }
.nav-pill:hover{ filter:brightness(1.18); transform:translateY(-1px); }
.nav-pill:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.nav-pill.c1{ background:rgba(63,169,245,.16); color:#7CC4FA; border-color:rgba(63,169,245,.35); }
.nav-pill.c2{ background:rgba(46,197,160,.16); color:#5FDDBB; border-color:rgba(46,197,160,.35); }
.nav-pill.c3{ background:rgba(229,166,75,.18); color:#F0BE72; border-color:rgba(229,166,75,.35); }
.nav-pill.c4{ background:rgba(155,126,222,.18); color:#BBA3EE; border-color:rgba(155,126,222,.35); }
.nav-pill.c5{ background:rgba(229,107,174,.18); color:#F096C6; border-color:rgba(229,107,174,.35); }
.nav-pill.c6{ background:rgba(79,209,229,.18); color:#8CE5F5; border-color:rgba(79,209,229,.35); }
.nav-pill.active{ background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (prefers-color-scheme: light){
  .nav-pill.c1{ background:rgba(15,111,191,.12); color:#0B4C82; border-color:rgba(15,111,191,.35); }
  .nav-pill.c2{ background:rgba(12,122,90,.12); color:#0A5C43; border-color:rgba(12,122,90,.35); }
  .nav-pill.c3{ background:rgba(138,96,10,.12); color:#6B4B08; border-color:rgba(138,96,10,.35); }
  .nav-pill.c4{ background:rgba(124,92,196,.16); color:#5A4292; border-color:rgba(124,92,196,.4); }
  .nav-pill.c5{ background:rgba(156,47,99,.12); color:#9C2F63; border-color:rgba(156,47,99,.35); }
  .nav-pill.c6{ background:rgba(14,130,150,.12); color:#0B5F6E; border-color:rgba(14,130,150,.35); }
}
:root[data-theme="light"] .nav-pill.c1{ background:rgba(15,111,191,.12); color:#0B4C82; border-color:rgba(15,111,191,.35); }
:root[data-theme="light"] .nav-pill.c2{ background:rgba(12,122,90,.12); color:#0A5C43; border-color:rgba(12,122,90,.35); }
:root[data-theme="light"] .nav-pill.c3{ background:rgba(138,96,10,.12); color:#6B4B08; border-color:rgba(138,96,10,.35); }
:root[data-theme="light"] .nav-pill.c4{ background:rgba(124,92,196,.16); color:#5A4292; border-color:rgba(124,92,196,.4); }
:root[data-theme="light"] .nav-pill.c5{ background:rgba(156,47,99,.12); color:#9C2F63; border-color:rgba(156,47,99,.35); }
:root[data-theme="light"] .nav-pill.c6{ background:rgba(14,130,150,.12); color:#0B5F6E; border-color:rgba(14,130,150,.35); }
:root[data-theme="dark"] .nav-pill.c1{ background:rgba(63,169,245,.16); color:#7CC4FA; border-color:rgba(63,169,245,.35); }
:root[data-theme="dark"] .nav-pill.c2{ background:rgba(46,197,160,.16); color:#5FDDBB; border-color:rgba(46,197,160,.35); }
:root[data-theme="dark"] .nav-pill.c3{ background:rgba(229,166,75,.18); color:#F0BE72; border-color:rgba(229,166,75,.35); }
:root[data-theme="dark"] .nav-pill.c4{ background:rgba(155,126,222,.18); color:#BBA3EE; border-color:rgba(155,126,222,.35); }
:root[data-theme="dark"] .nav-pill.c5{ background:rgba(229,107,174,.18); color:#F096C6; border-color:rgba(229,107,174,.35); }
:root[data-theme="dark"] .nav-pill.c6{ background:rgba(79,209,229,.18); color:#8CE5F5; border-color:rgba(79,209,229,.35); }

/* Colorized segmented-control tabs (2026-08-14, Varun — same "colours ka
   use karo" ask, applied to the OTHER tab pattern in this codebase: the
   .tabs/.tab segmented-control switcher (compliance.html, content-hub.html,
   educational-cms.html), which was fully monochrome — active state was
   just a flat panel-color swap, no color at all. Same six hues as
   .nav-pill above, reused as a per-tab active-state tint rather than a
   pill shape, so the existing compact segmented look is preserved. Add
   class="tab cN" (cycling c1..c6) to each button alongside the existing
   data-view attribute; inactive tabs show a faint tint so the whole bar
   reads as colorful at a glance, not just the active one. */
.tab.c1{ color:#5FA8DD; } .tab.c1.active{ background:rgba(63,169,245,.22); color:#7CC4FA; }
.tab.c2{ color:#4CB89C; } .tab.c2.active{ background:rgba(46,197,160,.22); color:#5FDDBB; }
.tab.c3{ color:#C99A50; } .tab.c3.active{ background:rgba(229,166,75,.24); color:#F0BE72; }
.tab.c4{ color:#A48FD0; } .tab.c4.active{ background:rgba(155,126,222,.24); color:#BBA3EE; }
.tab.c5{ color:#C97FA8; } .tab.c5.active{ background:rgba(229,107,174,.24); color:#F096C6; }
.tab.c6{ color:#5FBAC9; } .tab.c6.active{ background:rgba(79,209,229,.24); color:#8CE5F5; }
@media (prefers-color-scheme: light){
  .tab.c1{ color:#0B4C82; } .tab.c1.active{ background:rgba(15,111,191,.16); color:#0B4C82; }
  .tab.c2{ color:#0A5C43; } .tab.c2.active{ background:rgba(12,122,90,.16); color:#0A5C43; }
  .tab.c3{ color:#6B4B08; } .tab.c3.active{ background:rgba(138,96,10,.16); color:#6B4B08; }
  .tab.c4{ color:#5A4292; } .tab.c4.active{ background:rgba(124,92,196,.2); color:#5A4292; }
  .tab.c5{ color:#9C2F63; } .tab.c5.active{ background:rgba(156,47,99,.16); color:#9C2F63; }
  .tab.c6{ color:#0B5F6E; } .tab.c6.active{ background:rgba(14,130,150,.16); color:#0B5F6E; }
}
:root[data-theme="light"] .tab.c1{ color:#0B4C82; } :root[data-theme="light"] .tab.c1.active{ background:rgba(15,111,191,.16); color:#0B4C82; }
:root[data-theme="light"] .tab.c2{ color:#0A5C43; } :root[data-theme="light"] .tab.c2.active{ background:rgba(12,122,90,.16); color:#0A5C43; }
:root[data-theme="light"] .tab.c3{ color:#6B4B08; } :root[data-theme="light"] .tab.c3.active{ background:rgba(138,96,10,.16); color:#6B4B08; }
:root[data-theme="light"] .tab.c4{ color:#5A4292; } :root[data-theme="light"] .tab.c4.active{ background:rgba(124,92,196,.2); color:#5A4292; }
:root[data-theme="light"] .tab.c5{ color:#9C2F63; } :root[data-theme="light"] .tab.c5.active{ background:rgba(156,47,99,.16); color:#9C2F63; }
:root[data-theme="light"] .tab.c6{ color:#0B5F6E; } :root[data-theme="light"] .tab.c6.active{ background:rgba(14,130,150,.16); color:#0B5F6E; }
:root[data-theme="dark"] .tab.c1{ color:#5FA8DD; } :root[data-theme="dark"] .tab.c1.active{ background:rgba(63,169,245,.22); color:#7CC4FA; }
:root[data-theme="dark"] .tab.c2{ color:#4CB89C; } :root[data-theme="dark"] .tab.c2.active{ background:rgba(46,197,160,.22); color:#5FDDBB; }
:root[data-theme="dark"] .tab.c3{ color:#C99A50; } :root[data-theme="dark"] .tab.c3.active{ background:rgba(229,166,75,.24); color:#F0BE72; }
:root[data-theme="dark"] .tab.c4{ color:#A48FD0; } :root[data-theme="dark"] .tab.c4.active{ background:rgba(155,126,222,.24); color:#BBA3EE; }
:root[data-theme="dark"] .tab.c5{ color:#C97FA8; } :root[data-theme="dark"] .tab.c5.active{ background:rgba(229,107,174,.24); color:#F096C6; }
:root[data-theme="dark"] .tab.c6{ color:#5FBAC9; } :root[data-theme="dark"] .tab.c6.active{ background:rgba(79,209,229,.24); color:#8CE5F5; }
.admin-bottom-scrollbar { scrollbar-width: auto; scrollbar-color: var(--accent, #3FA9F5) var(--panel-2, #161B25); }