/* ==========================================================================
   Advizer theme "Aurora / Midnight" (owner decision 2026-11-06, palette C)
   - Light mode = Aurora Glass: soft violet / peach / mint aurora behind
     frosted white cards.
   - Dark mode  = Midnight Glass: deep navy with violet / orange / blue glows
     behind frosted cards; headline numbers and data bars glow softly orange.
   - Violet is the action colour (buttons, tabs, links, selection).
   - Orange (--rdr-highlight) is kept for DATA: bars, meters, KPI icons.
   - Cyan (--rdr-ai) marks AI content.
   - Warnings move to yellow so they never read as the orange highlight.

   Loaded after site.css (see _Layout.cshtml) and only overrides tokens plus
   a few shell rules, so removing this one <link> restores the old look.

   Why glass only on a whitelist of outer cards: every inner surface (sticky
   table headers, frozen columns, totals rows, dropdowns, modals) keeps an
   OPAQUE token, so scrolled rows never show through them. --rdr-card is the
   opaque colour that a glass card blends to, so inner and outer match.
   ========================================================================== */

:root {
  /* aurora backdrop */
  --rdr-aurora:
    radial-gradient(1200px 700px at 12% 6%, #e6deff 0%, transparent 60%),
    radial-gradient(1000px 700px at 90% 16%, #ffe4d2 0%, transparent 60%),
    radial-gradient(1100px 800px at 60% 100%, #ddf5ee 0%, transparent 60%),
    #f4f4fb;

  /* glass (outer cards only) */
  --rdr-glass: rgba(255,255,255,.62);
  --rdr-glass-border: rgba(255,255,255,.88);
  --rdr-glass-shadow: 0 1px 2px rgba(30,20,80,.04), 0 8px 28px rgba(76,64,160,.08);

  /* surfaces (opaque) */
  --rdr-bg: #f4f4fb;
  --rdr-card: #fcfcfe;
  --rdr-elevated: #ffffff;
  --rdr-surface-2: #f6f4fc;
  --rdr-surface-hover: #efecfa;
  --rdr-border: #e6e3f2;
  --rdr-border-hover: #cfc8f3;
  --rdr-topbar-bg: rgba(250,249,255,.66);
  --rdr-sidebar-bg: rgba(28,24,58,.94);
  --rdr-sidebar-solid: #1c183a;
  --rdr-sidebar-border: rgba(255,255,255,.08);

  /* text */
  --rdr-text: #1e2233;
  --rdr-text-secondary: #3a3f55;
  --rdr-text-muted: #6b7088;

  /* violet = action */
  --rdr-accent: #6d5ef5;
  --rdr-accent-hover: #5848e8;
  --rdr-accent-light: rgba(109,94,245,.12);
  --rdr-accent-ring: rgba(109,94,245,.28);
  --rdr-primary-50: #f0eeff;
  --rdr-primary-100: #e4e0ff;
  --rdr-primary-200: #cbc4fd;
  --rdr-primary-500: #8b7cff;
  --rdr-primary-600: #6d5ef5;
  --rdr-primary-700: #5848e8;
  --rdr-primary-800: #4636c9;

  /* orange = data highlight */
  --rdr-highlight: #ff7a1a;
  --rdr-highlight-strong: #ea580c;
  --rdr-highlight-light: rgba(255,122,26,.14);
  --rdr-highlight-glow: none;

  /* cyan = AI */
  --rdr-ai: #0891b2;
  --rdr-ai-light: rgba(8,145,178,.10);
  --rdr-ai-ring: rgba(8,145,178,.22);

  /* yellow warning (not orange) */
  --rdr-warning: #ca8a04;
  --rdr-warning-light: rgba(202,138,4,.12);
  --rdr-warning-text: #a16207;
  --rdr-warning-badge: #eab308;
  --rdr-warning-bg: #fefce8;

  /* design-system v2 aliases */
  --rdr-surface-canvas: #f4f4fb;
  --rdr-surface-card: #fcfcfe;
  --rdr-surface-subtle: #f6f4fc;
  --rdr-surface-hover-token: #efecfa;
  --rdr-border-subtle: #e6e3f2;
  --rdr-border-strong: #d4cfe8;
  --rdr-text-main: #1e2233;
  --rdr-text-muted-token: #6b7088;

  --rdr-shadow: 0 1px 2px rgba(30,20,80,.04), 0 6px 20px rgba(76,64,160,.06);
  --rdr-shadow-md: 0 4px 12px rgba(30,20,80,.08), 0 12px 40px rgba(76,64,160,.08);
  --rdr-shadow-hover: 0 8px 24px rgba(76,64,160,.12), 0 2px 6px rgba(30,20,80,.06);
}

:root[data-theme="dark"] {
  --rdr-aurora:
    radial-gradient(900px 600px at 15% 0%, rgba(124,92,255,.38) 0%, transparent 60%),
    radial-gradient(900px 700px at 95% 30%, rgba(255,138,61,.18) 0%, transparent 60%),
    radial-gradient(1000px 700px at 40% 100%, rgba(59,130,246,.17) 0%, transparent 60%),
    #0b1020;

  --rdr-glass: rgba(255,255,255,.055);
  --rdr-glass-border: rgba(255,255,255,.10);
  --rdr-glass-shadow: 0 8px 32px rgba(0,0,0,.32);

  --rdr-bg: #0b1020;
  --rdr-card: #171c2e;
  --rdr-elevated: #1a2034;
  --rdr-surface-2: #1c2236;
  --rdr-surface-hover: #232a40;
  --rdr-border: #262d45;
  --rdr-border-hover: #39415e;
  --rdr-topbar-bg: rgba(11,16,32,.6);
  --rdr-sidebar-bg: rgba(8,11,26,.86);
  --rdr-sidebar-solid: #0d1124;
  --rdr-sidebar-border: rgba(255,255,255,.07);

  --rdr-text: #e8ebf5;
  --rdr-text-secondary: #c3c8d8;
  --rdr-text-muted: #959db5;

  --rdr-accent: #8b7cff;
  --rdr-accent-hover: #a89cff;
  --rdr-accent-light: rgba(139,124,255,.16);
  --rdr-accent-ring: rgba(139,124,255,.32);
  --rdr-primary-50: rgba(139,124,255,.12);
  --rdr-primary-100: rgba(139,124,255,.22);
  --rdr-primary-200: rgba(167,139,250,.32);
  --rdr-primary-500: #a78bfa;
  --rdr-primary-600: #8b7cff;
  --rdr-primary-700: #7464f0;
  --rdr-primary-800: #5b4bd8;

  --rdr-highlight: #ff8a3d;
  --rdr-highlight-strong: #ffa366;
  --rdr-highlight-light: rgba(255,138,61,.16);
  --rdr-highlight-glow: 0 0 18px rgba(255,138,61,.26);

  --rdr-ai: #22d3ee;
  --rdr-ai-light: rgba(34,211,238,.12);
  --rdr-ai-ring: rgba(34,211,238,.25);

  --rdr-positive: #34d399;
  --rdr-positive-light: rgba(52,211,153,.14);
  --rdr-warning: #facc15;
  --rdr-warning-light: rgba(250,204,21,.13);
  --rdr-warning-text: #fde047;
  --rdr-warning-badge: #facc15;
  --rdr-warning-bg: rgba(250,204,21,.12);

  --rdr-surface-canvas: #0b1020;
  --rdr-surface-card: #171c2e;
  --rdr-surface-subtle: #1c2236;
  --rdr-surface-hover-token: #232a40;
  --rdr-border-subtle: #262d45;
  --rdr-border-strong: #39415e;
  --rdr-text-main: #e8ebf5;
  --rdr-text-muted-token: #959db5;

  --bs-body-bg: #0b1020;
  --bs-body-color: #e8ebf5;

  --rdr-shadow: 0 1px 3px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.22);
  --rdr-shadow-md: 0 4px 12px rgba(0,0,0,.40), 0 12px 40px rgba(0,0,0,.30);
  --rdr-shadow-hover: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
}

/* ---- Backdrop: a fixed layer under everything (cheaper than a fixed body
   background, which repaints on every scroll). body is made transparent so
   the layer shows; html keeps the solid base colour. ---- */
html { background-color: var(--rdr-bg); }
body { background: transparent; font-variant-numeric: tabular-nums; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--rdr-aurora);
}

/* ---- Glass: outer cards only ---- */
.rdr-card,
.ins-card,
.ins-kpi-card,
.insider-kpi,
.rdr-stat,
.aud-card,
.aud-kpi,
.apa-insight,
.card {
  background-color: var(--rdr-glass);
  border-color: var(--rdr-glass-border);
  box-shadow: var(--rdr-glass-shadow);
}
.card { --bs-card-bg: var(--rdr-glass); --bs-card-border-color: var(--rdr-glass-border); }
:root[data-theme="dark"] .card { background-color: var(--rdr-glass); border-color: var(--rdr-glass-border); }
/* a card inside a dropdown / modal / drawer sits on an opaque panel: keep it solid */
.modal .card, .dropdown-menu .card, .offcanvas .card { background-color: var(--rdr-card); }

/* sidebar + phone bottom bar: frosted so the glow shows through; the blur
   keeps them readable when page content scrolls or slides underneath */
.rdr-sidebar,
.rdr-bottom-nav {
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
/* phone "More" sheet: was a fixed near-black; now the theme's solid chrome colour */
.rdr-more-drawer { background: var(--rdr-sidebar-solid); }

/* ---- KPI cards: hard-coded indigo states -> theme colours ---- */
.ins-kpi-card:hover {
  border-color: var(--rdr-accent);
  box-shadow: 0 8px 20px -4px var(--rdr-accent-ring), 0 4px 8px -4px rgba(0,0,0,.04);
}
.ins-kpi-card.selected {
  border-color: var(--rdr-accent);
  background-color: var(--rdr-accent-light);
  box-shadow: 0 0 0 1.5px var(--rdr-accent), 0 8px 20px -4px var(--rdr-accent-ring);
}
.ins-kpi-card.selected .rdr-kpi-icon-pill,
.rdr-kpi-icon-pill.is-active { background: var(--rdr-accent) !important; color: #fff !important; }

/* ---- Orange = data ---- */
.rdr-kpi-icon-pill,
.aud-kpi-icon,
.insider-kpi-icon,
.apa-insight-icon,
.rdr-notif-kpi-icon {
  background: var(--rdr-highlight-light);
  color: var(--rdr-highlight-strong);
}
.ins-kpi-card:hover .rdr-kpi-icon-pill { background: var(--rdr-highlight); color: #fff; }

.aud-bar-fill,
.apa-meter rect.aud-bar-fill { fill: var(--rdr-highlight); }
.rdr-funnel-bar-fill,
.ins-funnel-bar,
.rdr-empty-progress-fill,
.adv-mer-progress-fill { background: var(--rdr-highlight); }

/* dark mode: headline numbers and bars glow softly (none in light mode) */
:root[data-theme="dark"] .ins-kpi-card .rdr-metric-tile-value,
:root[data-theme="dark"] .ins-kpi-value,
:root[data-theme="dark"] .insider-kpi-value,
:root[data-theme="dark"] .rdr-stat-value,
:root[data-theme="dark"] .aud-kpi-value,
:root[data-theme="dark"] .rdr-text-metric,
:root[data-theme="dark"] .rdr-notif-kpi-value { text-shadow: var(--rdr-highlight-glow); }
:root[data-theme="dark"] .aud-bar-fill { filter: drop-shadow(0 0 3px rgba(255,138,61,.7)); }
:root[data-theme="dark"] .rdr-funnel-bar-fill,
:root[data-theme="dark"] .ins-funnel-bar { box-shadow: 0 0 8px rgba(255,138,61,.45); }

/* ---- Bootstrap 5.1 hard-codes its blue (#0d6efd); map it to the theme's violet ---- */
:root { --bs-primary: #6d5ef5; --bs-primary-rgb: 109,94,245; --bs-link-color: var(--rdr-accent); }
:root[data-theme="dark"] { --bs-primary: #8b7cff; --bs-primary-rgb: 139,124,255; }
a { color: var(--rdr-accent); }
a:hover { color: var(--rdr-accent-hover); }
.btn-primary { color: #fff; background-color: var(--rdr-accent); border-color: var(--rdr-accent); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  color: #fff; background-color: var(--rdr-accent-hover); border-color: var(--rdr-accent-hover);
}
.btn-primary:focus, .btn-outline-primary:focus { box-shadow: 0 0 0 .2rem var(--rdr-accent-ring); }
.btn-outline-primary { color: var(--rdr-accent); border-color: var(--rdr-accent); }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active {
  color: #fff; background-color: var(--rdr-accent); border-color: var(--rdr-accent);
}
.border-primary { border-color: var(--rdr-accent) !important; }
.form-check-input:checked { background-color: var(--rdr-accent); border-color: var(--rdr-accent); }
.form-check-input:focus, .form-control:focus, .form-select:focus { border-color: var(--rdr-accent); box-shadow: 0 0 0 .2rem var(--rdr-accent-ring); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--rdr-accent); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--rdr-accent); }
.page-link { color: var(--rdr-accent); }
.page-item.active .page-link { background-color: var(--rdr-accent); border-color: var(--rdr-accent); }
.progress-bar { background-color: var(--rdr-highlight); }

/* ---- Fallbacks ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rdr-sidebar, .rdr-bottom-nav { background: var(--rdr-sidebar-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .rdr-card, .ins-card, .ins-kpi-card, .insider-kpi, .rdr-stat, .aud-card, .aud-kpi, .apa-insight, .card {
    background-color: var(--rdr-card);
  }
}
@media print {
  body::before { display: none; }
  html, body { background: #fff; }
}

/* ==========================================================================
   Module identity (owner, 2026-11-06): each module is a character with its own
   icon (wwwroot/brand/modules/*.svg) and accent colour. The accent marks the
   active menu item and the active page tab - only as a bar / dot, never as text
   colour (cyan or gold text would fail contrast on light surfaces).
   Mapping: Infrastructure/Navigation/ModuleIdentity.cs
   ========================================================================== */
.rdr-mod-advizer { --rdr-module: #6d5ef5; }
.rdr-mod-raydar  { --rdr-module: #22d3ee; }
.rdr-mod-insider { --rdr-module: #8b7cff; }
.rdr-mod-kreator { --rdr-module: #ff7a1a; }
.rdr-mod-ledgr   { --rdr-module: #34d399; }
.rdr-mod-pylot   { --rdr-module: #60a5fa; }
.rdr-mod-shopr   { --rdr-module: #facc15; }
.rdr-mod-tribz   { --rdr-module: #f472b6; }
.rdr-mod-buzzr   { --rdr-module: #fb7185; }

/* brand mark in the sidebar header */
.rdr-brand-mark { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; display: block; }

/* sidebar: character icon + small character tag */
.rdr-nav-mod-icon { width: 20px; height: 20px; flex-shrink: 0; border-radius: 5px; display: block; }
.rdr-nav-persona {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.07);
  white-space: nowrap;
}
.rdr-nav-item[class*="rdr-mod-"].active { border-color: transparent; }
.rdr-nav-item[class*="rdr-mod-"].active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rdr-module);
}
.rdr-nav-item.active .rdr-nav-persona { color: #ffffff; background: rgba(255,255,255,.14); }
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav-mod-icon { width: 22px; height: 22px; }
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav-item.active[class*="rdr-mod-"] { border-left-color: var(--rdr-module) !important; }

/* page tabs of the module being shown: a module-coloured bar under the active tab */
.rdr-shell[class*="rdr-mod-"] .rdr-secondary-tab.active { position: relative; }
.rdr-shell[class*="rdr-mod-"] .rdr-secondary-tab.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--rdr-module);
}

/* phone bottom bar + More sheet */
.rdr-bnav-mod-icon { width: 24px; height: 24px; border-radius: 6px; display: block; position: relative; z-index: 1; }
.rdr-more-mod-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; display: block; }
.rdr-more-nav-item .rdr-nav-persona { margin-left: auto; }
.rdr-more-nav-item[class*="rdr-mod-"].active { box-shadow: inset 3px 0 0 var(--rdr-module); }

/* ---- Sidebar polish (owner, 2026-11-06: "duplicate slider, icon not visible") ----
   One sidebar toggle only: the top bar's (#rdr-mobile-menu-btn, Ctrl+B). The second one in the sidebar header
   was squeezed half off the 68px rail when collapsed. */
.rdr-shell .rdr-sidebar-header .rdr-sidebar-collapse-btn { display: none !important; }
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-sidebar-header { justify-content: center !important; }
/* Character icons: the navy tiles merged into the dark violet sidebar - give them a light edge, and make them
   bigger on the collapsed rail where the icon is the only cue. */
.rdr-sidebar .rdr-nav-mod-icon,
.rdr-more-mod-icon,
.rdr-bnav-mod-icon { box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.25); }
.rdr-sidebar .rdr-nav-item.active .rdr-nav-mod-icon { box-shadow: 0 0 0 2px var(--rdr-module), 0 2px 8px rgba(0,0,0,.3); }
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav-mod-icon { width: 26px; height: 26px; border-radius: 7px; }
/* plain (non-character) icons on the rail stay bright enough to see */
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav-item > i { color: rgba(255,255,255,.78); }
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-ws-switcher-btn i { color: #ffffff; opacity: .9; }
/* the collapsed rail's workspace icon used the PAGE text colour (dark navy in light mode) on the dark sidebar */
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-sidebar .rdr-ws-switcher button .rdr-ws-icon { color: #c4b8ff !important; }

/* Ads / Shopify switch (Analytics, Shopify overview): the active side used the old green --rdr-primary. */
.rdr-analytics-toggle-btn.active { background: var(--rdr-accent); color: #fff; }

/* Segmented controls (KPI goal switcher and others) read --rdr-bg-subtle, which no theme defines, so the track
   fell back to #f1f5f9 - a white bar in Midnight. */
.rdr-segmented-control { background: var(--rdr-surface-2); }
:root[data-theme="dark"] .rdr-seg-btn:hover { background: var(--rdr-accent-light); }

/* ---- Icon rail: labels + drawer (owner, 2026-11-07: "the left pane does not work, I couldn't find Analytics") ----
   The 68px rail (769-1024px - tablets and phones in "Desktop site" mode - and the desktop Ctrl+B collapsed state)
   showed character icons only, with the name on mouse hover, which a phone never has. Every destination now
   carries its name under the icon. In the 769-1024px range the top-bar menu button opens the full sidebar as a
   drawer over the page (.rdr-rail-open, set in _Layout.cshtml); before, it toggled a state that range ignores. */
.rdr-shell.rdr-nav-collapsed:not(.rdr-rail-open) .rdr-sidebar .rdr-nav .rdr-nav-item {
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px 2px 7px !important;
  min-height: 56px;
  flex-shrink: 0 !important;
}
.rdr-shell.rdr-nav-collapsed:not(.rdr-rail-open) .rdr-sidebar .rdr-nav .rdr-nav-item > .rdr-nav-label {
  display: block !important;
  max-width: 64px;
  overflow: hidden;
  white-space: normal; /* wrap to a 2nd line instead of cutting the label (audit 2026-11-08) */
  overflow-wrap: break-word;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  text-align: center;
  color: rgba(255,255,255,.74);
}
.rdr-shell.rdr-nav-collapsed:not(.rdr-rail-open) .rdr-sidebar .rdr-nav .rdr-nav-item.active > .rdr-nav-label { color: #ffffff; }
@media (min-width: 768.02px) and (max-width: 1024px) {
  .rdr-shell:not(.rdr-rail-open) .rdr-sidebar .rdr-nav .rdr-nav-item {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px 2px 7px !important;
    min-height: 56px !important;
    flex-shrink: 0 !important;
  }
  .rdr-shell:not(.rdr-rail-open) .rdr-sidebar .rdr-nav .rdr-nav-item > .rdr-nav-label {
    display: block !important;
    max-width: 64px;
    overflow: hidden;
    white-space: normal; /* wrap to a 2nd line instead of cutting 'E-Commerce' to 'E-Commerc...' (audit 2026-11-08) */
    overflow-wrap: break-word;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
    text-align: center;
    color: rgba(255,255,255,.74);
  }
  .rdr-shell:not(.rdr-rail-open) .rdr-sidebar .rdr-nav .rdr-nav-item.active > .rdr-nav-label { color: #ffffff; }
  .rdr-shell:not(.rdr-rail-open) .rdr-nav-mod-icon { width: 26px; height: 26px; border-radius: 7px; }
  .rdr-shell:not(.rdr-rail-open) .rdr-sidebar .rdr-ws-switcher button .rdr-ws-icon { color: #c4b8ff !important; }
  .rdr-shell:not(.rdr-rail-open) .rdr-sidebar .rdr-nav-item > i { color: rgba(255,255,255,.78); }
  .rdr-shell:not(.rdr-rail-open) .rdr-nav-item.active[class*="rdr-mod-"] { border-left-color: var(--rdr-module) !important; }

  /* the drawer: full labelled sidebar over the page; the page itself keeps its 68px margin */
  .rdr-shell.rdr-rail-open .rdr-sidebar {
    width: 272px !important;
    max-width: calc(100vw - 48px) !important;
    background: var(--rdr-sidebar-solid);
    box-shadow: 12px 0 40px rgba(0,0,0,.35);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .rdr-shell.rdr-rail-open .rdr-sidebar-backdrop { display: block !important; }
  .rdr-shell.rdr-rail-open .rdr-sidebar .rdr-nav-item { min-height: 44px; }
  .rdr-mobile-menu-btn { min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (min-width: 768.02px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .rdr-shell.rdr-rail-open .rdr-sidebar { animation: rdr-rail-drawer-in .18s ease-out; }
  @keyframes rdr-rail-drawer-in { from { transform: translateX(-24px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* Modules the workspace does not have yet (sign-up from one module's page): shown, locked, open the module page. */
.rdr-nav-item.rdr-nav-locked { opacity: .55; }
.rdr-nav-item.rdr-nav-locked:hover { opacity: .9; }
.rdr-nav-item.rdr-nav-locked .rdr-nav-mod-icon { filter: grayscale(.7); }
.rdr-nav-lock { margin-left: auto; font-size: 11px; opacity: .8; }

/* -- Phones: compact everything (owner 2026-11-08: "on mobile view everything is very huge so u cant see well").
   Visible sizes shrink; links and buttons keep a comfortable tap area. Desktop is unchanged. -- */
@media (max-width: 600px) {
  .rdr-topbar { height: 46px !important; min-height: 46px !important; padding-left: 10px !important; padding-right: 10px !important; gap: 6px !important; }
  .rdr-topbar-title, .rdr-topbar-heading { font-size: 14px !important; }
  .rdr-topbar-icon-btn, .rdr-notif-bell-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; font-size: 15px !important; }
  .adv-topbar-workspace-chip { height: 32px !important; min-height: 32px !important; padding: 0 8px !important; font-size: 12px !important; }
  .rdr-main { font-size: 13px; }
  .rdr-page-header { margin-bottom: 12px !important; row-gap: 8px !important; }
  .rdr-page-title { font-size: 19px !important; line-height: 1.25 !important; letter-spacing: -.2px !important; }
  .rdr-page-subtitle { font-size: 12.5px !important; line-height: 1.45 !important; }
  .rdr-live-badge { font-size: 10.5px !important; padding: 2px 8px !important; }
  .rdr-btn, .ins-btn { min-height: 32px !important; height: auto !important; padding: 5px 11px !important; font-size: 12.5px !important; border-radius: 9px !important; gap: 6px !important; }
  .rdr-btn-sm, .ins-btn-sm { min-height: 28px !important; padding: 3px 9px !important; font-size: 12px !important; }
  .rdr-btn i, .ins-btn i { font-size: 13px !important; }
  .ins-select, .ins-select-sm, .rdr-input, .form-select, .form-control { min-height: 32px !important; height: auto; font-size: 12.5px !important; }
  .ins-filter-chip-btn { min-height: 30px !important; font-size: 12px !important; padding: 4px 10px !important; }
  .rdr-card { border-radius: 12px !important; }
  .rdr-card-body { padding: 12px !important; }
  .rdr-card-header { padding: 10px 12px !important; }
  .rdr-card-header-title, .rdr-card h2, .rdr-card h3 { font-size: 14px !important; }
  .ins-kpi-card { padding: 9px 11px !important; border-radius: 11px !important; gap: 2px !important; }
  .ins-kpi-card .rdr-text-label { font-size: 10px !important; letter-spacing: .04em !important; }
  .ins-kpi-card .rdr-text-metric { font-size: 16px !important; }
  .ins-kpi-delta, .ins-kpi-delta-label { font-size: 11px !important; }
  .rdr-secondary-nav { margin-bottom: 10px !important; }
  .rdr-secondary-tab { min-height: 30px !important; padding: 5px 10px !important; font-size: 12.5px !important; }
  .rdr-badge { font-size: 10.5px !important; padding: 2px 7px !important; }
  .ins-table, .rdr-table { font-size: 12px; }
  .rdr-empty-title { font-size: 15px !important; }
  .rdr-empty-sub { font-size: 12.5px !important; }
}
@media (max-width: 600px) { .rdr-overview-header .rdr-text-display, .rdr-overview-header h1 { font-size: 18px !important; } .rdr-overview-header { gap: 8px !important; margin-bottom: 10px !important; } }

/* Phones: Finance KPI cards two per row and compact; long notes smaller (page audit 2026-11-08). */
@media (max-width: 600px) {
  .fin-kpi-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .fin-kpi-card { padding: 10px 11px !important; border-radius: 11px !important; min-height: 0 !important; }
  .fin-kpi-card .fin-kpi-label { font-size: 10px !important; letter-spacing: .04em !important; }
  .fin-kpi-card .fin-kpi-value, .fin-kpi-card h3, .fin-kpi-card .h3 { font-size: 16px !important; margin: 2px 0 !important; }
  .fin-kpi-card small, .fin-kpi-card .fin-kpi-sub, .fin-kpi-card p { font-size: 11px !important; margin: 0 !important; }
  .camp-search-note { font-size: 11.5px !important; line-height: 1.4 !important; }
}