/* ============================================================================
   FullView Admin — "Safety Operations" console
   A 2026 enterprise-CRM reskin of Django admin (Attio / Linear / Ramp energy).
   · Rodgers-orange is the ONLY chromatic accent; everything else neutral.
   · Semantic green/amber/red appear ONLY on status pills + messages.
   · Full light + dark, driven by :root / html[data-theme] AND
     @media (prefers-color-scheme: dark). The header toggle sets data-theme.
   · Tokens are defined as --fv-* then mapped onto Django's own admin vars so
     stock components recolor too; structural polish is layered on top.
   Loaded AFTER stock admin CSS → wins on source order.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1 · DESIGN TOKENS — LIGHT (default + explicit light)
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  /* Rodgers-orange ramp (50 → 900) */
  --fv-orange-50:  #FFF3EA;
  --fv-orange-100: #FEE6D4;
  --fv-orange-200: #FDD0B0;
  --fv-orange-300: #FBB57E;
  --fv-orange-400: #F89150;
  --fv-orange-500: #F26A1B;   /* primary */
  --fv-orange-600: #E2590F;   /* hover   */
  --fv-orange-700: #C44D0C;   /* deep    */
  --fv-orange-800: #9E3D0A;
  --fv-orange-900: #7A2F08;

  --fv-orange:      var(--fv-orange-500);
  --fv-orange-tint: var(--fv-orange-50);

  /* Accessible accent tokens (theme-aware, swapped in the dark blocks).
     --fv-accent-text : orange used as TEXT/links  → orange-700 light / orange-300 dark
     --fv-cta         : solid orange BEHIND white text (WCAG AA ≥4.5:1)
     --fv-accent-soft : orange tint used as a BACKGROUND (translucent in dark) */
  --fv-accent-text:  var(--fv-orange-700);
  --fv-cta:          var(--fv-orange-700);
  --fv-cta-hover:    var(--fv-orange-800);
  --fv-accent-soft:  var(--fv-orange-50);

  /* Shared chrome height (header) — also used to offset the sticky table head */
  --fv-header-h: 62px;

  /* Neutrals */
  --fv-bg:        #F4F6F8;
  --fv-surface:   #FFFFFF;
  --fv-elevated:  #FFFFFF;
  --fv-sunken:    #F7F8FA;
  --fv-text:      #14181E;
  --fv-muted:     #5A6573;
  --fv-faint:     #8B95A4;
  --fv-border:    #E5E8EC;
  --fv-hairline:  #EEF1F4;
  --fv-row-hover: var(--fv-orange-50);

  /* Header is dark in BOTH themes — premium SaaS signature, makes orange pop */
  --fv-header-bg:   #0F1318;
  --fv-header-fg:   #C9D1DC;
  --fv-header-soft: #8B95A4;
  --fv-header-line: rgba(255,255,255,.08);

  /* Eyebrow accent (kept readable in BOTH themes) */
  --fv-eyebrow:     var(--fv-orange-700);

  /* Semantic status (pills + messages) */
  --fv-pos-fg: #067647; --fv-pos-bg: #ECFDF3; --fv-pos-bd: #A6E9C5;
  --fv-warn-fg:#B54708; --fv-warn-bg:#FFFAEB; --fv-warn-bd:#FEDF89;
  --fv-neg-fg: #B42318; --fv-neg-bg: #FEF3F2; --fv-neg-bd: #FECDCA;
  --fv-info-fg:#C44D0C; --fv-info-bg:#FFF3EA; --fv-info-bd:#FCC79A;
  --fv-neu-fg: #475467; --fv-neu-bg: #F2F4F7; --fv-neu-bd: #E1E5EB;

  /* Shape + depth */
  --fv-radius:    14px;
  --fv-radius-sm: 9px;
  --fv-radius-xs: 7px;
  --fv-shadow-xs: 0 1px 2px rgba(16,24,40,.06);
  --fv-shadow:    0 1px 2px rgba(16,24,40,.04), 0 10px 28px -14px rgba(16,24,40,.18);
  --fv-shadow-lg: 0 32px 64px -22px rgba(16,24,40,.32), 0 8px 20px -12px rgba(16,24,40,.18);
  --fv-ring:      0 0 0 4px rgba(242,106,27,.18);
  --fv-glow:      0 8px 22px -8px rgba(242,106,27,.5);

  /* Decorative chevron for <select> */
  --fv-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6573' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  /* Door / sign-out glyph (tinted via currentColor mask) */
  --fv-i-logout: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>");
  /* Magnifier + ⌘K chip for the dashboard command bar */
  --fv-i-search: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  --fv-i-cmdk: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='22'><rect x='0.75' y='0.75' width='40.5' height='20.5' rx='6' fill='none' stroke='%238B95A4' stroke-opacity='0.55'/><text x='21' y='15' font-family='Inter,-apple-system,sans-serif' font-size='11' font-weight='600' fill='%238B95A4' text-anchor='middle'>⌘K</text></svg>");
  /* Chevron used as a currentColor MASK (color-agnostic) for <summary> toggles */
  --fv-i-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  /* Monochrome action glyphs (currentColor masks) for related-object widgets */
  --fv-i-plus:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --fv-i-pencil: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>");
  --fv-i-eye:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>");
  --fv-i-trash:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6'/></svg>");

  /* ---- Map onto Django's own admin variables ---- */
  --primary:               var(--fv-orange);
  --primary-fg:            #ffffff;
  --secondary:             var(--fv-orange-700);
  --accent:                var(--fv-orange);

  --body-fg:               var(--fv-text);
  --body-bg:               var(--fv-bg);
  --body-quiet-color:      var(--fv-muted);
  --body-medium-color:     var(--fv-muted);
  --body-loud-color:       var(--fv-text);

  --header-color:          var(--fv-header-fg);
  --header-branding-color: var(--fv-orange);
  --header-bg:             var(--fv-header-bg);
  --header-link-color:     #F4F6F8;

  --breadcrumbs-fg:        var(--fv-muted);
  --breadcrumbs-link-fg:   var(--fv-text);
  --breadcrumbs-bg:        transparent;

  --link-fg:               var(--fv-orange-700);
  --link-hover-color:      var(--fv-orange-600);
  --link-selected-fg:      var(--fv-orange-700);

  --hairline-color:        var(--fv-hairline);
  --border-color:          var(--fv-border);

  --error-fg:              var(--fv-neg-fg);
  --message-success-bg:    var(--fv-pos-bg);
  --message-warning-bg:    var(--fv-warn-bg);
  --message-error-bg:      var(--fv-neg-bg);

  --darkened-bg:           var(--fv-sunken);
  --selected-bg:           var(--fv-orange-50);
  --selected-row:          var(--fv-orange-50);

  --button-bg:               var(--fv-cta);
  --button-fg:               #ffffff;
  --button-hover-bg:         var(--fv-cta-hover);
  --default-button-bg:       var(--fv-cta);
  --default-button-hover-bg: var(--fv-cta-hover);
  --close-button-bg:         #6B7685;
  --close-button-hover-bg:   #4A5462;
  --delete-button-bg:        var(--fv-neg-fg);
  --delete-button-hover-bg:  #912018;

  --object-tools-fg:        #ffffff;
  --object-tools-bg:        #1A1F27;
  --object-tools-hover-bg:  #0F1318;

  color-scheme: light;
}

/* ----------------------------------------------------------------------------
   2 · DESIGN TOKENS — DARK (auto via media query + explicit data-theme)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --fv-bg:        #0D1014;
    --fv-surface:   #161A20;
    --fv-elevated:  #1C212A;
    --fv-sunken:    #11151B;
    --fv-text:      #E7EAEE;
    --fv-muted:     #97A2B0;
    --fv-faint:     #6C7787;
    --fv-border:    #262C36;
    --fv-hairline:  #20262F;
    --fv-row-hover: #20150B;

    --fv-header-bg:   #090C10;
    --fv-header-fg:   #AEB7C4;
    --fv-header-soft: #6C7787;
    --fv-header-line: rgba(255,255,255,.07);

    --fv-eyebrow:     var(--fv-orange-300);

    --fv-pos-fg:#6CE0A6; --fv-pos-bg:rgba(18,183,106,.13);  --fv-pos-bd:rgba(108,224,166,.26);
    --fv-warn-fg:#FAC668;--fv-warn-bg:rgba(247,144,9,.13);  --fv-warn-bd:rgba(250,198,104,.26);
    --fv-neg-fg:#FCA29B; --fv-neg-bg:rgba(240,68,56,.13);   --fv-neg-bd:rgba(252,162,155,.26);
    --fv-info-fg:#FBB57E;--fv-info-bg:rgba(242,106,27,.14); --fv-info-bd:rgba(251,181,126,.28);
    --fv-neu-fg:#CDD5DF; --fv-neu-bg:rgba(255,255,255,.06); --fv-neu-bd:rgba(255,255,255,.12);

    --fv-shadow-xs: 0 1px 2px rgba(0,0,0,.5);
    --fv-shadow:    0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.72);
    --fv-shadow-lg: 0 34px 70px -24px rgba(0,0,0,.82), 0 10px 24px -14px rgba(0,0,0,.6);

    --fv-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A2B0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    --fv-i-search: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A2B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
    --fv-i-cmdk: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='22'><rect x='0.75' y='0.75' width='40.5' height='20.5' rx='6' fill='none' stroke='%2397A2B0' stroke-opacity='0.45'/><text x='21' y='15' font-family='Inter,-apple-system,sans-serif' font-size='11' font-weight='600' fill='%2397A2B0' text-anchor='middle'>⌘K</text></svg>");

    --primary-fg:            #ffffff;
    --body-loud-color:       #ffffff;
    --link-fg:               var(--fv-orange-300);
    --link-hover-color:      #FCC79A;
    --link-selected-fg:      var(--fv-orange-300);

    --close-button-bg:       #2A313C;
    --close-button-hover-bg: #3A4452;
    --object-tools-bg:       #2A313C;
    --object-tools-hover-bg: #3A4452;
    --delete-button-bg:      #C4362B;
    --delete-button-hover-bg:#A82C22;

    /* Orange tints become translucent so they read as dark (not cream) surfaces */
    --fv-orange-50:  rgba(242,106,27,.13);
    --fv-orange-100: rgba(242,106,27,.20);
    --fv-orange-200: rgba(242,106,27,.30);
    --fv-accent-text: var(--fv-orange-300);
    --fv-accent-soft: rgba(242,106,27,.14);
    --fv-cta:         var(--fv-orange-700);
    --fv-cta-hover:   var(--fv-orange-800);

    /* Re-assert the Django var map at (0,1,0) so it beats stock dark_mode.css :root */
    --primary:               var(--fv-orange);
    --secondary:             var(--fv-orange-300);
    --accent:                var(--fv-orange);
    --body-fg:               var(--fv-text);
    --body-bg:               var(--fv-bg);
    --body-quiet-color:      var(--fv-muted);
    --body-medium-color:     var(--fv-muted);
    --header-color:          var(--fv-header-fg);
    --header-branding-color: var(--fv-orange);
    --header-bg:             var(--fv-header-bg);
    --header-link-color:     #F4F6F8;
    --breadcrumbs-fg:        var(--fv-muted);
    --breadcrumbs-link-fg:   var(--fv-text);
    --breadcrumbs-bg:        transparent;
    --hairline-color:        var(--fv-hairline);
    --border-color:          var(--fv-border);
    --error-fg:              var(--fv-neg-fg);
    --message-success-bg:    var(--fv-pos-bg);
    --message-warning-bg:    var(--fv-warn-bg);
    --message-error-bg:      var(--fv-neg-bg);
    --darkened-bg:           var(--fv-sunken);
    --selected-bg:           var(--fv-row-hover);
    --selected-row:          var(--fv-row-hover);
    --button-bg:               var(--fv-cta);
    --button-fg:               #ffffff;
    --button-hover-bg:         var(--fv-cta-hover);
    --default-button-bg:       var(--fv-cta);
    --default-button-hover-bg: var(--fv-cta-hover);
    --object-tools-fg:         #ffffff;

    color-scheme: dark;
  }
}
html[data-theme="dark"] {
  --fv-bg:        #0D1014;
  --fv-surface:   #161A20;
  --fv-elevated:  #1C212A;
  --fv-sunken:    #11151B;
  --fv-text:      #E7EAEE;
  --fv-muted:     #97A2B0;
  --fv-faint:     #6C7787;
  --fv-border:    #262C36;
  --fv-hairline:  #20262F;
  --fv-row-hover: #20150B;

  --fv-header-bg:   #090C10;
  --fv-header-fg:   #AEB7C4;
  --fv-header-soft: #6C7787;
  --fv-header-line: rgba(255,255,255,.07);

  --fv-eyebrow:     var(--fv-orange-300);

  --fv-pos-fg:#6CE0A6; --fv-pos-bg:rgba(18,183,106,.13);  --fv-pos-bd:rgba(108,224,166,.26);
  --fv-warn-fg:#FAC668;--fv-warn-bg:rgba(247,144,9,.13);  --fv-warn-bd:rgba(250,198,104,.26);
  --fv-neg-fg:#FCA29B; --fv-neg-bg:rgba(240,68,56,.13);   --fv-neg-bd:rgba(252,162,155,.26);
  --fv-info-fg:#FBB57E;--fv-info-bg:rgba(242,106,27,.14); --fv-info-bd:rgba(251,181,126,.28);
  --fv-neu-fg:#CDD5DF; --fv-neu-bg:rgba(255,255,255,.06); --fv-neu-bd:rgba(255,255,255,.12);

  --fv-shadow-xs: 0 1px 2px rgba(0,0,0,.5);
  --fv-shadow:    0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.72);
  --fv-shadow-lg: 0 34px 70px -24px rgba(0,0,0,.82), 0 10px 24px -14px rgba(0,0,0,.6);

  --fv-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A2B0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --fv-i-search: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A2B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  --fv-i-cmdk: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='22'><rect x='0.75' y='0.75' width='40.5' height='20.5' rx='6' fill='none' stroke='%2397A2B0' stroke-opacity='0.45'/><text x='21' y='15' font-family='Inter,-apple-system,sans-serif' font-size='11' font-weight='600' fill='%2397A2B0' text-anchor='middle'>⌘K</text></svg>");

  --primary-fg:            #ffffff;
  --body-loud-color:       #ffffff;
  --link-fg:               var(--fv-orange-300);
  --link-hover-color:      #FCC79A;
  --link-selected-fg:      var(--fv-orange-300);

  --close-button-bg:       #2A313C;
  --close-button-hover-bg: #3A4452;
  --object-tools-bg:       #2A313C;
  --object-tools-hover-bg: #3A4452;
  --delete-button-bg:      #C4362B;
  --delete-button-hover-bg:#A82C22;

  /* Orange tints become translucent so they read as dark (not cream) surfaces */
  --fv-orange-50:  rgba(242,106,27,.13);
  --fv-orange-100: rgba(242,106,27,.20);
  --fv-orange-200: rgba(242,106,27,.30);
  --fv-accent-text: var(--fv-orange-300);
  --fv-accent-soft: rgba(242,106,27,.14);
  --fv-cta:         var(--fv-orange-700);
  --fv-cta-hover:   var(--fv-orange-800);

  /* Re-assert the Django var map at (0,1,1) so toggling to dark beats stock
     dark_mode.css html[data-theme="dark"] (else selected rows go Django teal,
     primary returns to Django blue, neutrals fall back to Django greys). */
  --primary:               var(--fv-orange);
  --secondary:             var(--fv-orange-300);
  --accent:                var(--fv-orange);
  --body-fg:               var(--fv-text);
  --body-bg:               var(--fv-bg);
  --body-quiet-color:      var(--fv-muted);
  --body-medium-color:     var(--fv-muted);
  --header-color:          var(--fv-header-fg);
  --header-branding-color: var(--fv-orange);
  --header-bg:             var(--fv-header-bg);
  --header-link-color:     #F4F6F8;
  --breadcrumbs-fg:        var(--fv-muted);
  --breadcrumbs-link-fg:   var(--fv-text);
  --breadcrumbs-bg:        transparent;
  --hairline-color:        var(--fv-hairline);
  --border-color:          var(--fv-border);
  --error-fg:              var(--fv-neg-fg);
  --message-success-bg:    var(--fv-pos-bg);
  --message-warning-bg:    var(--fv-warn-bg);
  --message-error-bg:      var(--fv-neg-bg);
  --darkened-bg:           var(--fv-sunken);
  --selected-bg:           var(--fv-row-hover);
  --selected-row:          var(--fv-row-hover);
  --button-bg:               var(--fv-cta);
  --button-fg:               #ffffff;
  --button-hover-bg:         var(--fv-cta-hover);
  --default-button-bg:       var(--fv-cta);
  --default-button-hover-bg: var(--fv-cta-hover);
  --object-tools-fg:         #ffffff;

  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   3 · BASE TYPOGRAPHY + CANVAS
   -------------------------------------------------------------------------- */
html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv05" 1, "ss01" 1, "tnum" 1;
}
body {
  background: var(--fv-bg);
  color: var(--fv-text);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a:link, a:visited { color: var(--link-fg); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--link-hover-color); }

h1, h2, h3, h4 { color: var(--body-loud-color); }
h1 { font-weight: 800; letter-spacing: -.4px; }
.colMS, .colSM { margin: 0; }

::selection { background: rgba(242,106,27,.24); }
:focus-visible { outline: 2px solid var(--fv-orange); outline-offset: 2px; border-radius: 4px; }

/* Custom scrollbars */
* { scrollbar-color: var(--fv-border) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--fv-border); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--fv-faint); background-clip: content-box; }

input[type=checkbox], input[type=radio] { accent-color: var(--fv-orange); width: 16px; height: 16px; }

/* ----------------------------------------------------------------------------
   4 · HEADER + BRANDING + COMMAND-BAR USER TOOLS
   -------------------------------------------------------------------------- */
#header {
  background: var(--fv-header-bg);
  color: var(--fv-header-fg);
  padding: 0 28px;
  min-height: var(--fv-header-h);
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--fv-header-line);
  box-shadow: 0 1px 0 var(--fv-orange), 0 10px 30px -18px rgba(0,0,0,.7);
  position: sticky; top: 0; z-index: 1000;
  transition: box-shadow .2s ease;
}
/* JS adds .fv-scrolled once the page scrolls → the sticky header lifts */
body.fv-scrolled #header {
  box-shadow: 0 1px 0 var(--fv-orange), 0 18px 44px -20px rgba(0,0,0,.85);
}
#branding { display: flex; align-items: center; }
#branding h1 { margin: 0; padding: 0; font-weight: inherit; }

.fv-brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.fv-brand:hover { text-decoration: none; }

.fv-logo-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(140deg, #FFAE63 0%, #F26A1B 52%, #C44D0C 100%);
  box-shadow: 0 8px 18px -6px rgba(242,106,27,.7), inset 0 1px 0 rgba(255,255,255,.4);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fv-brand:hover .fv-logo-mark { transform: translateY(-1px); box-shadow: var(--fv-glow), inset 0 1px 0 rgba(255,255,255,.45); }
/* CSS-drawn "full-view lens" mark */
.fv-logo-mark::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 21px; height: 13px;
  background: #fff;
  border-radius: 0 0 14px 14px / 0 0 13px 13px;
  -webkit-mask: radial-gradient(11px 13px at 50% 0, transparent 98%, #000 100%);
          mask: radial-gradient(11px 13px at 50% 0, transparent 98%, #000 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.fv-logo-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: #C44D0C; transform: translate(-50%,-30%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.92);
}
.fv-brand-text { display: flex; flex-direction: column; line-height: 1.04; }
.fv-logo-word { font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: #FFFFFF; }
.fv-logo-acc { color: var(--fv-orange-400); }
.fv-logo-sub {
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fv-header-soft); margin-top: 3px;
}

/* User tools → a clean command-bar cluster on the right */
#user-tools {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--fv-header-fg);
  text-transform: none; letter-spacing: 0; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
#user-tools strong { color: #fff; font-weight: 700; }
#user-tools a,
#user-tools button,
#user-tools #logout-form button {
  color: #E7EBF0; border: 0; border-bottom: none;
  padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
#user-tools a:hover,
#user-tools button:hover,
#user-tools #logout-form button:hover { background: rgba(242,106,27,.26); color: #fff; transform: translateY(-1px); }
#user-tools #logout-form { display: inline; margin: 0; padding: 0; }
/* sign-out gets a quiet door glyph */
#user-tools #logout-form button { position: relative; padding-left: 30px; }
#user-tools #logout-form button::before {
  content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--fv-i-logout) center / contain no-repeat;
          mask: var(--fv-i-logout) center / contain no-repeat;
}

/* Theme toggle (auto / light / dark) */
button.theme-toggle {
  background: rgba(255,255,255,.06);
  border: 0; border-radius: 9px; padding: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s ease, transform .15s ease;
}
button.theme-toggle:hover { background: rgba(242,106,27,.26); transform: translateY(-1px); }
/* Win the specificity race against `#user-tools button` (1,0,1) so the toggle
   stays a square 7px icon button instead of inheriting the pill padding. */
#user-tools button.theme-toggle { padding: 7px; background: rgba(255,255,255,.06); }
#user-tools button.theme-toggle:hover { background: rgba(242,106,27,.26); }
.theme-toggle svg { color: #E7EBF0; width: 18px; height: 18px; }

/* the global nav block is intentionally emptied in base_site.html */
#nav-global { display: none; }

/* ----------------------------------------------------------------------------
   5 · BREADCRUMBS
   -------------------------------------------------------------------------- */
div.breadcrumbs {
  background: var(--fv-surface);
  color: var(--fv-muted);
  border-bottom: 1px solid var(--fv-border);
  padding: 12px 40px;
  font-size: 12.5px;
  font-weight: 500;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
div.breadcrumbs a { color: var(--fv-muted); font-weight: 600; }
div.breadcrumbs a:hover { color: var(--fv-accent-text); }

/* ----------------------------------------------------------------------------
   6 · LAYOUT / CONTENT
   -------------------------------------------------------------------------- */
#main { background: var(--fv-bg); }
#content { padding: 28px 40px 56px; }
#content-main { margin-top: 0; }
.dashboard #content { padding-top: 26px; }
#content > h1, .content > h1 { font-size: 22px; margin-bottom: 22px; letter-spacing: -.5px; }

/* The right column (recent actions / related) */
.colMS { margin-right: 0; }
#content-related { margin-right: 0; }
@media (min-width: 1100px) {
  #content-related { width: 300px; margin-left: 28px; }
}

/* ----------------------------------------------------------------------------
   7 · MODULES / CARDS
   -------------------------------------------------------------------------- */
.module {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius);
  box-shadow: var(--fv-shadow);
  overflow: hidden;
  margin-bottom: 22px;
}
.module > h2,
.module caption,
.inline-group > h2 {
  background: transparent;
  color: var(--fv-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 15px 20px 13px;
  border-bottom: 1px solid var(--fv-hairline);
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.module caption a.section:link,
.module caption a.section:visited { color: var(--fv-text); font-weight: 800; letter-spacing: .06em; }
.module caption a.section:hover { color: var(--fv-accent-text); }
/* Accent tab on every card header */
.module > h2::before,
.module caption::before {
  content: ""; width: 4px; height: 15px; border-radius: 3px;
  background: linear-gradient(180deg, var(--fv-orange-400), var(--fv-orange-700));
  flex: 0 0 auto;
}
.module table { border: 0; width: 100%; }
table th, table td { border-bottom: 1px solid var(--fv-hairline); }
caption a.section:link, caption a.section:visited { text-transform: uppercase; }

/* JS-injected per-app count badge (graceful: absent if JS off) */
.fv-count {
  margin-left: auto;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--fv-muted);
  background: var(--fv-sunken);
  border: 1px solid var(--fv-border);
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

/* Dashboard / app-index app cards: rows become clean list items */
#content-main .module tbody tr { transition: background .12s ease; }
#content-main .module tbody tr:hover { background: var(--fv-row-hover); }
#content-main .module tbody th { width: 100%; padding: 0; border-bottom: 1px solid var(--fv-hairline); }
#content-main .module tbody td { border-bottom: 1px solid var(--fv-hairline); white-space: nowrap; text-align: right; vertical-align: middle; padding: 0 8px 0 0; }
#content-main .module tbody tr:last-child th,
#content-main .module tbody tr:last-child td { border-bottom: 0; }
#content-main .module tbody th a {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 20px; color: var(--fv-text); font-weight: 600; font-size: 13.5px;
}
#content-main .module tbody th a:hover { color: var(--fv-accent-text); }

/* Add / Change / View pills inside dashboard cards */
#content-main .module a.addlink,
#content-main .module a.changelink,
#content-main .module a.viewlink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 26px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--fv-sunken);
  border: 1px solid var(--fv-border);
  color: var(--fv-muted);
  background-repeat: no-repeat; background-position: 9px center; background-size: 13px;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
#content-main .module a.addlink:hover,
#content-main .module a.changelink:hover,
#content-main .module a.viewlink:hover { color: var(--fv-accent-text); border-color: var(--fv-orange-300); background-color: var(--fv-accent-soft); transform: translateY(-1px); }
#content-main .module a.addlink {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F26A1B' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
}
#content-main .module a.changelink {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6573' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>");
}
#content-main .module a.viewlink {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6573' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>");
}

/* Dashboard "Operations Console" hero — built purely from the stock h1
   (no template override). Stock "Site administration" text is hidden and
   replaced by a branded eyebrow + title.
   Scoped with :not([class*="app-"]) so it ONLY targets the true root dashboard
   (body class "dashboard"); per-app index pages carry "dashboard app-<label>"
   and keep their real section heading. */
body.dashboard:not([class*="app-"]) #content > h1 {
  position: relative;
  margin: 2px 0 22px;
  padding: 26px 28px;
  font-size: 0; line-height: 0; letter-spacing: normal;
  border: 1px solid var(--fv-border);
  border-left: 4px solid var(--fv-orange);
  border-radius: var(--fv-radius);
  box-shadow: var(--fv-shadow);
  overflow: hidden;
  background:
    radial-gradient(560px 240px at 100% -60%, rgba(242,106,27,.16), transparent 70%),
    linear-gradient(180deg, var(--fv-elevated), var(--fv-surface));
}
body.dashboard:not([class*="app-"]) #content > h1::before {
  content: "FullView · Safety Operations";
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fv-eyebrow);
  line-height: 1.2; margin-bottom: 9px;
}
body.dashboard:not([class*="app-"]) #content > h1::after {
  content: "Operations Console";
  display: block;
  font-size: 28px; font-weight: 800; letter-spacing: -.025em;
  line-height: 1.1; color: var(--body-loud-color);
}

/* Dashboard global command bar (CSS-only) — reads as a real CRM search field.
   Root-dashboard only (see hero note) so app-index pages are not polluted. */
body.dashboard:not([class*="app-"]) #content-main::before {
  content: "Search projects, people, broadcasts, audit logs…";
  display: flex; align-items: center;
  margin: 0 0 22px;
  min-height: 50px;
  padding: 13px 18px 13px 46px;
  border-radius: var(--fv-radius);
  border: 1px solid var(--fv-border);
  box-shadow: var(--fv-shadow-xs);
  color: var(--fv-faint);
  font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  cursor: text;
  background-color: var(--fv-surface);
  background-image:
    var(--fv-i-search),
    var(--fv-i-cmdk),
    radial-gradient(520px 200px at 100% -40%, rgba(242,106,27,.10), transparent 70%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 16px center, right 16px center, 0 0;
  background-size: 18px 18px, 42px 22px, auto;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.dashboard:not([class*="app-"]) #content-main::before:hover { border-color: var(--fv-orange-300); box-shadow: var(--fv-shadow); }

/* Recent actions / related modules */
#content-related .module { background: var(--fv-surface); }
#content-related .module h2 { color: var(--fv-muted); }
#content-related .actionlist { margin: 0; padding: 6px 6px 10px; }
#content-related .actionlist li {
  list-style: none; padding: 9px 14px 9px 34px; border: 0; font-size: 12.5px;
  border-radius: var(--fv-radius-xs); margin: 1px 4px;
  background-repeat: no-repeat; background-position: 12px center; background-size: 14px;
  color: var(--fv-muted);
}
#content-related .actionlist li:hover { background-color: var(--fv-row-hover); }
#content-related .actionlist li a { color: var(--fv-text); font-weight: 600; }
.actionlist li.addlink { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067647' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>"); }
.actionlist li.changelink { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C44D0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>"); }
.actionlist li.deletelink { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6'/></svg>"); }

/* ----------------------------------------------------------------------------
   8 · NAV SIDEBAR + ICON SYSTEM (tintable monochrome SVG masks)
   -------------------------------------------------------------------------- */
#nav-sidebar {
  background: var(--fv-surface);
  border-right: 1px solid var(--fv-border);
  padding-top: 6px;
}
#nav-sidebar .module { border: 0; box-shadow: none; border-radius: 0; margin: 0 0 4px; background: transparent; }
#nav-sidebar .module caption,
#nav-sidebar .module > caption {
  padding: 18px 18px 8px; color: var(--fv-faint);
  font-size: 10.5px; letter-spacing: .14em; border: 0; background: transparent;
}
#nav-sidebar .module caption::before { display: none; }
#nav-sidebar caption a.section:link,
#nav-sidebar caption a.section:visited { color: var(--fv-faint); font-weight: 800; }
#nav-sidebar tr { border: 0; }
#nav-sidebar tr > th, #nav-sidebar tr > td { border: 0; padding: 0; }
#nav-sidebar tr > th { width: 100%; }
#nav-sidebar a {
  display: flex; align-items: center; gap: 11px;
  border-radius: 9px;
  padding: 8px 12px;
  margin: 1px 8px;
  color: var(--fv-text);
  font-weight: 500; font-size: 13px;
  transition: background .14s ease, color .14s ease;
}
#nav-sidebar a:hover { background: var(--fv-row-hover); color: var(--fv-accent-text); }
#nav-sidebar td a { margin-right: 8px; opacity: .65; font-size: 12px; }
#nav-sidebar .current-model > th a,
#nav-sidebar tr.selected > th a,
#nav-sidebar .current-model a[aria-current="page"] {
  background: linear-gradient(180deg, var(--fv-cta), var(--fv-cta-hover));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(242,106,27,.65);
}
#nav-sidebar .current-model > th a:hover { color: #fff; }

/* Sidebar filter input */
#nav-filter, #nav-sidebar #nav-filter {
  margin: 8px 12px 8px; width: calc(100% - 24px); box-sizing: border-box;
  border: 1px solid var(--fv-border); border-radius: 9px;
  background: var(--fv-sunken);
  padding: 9px 12px 9px 32px; font-size: 12.5px; color: var(--fv-text);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  background-repeat: no-repeat; background-position: 10px center; background-size: 15px;
}
#nav-filter:focus { border-color: var(--fv-orange); box-shadow: var(--fv-ring); outline: none; }
#nav-filter.no-results { border-color: var(--fv-neg-bd); }

.toggle-nav-sidebar {
  background: var(--fv-surface); border-right: 1px solid var(--fv-border);
  color: var(--fv-muted); transition: background .14s ease, color .14s ease;
}
.toggle-nav-sidebar:hover { background: var(--fv-row-hover); color: var(--fv-accent-text); }

/* --- Icon glyphs: per-model SVG mask, follows currentColor --- */
#nav-sidebar tr[class*="model-"] > th > a::before,
#content-main .module tr[class*="model-"] > th > a::before {
  content: ""; flex: 0 0 auto;
  width: 17px; height: 17px;
  background-color: currentColor;
  opacity: .92;
  -webkit-mask: var(--fv-icon) center / contain no-repeat;
          mask: var(--fv-icon) center / contain no-repeat;
}
/* DEFAULT icon for any unlisted model (grid of modules) */
tr[class*="model-"] {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7.5' height='7.5' rx='1.6'/><rect x='13.5' y='3' width='7.5' height='7.5' rx='1.6'/><rect x='3' y='13.5' width='7.5' height='7.5' rx='1.6'/><rect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.6'/></svg>");
}
tr.model-project {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v16'/><path d='M16 9h3a2 2 0 0 1 2 2v10'/><path d='M9 7h2M9 11h2M9 15h2'/></svg>");
}
tr.model-broadcastsession {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/><path d='M16.24 7.76a6 6 0 0 1 0 8.49'/><path d='M7.76 16.24a6 6 0 0 1 0-8.49'/><path d='M19.07 4.93a10 10 0 0 1 0 14.14'/><path d='M4.93 19.07a10 10 0 0 1 0-14.14'/></svg>");
}
tr.model-broadcastacknowledgment {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.1V12a10 10 0 1 1-5.93-9.14'/><path d='M22 4 12 14.02l-3-3'/></svg>");
}
tr.model-broadcastreply {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 17l-5-5 5-5'/><path d='M4 12h11a5 5 0 0 1 5 5v2'/></svg>");
}
tr.model-user {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>");
}
tr.model-group {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M2.5 20a6.5 6.5 0 0 1 13 0'/><path d='M16 5.2a3.5 3.5 0 0 1 0 6.8'/><path d='M18.2 13.4a6.5 6.5 0 0 1 3.3 6.6'/></svg>");
}
tr.model-auditlog {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 4.6-3 8.5-7 10-4-1.5-7-5.4-7-10V6z'/><path d='M9 12l2 2 4-4'/></svg>");
}
tr.model-clinicalnote {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h4'/></svg>");
}
tr.model-captionsession {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2.5'/><path d='M8 11.5a2 2 0 1 0 0 1'/><path d='M14 11.5a2 2 0 1 0 0 1'/></svg>");
}
tr.model-hospital {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M6 21V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v15'/><path d='M12 8v6M9 11h6'/></svg>");
}
tr.model-membership {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2.4'/><circle cx='12' cy='10' r='2.5'/><path d='M8 17a4 4 0 0 1 8 0'/><path d='M10 3h4'/></svg>");
}
/* A few sensible extras that commonly appear in this project */
tr.model-transcript, tr.model-transcriptsegment {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 10h16M4 14h11M4 18h7'/></svg>");
}
tr.model-token, tr.model-tokenproxy, tr.model-outstandingtoken, tr.model-blacklistedtoken {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='12' r='4'/><path d='M11.5 12H21l-2.5 2.5M16 12v3'/></svg>");
}
tr.model-encounter, tr.model-session, tr.model-voiceai, tr.model-voicesession {
  --fv-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z'/><path d='M5 10a7 7 0 0 0 14 0'/><path d='M12 19v3'/></svg>");
}

/* ----------------------------------------------------------------------------
   9 · CHANGELIST · TOOLBAR · SEARCH · FILTERS
   -------------------------------------------------------------------------- */
#changelist { background: transparent; gap: 0; }
/* No overflow clipping on .results — `overflow:clip` establishes a containment
   context that breaks `position:sticky` thead in several engines. Corners are
   rounded on the table itself instead so the sticky header still works. */
#changelist .results {
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius);
  background: var(--fv-surface);
  box-shadow: var(--fv-shadow);
}
#result_list { border: 0; border-collapse: separate; border-spacing: 0; width: 100%; border-radius: var(--fv-radius); }
#result_list thead th:first-child, #result_list thead td:first-child { border-top-left-radius: var(--fv-radius); }
#result_list thead th:last-child, #result_list thead td:last-child { border-top-right-radius: var(--fv-radius); }
#result_list thead th, #result_list thead td {
  position: sticky; top: var(--fv-header-h); z-index: 3;
  background: var(--fv-sunken);
  color: var(--fv-muted);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .07em;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fv-border);
  box-shadow: inset 0 -1px 0 var(--fv-border);
  white-space: nowrap;
}
#result_list thead th a:link, #result_list thead th a:visited { color: var(--fv-muted); }
#result_list thead th a:hover { color: var(--fv-accent-text); }
#result_list thead th.sorted { color: var(--fv-text); }
#result_list tbody td, #result_list tbody th {
  padding: 11px 14px; border-bottom: 1px solid var(--fv-hairline);
  vertical-align: middle; color: var(--fv-text);
}
#result_list tbody tr { transition: background .12s ease; }
#result_list tbody tr:hover { background: var(--fv-row-hover); }
#result_list tbody tr.selected { background: var(--selected-row); box-shadow: inset 3px 0 0 var(--fv-orange); }
#result_list tbody tr:last-child td, #result_list tbody tr:last-child th { border-bottom: 0; }
#result_list tbody th a:link, #result_list tbody th a:visited { color: var(--fv-text); font-weight: 700; }
#result_list tbody th a:hover { color: var(--fv-accent-text); }
#result_list .action-checkbox-column, #result_list td.action-checkbox { width: 32px; text-align: center; }
#result_list a:link, #result_list a:visited { color: var(--fv-accent-text); font-weight: 600; }

/* Toolbar + search.
   The searchbar + submit live inside `#changelist-search > div` (a wrapper
   Django adds for valid HTML), so the flex row must be applied to that div. */
#toolbar { padding: 0 0 16px; border: 0; background: transparent; display: flex; gap: 10px; align-items: center; }
#changelist-search { width: 100%; }
#changelist-search > div { display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; }
#changelist-search label { display: none; }
#changelist-search #searchbar {
  flex: 1 1 auto; min-width: 240px; max-width: 520px;
  border: 1px solid var(--fv-border); border-radius: 11px;
  padding: 10px 14px 10px 38px; background: var(--fv-surface); color: var(--fv-text);
  font-size: 13.5px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  background-repeat: no-repeat; background-position: 13px center; background-size: 16px;
  box-shadow: var(--fv-shadow-xs);
}
#changelist-search #searchbar:focus { border-color: var(--fv-orange); box-shadow: var(--fv-ring); outline: none; }
#changelist-search input[type=submit] { padding: 10px 18px; }
#changelist-search .quiet { color: var(--fv-faint); font-size: 12px; }
#changelist .actions {
  background: var(--fv-surface); border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius); padding: 9px 14px; margin-bottom: 16px;
  box-shadow: var(--fv-shadow-xs); color: var(--fv-muted); font-size: 13px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#changelist .actions .button { padding: 7px 14px; font-size: 12.5px; }
#changelist .actions select { margin: 0; }
#changelist .actions span.action-counter,
#changelist .actions span.all,
#changelist .actions span.question a,
#changelist .actions span.clear a { color: var(--fv-muted); }

/* Filters panel */
#changelist-filter {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius);
  box-shadow: var(--fv-shadow);
  margin-left: 22px;
  overflow: hidden;
}
#changelist-filter h2 {
  background: transparent; color: var(--fv-muted);
  text-transform: uppercase; font-size: 10.5px; letter-spacing: .1em; font-weight: 700;
  border-bottom: 1px solid var(--fv-hairline); border-radius: 0; padding: 14px 16px 11px;
}
#changelist-filter h3 { color: var(--fv-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 6px 16px 2px; margin: 6px 0 0; }

/* Django 5.0 wraps every filter group in <details data-filter-title open>
   <summary>By …</summary><ul>…. Kill the native disclosure triangle and
   restyle the summary as our own uppercase micro-heading with a tinted chevron
   that rotates when the group is open — otherwise the browser default leaks. */
#changelist-filter details { border: 0; background: transparent; }
#changelist-filter summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px 7px; margin: 0;
  color: var(--fv-faint);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: color .15s ease;
}
#changelist-filter summary::-webkit-details-marker { display: none; }
#changelist-filter summary::marker { content: ""; }
#changelist-filter summary:hover { color: var(--fv-accent-text); }
#changelist-filter summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 13px; height: 13px; background: currentColor;
  -webkit-mask: var(--fv-i-chevron) center / contain no-repeat;
          mask: var(--fv-i-chevron) center / contain no-repeat;
  transition: transform .18s ease;
}
#changelist-filter details[open] summary::after { transform: rotate(180deg); }

/* "Clear all filters" / facets toggle live in #changelist-filter-extra-actions
   as <h3><a>; give them a ghost-pill so they match the panel chrome. */
#changelist-filter-extra-actions { padding: 8px 12px 2px; border-bottom: 1px solid var(--fv-hairline); margin-bottom: 4px; }
#changelist-filter-extra-actions h3 { margin: 0; padding: 0; text-transform: none; letter-spacing: 0; }
#changelist-filter-extra-actions h3 a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--fv-sunken); border: 1px solid var(--fv-border);
  color: var(--fv-muted); font-size: 11.5px; font-weight: 600;
}
#changelist-filter-extra-actions h3 a:hover { border-color: var(--fv-orange-300); color: var(--fv-accent-text); background: var(--fv-accent-soft); }

#changelist-filter ul { padding: 2px 8px 12px; border: 0; margin: 0; }
#changelist-filter li { padding: 0; list-style: none; }
#changelist-filter li a {
  display: block; padding: 7px 12px; border-radius: var(--fv-radius-xs);
  color: var(--fv-muted); font-size: 12.5px; font-weight: 500;
}
#changelist-filter li a:hover { background: var(--fv-row-hover); color: var(--fv-accent-text); }
#changelist-filter li.selected a { color: var(--fv-accent-text); font-weight: 700; background: var(--fv-accent-soft); }
#changelist-filter li.selected { border: 0; }

/* Date hierarchy — Django outputs <nav class="toplinks"> with BARE <a> children
   (incl. <a class="date-back">), no <li> wrappers. Target the real elements. */
.toplinks { padding: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; list-style: none; align-items: center; }
.toplinks > a, .toplinks .date-back {
  padding: 5px 11px; border-radius: 999px; background: var(--fv-surface);
  border: 1px solid var(--fv-border); color: var(--fv-muted); font-weight: 600; font-size: 12px;
}
.toplinks > a:hover, .toplinks .date-back:hover { border-color: var(--fv-orange-300); color: var(--fv-accent-text); }

/* Pagination */
.paginator {
  border: 0; background: transparent; padding: 16px 2px 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--fv-muted); font-size: 13px;
}
.paginator a, .paginator .this-page {
  border-radius: 9px; padding: 7px 12px; font-weight: 600; min-width: 18px; text-align: center;
}
.paginator a:link, .paginator a:visited { background: var(--fv-surface); border: 1px solid var(--fv-border); color: var(--fv-muted); }
.paginator a:hover { border-color: var(--fv-orange-300); color: var(--fv-accent-text); }
.paginator .this-page { background: var(--fv-cta); color: #fff; border: 1px solid var(--fv-cta); box-shadow: var(--fv-glow); }
.paginator input[type=submit] { padding: 8px 14px; }

/* ----------------------------------------------------------------------------
   10 · STATUS PILLS (CSS booleans + JS-enhanced text statuses)
   -------------------------------------------------------------------------- */
.fv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.45;
  letter-spacing: .01em; text-transform: capitalize;
  border: 1px solid; white-space: nowrap;
}
.fv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fv-pill--success { color: var(--fv-pos-fg); background: var(--fv-pos-bg); border-color: var(--fv-pos-bd); }
.fv-pill--warning { color: var(--fv-warn-fg); background: var(--fv-warn-bg); border-color: var(--fv-warn-bd); }
.fv-pill--danger  { color: var(--fv-neg-fg); background: var(--fv-neg-bg); border-color: var(--fv-neg-bd); }
.fv-pill--info    { color: var(--fv-info-fg); background: var(--fv-info-bg); border-color: var(--fv-info-bd); }
.fv-pill--neutral { color: var(--fv-neu-fg); background: var(--fv-neu-bg); border-color: var(--fv-neu-bd); }

/* Boolean icons → pills (changelist), pure CSS via :has() */
#result_list tbody td:has(> img[src*="icon-yes"]),
#result_list tbody td:has(> img[src*="icon-no"]),
#result_list tbody td:has(> img[src*="icon-unknown"]) { white-space: nowrap; }
#result_list tbody td:has(> img[src*="icon-yes"]) > img,
#result_list tbody td:has(> img[src*="icon-no"]) > img,
#result_list tbody td:has(> img[src*="icon-unknown"]) > img { display: none; }
#result_list tbody td:has(> img[src*="icon-yes"])::before,
#result_list tbody td:has(> img[src*="icon-no"])::before,
#result_list tbody td:has(> img[src*="icon-unknown"])::before {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; border: 1px solid;
}
#result_list tbody td:has(> img[src*="icon-yes"])::before {
  content: "Yes"; color: var(--fv-pos-fg); background: var(--fv-pos-bg); border-color: var(--fv-pos-bd);
}
#result_list tbody td:has(> img[src*="icon-no"])::before {
  content: "No"; color: var(--fv-neu-fg); background: var(--fv-neu-bg); border-color: var(--fv-neu-bd);
}
#result_list tbody td:has(> img[src*="icon-unknown"])::before {
  content: "—"; color: var(--fv-neu-fg); background: var(--fv-neu-bg); border-color: var(--fv-neu-bd);
}

/* Booleans EVERYWHERE ELSE (change forms, readonly, inlines) → tinted dots.
   The #result_list copies are display:none above, so this never double-paints. */
img[src*="icon-yes"], img[src*="icon-no"], img[src*="icon-unknown"] {
  box-sizing: content-box; width: 13px; height: 13px;
  padding: 4px; border-radius: 50%; vertical-align: -5px;
}
img[src*="icon-yes"]     { background: var(--fv-pos-bg); box-shadow: inset 0 0 0 1px var(--fv-pos-bd); }
img[src*="icon-no"]      { background: var(--fv-neg-bg); box-shadow: inset 0 0 0 1px var(--fv-neg-bd); }
img[src*="icon-unknown"] { background: var(--fv-neu-bg); box-shadow: inset 0 0 0 1px var(--fv-neu-bd); }

/* ----------------------------------------------------------------------------
   11 · BUTTONS · OBJECT TOOLS
   -------------------------------------------------------------------------- */
/* Solid fills use --fv-cta (orange-700): white text on it clears WCAG AA
   (≈4.8:1), unlike bright orange-500 (≈3.0:1). Bright orange is kept for
   non-text accents (logo, focus ring, pill dots, header underline). */
.button, input[type=submit], input[type=button],
.submit-row input, a.button, .button[type=submit] {
  border: 0; border-radius: 10px; font-weight: 600; font-size: 13.5px;
  padding: 10px 18px; background: var(--fv-cta); color: #fff;
  box-shadow: var(--fv-shadow-xs);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, filter .14s ease;
  cursor: pointer;
}
.button:hover, input[type=submit]:hover, .submit-row input:hover, a.button:hover {
  transform: translateY(-1px); box-shadow: var(--fv-shadow); background: var(--fv-cta-hover);
}
.button:active, input[type=submit]:active { transform: translateY(0); }
.button:focus-visible, input[type=submit]:focus-visible { box-shadow: var(--fv-ring); }
.button.default, input[type=submit].default, .submit-row input.default {
  background: linear-gradient(180deg, var(--fv-orange-700), var(--fv-orange-800));
  box-shadow: var(--fv-glow); font-weight: 700;
}
.button.default:hover, input[type=submit].default:hover { background: linear-gradient(180deg, var(--fv-orange-800), var(--fv-orange-900)); }

/* Disabled controls must not read as active (no fill, lift or pointer). */
.button:disabled, input[type=submit]:disabled, input[type=button]:disabled,
.button[disabled], a.button[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.2);
}
.button:disabled:hover, input[type=submit]:disabled:hover, input[type=button]:disabled:hover {
  transform: none; box-shadow: none; background: var(--fv-cta);
}

/* Secondary submit-row inputs (Save and add another / continue) → ghost */
.submit-row input:not(.default) {
  background: var(--fv-surface); color: var(--fv-text);
  box-shadow: inset 0 0 0 1px var(--fv-border), var(--fv-shadow-xs);
}
.submit-row input:not(.default):hover {
  background: var(--fv-sunken); color: var(--fv-accent-text);
  box-shadow: inset 0 0 0 1px var(--fv-orange-300), var(--fv-shadow-xs);
}

/* Secondary / neutral buttons */
.button.cancel-link, a.closelink, .cancel-link {
  background: var(--fv-surface); color: var(--fv-muted); border: 1px solid var(--fv-border); box-shadow: var(--fv-shadow-xs);
}
.button.cancel-link:hover, a.closelink:hover { background: var(--fv-sunken); color: var(--fv-text); }

/* Object tools (history / view-on-site / add) */
.object-tools { margin-top: 0; }
.object-tools a, .object-tools a:link, .object-tools a:visited {
  background: var(--object-tools-bg); color: #fff;
  border-radius: 999px; padding: 9px 16px; text-transform: none; letter-spacing: .1px;
  font-weight: 600; font-size: 12.5px; box-shadow: var(--fv-shadow-xs);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.object-tools a:hover { background: var(--object-tools-hover-bg); transform: translateY(-1px); box-shadow: var(--fv-shadow); color: #fff; }
.object-tools a.addlink { background: var(--fv-cta); padding-left: 32px; box-shadow: var(--fv-glow);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  background-repeat: no-repeat; background-position: 13px center; background-size: 13px;
}
.object-tools a.addlink:hover { background-color: var(--fv-cta-hover); }

/* Delete links / buttons */
a.deletelink, .deletelink-box a, .submit-row a.deletelink {
  display: inline-flex; align-items: center;
  background: var(--fv-neg-bg); color: var(--fv-neg-fg); border: 1px solid var(--fv-neg-bd);
  border-radius: 10px; padding: 10px 16px; font-weight: 600;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
a.deletelink:hover, .submit-row a.deletelink:hover { background: var(--delete-button-bg); color: #fff; border-color: transparent; transform: translateY(-1px); }

/* ----------------------------------------------------------------------------
   12 · FORMS · FIELDSETS · INLINES · WIDGETS
   -------------------------------------------------------------------------- */
fieldset.module {
  background: var(--fv-surface); border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius); box-shadow: var(--fv-shadow); padding-bottom: 6px; overflow: visible;
}
fieldset.module h2 {
  background: transparent; color: var(--fv-muted);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 20px 13px; border-bottom: 1px solid var(--fv-hairline);
}
.form-row { border-bottom: 1px solid var(--fv-hairline); padding: 15px 20px; }
.form-row:last-child { border-bottom: 0; }
fieldset .form-row.errors { background: var(--fv-neg-bg); border-left: 3px solid var(--fv-neg-fg); }
.aligned label { color: var(--fv-muted); font-weight: 600; font-size: 12.5px; }
.aligned label.required, label.required:after { color: var(--fv-text); }
.help, .helptext, .form-row .help, div.help {
  color: var(--fv-muted); font-size: 12px; margin-top: 5px; padding-left: 0;
}
.aligned .help, .aligned p.help { margin-left: 0; }
fieldset.collapsed .collapse-toggle { color: var(--fv-accent-text); }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], input[type=search], input[type=date],
input[type=time], input[type=datetime-local],
textarea, select, .vTextField, .vForeignKeyRawIdAdminField {
  border: 1px solid var(--fv-border);
  border-radius: 10px;
  background: var(--fv-surface);
  color: var(--fv-text);
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input::placeholder, textarea::placeholder { color: var(--fv-faint); }
input:focus, textarea:focus, select:focus, .vTextField:focus {
  border-color: var(--fv-orange); box-shadow: var(--fv-ring); outline: none;
}
input:disabled, textarea:disabled, select:disabled { color: var(--fv-muted); }
select:not([multiple]) {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: var(--fv-chevron);
  background-repeat: no-repeat; background-position: right 11px center; background-size: 17px;
  padding-right: 36px;
}
select[multiple] { padding: 4px; border-radius: 10px; }
select[multiple] option { padding: 6px 8px; border-radius: 6px; }
select[multiple] option:checked { background: var(--fv-cta) linear-gradient(0deg, var(--fv-cta), var(--fv-cta)); color: #fff; }
.readonly { padding: 9px 0; color: var(--fv-text); }

/* Inlines */
.inline-group { border: 0; margin-top: 18px; }
.inline-group .module, .inline-related fieldset {
  background: var(--fv-surface); border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius); box-shadow: var(--fv-shadow); overflow: hidden;
}
.inline-related h3 {
  background: var(--fv-sunken); color: var(--fv-text); font-weight: 700; font-size: 12.5px;
  padding: 11px 16px; border-bottom: 1px solid var(--fv-hairline); letter-spacing: 0; text-transform: none;
}
.inline-related h3 .inline_label { color: var(--fv-muted); }
.inline-related h3 .delete label { color: var(--fv-neg-fg); }
.tabular table { border: 0; }
.tabular thead th {
  background: var(--fv-sunken); color: var(--fv-muted); text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .06em; font-weight: 700; padding: 10px 12px;
  border-bottom: 1px solid var(--fv-border);
}
.tabular tbody td, .tabular tbody th { padding: 9px 12px; border-bottom: 1px solid var(--fv-hairline); }
.tabular .add-row a, .add-row a {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 9px 30px;
  background: var(--fv-accent-soft); color: var(--fv-accent-text); border: 1px dashed var(--fv-orange-300);
  border-radius: 999px; font-weight: 600;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C44D0C' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  background-repeat: no-repeat; background-position: 12px center; background-size: 13px;
}
.add-row a:hover { background-color: var(--fv-orange-100); }
.inline-deletelink, .inline-related .delete a { color: var(--fv-neg-fg); }

/* Selector (filter_horizontal m2m) */
.selector {
  background: var(--fv-surface); border: 1px solid var(--fv-border); border-radius: var(--fv-radius);
  box-shadow: var(--fv-shadow-xs); padding: 12px; gap: 10px;
}
.selector .selector-available, .selector .selector-chosen { width: auto; }
.selector h2 {
  background: transparent; color: var(--fv-muted); text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .08em; font-weight: 700; border: 0; padding: 4px 2px 8px;
}
.selector .selector-filter { border: 0; padding: 0 0 8px; }
.selector .selector-filter input { border-radius: 9px; width: 100%; box-sizing: border-box; }
.selector select { border-radius: 9px; }
.selector-chooser { background: transparent; border: 0; }
.selector-add, .selector-remove, .selector-chooseall, .selector-clearall { border-radius: 9px; }
.selector-add:hover, .selector-remove:hover, .selector-chooseall:hover, .selector-clearall:hover { background-color: var(--fv-accent-soft); }

/* Related-object widgets (FK/M2M change/add/view/delete) ship Django's stock
   sprite glyphs (green plus / blue arrows). Hide the <img> and paint our own
   monochrome currentColor masks so zero default-Django icons remain. */
.related-widget-wrapper { display: inline-flex; align-items: center; gap: 6px; }
.related-widget-wrapper-link {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--fv-border); border-radius: 9px; background: var(--fv-surface);
  opacity: 1;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.related-widget-wrapper-link img { display: none; }
.related-widget-wrapper-link::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.related-widget-wrapper-link.add-related    { color: var(--fv-accent-text); }
.related-widget-wrapper-link.add-related::before    { -webkit-mask-image: var(--fv-i-plus);   mask-image: var(--fv-i-plus); }
.related-widget-wrapper-link.change-related { color: var(--fv-muted); }
.related-widget-wrapper-link.change-related::before { -webkit-mask-image: var(--fv-i-pencil); mask-image: var(--fv-i-pencil); }
.related-widget-wrapper-link.view-related   { color: var(--fv-muted); }
.related-widget-wrapper-link.view-related::before   { -webkit-mask-image: var(--fv-i-eye);    mask-image: var(--fv-i-eye); }
.related-widget-wrapper-link.delete-related { color: var(--fv-neg-fg); }
.related-widget-wrapper-link.delete-related::before { -webkit-mask-image: var(--fv-i-trash);  mask-image: var(--fv-i-trash); }
.related-widget-wrapper-link:hover { border-color: var(--fv-orange-300); background: var(--fv-accent-soft); transform: translateY(-1px); }

/* Submit row — elevated action bar */
.submit-row {
  background: var(--fv-surface); border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius); box-shadow: var(--fv-shadow);
  padding: 15px 18px; margin-top: 22px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.submit-row p.deletelink-box { margin: 0; }
.submit-row .deletelink-box { margin-left: auto; }

/* Calendar / clock popups + datetime shortcuts */
.datetimeshortcuts a:link, .datetimeshortcuts a:visited { color: var(--fv-accent-text); font-weight: 600; }
.datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon { filter: saturate(0); opacity: .7; }
.calendarbox, .clockbox {
  border-radius: 14px; box-shadow: var(--fv-shadow-lg);
  border: 1px solid var(--fv-border); overflow: hidden; background: var(--fv-elevated);
}
.calendarbox h2, .calendar caption, .clockbox h2 {
  background: linear-gradient(180deg, var(--fv-orange-700), var(--fv-orange-800)); color: #fff;
  font-weight: 700;
}
.calendar td a:hover, .timelist a:hover { background: var(--fv-accent-soft); color: var(--fv-accent-text); border-radius: 6px; }
.calendar td.selected a { background: var(--fv-cta); color: #fff; border-radius: 6px; }
.calendar td.today a { color: var(--fv-accent-text); font-weight: 700; }
.calendarnav a, .calendar-shortcuts a { color: #fff; }
.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next { filter: brightness(0) invert(1); }
.calendar-cancel { background: var(--fv-sunken); color: var(--fv-muted) !important; }

/* ----------------------------------------------------------------------------
   13 · MESSAGES · ERRORS
   -------------------------------------------------------------------------- */
ul.messagelist { padding: 0; margin: 0 0 20px; }
ul.messagelist li {
  position: relative; list-style: none;
  border-radius: 12px; border: 1px solid var(--fv-border);
  box-shadow: var(--fv-shadow-xs);
  padding: 13px 16px 13px 46px; margin-bottom: 10px;
  font-weight: 500; color: var(--fv-text);
  background: var(--fv-surface);
  background-repeat: no-repeat; background-position: 15px center; background-size: 18px;
}
ul.messagelist li.success {
  border-color: var(--fv-pos-bd); background-color: var(--fv-pos-bg); color: var(--fv-pos-fg);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067647' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8.5 12.5l2.5 2.5 4.5-5'/></svg>");
}
ul.messagelist li.warning {
  border-color: var(--fv-warn-bd); background-color: var(--fv-warn-bg); color: var(--fv-warn-fg);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B54708' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9.5 16.5h-19z'/><path d='M12 10v4M12 17.5v.5'/></svg>");
}
ul.messagelist li.error {
  border-color: var(--fv-neg-bd); background-color: var(--fv-neg-bg); color: var(--fv-neg-fg);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15 9l-6 6M9 9l6 6'/></svg>");
}
.errornote, p.errornote {
  background: var(--fv-neg-bg); color: var(--fv-neg-fg); border: 1px solid var(--fv-neg-bd);
  border-radius: 12px; padding: 13px 16px; font-weight: 600; box-shadow: var(--fv-shadow-xs);
}
ul.errorlist { margin: 6px 0 0; padding: 0; list-style: none; }
ul.errorlist li {
  background: transparent; color: var(--fv-neg-fg); border-radius: 8px;
  font-size: 12.5px; font-weight: 600; padding: 4px 0;
}
.errors input, .errors textarea, .errors select, td.errors input { border-color: var(--fv-neg-bd); }

/* ----------------------------------------------------------------------------
   14 · LOGIN
   -------------------------------------------------------------------------- */
body.login {
  background:
    radial-gradient(900px 520px at 84% -12%, rgba(242,106,27,.22), transparent 60%),
    radial-gradient(720px 520px at -6% 112%, rgba(242,106,27,.13), transparent 55%),
    var(--fv-bg);
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
body.login #header {
  position: static; background: transparent; border: 0; box-shadow: none;
  justify-content: center; min-height: 0; padding: 0 0 22px;
  flex-direction: column; align-items: center; gap: 0;
}
body.login #branding { width: 100%; justify-content: center; }
body.login .fv-brand { flex-direction: column; gap: 12px; text-align: center; }
body.login .fv-brand-text { align-items: center; }
body.login .fv-logo-mark { width: 52px; height: 52px; border-radius: 15px; }
body.login .fv-logo-mark::before { width: 28px; height: 17px; }
body.login .fv-logo-mark::after { width: 11px; height: 11px; }
body.login #header .fv-logo-word { color: var(--fv-text); font-size: 24px; }
body.login #header .fv-logo-acc { color: var(--fv-orange); }
body.login #header .fv-logo-sub { color: var(--fv-muted); }
body.login #user-tools { display: none; }
body.login #header button.theme-toggle { position: fixed; top: 18px; right: 18px; background: var(--fv-surface); border: 1px solid var(--fv-border); box-shadow: var(--fv-shadow-xs); }
/* Django paints the toggle glyph with `fill: var(--header-link-color)` (near
   white) — invisible on the light login card. Override fill (and color) so it
   reads against the surface in both themes. */
body.login #header button.theme-toggle svg, body.login .theme-toggle svg { color: var(--fv-muted); fill: var(--fv-muted); }
body.login #container {
  width: 408px; max-width: 92vw; margin: 0; background: var(--fv-surface);
  border: 1px solid var(--fv-border); border-radius: 22px;
  box-shadow: var(--fv-shadow-lg);
  padding: 34px 32px 30px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
body.login #container::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--fv-orange-400), var(--fv-orange-600), var(--fv-orange-400));
}
body.login #content { padding: 4px 0 0; }
body.login #content-main { width: 100%; }
body.login h1 { display: none; }
body.login .form-row { border: 0; padding: 9px 0; }
body.login .form-row label { display: block; margin-bottom: 6px; color: var(--fv-muted); font-weight: 600; font-size: 12.5px; }
body.login input[type=text], body.login input[type=password] { width: 100%; box-sizing: border-box; padding: 11px 13px; }
body.login .submit-row { border: 0; box-shadow: none; background: transparent; padding: 16px 0 0; margin: 0; display: block; }
body.login .submit-row input { width: 100%; padding: 12px; font-size: 14.5px; font-weight: 700;
  background: linear-gradient(180deg, var(--fv-orange-700), var(--fv-orange-800)); border-radius: 11px; box-shadow: var(--fv-glow); }
body.login .submit-row input:hover { background: linear-gradient(180deg, var(--fv-orange-800), var(--fv-orange-900)); }
body.login .password-reset-link { text-align: center; margin-top: 16px; font-size: 12.5px; }
body.login .password-reset-link a { color: var(--fv-muted); font-weight: 600; }
body.login .password-reset-link a:hover { color: var(--fv-accent-text); }
body.login .errornote { margin-bottom: 12px; }

/* ----------------------------------------------------------------------------
   15 · DELETE CONFIRMATION · POPUP
   -------------------------------------------------------------------------- */
.delete-confirmation #content > h1 { color: var(--fv-text); }
.delete-confirmation .deletelist { border: 1px solid var(--fv-border); border-radius: var(--fv-radius); padding: 14px 18px 14px 34px; box-shadow: var(--fv-shadow-xs); background: var(--fv-surface); }
.delete-confirmation form input[type=submit] { background: var(--delete-button-bg); box-shadow: var(--fv-shadow-xs); }
.delete-confirmation form input[type=submit]:hover { background: var(--delete-button-hover-bg); }
.delete-confirmation .cancel-link { background: var(--fv-surface); color: var(--fv-muted); border: 1px solid var(--fv-border); margin-left: 8px; }

body.popup { background: var(--fv-bg); }
body.popup #container { background: transparent; }
body.popup #content { padding: 20px 24px 32px; }

/* ----------------------------------------------------------------------------
   16 · MISC POLISH + MOTION
   -------------------------------------------------------------------------- */
hr { border: 0; border-top: 1px solid var(--fv-hairline); }
.help-tooltip, .related-lookup { filter: saturate(1.05); }
.dashboard .module table th { width: auto; }
.viewlink, .addlink, .changelink { color: var(--fv-accent-text); }
.skip-to-content-link { background: var(--fv-surface); color: var(--fv-accent-text); border-radius: 0 0 10px 0; box-shadow: var(--fv-shadow); }

/* Smooth, jank-free theme + hover transitions */
body, .module, #header, .button, input, textarea, select,
#nav-sidebar a, #changelist-filter, .submit-row, .paginator a,
#result_list thead th, .fv-pill, .object-tools a {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: .18s; transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .button:hover, input[type=submit]:hover, .object-tools a:hover, .fv-brand:hover .fv-logo-mark { transform: none; }
}

/* Responsive: keep Django's grid/sidebar toggle intact, just soften padding */
@media (max-width: 1024px) {
  #changelist-filter { margin-left: 0; }
  #user-tools { gap: 6px; flex-wrap: wrap; }
}
@media (max-width: 767px) {
  /* Header shrinks to 56px here → keep the sticky-thead offset token in sync. */
  :root, html[data-theme="light"], html[data-theme="dark"] { --fv-header-h: 56px; }
  #header { padding: 0 16px; }
  #content { padding: 18px 16px 40px; }
  div.breadcrumbs { padding: 11px 16px; }
  #changelist-filter { margin-left: 0; margin-top: 16px; }
  .fv-logo-sub { display: none; }
  body.dashboard:not([class*="app-"]) #content > h1::after { font-size: 23px; }
  body.dashboard:not([class*="app-"]) #content-main::before {
    background-image: var(--fv-i-search), radial-gradient(520px 200px at 100% -40%, rgba(242,106,27,.10), transparent 70%);
    background-position: 16px center, 0 0;
    background-size: 18px 18px, auto;
  }
}

/* ============================================================================
   ACCOUNT MENU — header hamburger trigger + slide-out drawer
   Replaces Django's stock "Welcome / View site / Change password / Log out"
   row. Professional on mobile + desktop; full light/dark via theme tokens.
   ========================================================================== */

/* Extra monochrome glyphs used as currentColor masks (alpha-only → stroke
   colour is irrelevant; '#' is encoded as %23 so the data-URI never breaks) */
:root {
  --fv-i-site: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3a15 15 0 0 1 0 18'/><path d='M12 3a15 15 0 0 0 0 18'/></svg>");
  --fv-i-docs: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h4'/></svg>");
  --fv-i-key: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15' r='4'/><path d='M10.8 12.2 21 2'/><path d='M17 2l3 3'/><path d='M14 6l3 3'/></svg>");
}

/* ---- Header hamburger trigger ---- */
#header #user-tools.fv-usertools {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.fv-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
  color: #EDF0F4;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fv-burger:hover { background: rgba(242, 106, 27, .22); border-color: rgba(242, 106, 27, .55); }
.fv-burger:focus-visible { outline: none; box-shadow: var(--fv-ring); }
.fv-burger > svg { display: block; width: 22px; height: 22px; }
.fv-burger .fv-bar {
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.fv-burger[aria-expanded="true"] .fv-bar-top { transform: translateY(6px) rotate(45deg); }
.fv-burger[aria-expanded="true"] .fv-bar-mid { opacity: 0; }
.fv-burger[aria-expanded="true"] .fv-bar-bot { transform: translateY(-6px) rotate(-45deg); }

/* ---- Avatar (drawer header identity) ---- */
.fv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(140deg, #FF9A4D 0%, #F26A1B 55%, #D8470A 100%);
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  box-shadow: 0 4px 12px -3px rgba(242, 106, 27, .65), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ---- Backdrop ---- */
.fv-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(8, 11, 15, .48);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s ease, visibility 0s linear .26s;
}
body.fv-drawer-open .fv-drawer-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .26s ease, visibility 0s;
}

/* ---- Drawer panel ---- */
.fv-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4001;
  display: flex;
  flex-direction: column;
  width: 344px;
  max-width: 86vw;
  height: 100vh;
  height: 100dvh;
  background: var(--fv-surface);
  border-left: 1px solid var(--fv-border);
  box-shadow: var(--fv-shadow-lg);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
  will-change: transform;
}
body.fv-drawer-open .fv-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
body.fv-drawer-open { overflow: hidden; }

.fv-drawer-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 18px;
  border-bottom: 1px solid var(--fv-hairline);
}
.fv-drawer-id { display: flex; flex-direction: column; min-width: 0; }
.fv-drawer-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--fv-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fv-drawer-role {
  font-size: 11.5px;
  color: var(--fv-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fv-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--fv-border);
  border-radius: 9px;
  background: var(--fv-surface);
  color: var(--fv-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fv-drawer-close:hover { background: var(--fv-row-hover); color: var(--fv-accent-text); border-color: var(--fv-accent-text); }
.fv-drawer-close svg { width: 18px; height: 18px; }

.fv-drawer-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 4px; }
.fv-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--fv-text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.fv-drawer-link::before {
  content: "";
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--fv-muted);
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.fv-drawer-link:hover { background: var(--fv-row-hover); color: var(--fv-accent-text); }
.fv-drawer-link:hover::before { color: var(--fv-accent-text); }
.fv-ico-site::before { -webkit-mask-image: var(--fv-i-site); mask-image: var(--fv-i-site); }
.fv-ico-docs::before { -webkit-mask-image: var(--fv-i-docs); mask-image: var(--fv-i-docs); }
.fv-ico-key::before  { -webkit-mask-image: var(--fv-i-key);  mask-image: var(--fv-i-key); }

.fv-drawer-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--fv-hairline);
}
.fv-drawer-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fv-muted);
}
.fv-drawer .theme-toggle {
  position: static;
  margin: 0;
  width: auto;
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fv-border);
  border-radius: 9px;
  background: var(--fv-surface);
  color: var(--fv-text);
  cursor: pointer;
}
.fv-drawer .theme-toggle:hover { background: var(--fv-row-hover); }
.fv-drawer .theme-toggle svg { width: 18px; height: 18px; }

.fv-drawer-foot { padding: 14px 18px 20px; }
#fv-drawer #logout-form { margin: 0; padding: 0; }
.fv-logout {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 10px;
  background: var(--fv-cta);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--fv-shadow-xs);
  transition: background .15s ease, transform .12s ease;
}
.fv-logout:hover { background: var(--fv-cta-hover); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .fv-drawer, .fv-drawer-backdrop, .fv-burger-bar { transition: none; }
}

/* ==================== v5 — Viritium aurora glass (matches the portal) ==================== */
body{position:relative}
body::before{
  content:"";position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 46% at 10% 6%, rgba(242,106,27,.14), transparent 62%),
    radial-gradient(36% 42% at 92% 10%, rgba(47,111,176,.10), transparent 60%),
    radial-gradient(40% 48% at 85% 94%, rgba(46,125,50,.08), transparent 62%);
  filter:blur(52px) saturate(125%);
}
html[data-theme="dark"] body::before{opacity:.6}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) body::before{opacity:.6}}
#header{
  background:rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.6);
}
html[data-theme="dark"] #header{background:rgba(20,24,32,.55)!important;border-bottom-color:rgba(255,255,255,.08)}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) #header{background:rgba(20,24,32,.55)!important;border-bottom-color:rgba(255,255,255,.08)}
}
#content-related, .module, .fv-drawer{ -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); }
@media (prefers-reduced-motion: reduce){ body::before{display:none} }

/* ==================== v6 — command-center analytics (admin index) ==================== */
.va-wrap{margin:6px 0 10px}
.va-sec{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fv-muted,#5A6573);margin:26px 2px 12px}
.va-dot{width:8px;height:8px;border-radius:50%;background:var(--fv-orange);
  box-shadow:0 0 0 3px rgba(242,106,27,.18)}
.va-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.va-stat{border-radius:18px;padding:18px 20px;background:var(--fv-surface,#fff);
  border:1px solid var(--fv-border,#E5E8EC);
  box-shadow:0 12px 34px -14px rgba(16,24,40,.16), inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  transition:transform .16s}
.va-stat:hover{transform:translateY(-2px)}
.va-hero{background:linear-gradient(135deg, rgba(242,106,27,.95), rgba(255,174,99,.92));
  border-color:rgba(255,255,255,.35)}
.va-hero .va-lab,.va-hero .va-hint{color:rgba(255,255,255,.85)}
.va-hero .va-val{color:#fff}
.va-lab{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fv-muted,#5A6573)}
.va-val{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--fv-ink,#14181E)}
.va-val.va-orange{background:linear-gradient(120deg,#C44D0C,#F26A1B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.va-val.va-ok{color:#2E7D32}
.va-hint{font-size:12px;color:var(--fv-muted,#5A6573);margin-top:5px}
.va-grid-2{display:grid;grid-template-columns:1.7fr 1fr;gap:14px}
.va-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.va-col{display:flex;flex-direction:column;gap:14px}
.va-card{border-radius:18px;padding:16px 18px;background:var(--fv-surface,#fff);
  border:1px solid var(--fv-border,#E5E8EC);
  box-shadow:0 12px 34px -14px rgba(16,24,40,.16), inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.va-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.va-card-head h3{margin:0;font-size:13.5px;font-weight:800;color:var(--fv-ink,#14181E)}
.va-card-head span{font-size:11px;color:var(--fv-muted,#5A6573);font-variant-numeric:tabular-nums}
.va-chart{position:relative;height:230px}
.va-chart.tall{height:298px}
.va-chart.small{height:150px}
.va-mini-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:14px}
.va-mini{border-radius:13px;padding:11px 15px;font-size:12.5px;color:var(--fv-muted,#5A6573);
  background:var(--fv-surface,#fff);border:1px solid var(--fv-border,#E5E8EC)}
.va-mini b{color:var(--fv-ink,#14181E);font-size:15px;margin-right:4px;font-variant-numeric:tabular-nums}
.va-applist{margin-top:8px}
html[data-theme="dark"] .va-stat,html[data-theme="dark"] .va-card,html[data-theme="dark"] .va-mini{
  background:rgba(22,26,32,.66);border-color:rgba(255,255,255,.08);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .va-val{color:#E7EAEE}
html[data-theme="dark"] .va-card-head h3{color:#E7EAEE}
html[data-theme="dark"] .va-mini b{color:#E7EAEE}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .va-stat,html:not([data-theme="light"]) .va-card,html:not([data-theme="light"]) .va-mini{
    background:rgba(22,26,32,.66);border-color:rgba(255,255,255,.08);
    box-shadow:0 16px 40px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05)}
  html:not([data-theme="light"]) .va-val{color:#E7EAEE}
  html:not([data-theme="light"]) .va-card-head h3{color:#E7EAEE}
  html:not([data-theme="light"]) .va-mini b{color:#E7EAEE}
}
@media (max-width:1000px){.va-grid-2,.va-grid-3{grid-template-columns:1fr}.va-chart.tall{height:240px}}

/* ==================== v7 — HUD mode: neon glass, orbs, motion ==================== */
.va-wrap{isolation:isolate}
.va-orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.va-orbs i{position:absolute;border-radius:50%;filter:blur(64px);opacity:.42;
  animation:vaFloat 16s ease-in-out infinite alternate}
.va-orbs i:nth-child(1){width:420px;height:420px;left:-6%;top:4%;background:#FF7A1A;animation-delay:0s}
.va-orbs i:nth-child(2){width:360px;height:360px;right:-5%;top:12%;background:#7C4DFF;animation-delay:-3s}
.va-orbs i:nth-child(3){width:300px;height:300px;left:18%;bottom:6%;background:#00C2A8;animation-delay:-6s}
.va-orbs i:nth-child(4){width:280px;height:280px;right:22%;bottom:-4%;background:#3D8BFF;animation-delay:-9s}
.va-orbs i:nth-child(5){width:220px;height:220px;left:46%;top:32%;background:#FF5D8F;animation-delay:-12s;opacity:.25}
.va-orbs i:nth-child(6){width:180px;height:180px;right:40%;top:-4%;background:#FFD166;animation-delay:-14s;opacity:.3}
@keyframes vaFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(4%,6%,0) scale(1.15)}}
html[data-theme="dark"] .va-orbs i{opacity:.30}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) .va-orbs i{opacity:.30}}

/* neon gradient borders + bloom on every tile */
.va-stat,.va-card,.va-mini{
  position:relative;border:1px solid transparent!important;
  background:
    linear-gradient(var(--fv-surface,#fff),var(--fv-surface,#fff)) padding-box,
    linear-gradient(135deg, rgba(255,122,26,.65), rgba(255,209,102,.35) 30%, rgba(124,77,255,.45) 65%, rgba(0,194,168,.5)) border-box;
  box-shadow:0 14px 44px -14px rgba(242,106,27,.30), 0 0 30px -12px rgba(124,77,255,.28),
             inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s ease, box-shadow .25s ease;
}
.va-stat:hover,.va-card:hover{
  box-shadow:0 20px 56px -14px rgba(242,106,27,.45), 0 0 44px -10px rgba(124,77,255,.4),
             inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-theme="dark"] .va-stat,html[data-theme="dark"] .va-card,html[data-theme="dark"] .va-mini{
  background:
    linear-gradient(rgba(20,24,32,.82),rgba(20,24,32,.82)) padding-box,
    linear-gradient(135deg, rgba(255,122,26,.7), rgba(255,209,102,.25) 30%, rgba(124,77,255,.55) 65%, rgba(0,194,168,.55)) border-box;
  box-shadow:0 18px 52px -14px rgba(0,0,0,.6), 0 0 34px -10px rgba(255,122,26,.25), 0 0 44px -14px rgba(124,77,255,.3),
             inset 0 1px 0 rgba(255,255,255,.06);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .va-stat,html:not([data-theme="light"]) .va-card,html:not([data-theme="light"]) .va-mini{
    background:
      linear-gradient(rgba(20,24,32,.82),rgba(20,24,32,.82)) padding-box,
      linear-gradient(135deg, rgba(255,122,26,.7), rgba(255,209,102,.25) 30%, rgba(124,77,255,.55) 65%, rgba(0,194,168,.55)) border-box;
    box-shadow:0 18px 52px -14px rgba(0,0,0,.6), 0 0 34px -10px rgba(255,122,26,.25), 0 0 44px -14px rgba(124,77,255,.3),
               inset 0 1px 0 rgba(255,255,255,.06);
  }
}

/* hero: living gradient + shimmer sweep */
.va-hero{
  background:linear-gradient(120deg,#FF7A1A,#FF5D8F 35%,#7C4DFF 70%,#FF7A1A)!important;
  background-size:280% 280%!important;
  animation:vaHue 9s ease-in-out infinite;
  border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 22px 60px -16px rgba(255,93,143,.55), 0 0 46px -10px rgba(124,77,255,.5);
  overflow:hidden;
}
@keyframes vaHue{0%{background-position:0% 40%}50%{background-position:100% 60%}100%{background-position:0% 40%}}
.va-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  background-size:240% 100%;animation:vaSheen 5.5s ease-in-out infinite}
@keyframes vaSheen{0%{background-position:180% 0}60%,100%{background-position:-80% 0}}

/* numbers: bigger, gradient, glowing */
.va-val{font-size:40px;text-shadow:0 0 24px rgba(242,106,27,.18)}
.va-val.va-orange{background:linear-gradient(120deg,#FF7A1A,#FFD166);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(255,122,26,.35))}
.va-val.va-ok{background:linear-gradient(120deg,#2ED573,#9BE15D);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(46,213,115,.35))}
.va-val.va-violet{background:linear-gradient(120deg,#7C4DFF,#FF5D8F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(124,77,255,.35))}
.va-val.va-blue{background:linear-gradient(120deg,#3D8BFF,#00C2A8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(61,139,255,.35))}
.va-hero .va-val{background:none;-webkit-text-fill-color:#fff;color:#fff;filter:none;text-shadow:0 2px 18px rgba(0,0,0,.25)}

/* section titles: gradient ink + pulsing dot */
.va-sec{font-size:12.5px;background:linear-gradient(90deg,#FF7A1A,#7C4DFF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.va-dot{background:#FF7A1A;box-shadow:0 0 0 3px rgba(255,122,26,.2);animation:vaPulse 2.2s infinite}
@keyframes vaPulse{0%{box-shadow:0 0 0 0 rgba(255,122,26,.55)}70%{box-shadow:0 0 0 9px rgba(255,122,26,0)}100%{box-shadow:0 0 0 0 rgba(255,122,26,0)}}
.va-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2ED573;margin-right:7px;
  vertical-align:1px;animation:vaPulse 1.8s infinite}

/* staggered entrance */
@keyframes vaIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.va-stat,.va-card,.va-mini{animation:vaIn .55s cubic-bezier(.2,.7,.3,1) both}
.va-hero-grid>*:nth-child(1){animation-delay:.02s}.va-hero-grid>*:nth-child(2){animation-delay:.09s}
.va-hero-grid>*:nth-child(3){animation-delay:.16s}.va-hero-grid>*:nth-child(4){animation-delay:.23s}
.va-grid-2>*:nth-child(1),.va-grid-3>*:nth-child(1){animation-delay:.10s}
.va-grid-2>*:nth-child(2),.va-grid-3>*:nth-child(2){animation-delay:.18s}
.va-grid-3>*:nth-child(3){animation-delay:.26s}

@media (prefers-reduced-motion: reduce){
  .va-orbs,.va-hero::after{display:none}
  .va-hero{animation:none}
  .va-stat,.va-card,.va-mini{animation:none}
  .va-dot,.va-live{animation:none}
}

/* ===== v8 — mark renders the EXACT app-icon artwork ===== */
.fv-logo-mark{background:url("/static/brand/viritium-mark.png") center/cover no-repeat!important}
.fv-logo-mark::before,.fv-logo-mark::after{display:none!important}