/* ===== Base reset (replaces Tailwind Preflight) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a {
  color: inherit;
  text-decoration: none;
}
a:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
#desktopSidebar a,
#navDropdown a,
.nav-link,
.bottom-nav-btn {
  text-decoration: none !important;
}
.page-title {
  color: var(--text, #e8e6d9);
}
html:not(.dark) .page-title,
html.theme-forest-light .page-title,
html.theme-paper .page-title,
html.theme-blush-clouds .page-title {
  color: var(--text, #1f2a14) !important;
}
/* Header clearance is handled by the main body { padding-top: 90px } rule below */

/* ===== Theme tokens ===== */
    html.theme-forest-dark,
    html[data-theme="forest-dark"],
    html.dark:not([data-theme]):not([class*="theme-"]) {
      --bg-0: #0f1309;
      --bg-1: #1a2110;
      --bg-2: #252f16;
      --card: rgba(26, 33, 16, 0.72);
      --text: #e8e6d9;
      --muted: #a8b88a;
      --accent: #c5e1a5;
      --border: rgba(143, 188, 143, 0.18);
      --army: #556b2f;
      --wave-1: #1a2110; --wave-2: #252f16; --wave-3: #2f3b1c; --wave-4: #3d4a22;
      --header-bg: rgba(26, 33, 16, 0.85);
      --sidebar-bg: rgba(26, 33, 16, 0.95);
      --logo-mark-1: #3d4a22;
      --logo-mark-2: #2f3b1c;
      --logo-stroke: #6b8e23;
      --logo-w: #c5e1a5;
      --logo-seed: #6b8e23;
      --logo-text: #e8e6d9;
    }
    html.theme-forest-light,
    html[data-theme="forest-light"] {
      --bg-0: #dce4c9;
      --bg-1: #e8eedc;
      --bg-2: #f4f6ef;
      --card: rgba(255, 255, 255, 0.85);
      --text: #1a2110;
      --muted: #3d4a22;
      --accent: #2f3b1c;
      --border: rgba(85, 107, 47, 0.22);
      --army: #556b2f;
      --wave-1: #4a5a28; --wave-2: #556b2f; --wave-3: #6b8e23; --wave-4: #8fbc8f;
      --header-bg: rgba(250, 250, 245, 0.88);
      --sidebar-bg: rgba(250, 250, 245, 0.97);
      --logo-mark-1: #ffffff;
      --logo-mark-2: #f7faf0;
      --logo-stroke: #6b8e23;
      --logo-w: #3d4a22;
      --logo-seed: #556b2f;
      --logo-text: #1a2110;
    }
    
    
    html.theme-blush-clouds,
    html[data-theme="blush-clouds"] {
      --bg-0: #fce7f3;
      --bg-1: #fdf2f8;
      --bg-2: #fff7fb;
      --card: rgba(255, 255, 255, 0.82);
      --text: #4a1942;
      --muted: #9d548d;
      --accent: #db2777;
      --border: rgba(244, 114, 182, 0.35);
      --army: #ec4899;
      --wave-1: #fbcfe8; --wave-2: #f9a8d4; --wave-3: #f472b6; --wave-4: #e879f9;
      --header-bg: rgba(255, 247, 251, 0.9);
      --sidebar-bg: rgba(255, 255, 255, 0.94);
      --logo-mark-1: #ffffff;
      --logo-mark-2: #fff7fb;
      --logo-stroke: #ec4899;
      --logo-w: #9d174d;
      --logo-seed: #db2777;
      --logo-text: #4a1942;
    }
    
    
    html.theme-mushroom,
    html[data-theme="mushroom"] {
      --bg-0: #1a1214;
      --bg-1: #26181c;
      --bg-2: #3a2428;
      --card: rgba(28, 20, 24, 0.82);
      --text: #f3e6d4;
      --muted: #c4a08a;
      --accent: #f0b27a;
      --border: rgba(240, 178, 122, 0.22);
      --army: #c47848;
      --wave-1: #1a1214; --wave-2: #2a1c20; --wave-3: #4a3028; --wave-4: #e08a4a;
      --header-bg: rgba(22, 14, 16, 0.9);
      --sidebar-bg: rgba(22, 14, 16, 0.96);
      --logo-mark-1: #3a2428;
      --logo-mark-2: #1a1214;
      --logo-stroke: #e08a4a;
      --logo-w: #ffe7c2;
      --logo-seed: #7a9a5a;
      --logo-text: #f3e6d4;
    }
    



    /* Microsoft Teams–inspired (dark client) */
    html.theme-teams,
    html[data-theme="teams"] {
      --bg-0: #1f1f1f;
      --bg-1: #292929;
      --bg-2: #3d3d3d;
      --card: rgba(45, 44, 44, 0.92);
      --text: #ffffff;
      --muted: #c8c6c4;
      --accent: #7f85f5;
      --border: rgba(127, 133, 245, 0.28);
      --army: #5b5fc7;
      --wave-1: #1f1f1f; --wave-2: #292929; --wave-3: #464775; --wave-4: #6264a7;
      --header-bg: rgba(32, 31, 31, 0.96);
      --sidebar-bg: rgba(41, 40, 40, 0.98);
      /* Match icon set: purple gradient mark + white pulse + #b2b5ff dot */
      --logo-mark-1: #5b5fc7;
      --logo-mark-2: #464775;
      --logo-stroke: #7f85f5;
      --logo-w: #ffffff;
      --logo-seed: #b2b5ff;
      --logo-text: #ffffff;
    }

    /* Nord */
    html.theme-nord,
    html[data-theme="nord"] {
      --bg-0: #2e3440;
      --bg-1: #3b4252;
      --bg-2: #434c5e;
      --card: rgba(59, 66, 82, 0.92);
      --text: #eceff4;
      --muted: #d8dee9;
      --accent: #88c0d0;
      --border: rgba(136, 192, 208, 0.28);
      --army: #5e81ac;
      --wave-1: #2e3440; --wave-2: #3b4252; --wave-3: #4c566a; --wave-4: #5e81ac;
      --header-bg: rgba(46, 52, 64, 0.96);
      --sidebar-bg: rgba(59, 66, 82, 0.98);
      --logo-mark-1: #5e81ac;
      --logo-mark-2: #4c566a;
      --logo-stroke: #88c0d0;
      --logo-w: #eceff4;
      --logo-seed: #a3be8c;
      --logo-text: #eceff4;
    }

    /* Paper — clean light professional */
    html.theme-paper,
    html[data-theme="paper"] {
      --bg-0: #e8e6e1;
      --bg-1: #f3f2ef;
      --bg-2: #faf9f7;
      --card: rgba(255, 255, 255, 0.92);
      --text: #1b1a19;
      --muted: #605e5c;
      --accent: #1264a3;
      --border: rgba(18, 100, 163, 0.2);
      --army: #1264a3;
      --wave-1: #e8e6e1; --wave-2: #f3f2ef; --wave-3: #c7e0f4; --wave-4: #1264a3;
      --header-bg: rgba(255, 255, 255, 0.94);
      --sidebar-bg: rgba(250, 249, 247, 0.98);
      --logo-mark-1: #1264a3;
      --logo-mark-2: #0b4a7a;
      --logo-stroke: #1264a3;
      --logo-w: #ffffff;
      --logo-seed: #2b88d8;
      --logo-text: #1b1a19;
    }

    /* Coffee — warm dark */
    html.theme-coffee,
    html[data-theme="coffee"] {
      --bg-0: #1a1410;
      --bg-1: #2a211c;
      --bg-2: #3d322a;
      --card: rgba(42, 33, 28, 0.92);
      --text: #f5ebe0;
      --muted: #c4a484;
      --accent: #e6a86e;
      --border: rgba(230, 168, 110, 0.28);
      --army: #a67c52;
      --wave-1: #1a1410; --wave-2: #2a211c; --wave-3: #5c4033; --wave-4: #c4a484;
      --header-bg: rgba(26, 20, 16, 0.96);
      --sidebar-bg: rgba(42, 33, 28, 0.98);
      --logo-mark-1: #a67c52;
      --logo-mark-2: #5c4033;
      --logo-stroke: #e6a86e;
      --logo-w: #f5ebe0;
      --logo-seed: #d4a373;
      --logo-text: #f5ebe0;
    }


    
    /* Theme-aware header logo (inline SVG) */
    #siteLogo .logo-stop-1 { stop-color: var(--logo-mark-1, #5b5fc7); }
    #siteLogo .logo-stop-2 { stop-color: var(--logo-mark-2, #464775); }
    #siteLogo .logo-mark-fallback { fill: var(--logo-mark-1, #5b5fc7); }
    #siteLogo .logo-mark-stroke { stroke: var(--logo-stroke, #7f85f5); }
    #siteLogo .logo-w-path { stroke: var(--logo-w, #ffffff); }
    #siteLogo .logo-seed { fill: var(--logo-seed, #b2b5ff); }
    #siteLogo .logo-wordmark { fill: var(--logo-text, #ffffff); }
    html.theme-forest-light #siteLogo .logo-mark-stroke,
    html[data-theme="forest-light"] #siteLogo .logo-mark-stroke {
      stroke-opacity: 0.85;
      stroke-width: 1.25;
    }
    html.theme-forest-light #siteLogo .logo-w-path,
    html[data-theme="forest-light"] #siteLogo .logo-w-path {
      stroke-width: 3.6;
    }
    html.theme-teams #siteLogo .logo-mark-stroke,
    html[data-theme="teams"] #siteLogo .logo-mark-stroke {
      stroke-opacity: 0.55;
      stroke-width: 1.5;
    }
    html.theme-teams #siteLogo .logo-w-path,
    html[data-theme="teams"] #siteLogo .logo-w-path {
      stroke-width: 3.2;
      stroke: #ffffff;
    }
    html.theme-teams #siteLogo .logo-seed,
    html[data-theme="teams"] #siteLogo .logo-seed {
      fill: #b2b5ff;
    }
    html.theme-blush-clouds #siteLogo .logo-mark-stroke,
    html[data-theme="blush-clouds"] #siteLogo .logo-mark-stroke{
      stroke-opacity: 0.85;
      stroke-width: 1.25;
    }
    html.theme-blush-clouds #siteLogo .logo-w-path,
    html[data-theme="blush-clouds"] #siteLogo .logo-w-path{
      stroke-width: 3.6;
    }


    #siteLogo { transition: filter 0.25s ease; }
    #siteLogo text { transition: fill 0.25s ease; }

    /* ===== Semantic theme utility classes (use in markup) ===== */
    .theme-bg { background-color: var(--bg-1, #1a2110); }
    .theme-bg-soft { background-color: var(--bg-2, #252f16); }
    .theme-text { color: var(--text, #e8e6d9); }
    .theme-muted { color: var(--muted, #a8b88a); }
    .theme-accent { color: var(--accent, #c5e1a5); }
    .theme-border { border-color: var(--border, rgba(143, 188, 143, 0.18)); }
    .theme-card {
      background: var(--card, rgba(26, 33, 16, 0.72)) !important;
      border: 1px solid var(--border, rgba(143, 188, 143, 0.18)) !important;
    }
    .theme-surface {
      background: var(--header-bg, rgba(26, 33, 16, 0.85));
      border-color: var(--border, rgba(143, 188, 143, 0.18));
      color: var(--text, #e8e6d9);
    }
    .theme-option[aria-selected="true"] {
      background: color-mix(in srgb, var(--army, #556b2f) 25%, transparent);
      box-shadow: inset 0 0 0 1px var(--border, rgba(143, 188, 143, 0.35));
    }

    html, body, button, input, select, textarea {
      font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }
    body {
      font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      min-height: 100vh;
      transition: background 0.35s ease, color 0.25s ease;
      background: linear-gradient(180deg, var(--bg-2, #3d4a22) 0%, var(--bg-1, #2f3b1c) 45%, var(--bg-0, #252f16) 100%);
      background-attachment: fixed;
      color: var(--text, #e8e6d9);
      padding-top: calc(var(--header-h, 3.5rem) + var(--shell-gap, 0.65rem));
      position: relative;
    }
    .dark body {
      background: linear-gradient(180deg, var(--bg-1, #1a2110) 0%, var(--bg-0, #14190c) 50%, #0a0c07 100%);
      background-attachment: fixed;
      color: var(--text, #e8e6d9);
    }

    /* Fixed wave layer at bottom (both themes) */
    #bgWaves {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: min(42vh, 380px);
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    #bgWaves svg {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
    #bgWaves .wave {
      transition: fill 0.35s ease, opacity 0.35s ease;
    }
    #bgWaves .wave-1 { fill: var(--wave-1, #4a5a28); opacity: 0.7; }
    #bgWaves .wave-2 { fill: var(--wave-2, #556b2f); opacity: 0.55; }
    #bgWaves .wave-3 { fill: var(--wave-3, #6b8e23); opacity: 0.35; }
    #bgWaves .wave-4 { fill: var(--wave-4, #8fbc8f); opacity: 0.18; }
    html.theme-forest-light #bgWaves .wave-1, html[data-theme="forest-light"] #bgWaves .wave-1 { opacity: 0.55; }
    html.theme-forest-light #bgWaves .wave-2, html[data-theme="forest-light"] #bgWaves .wave-2 { opacity: 0.45; }
    html.theme-forest-light #bgWaves .wave-3, html[data-theme="forest-light"] #bgWaves .wave-3 { opacity: 0.28; }
    html.theme-forest-light #bgWaves .wave-4, html[data-theme="forest-light"] #bgWaves .wave-4 { opacity: 0.14; }

    main, footer, header {
      position: relative;
      z-index: 1;
    }

    header {
      background: rgba(47, 59, 28, 0.28) !important;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(143, 188, 143, 0.18) !important;
    }
    .dark header {
      background: rgba(26, 33, 16, 0.35) !important;
      border-bottom: 1px solid rgba(143, 188, 143, 0.12) !important;
    }

    #scrollProgress {
      background: linear-gradient(90deg, #6b8e23, #556b2f, #8fbc8f);
      box-shadow: 0 0 12px rgba(107, 142, 35, 0.55);
    }

    .glass-card, .rounded-xl.border {
      background: var(--card, rgba(61, 74, 34, 0.55)) !important;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border, rgba(143, 188, 143, 0.18)) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
      border-radius: 1rem;
      transition: all 0.25s ease;
    }
    .dark .glass-card, .dark .rounded-xl.border {
      background: var(--card, rgba(26, 33, 16, 0.65)) !important;
      border: 1px solid var(--border, rgba(143, 188, 143, 0.12)) !important;
    }

    /* Theme-specific chrome (header / sidebar / footer) */
    html[class*="theme-"] header.fixed, html[data-theme] header.fixed {
      background: var(--header-bg) !important;
      border-bottom-color: var(--border) !important;
    }
    html[class*="theme-"] #desktopSidebar, html[data-theme] #desktopSidebar {
      background: var(--sidebar-bg) !important;
      border-right-color: var(--border) !important;
    }
    html[class*="theme-"] footer, html[data-theme] footer {
      background: transparent !important;
      border: none !important;
    }

    /* Slate accents */
    
    
    
    
    
    

    /* Compact Ink: denser, monochrome */
    
    
    
    
    
    
    
    
    


    /* ===== Blush Clouds theme ===== */
    #bgClouds {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      background:
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(253, 164, 175, 0.35), transparent 55%),
        radial-gradient(ellipse 60% 40% at 80% 15%, rgba(244, 114, 182, 0.25), transparent 50%),
        radial-gradient(ellipse 50% 45% at 50% 80%, rgba(232, 121, 249, 0.2), transparent 55%),
        linear-gradient(180deg, #fff7fb 0%, #fce7f3 45%, #fbcfe8 100%);
    }
    html.theme-blush-clouds #bgClouds,
    html[data-theme="blush-clouds"] #bgClouds {
      display: block;
    }
    html.theme-blush-clouds #bgWaves,
    html[data-theme="blush-clouds"] #bgWaves {
      display: none !important;
    }
    #bgClouds .cloud {
      position: absolute;
      background: #fff;
      border-radius: 100px;
      opacity: 0.85;
      box-shadow:
        0 0 0 0 #fff,
        40px 10px 0 -5px #fff,
        -35px 15px 0 -8px #fff,
        70px -5px 0 -12px rgba(255,255,255,0.9),
        -60px -8px 0 -10px rgba(255,255,255,0.85);
      filter: blur(1px);
      animation: cloud-drift linear infinite;
    }
    #bgClouds .cloud::before,
    #bgClouds .cloud::after {
      content: '';
      position: absolute;
      background: #fff;
      border-radius: 50%;
    }
    #bgClouds .cloud::before {
      width: 55%;
      height: 120%;
      top: -55%;
      left: 15%;
    }
    #bgClouds .cloud::after {
      width: 40%;
      height: 100%;
      top: -40%;
      right: 12%;
    }
    #bgClouds .c1 { width: 120px; height: 40px; top: 12%; left: -10%; animation-duration: 48s; opacity: 0.9; }
    #bgClouds .c2 { width: 160px; height: 48px; top: 28%; left: 20%; animation-duration: 62s; animation-delay: -12s; opacity: 0.75; }
    #bgClouds .c3 { width: 100px; height: 34px; top: 45%; left: 55%; animation-duration: 55s; animation-delay: -25s; opacity: 0.8; }
    #bgClouds .c4 { width: 180px; height: 52px; top: 62%; left: -5%; animation-duration: 70s; animation-delay: -8s; opacity: 0.7; }
    #bgClouds .c5 { width: 90px; height: 30px; top: 18%; left: 70%; animation-duration: 52s; animation-delay: -30s; opacity: 0.85; }
    #bgClouds .c6 { width: 140px; height: 42px; top: 75%; left: 40%; animation-duration: 58s; animation-delay: -18s; opacity: 0.65; }
    @keyframes cloud-drift {
      from { transform: translateX(0); }
      to { transform: translateX(calc(100vw + 200px)); }
    }
    @media (prefers-reduced-motion: reduce) {
      #bgClouds .cloud { animation: none; }
    }

    html.theme-blush-clouds .btn-army,
    html[data-theme="blush-clouds"] .btn-army {
      background: linear-gradient(180deg, #f472b6, #db2777) !important;
    }
    html.theme-blush-clouds .text-\[\#c5e1a5\],
    html[data-theme="blush-clouds"] .text-\[\#c5e1a5\] { color: #be185d !important; }
    html.theme-blush-clouds .text-\[\#a8b88a\],
    html[data-theme="blush-clouds"] .text-\[\#a8b88a\] { color: #9d548d !important; }
    html.theme-blush-clouds .text-\[\#e8e6d9\],
    html.theme-blush-clouds .text-\[\#d4d0b8\],
    html[data-theme="blush-clouds"] .text-\[\#e8e6d9\],
    html[data-theme="blush-clouds"] .text-\[\#d4d0b8\] { color: #4a1942 !important; }
    html.theme-blush-clouds .border-\[\#6b8e23\]\/40,
    html.theme-blush-clouds .border-\[\#6b8e23\]\/30,
    html.theme-blush-clouds .border-\[\#6b8e23\]\/25,
    html[data-theme="blush-clouds"] .border-\[\#6b8e23\]\/40,
    html[data-theme="blush-clouds"] .border-\[\#6b8e23\]\/30,
    html[data-theme="blush-clouds"] .border-\[\#6b8e23\]\/25 {
      border-color: rgba(244, 114, 182, 0.4) !important;
    }
    html.theme-blush-clouds .bg-\[\#556b2f\],
    html.theme-blush-clouds .bg-\[\#556b2f\]\/30,
    html.theme-blush-clouds .bg-\[\#556b2f\]\/40,
    html.theme-blush-clouds .bg-\[\#556b2f\]\/50,
    html[data-theme="blush-clouds"] .bg-\[\#556b2f\],
    html[data-theme="blush-clouds"] .bg-\[\#556b2f\]\/30,
    html[data-theme="blush-clouds"] .bg-\[\#556b2f\]\/40 {
      background-color: rgba(236, 72, 153, 0.2) !important;
    }
    html.theme-blush-clouds .bg-\[\#1a2110\],
    html.theme-blush-clouds .bg-\[\#1a2110\]\/95,
    html[data-theme="blush-clouds"] .bg-\[\#1a2110\],
    html[data-theme="blush-clouds"] .bg-\[\#1a2110\]\/95 {
      background-color: #fff7fb !important;
    }
    html.theme-blush-clouds #desktopSidebar .nav-link.active-link,
    html.theme-blush-clouds #navDropdown .nav-link.active-link,
    html[data-theme="blush-clouds"] #desktopSidebar .nav-link.active-link,
    html[data-theme="blush-clouds"] #navDropdown .nav-link.active-link {
      background: rgba(244, 114, 182, 0.22) !important;
      color: #9d174d !important;
    }
    html.theme-blush-clouds .glass-card,
    html[data-theme="blush-clouds"] .glass-card {
      box-shadow: 0 8px 28px rgba(236, 72, 153, 0.12);
    }
    /* Override green light-mode polish when blush is active */
    html.theme-blush-clouds:not(.dark) body {
      background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%) !important;
      color: var(--text) !important;
    }
    html.theme-blush-clouds:not(.dark) .glass-card,
    html.theme-blush-clouds:not(.dark) .rounded-xl.border {
      background: rgba(255, 255, 255, 0.85) !important;
      border-color: rgba(244, 114, 182, 0.28) !important;
    }
    html.theme-blush-clouds:not(.dark) .text-\[\#c5e1a5\] { color: #be185d !important; }
    html.theme-blush-clouds:not(.dark) .text-\[\#a8b88a\] { color: #9d548d !important; }
    html.theme-blush-clouds:not(.dark) header {
      background: rgba(255, 247, 251, 0.9) !important;
      border-bottom-color: rgba(244, 114, 182, 0.25) !important;
    }
    html.theme-blush-clouds:not(.dark) #desktopSidebar,
    html.theme-blush-clouds:not(.dark) #navDropdown {
      background: rgba(255, 255, 255, 0.95) !important;
      border-color: rgba(244, 114, 182, 0.25) !important;
    }
    html.theme-blush-clouds:not(.dark) #desktopSidebar .nav-link,
    html.theme-blush-clouds:not(.dark) #navDropdown .nav-link {
      color: #4a1942 !important;
    }
    html.theme-blush-clouds:not(.dark) input,
    html.theme-blush-clouds:not(.dark) textarea,
    html.theme-blush-clouds:not(.dark) select {
      background: rgba(255, 255, 255, 0.95) !important;
      color: #4a1942 !important;
      border-color: rgba(244, 114, 182, 0.35) !important;
    }


    /* ===== Forest tree background (replaces waves on forest themes) ===== */
    #bgTrees {
      display: none;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      width: 100%;
      height: min(48vh, 420px);
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    #bgTrees .trees-svg {
      position: absolute;
      left: 0; bottom: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
    #bgTrees .tree-layer { transition: fill 0.35s ease, opacity 0.35s ease; }
    #bgTrees .tree-layer.far { opacity: 0.45; }
    #bgTrees .tree-layer.near { opacity: 0.75; }
    html.theme-forest-dark #bgTrees,
    html[data-theme="forest-dark"] #bgTrees,
    html.theme-forest-light #bgTrees,
    html[data-theme="forest-light"] #bgTrees {
      display: block;
    }
    html.theme-forest-dark #bgWaves,
    html[data-theme="forest-dark"] #bgWaves,
    html.theme-forest-light #bgWaves,
    html[data-theme="forest-light"] #bgWaves {
      display: none !important;
    }
    html.theme-forest-dark #bgTrees .tree-layer.far { fill: #1a2110; }
    html.theme-forest-dark #bgTrees .tree-layer.near { fill: #2f3b1c; }
    html.theme-forest-light #bgTrees .tree-layer.far { fill: #6b8e23; opacity: 0.35; }
    html.theme-forest-light #bgTrees .tree-layer.near { fill: #556b2f; opacity: 0.5; }

    
    
    /* Enchanted Dusk — glowing mushroom forest */
    #bgMushrooms {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    html.theme-mushroom #bgMushrooms,
    html[data-theme="mushroom"] #bgMushrooms {
      display: block;
    }
    html.theme-mushroom #bgWaves,
    html[data-theme="mushroom"] #bgWaves,
    html.theme-mushroom #bgTrees,
    html[data-theme="mushroom"] #bgTrees,
    html.theme-mushroom #bgClouds,
    html[data-theme="mushroom"] #bgClouds {
      display: none !important;
    }
    #bgMushrooms .mush-sky {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 40% at 72% 58%, rgba(255, 176, 96, 0.22), transparent 58%),
        radial-gradient(ellipse 40% 30% at 18% 78%, rgba(80, 140, 70, 0.16), transparent 55%),
        linear-gradient(180deg, #4a2e36 0%, #6a3e42 28%, #8a5a4e 55%, #3a2a24 78%, #16110f 100%);
    }
    #bgMushrooms .mush-spores {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 236, 200, 0.7) 0 1.2px, transparent 2px),
        radial-gradient(circle at 28% 42%, rgba(255, 220, 170, 0.45) 0 1px, transparent 2px),
        radial-gradient(circle at 61% 22%, rgba(255, 236, 200, 0.65) 0 1.4px, transparent 2.2px),
        radial-gradient(circle at 78% 36%, rgba(255, 200, 140, 0.4) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 14%, rgba(255, 236, 200, 0.55) 0 1.1px, transparent 2px),
        radial-gradient(circle at 40% 12%, rgba(255, 220, 170, 0.35) 0 0.8px, transparent 1.6px);
      background-size: 220px 220px, 180px 180px, 260px 260px, 200px 200px, 160px 160px, 140px 140px;
      animation: mush-drift 48s linear infinite;
      opacity: 0.85;
    }
    @keyframes mush-drift {
      from { transform: translateY(0); }
      to { transform: translateY(-40px); }
    }
    @media (prefers-reduced-motion: reduce) {
      #bgMushrooms .mush-spores { animation: none; }
    }
    #bgMushrooms .mush-svg {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      width: 100%;
      height: min(58vh, 520px);
      display: block;
    }
    html.theme-mushroom body,
    html[data-theme="mushroom"] body {
      background: #1a1214 !important;
    }

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    

    /* Utility remaps — Enchanted Dusk */
    html.theme-mushroom .btn-army,
    html[data-theme="mushroom"] .btn-army {
      background: linear-gradient(180deg, #e08a4a, #c47848) !important;
    }
    html.theme-mushroom .text-\[\#c5e1a5\],
    html[data-theme="mushroom"] .text-\[\#c5e1a5\] { color: #f0b27a !important; }
    html.theme-mushroom .text-\[\#a8b88a\],
    html[data-theme="mushroom"] .text-\[\#a8b88a\] { color: #c4a08a !important; }
    html.theme-mushroom .text-\[\#e8e6d9\],
    html.theme-mushroom .text-\[\#d4d0b8\],
    html[data-theme="mushroom"] .text-\[\#e8e6d9\],
    html[data-theme="mushroom"] .text-\[\#d4d0b8\] { color: #f3e6d4 !important; }
    html.theme-mushroom .border-\[\#6b8e23\]\/40,
    html.theme-mushroom .border-\[\#6b8e23\]\/30,
    html.theme-mushroom .border-\[\#6b8e23\]\/25,
    html[data-theme="mushroom"] .border-\[\#6b8e23\]\/40,
    html[data-theme="mushroom"] .border-\[\#6b8e23\]\/30,
    html[data-theme="mushroom"] .border-\[\#6b8e23\]\/25 {
      border-color: rgba(240, 178, 122, 0.28) !important;
    }
    html.theme-mushroom .bg-\[\#556b2f\],
    html.theme-mushroom .bg-\[\#556b2f\]\/30,
    html.theme-mushroom .bg-\[\#556b2f\]\/40,
    html[data-theme="mushroom"] .bg-\[\#556b2f\],
    html[data-theme="mushroom"] .bg-\[\#556b2f\]\/30,
    html[data-theme="mushroom"] .bg-\[\#556b2f\]\/40 {
      background-color: rgba(196, 120, 72, 0.22) !important;
    }
    html.theme-mushroom .bg-\[\#1a2110\],
    html.theme-mushroom .bg-\[\#1a2110\]\/95,
    html[data-theme="mushroom"] .bg-\[\#1a2110\],
    html[data-theme="mushroom"] .bg-\[\#1a2110\]\/95 { background-color: #1a1214 !important; }
    html.theme-mushroom #desktopSidebar .nav-link.active-link,
    html.theme-mushroom #navDropdown .nav-link.active-link,
    html[data-theme="mushroom"] #desktopSidebar .nav-link.active-link,
    html[data-theme="mushroom"] #navDropdown .nav-link.active-link {
      background: rgba(224, 138, 74, 0.2) !important; color: #ffe7c2 !important;
    }


    /* ===== Spider-Man / Web-Slinger theme ===== */



    
    
    

    @keyframes venom-morph {
      0%, 100% { transform: scale(1) translate(0, 0) rotate(0deg); border-radius: 60% 40% 55% 45%; }
      33% { transform: scale(1.08) translate(2%, -3%) rotate(3deg); border-radius: 45% 55% 40% 60%; }
      66% { transform: scale(0.96) translate(-2%, 2%) rotate(-2deg); border-radius: 50% 50% 45% 55%; }
    }
    @media (prefers-reduced-motion: reduce) {
    }

    
    
    
    
    
    
    
    
    
    
    
    
    

    /* ===== Theme consistency (site-wide) ===== */
    html[class*="theme-"] .btn-pill {
      border-color: var(--border) !important;
      background: color-mix(in srgb, var(--army) 28%, transparent) !important;
      color: var(--accent) !important;
    }
    html[class*="theme-"] .btn-pill:hover {
      background: color-mix(in srgb, var(--army) 45%, transparent) !important;
    }
    html[class*="theme-"] #scrollProgress {
      background: linear-gradient(90deg, var(--army), var(--accent), var(--muted)) !important;
      box-shadow: 0 0 12px color-mix(in srgb, var(--army) 50%, transparent);
    }
    html[class*="theme-"] #globalTooltip {
      background: var(--card) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    html[class*="theme-"] #navDropdown {
      background: var(--sidebar-bg) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    html[class*="theme-"] #navDropdown .nav-link {
      color: var(--text) !important;
    }
    html[class*="theme-"] #navDropdown .nav-link:hover {
      background: color-mix(in srgb, var(--army) 22%, transparent) !important;
      color: var(--accent) !important;
    }
    html[class*="theme-"] #desktopSidebar .nav-group-header,
    html[class*="theme-"] #navDropdown .text-\[\#a8b88a\] {
      color: var(--muted) !important;
    }
    html[class*="theme-"] header {
      background: var(--header-bg) !important;
      border-bottom-color: var(--border) !important;
    }
    html[class*="theme-"] footer {
      background: transparent !important;
      border: none !important;
      color: var(--muted) !important;
    }
    html[class*="theme-"] #dateTimePill {
      border-color: var(--border) !important;
      background: color-mix(in srgb, var(--army) 25%, transparent) !important;
      color: var(--accent) !important;
    }
    html[class*="theme-"] #themeChooser {
      background: var(--card) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    html[class*="theme-"] #loginModal > div,
    html[class*="theme-"] #managerDetailModal > div,
    html[class*="theme-"] #communityDetailModal > div,
    html[class*="theme-"] #auditModal > div,
    html[class*="theme-"] #customLinkModal > div,
    html[class*="theme-"] #shortcutsModal > div {
      background: var(--card) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    html[class*="theme-"] #managerDetailModal .sticky,
    html[class*="theme-"] #communityDetailModal .sticky,
    html[class*="theme-"] #auditModal .sticky {
      background: color-mix(in srgb, var(--bg-1) 92%, transparent) !important;
      border-color: var(--border) !important;
    }
    html[class*="theme-"] .edit-field-btn { color: var(--muted) !important; }
    html[class*="theme-"] .edit-field-btn:hover {
      color: var(--accent) !important;
      background: color-mix(in srgb, var(--army) 25%, transparent) !important;
    }
    html[class*="theme-"] .field-editing {
      outline-color: var(--army) !important;
    }
    html[class*="theme-"] th.sortable:hover { color: var(--accent) !important; }
    html[class*="theme-"] .audit-manager-card:hover {
      border-color: var(--border) !important;
      background: color-mix(in srgb, var(--army) 18%, transparent) !important;
    }
    html[class*="theme-"] .audit-manager-card .bg-\[\#556b2f\] {
      background-color: var(--army) !important;
    }


    
    /* ===== Universal theme surface matching (cells, fields, menus, highlights) ===== */
    html[class*="theme-"] {
      color: var(--text);
    }
    html[class*="theme-"] body {
      color: var(--text);
    }
    /* Cards / panels */
    html[class*="theme-"] .glass-card,
    html[class*="theme-"] .rounded-xl.border,
    html[class*="theme-"] .rounded-2xl.border {
      background: var(--card) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    /* Primary buttons */
    html[class*="theme-"] .btn-army {
      background-color: var(--army) !important;
      color: #fff !important;
      border-color: transparent !important;
    }
    html[class*="theme-"] .btn-pill {
      background: color-mix(in srgb, var(--card) 80%, transparent) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    html[class*="theme-"] .btn-pill:hover {
      background: color-mix(in srgb, var(--army) 25%, transparent) !important;
      color: var(--accent) !important;
    }
    /* Text utilities → theme tokens */
    html[class*="theme-"] .text-\[\#c5e1a5\],
    html[class*="theme-"] .text-\[\#8fbc8f\] {
      color: var(--accent) !important;
    }
    html[class*="theme-"] .text-\[\#a8b88a\],
    html[class*="theme-"] .text-\[\#6b8e23\] {
      color: var(--muted) !important;
    }
    html[class*="theme-"] .text-\[\#e8e6d9\],
    html[class*="theme-"] .text-\[\#d4d0b8\] {
      color: var(--text) !important;
    }
    /* Borders */
    html[class*="theme-"] .border-\[\#6b8e23\]\/20,
    html[class*="theme-"] .border-\[\#6b8e23\]\/25,
    html[class*="theme-"] .border-\[\#6b8e23\]\/30,
    html[class*="theme-"] .border-\[\#6b8e23\]\/40,
    html[class*="theme-"] .border-\[\#6b8e23\]\/50,
    html[class*="theme-"] .border-\[\#6b8e23\]\/60,
    html[class*="theme-"] .border-white\/5,
    html[class*="theme-"] .border-white\/10,
    html[class*="theme-"] .border-white\/20 {
      border-color: var(--border) !important;
    }
    /* Background chips / fills */
    html[class*="theme-"] .bg-\[\#556b2f\],
    html[class*="theme-"] .bg-\[\#556b2f\]\/20,
    html[class*="theme-"] .bg-\[\#556b2f\]\/30,
    html[class*="theme-"] .bg-\[\#556b2f\]\/40,
    html[class*="theme-"] .bg-\[\#556b2f\]\/50,
    html[class*="theme-"] .bg-\[\#556b2f\]\/60 {
      background-color: color-mix(in srgb, var(--army) 35%, transparent) !important;
    }
    html[class*="theme-"] .bg-\[\#1a2110\],
    html[class*="theme-"] .bg-\[\#1a2110\]\/90,
    html[class*="theme-"] .bg-\[\#1a2110\]\/95 {
      background-color: var(--bg-1) !important;
    }
    html[class*="theme-"] .bg-black\/15,
    html[class*="theme-"] .bg-black\/20,
    html[class*="theme-"] .bg-black\/30 {
      background-color: color-mix(in srgb, var(--bg-0) 55%, transparent) !important;
    }
    html[class*="theme-"] .bg-white\/5,
    html[class*="theme-"] .bg-white\/10 {
      background-color: color-mix(in srgb, var(--text) 8%, transparent) !important;
    }
    /* Hover surfaces */
    html[class*="theme-"] .hover\:bg-white\/5:hover,
    html[class*="theme-"] .hover\:bg-white\/10:hover {
      background-color: color-mix(in srgb, var(--army) 18%, transparent) !important;
    }
    html[class*="theme-"] .hover\:bg-\[\#556b2f\]\/20:hover,
    html[class*="theme-"] .hover\:bg-\[\#556b2f\]\/30:hover,
    html[class*="theme-"] .hover\:bg-\[\#556b2f\]\/40:hover,
    html[class*="theme-"] .hover\:bg-\[\#556b2f\]\/70:hover {
      background-color: color-mix(in srgb, var(--army) 40%, transparent) !important;
    }
    html[class*="theme-"] .hover\:border-\[\#6b8e23\]\/60:hover,
    html[class*="theme-"] .hover\:border-\[\#6b8e23\]\/50:hover {
      border-color: var(--accent) !important;
    }
    html[class*="theme-"] .hover\:text-\[\#c5e1a5\]:hover {
      color: var(--accent) !important;
    }
    /* Form fields */
    html[class*="theme-"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    html[class*="theme-"] textarea,
    html[class*="theme-"] select,
    html[class*="theme-"] .field-value[contenteditable="true"] {
      background: color-mix(in srgb, var(--card) 92%, var(--bg-0)) !important;
      color: var(--text) !important;
      border-color: var(--border) !important;
      caret-color: var(--accent);
    }
    html[class*="theme-"] input:focus,
    html[class*="theme-"] textarea:focus,
    html[class*="theme-"] select:focus,
    html[class*="theme-"] .field-value[contenteditable="true"]:focus {
      outline: none !important;
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent) !important;
    }
    html[class*="theme-"] input::placeholder,
    html[class*="theme-"] textarea::placeholder {
      color: color-mix(in srgb, var(--muted) 85%, transparent) !important;
    }
    html[class*="theme-"] option {
      background: var(--bg-1);
      color: var(--text);
    }
    /* Tables: headers, cells, hover, priority */
    html[class*="theme-"] table thead,
    html[class*="theme-"] table th {
      color: var(--accent) !important;
      border-color: var(--border) !important;
      background: color-mix(in srgb, var(--card) 70%, transparent) !important;
    }
    html[class*="theme-"] table td {
      border-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
      color: var(--text);
    }
    html[class*="theme-"] table tbody tr:hover td {
      background: color-mix(in srgb, var(--army) 12%, transparent) !important;
    }
    html[class*="theme-"] tr.priority-row td {
      background: color-mix(in srgb, #ef4444 10%, var(--card)) !important;
      box-shadow: inset 3px 0 0 #ef4444;
    }
    html[class*="theme-"] th.sortable:hover {
      color: var(--text) !important;
      background: color-mix(in srgb, var(--army) 18%, transparent) !important;
    }
    /* Community / region pills */
    html[class*="theme-"] .community-pill,
    html[class*="theme-"] .px-2\.5.py-0\.5.rounded-full {
      border-color: var(--border);
    }
    /* Nav menus & dropdowns */
    html[class*="theme-"] #navDropdown,
    html[class*="theme-"] #themeChooser,
    html[class*="theme-"] #desktopSidebar {
      background: var(--sidebar-bg) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    html[class*="theme-"] #navDropdown .nav-link,
    html[class*="theme-"] #desktopSidebar .nav-link,
    html[class*="theme-"] #sidebarNav a,
    html[class*="theme-"] .nav-link {
      color: var(--text) !important;
    }
    html[class*="theme-"] #navDropdown .nav-link:hover,
    html[class*="theme-"] #desktopSidebar .nav-link:hover,
    html[class*="theme-"] .nav-link:hover {
      background: color-mix(in srgb, var(--army) 22%, transparent) !important;
      color: var(--accent) !important;
    }
    html[class*="theme-"] #navDropdown .nav-link.active-link,
    html[class*="theme-"] #desktopSidebar .nav-link.active-link,
    html[class*="theme-"] .nav-link.active-link {
      background: color-mix(in srgb, var(--army) 32%, transparent) !important;
      color: var(--accent) !important;
    }
    html[class*="theme-"] .nav-group-header {
      color: var(--muted) !important;
    }
    html[class*="theme-"] .theme-option:hover {
      background: color-mix(in srgb, var(--army) 22%, transparent) !important;
    }
    /* Modals */
    html[class*="theme-"] #loginModal > div,
    html[class*="theme-"] #managerDetailModal > div,
    html[class*="theme-"] #communityDetailModal > div,
    html[class*="theme-"] #auditModal > div,
    html[class*="theme-"] #customLinkModal > div,
    html[class*="theme-"] #shortcutsModal > div,
    html[class*="theme-"] #batchPrintModal > div,
    html[class*="theme-"] #releaseNotesModal > div {
      background: var(--bg-1) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    /* Header */
    html[class*="theme-"] header.fixed {
      background: var(--header-bg) !important;
      border-bottom: 1px solid var(--border) !important;
    }
    /* Edit field controls */
    html[class*="theme-"] .edit-field-btn {
      color: var(--muted) !important;
    }
    html[class*="theme-"] .edit-field-btn:hover {
      color: var(--accent) !important;
      background: color-mix(in srgb, var(--army) 20%, transparent) !important;
    }
    /* Mobile bottom nav */
    html[class*="theme-"] #mobileBottomNav {
      background: var(--header-bg) !important;
      border-color: var(--border) !important;
    }
    html[class*="theme-"] #mobileBottomNav .bottom-nav-btn {
      color: var(--muted) !important;
    }
    html[class*="theme-"] #mobileBottomNav .bottom-nav-btn.is-active {
      color: var(--accent) !important;
      background: color-mix(in srgb, var(--army) 22%, transparent) !important;
    }
    /* Checkboxes accent */
    html[class*="theme-"] input[type="checkbox"],
    html[class*="theme-"] input[type="radio"] {
      accent-color: var(--army);
    }
    /* Scrollbars (webkit) */
    html[class*="theme-"] *::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--army) 45%, transparent);
      border-radius: 999px;
    }
    html[class*="theme-"] *::-webkit-scrollbar-track {
      background: transparent;
    }
    /* Site visit status selects / rating cards */
    html[class*="theme-"] .sv-rating-card,
    html[class*="theme-"] .sv-status,
    html[class*="theme-"] .sv-note,
    html[class*="theme-"] .sv-field {
      border-color: var(--border) !important;
    }
    /* Audit chips / progress */
    html[class*="theme-"] .audit-chip,
    html[class*="theme-"] [class*="audit"] {
      border-color: var(--border);
    }
    /* Install banner */
    html[class*="theme-"] #installBanner > div {
      background: var(--card) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    /* Table mobile cards */
    html[class*="theme-"] .table-mobile-cards tbody tr {
      background: var(--card) !important;
      border-color: var(--border) !important;
    }
    html[class*="theme-"] .table-mobile-cards tbody td::before {
      color: var(--muted) !important;
    }


    /* Inputs / links / footer always follow theme tokens */
    html[class*="theme-"] a:not(.nav-link):not(.btn-army):not(.btn-pill) {
      color: var(--accent);
    }
    html[class*="theme-"] input,
    html[class*="theme-"] textarea,
    html[class*="theme-"] select {
      background: color-mix(in srgb, var(--card) 88%, transparent) !important;
      color: var(--text) !important;
      border-color: var(--border) !important;
    }
    html[class*="theme-"] input::placeholder,
    html[class*="theme-"] textarea::placeholder {
      color: color-mix(in srgb, var(--muted) 80%, transparent) !important;
    }
    html[class*="theme-"] footer p,
    html[class*="theme-"] #appVersion,
    html[class*="theme-"] #appLastUpdate {
      color: var(--muted) !important;
    }
    html[class*="theme-"] .managers-view-btn {
      color: var(--text) !important;
    }
    html[class*="theme-"] .managers-view-btn[aria-selected="true"],
    html[class*="theme-"] .managers-view-btn.bg-\[\#556b2f\]\/50 {
      background: color-mix(in srgb, var(--army) 35%, transparent) !important;
      color: var(--accent) !important;
    }

    /* Slate: broader utility remap */
    
    
    
    
    
    
    

    /* Compact ink: broader utility remap */
    
    
    
    
    
    
    

    .glass-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.3);
    }

    thead { background: rgba(0,0,0,0.15) !important; }

    #navDropdown {
      background: rgba(47, 59, 28, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(143, 188, 143, 0.2);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      color: #e8e6d9;
    }
    .dark #navDropdown { background: rgba(26, 33, 16, 0.97); }
    #navDropdown .nav-link { color: #d4d0b8; }
    #navDropdown .nav-link:hover {
      background: rgba(107, 142, 35, 0.25);
      color: #c5e1a5;
    }
    /* Active menu items (Dark Mode) */
    #navDropdown .nav-link.active-link,
    #desktopSidebar .nav-link.active-link {
      background: rgba(107, 142, 35, 0.35) !important;
      color: #c5e1a5 !important;
    }

    #loginModal > div {
      background: rgba(47, 59, 28, 0.95) !important;
      backdrop-filter: blur(24px);
      border: 1px solid rgba(143, 188, 143, 0.2);
    }

    input, textarea {
      background: rgba(61, 74, 34, 0.6) !important;
      border: 1px solid rgba(143, 188, 143, 0.25) !important;
      color: #e8e6d9 !important;
    }

    [contenteditable="true"] {
      outline: 2px solid #6b8e23;
      outline-offset: 2px;
      border-radius: 4px;
      background: rgba(107, 142, 35, 0.15);
    }

    .grade-A { @apply bg-emerald-900/60 text-emerald-200; }
    .grade-B { @apply bg-blue-900/50 text-blue-200; }
    .grade-C { @apply bg-amber-900/50 text-amber-200; }
    .grade-D, .grade-F { @apply bg-red-900/50 text-red-200; }

    tr.dragging { opacity: 0.45; background: #556b2f !important; color: white !important; }
    tr.drag-over td { border-top: 3px solid #6b8e23; }
    .row-handle { cursor: grab; user-select: none; color: #a8b88a; }

    tbody tr { transition: all 0.2s ease; }
    tbody tr:hover {
      background-color: rgba(107, 142, 35, 0.35) !important;
      box-shadow: inset 4px 0 0 #8fbc8f;
    }
    tbody tr:hover td { color: #ffffff; }

    tbody tr.priority-row {
      background-color: rgba(185, 28, 28, 0.15) !important;
    }
    tbody tr.priority-row:hover {
      background-color: rgba(185, 28, 28, 0.28) !important;
      box-shadow: inset 4px 0 0 #ef4444;
    }

    .section {
      display: none !important;
      opacity: 1;
      transform: none;
    }
    .section.active {
      display: block !important;
      opacity: 1;
      transform: none;
    }

    /* Site visit: note only when Needs Improvement is selected */
    #site-visit .sv-note {
      display: none;
      margin-top: 0.5rem;
    }
    #site-visit .sv-note.is-open {
      display: block;
    }

    @media print {
      #site-visit .sv-note.is-open { display: block !important; }
      #site-visit .sv-note:not(.is-open) { display: none !important; }
    }

    .btn-pill {
      padding: 0.375rem 1rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid rgba(107, 142, 35, 0.4);
      background: rgba(85, 107, 47, 0.3);
      color: #c5e1a5;
      transition: all 0.2s ease;
      backdrop-filter: blur(8px);
    }
    .btn-pill:hover {
      background: rgba(85, 107, 47, 0.5);
    }

    .edit-field-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.1rem 0.25rem;
      border-radius: 0.25rem;
      color: #a8b88a;
      opacity: 0.55;
      transition: opacity 0.15s, color 0.15s, background 0.15s;
      flex-shrink: 0;
      line-height: 1;
      font-size: 0.7rem;
    }
    .edit-field-btn:hover {
      opacity: 1;
      color: #c5e1a5;
      background: rgba(107, 142, 35, 0.25);
    }
    .field-editing {
      outline: 1px solid rgba(107, 142, 35, 0.55);
      background: rgba(0, 0, 0, 0.25);
      border-radius: 0.25rem;
      padding: 0 0.2rem;
    }

    .btn-army {
      background-color: var(--army, #556b2f) !important;
      color: #fff !important;
    }
    .btn-army:hover {
      filter: brightness(0.92);
    }

    th.sortable { cursor: pointer; user-select: none; }
    th.sortable:hover { color: #c5e1a5; }

    /* ===== Interactive Tooltips ===== */
    #globalTooltip {
      position: fixed;
      z-index: 9999;
      pointer-events: none;
      padding: 0.45rem 0.75rem;
      border-radius: 0.5rem;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.35;
      max-width: 240px;
      background: rgba(26, 33, 16, 0.96);
      border: 1px solid rgba(143, 188, 143, 0.3);
      color: #e8e6d9;
      box-shadow: 0 8px 24px rgba(0,0,0,0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.15s ease, transform 0.15s ease;
      white-space: pre-line;
    }
    #globalTooltip.visible {
      opacity: 1;
      transform: translateY(0);
    }
    #globalTooltip::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px 5px 0 5px;
      border-style: solid;
      border-color: rgba(26, 33, 16, 0.96) transparent transparent transparent;
    }
    [data-tip] { cursor: help; }

    /* Tables: smooth horizontal scroll on touch */
    .overflow-x-auto {
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    table { min-width: 640px; }
    #receiptsCards table, #questionnaire table { min-width: 0; }

    /* Touch-friendly targets */
    .btn-pill, .add-row-btn, #themeToggle, #densityToggle, #adminBtn, #menuBtn {
      min-height: 40px;
      min-width: 40px;
    }
    th.sortable { padding-top: 0.75rem; padding-bottom: 0.75rem; }

    /* ===== Desktop / tablet sidebar ===== */
    #desktopSidebar {
      width: 16rem;
      overflow: hidden;
    }
    #desktopSidebar .nav-link {
      color: #d4d0b8;
    }
    #desktopSidebar .nav-link:hover {
      background: rgba(107, 142, 35, 0.25);
      color: #c5e1a5;
    }
    #desktopSidebar.collapsed .sidebar-text { display: none !important; }
    #desktopSidebar.collapsed .nav-group-header {
      text-align: center;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
      font-size: 0.55rem;
      letter-spacing: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #desktopSidebar.collapsed .nav-link {
      justify-content: center;
      margin-left: 0.35rem;
      margin-right: 0.35rem;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
    }
    #desktopSidebar.collapsed .nav-link .nav-icon {
      width: 2rem;
      height: 2rem;
    }
    #desktopSidebar .nav-link.active-link .nav-icon {
      background: rgba(107, 142, 35, 0.55);
      color: #e8f5c8;
    }
    @media (min-width: 768px) {
      #mainWrapper { margin-left: 16rem; }
      #mainWrapper.collapsed { margin-left: 4.25rem; }
      #desktopSidebar { width: 16rem; }
      #desktopSidebar.collapsed { width: 4.25rem; }
    }

    @media (max-width: 767px) {
      #desktopSidebar { display: none !important; }
      #mainWrapper, #mainWrapper.collapsed { margin-left: 0 !important; }
    }

    /* ===== Mobile ===== */
    @media (max-width: 768px) {
      body {
        padding-top: var(--header-h, 3.5rem);
        background-attachment: fixed;
      }
      #bgWaves {
        height: min(32vh, 240px);
      }
      header > div {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        gap: 0.35rem;
      }
      /* Logo mark sized via #siteLogo rules; legacy img fallback */
      header img {
        height: 2.5rem !important;
        max-height: 40px;
      }
      #navDropdown {
        position: fixed !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        top: 4.25rem !important;
        margin-top: 0 !important;
        max-height: calc(100vh - 5rem);
      }
      #navDropdown .nav-link {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
        font-size: 0.95rem;
      }
      /* Compact admin cluster */
      #adminControls {
        gap: 0.35rem !important;
      }
      #adminControls .btn-pill {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.7rem;
      }
      #adminBtn {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        font-size: 0.75rem;
      }
      main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 0.75rem !important;
      }
      h2 { font-size: 1.25rem !important; }
      /* KPI cards tighter */
      #analyticsWidgets .text-3xl { font-size: 1.5rem !important; }
      #analyticsWidgets .w-10 { width: 2rem; height: 2rem; }
      #analyticsWidgets .w-10 svg { width: 1rem; height: 1rem; }
      #analyticsWidgets .p-4 { padding: 0.75rem !important; }
      #analyticsWidgets .p-5 { padding: 0.85rem !important; }
      /* Disable lift hover on touch devices */
      .glass-card:hover {
        transform: none;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
      }
      /* Table cells more compact */
      table th, table td {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
        font-size: 0.8125rem;
      }
      table { min-width: 560px; }
      /* Action column stays usable */
      .row-handle { font-size: 1.1rem; padding: 0.25rem; }
      /* Map height — only the map shell, not directory cards */
      /* Footer stack */
      footer { padding-bottom: env(safe-area-inset-bottom, 0); }
      footer .grid { gap: 1.5rem; }
      /* Login modal full-bleed-ish */
      #loginModal > div {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
      }
      /* Training / questionnaire inputs */
      input, textarea {
        font-size: 16px !important; /* prevents iOS zoom on focus */
      }
      /* Tooltips stay available on touch (tap to show) */
      #globalTooltip { display: block; }
    }

    @media (max-width: 480px) {
      body { padding-top: var(--header-h, 3.5rem); }
      header img {
        height: 2.25rem !important;
        max-height: 36px;
      }
      /* Stack header actions more tightly */
      #themeToggle { padding: 0.4rem; }
      #analyticsWidgets > .grid {
        gap: 0.5rem !important;
      }
      #analyticsWidgets .text-3xl { font-size: 1.35rem !important; }
      #analyticsWidgets .text-xs { font-size: 0.65rem !important; }
      #analyticsWidgets .text-\[11px\] { font-size: 0.6rem !important; }
      /* On very small screens hide KPI icons to free space */
      #analyticsWidgets .w-10 { display: none; }
      main h2 { font-size: 1.125rem !important; }
      .btn-pill {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
        font-size: 0.7rem;
      }
      /* Section helper text */
      .section > p.text-sm { font-size: 0.75rem; margin-bottom: 0.75rem !important; }
    }

    /* Prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .section, .glass-card, #globalTooltip, #scrollProgress {
        transition: none !important;
      }
    }

    /* Safe areas (notched phones) */
    @supports (padding: max(0px)) {
      header {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
      }
      body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
      }
    }

    /* ===== Density (compact tables) ===== */
    html.compact table { font-size: 0.8125rem; }
    html.compact th, html.compact td { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
    html.compact .glass-card { padding: 0.85rem !important; }
    html.compact #analyticsWidgets .p-4,
    html.compact #analyticsWidgets .p-5 { padding: 0.75rem !important; }
    html.compact tbody tr:hover { box-shadow: inset 3px 0 0 #8fbc8f; }
    html.compact .community-pill { padding: 0.1rem 0.45rem; font-size: 0.7rem; }

    /* ===== Form & Dropdown Native Fixes (Dark Mode Defaults) ===== */
    option {
      background-color: #1a2110;
      color: #e8e6d9;
    }

    /* ===== Light-mode polish (site-wide + profile cards / modals) ===== */
    html:not(.dark) body {
      background: linear-gradient(180deg, #f4f6ef 0%, #e8eedc 45%, #dce4c9 100%);
      background-attachment: fixed;
      color: #1f2a14;
    }
    html:not(.dark) .glass-card,
    html:not(.dark) .rounded-xl.border {
      background: rgba(255, 255, 255, 0.82) !important;
      border: 1px solid rgba(85, 107, 47, 0.22) !important;
      box-shadow: 0 8px 28px rgba(47, 59, 28, 0.1);
    }
    html:not(.dark) .glass-card:hover {
      box-shadow: 0 12px 28px rgba(47, 59, 28, 0.14);
    }
    html:not(.dark) thead { background: rgba(85, 107, 47, 0.08) !important; }
    html:not(.dark) tbody tr:hover {
      background-color: rgba(107, 142, 35, 0.14) !important;
      box-shadow: inset 4px 0 0 #6b8e23;
    }
    html:not(.dark) tbody tr:hover td { color: #1f2a14; }
    html:not(.dark) .priority-row {
      background-color: rgba(239, 68, 68, 0.08) !important;
    }

    /* Dropdown & Sidebar */
    html:not(.dark) #navDropdown,
    html:not(.dark) #desktopSidebar {
      background: rgba(250, 250, 245, 0.97) !important;
      color: #1a2110;
      border-color: rgba(85, 107, 47, 0.3) !important;
    }
    html:not(.dark) #navDropdown .nav-link,
    html:not(.dark) #desktopSidebar .nav-link {
      color: #1a2110 !important;
      font-weight: 500;
    }
    html:not(.dark) #navDropdown .nav-link:hover,
    html:not(.dark) #desktopSidebar .nav-link:hover {
      background: rgba(107, 142, 35, 0.15) !important;
      color: #000 !important;
    }
    html:not(.dark) #navDropdown .nav-link.active-link,
    html:not(.dark) #desktopSidebar .nav-link.active-link,
    html:not(.dark) #desktopSidebar .active-link {
      background: rgba(107, 142, 35, 0.25) !important;
      color: #2f3b1c !important;
    }
    html:not(.dark) #desktopSidebar .nav-group-header {
      color: #556b2f !important;
    }
    html:not(.dark) #desktopSidebar {
      border-right: 1px solid rgba(85, 107, 47, 0.2) !important;
    }

    /* Buttons & inputs */
    html:not(.dark) .btn-pill {
      color: #1a2110;
      background: rgba(85, 107, 47, 0.15);
      border-color: rgba(85, 107, 47, 0.4);
      font-weight: 600;
    }
    html:not(.dark) .btn-pill:hover {
      background: rgba(85, 107, 47, 0.25);
      color: #000;
    }
    html:not(.dark) input,
    html:not(.dark) textarea,
    html:not(.dark) select {
      background: rgba(255, 255, 255, 0.92) !important;
      color: #1f2a14 !important;
      border-color: rgba(85, 107, 47, 0.28) !important;
    }
    html:not(.dark) option {
      background-color: #f4f6ef;
      color: #1f2a14;
    }
    html:not(.dark) input::placeholder,
    html:not(.dark) textarea::placeholder {
      color: rgba(47, 59, 28, 0.55) !important;
    }

    /* Text utilities (Tailwind arbitrary + common) */
    html:not(.dark) .text-\[\#e8e6d9\],
    html:not(.dark) .text-\[\#d4d0b8\] { color: #1a2110 !important; }
    html:not(.dark) .text-\[\#a8b88a\] { color: #3d4a22 !important; }
    html:not(.dark) .text-\[\#c5e1a5\],
    html:not(.dark) .text-\[\#8fbc8f\] { color: #2f3b1c !important; }
    html:not(.dark) .text-white { color: #1a2110 !important; }
    html:not(.dark) .hover\:text-white:hover { color: #0f1309 !important; }
    html:not(.dark) .hover\:text-\[\#c5e1a5\]:hover { color: #1a2110 !important; }
    html:not(.dark) .text-\[\#a8b88a\]\/60,
    html:not(.dark) .text-\[\#a8b88a\]\/50 { color: rgba(47, 59, 28, 0.55) !important; }

    /* Header / footer */
    html:not(.dark) header {
      background: rgba(250, 250, 245, 0.88) !important;
      border-bottom: 1px solid rgba(85, 107, 47, 0.18) !important;
    }
    html:not(.dark) footer { color: #2f3b1c; }
    html:not(.dark) footer .text-\[\#a8b88a\] { color: #556b2f !important; }

    /* Background utility remaps (slash opacity + solid) */
    html:not(.dark) .bg-\[\#1a2110\],
    html:not(.dark) .bg-\[\#1a2110\]\/95,
    html:not(.dark) .bg-\[\#1a2110\]\/90 {
      background-color: #f7f8f2 !important;
    }
    html:not(.dark) .bg-\[\#2f3b1c\]\/70 {
      background-color: rgba(232, 238, 220, 0.85) !important;
    }
    html:not(.dark) .bg-\[\#556b2f\]\/25,
    html:not(.dark) .bg-\[\#556b2f\]\/30,
    html:not(.dark) .bg-\[\#556b2f\]\/40,
    html:not(.dark) .bg-\[\#556b2f\]\/50,
    html:not(.dark) .bg-\[\#556b2f\]\/60 {
      background-color: rgba(85, 107, 47, 0.14) !important;
    }
    html:not(.dark) .bg-black\/10 { background-color: rgba(85, 107, 47, 0.05) !important; }
    html:not(.dark) .bg-black\/15 { background-color: rgba(85, 107, 47, 0.08) !important; }
    html:not(.dark) .bg-black\/20 { background-color: rgba(85, 107, 47, 0.12) !important; }
    html:not(.dark) .bg-black\/30 { background-color: rgba(85, 107, 47, 0.16) !important; }
    html:not(.dark) .bg-black\/60 { background-color: rgba(15, 19, 9, 0.45) !important; }
    html:not(.dark) .bg-white\/5,
    html:not(.dark) .bg-white\/10 {
      background-color: rgba(85, 107, 47, 0.1) !important;
    }
    html:not(.dark) .hover\:bg-white\/5:hover,
    html:not(.dark) .hover\:bg-white\/10:hover,
    html:not(.dark) .hover\:bg-\[\#556b2f\]\/20:hover,
    html:not(.dark) .hover\:bg-\[\#556b2f\]\/30:hover {
      background-color: rgba(85, 107, 47, 0.16) !important;
    }
    html:not(.dark) .border-white\/5,
    html:not(.dark) .border-white\/10,
    html:not(.dark) .border-white\/20 {
      border-color: rgba(85, 107, 47, 0.2) !important;
    }

    /* Profile / audit / community cards */
    html:not(.dark) .audit-manager-card,
    html:not(.dark) .audit-manager-card.glass-card {
      background: rgba(255, 255, 255, 0.9) !important;
      border-color: rgba(85, 107, 47, 0.25) !important;
      color: #1a2110;
    }
    html:not(.dark) .audit-manager-card:hover {
      background: rgba(85, 107, 47, 0.1) !important;
      border-color: rgba(85, 107, 47, 0.45) !important;
    }
    html:not(.dark) #managerDetailBody .border,
    html:not(.dark) #communityDetailBody .border,
    html:not(.dark) #auditModal .border {
      border-color: rgba(85, 107, 47, 0.22) !important;
    }
    html:not(.dark) #managerDetailBody .bg-black\/15,
    html:not(.dark) #communityDetailBody .bg-black\/15,
    html:not(.dark) #managerDetailBody [class*="bg-black"],
    html:not(.dark) #communityDetailBody [class*="bg-black"] {
      background-color: rgba(85, 107, 47, 0.08) !important;
    }

    /* Modals (shell + sticky chrome) */
    html:not(.dark) #loginModal > div,
    html:not(.dark) #managerDetailModal > div,
    html:not(.dark) #communityDetailModal > div,
    html:not(.dark) #auditModal > div,
    html:not(.dark) #customLinkModal > div,
    html:not(.dark) #shortcutsModal > div {
      background: #f7f8f2 !important;
      color: #1a2110 !important;
      border-color: rgba(85, 107, 47, 0.28) !important;
      box-shadow: 0 25px 50px -12px rgba(47, 59, 28, 0.25);
    }
    html:not(.dark) #loginModal > div *,
    html:not(.dark) #managerDetailModal > div,
    html:not(.dark) #communityDetailModal > div,
    html:not(.dark) #auditModal > div,
    html:not(.dark) #customLinkModal > div,
    html:not(.dark) #shortcutsModal > div {
      color: inherit;
    }
    html:not(.dark) #managerDetailModal .sticky,
    html:not(.dark) #communityDetailModal .sticky,
    html:not(.dark) #auditModal .sticky,
    html:not(.dark) #shortcutsModal .sticky {
      background: rgba(247, 248, 242, 0.96) !important;
      border-color: rgba(85, 107, 47, 0.2) !important;
    }
    html:not(.dark) #managerDetailTitle,
    html:not(.dark) #communityDetailTitle,
    html:not(.dark) #auditModalTitle,
    html:not(.dark) #shortcutsTitle {
      color: #1a2110 !important;
    }
    html:not(.dark) #auditModalAvatar {
      background-color: rgba(85, 107, 47, 0.25) !important;
      color: #1a2110 !important;
    }

    /* Map surface in light mode */
    html:not(.dark) #communityMap {
      background: #e8eedc !important;
    }

    /* kbd / shortcut chips */
    html:not(.dark) kbd {
      background: rgba(85, 107, 47, 0.12) !important;
      border-color: rgba(85, 107, 47, 0.3) !important;
      color: #1a2110 !important;
    }

    
    html:not(.dark) #themeChooser {
      background: rgba(250, 250, 245, 0.98) !important;
      border-color: rgba(85, 107, 47, 0.3) !important;
      color: #1a2110 !important;
    }

/* ===== Print / PDF field packs (shared template classes) ===== */
    @page {
      size: letter portrait;
      margin: 0.5in;
    }
    @media print {
      body * { visibility: hidden !important; }
      /* Fallback (non-pack): allow section forms */
      body:not(.printing-pack) #questionnaire,
      body:not(.printing-pack) #questionnaire *,
      body:not(.printing-pack) #training,
      body:not(.printing-pack) #training *,
      body:not(.printing-pack) #site-visit,
      body:not(.printing-pack) #site-visit * {
        visibility: visible !important;
      }
      /* Pack mode: only #printPack */
      #printPack, #printPack * { visibility: visible !important; }
      body.printing-pack #questionnaire,
      body.printing-pack #training,
      body.printing-pack #site-visit {
        visibility: hidden !important;
        display: none !important;
      }

      /* Live section fallback print only (not pack mode) */
      body:not(.printing-pack) #questionnaire,
      body:not(.printing-pack) #training,
      body:not(.printing-pack) #site-visit {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        background: white !important;
        color: #1a1a1a !important;
        font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
      }
      .no-print { display: none !important; }
      textarea {
        border: 1px solid #666 !important;
        background: white !important;
        color: black !important;
        min-height: 85px;
        width: 100%;
      }
      .question-block { page-break-inside: avoid; margin-bottom: 1.1rem; }

      /*
       * Pack print mode: only #printPack participates in layout.
       * Avoid position:absolute on a long document (causes blank first pages).
       * Avoid page-break-inside:avoid on large sections (header alone on page 1).
       */
      body.printing-pack {
        background: #fff !important;
        color: #1a1a1a !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
      }
      body.printing-pack > *:not(#printPack) {
        display: none !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        position: static !important;
      }
      /* #printPack may be nested under #mainWrapper — climb with broader hide */
      /* Site chrome only — NEVER hide #printPack .print-header / .print-footer */
      body.printing-pack > header,
      body.printing-pack header.fixed,
      body.printing-pack header:not(.print-header),
      body.printing-pack aside,
      body.printing-pack nav,
      body.printing-pack > footer,
      body.printing-pack footer.site-footer,
      body.printing-pack footer:not(.print-footer),
      body.printing-pack #bgWaves,
      body.printing-pack #bgTrees,
      body.printing-pack #bgMushrooms,
      body.printing-pack #bgClouds,
      body.printing-pack #bgSpace,
      body.printing-pack #mobileBottomNav,
      body.printing-pack #installBanner,
      body.printing-pack .willow-modal,
      body.printing-pack #toastHost,
      body.printing-pack #mainWrapper > *:not(#printPack),
      body.printing-pack main,
      body.printing-pack .section {
        display: none !important;
        visibility: hidden !important;
      }
      body.printing-pack #printPack {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        z-index: auto !important;
        background: #fff !important;
        color: #1a1a1a !important;
        font-size: 10pt;
        line-height: 1.35;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        page-break-before: avoid !important;
        page-break-after: auto !important;
      }
      body.printing-pack #printPack * {
        visibility: visible !important;
      }
      /* When pack-printing, do not also surface live form sections */
      body.printing-pack #site-visit,
      body.printing-pack #questionnaire,
      body.printing-pack #training {
        display: none !important;
        visibility: hidden !important;
      }
      #printPack {
        font-size: 10pt;
        line-height: 1.35;
        color: #1a1a1a !important;
      }
      #printPack .print-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 10px;
        margin-bottom: 12px;
        border-bottom: 3px solid #556b2f;
      }
      #printPack .print-header-logo {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
      }
      #printPack .print-header-text { flex: 1; min-width: 0; }
      #printPack .print-header-kicker {
        font-size: 9pt;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #556b2f !important;
        margin: 0 0 2px;
      }
      #printPack .print-pack-title {
        font-size: 16pt;
        font-weight: 700;
        color: #1a1a1a !important;
        margin: 0;
        line-height: 1.2;
      }
      #printPack .print-header-meta {
        font-size: 8.5pt;
        color: #555 !important;
        text-align: right;
        white-space: nowrap;
        flex-shrink: 0;
      }
      #printPack .print-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 20px;
        padding: 8px 10px;
        margin-bottom: 14px;
        background: #f4f6ef !important;
        border: 1px solid #c5d4a8;
        border-radius: 4px;
      }
      #printPack .print-meta-item { font-size: 9.5pt; }
      #printPack .print-meta-label {
        font-weight: 600;
        color: #556b2f !important;
        margin-right: 4px;
      }
      #printPack .print-meta-value { color: #1a1a1a !important; }
      #printPack .print-pill {
        display: inline-block;
        padding: 1px 6px;
        margin: 0 2px 2px 0;
        font-size: 8pt;
        font-weight: 600;
        background: #e8eedc !important;
        border: 1px solid #a8b88a;
        border-radius: 10px;
        color: #2f3b1c !important;
      }
      #printPack .print-section {
        page-break-inside: auto;
        break-inside: auto;
        margin-bottom: 14px;
      }
      #printPack .print-header {
        page-break-after: avoid;
        break-after: avoid;
      }
      #printPack .print-meta-grid {
        page-break-after: avoid;
        break-after: avoid;
      }
      #printPack .print-section-title {
        page-break-after: avoid;
        break-after: avoid;
      }
      #printPack .print-check-row,
      #printPack .print-qa-block,
      #printPack .sv-print-card {
        page-break-inside: avoid;
        break-inside: avoid;
      }
      #printPack .print-section-title {
        font-size: 11pt;
        font-weight: 700;
        color: #ffffff !important;
        background: #556b2f !important;
        margin: 0 0 6px;
        padding: 4px 8px;
        border-radius: 2px;
        letter-spacing: 0.02em;
      }
      #printPack .print-empty {
        font-size: 9.5pt;
        color: #666 !important;
        font-style: italic;
        margin: 0;
        padding: 4px 2px;
      }
      #printPack .print-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9pt;
      }
      #printPack .print-table th,
      #printPack .print-table td {
        border: 1px solid #8a9a6a;
        padding: 3px 6px;
        text-align: left;
        vertical-align: top;
        color: #1a1a1a !important;
      }
      #printPack .print-table th {
        background: #6b8e23 !important;
        color: #ffffff !important;
        font-weight: 600;
        font-size: 8.5pt;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }
      #printPack .print-table tbody tr:nth-child(even) td {
        background: #f7f9f2 !important;
      }
      #printPack .print-table tr.print-row-priority td {
        background: #fde8e8 !important;
      }
      #printPack .print-table tr.print-row-priority td:first-child {
        box-shadow: inset 3px 0 0 #dc2626;
      }


      /* Training checklist + questionnaire Q&A packs */
      #printPack .print-checklist {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      #printPack .print-check-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 5px 8px;
        border: 1px solid #d5ddc4;
        border-radius: 4px;
        background: #fafaf6 !important;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      #printPack .print-check-row.is-done {
        background: #f3f7eb !important;
        border-color: #8fbc8f;
      }
      #printPack .print-check-box {
        font-size: 12pt;
        line-height: 1.2;
        color: #556b2f !important;
        flex-shrink: 0;
        width: 1.1em;
      }
      #printPack .print-check-label {
        font-size: 9.5pt;
        color: #1a1a1a !important;
        line-height: 1.35;
      }
      #printPack .print-qa-block {
        border: 1px solid #c5d4a8;
        border-radius: 6px;
        padding: 10px 12px;
        margin-bottom: 10px;
        background: #fafaf6 !important;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      #printPack .print-qa-num {
        margin: 0 0 2px;
        font-size: 8.5pt;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #556b2f !important;
      }
      #printPack .print-qa-q {
        margin: 0 0 8px;
        font-size: 10pt;
        font-weight: 600;
        color: #1a1a1a !important;
        line-height: 1.4;
      }
      #printPack .print-qa-ans-label {
        margin: 0 0 4px;
        font-size: 8pt;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #666 !important;
      }
      #printPack .print-qa-answer {
        margin: 0;
        font-size: 9.5pt;
        line-height: 1.4;
        color: #1a1a1a !important;
        white-space: pre-wrap;
      }

      /* Site Visit print pack (Option B) */
      #printPack .sv-print-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      #printPack .sv-print-card {
        border: 1px solid #c5c9b8;
        border-radius: 6px;
        padding: 8px 10px;
        break-inside: avoid;
        page-break-inside: avoid;
        background: #fafaf6 !important;
      }
      #printPack .sv-print-card.sv-print-good {
        border-color: #6b8e23;
        background: #f3f7eb !important;
      }
      #printPack .sv-print-card.sv-print-needs {
        border-color: #d4a017;
        background: #fff8e8 !important;
      }
      #printPack .sv-print-card.sv-print-empty {
        border-style: dashed;
        color: #666 !important;
      }
      #printPack .sv-print-card-label {
        font-size: 8.5pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #556b2f !important;
        margin-bottom: 2px;
      }
      #printPack .sv-print-card-status {
        font-size: 10.5pt;
        font-weight: 600;
        color: #1a1a1a !important;
      }
      #printPack .sv-print-good .sv-print-card-status { color: #3d5a1a !important; }
      #printPack .sv-print-needs .sv-print-card-status { color: #8a5a00 !important; }
      #printPack .sv-print-note {
        margin: 6px 0 0;
        font-size: 9pt;
        line-height: 1.35;
        color: #1a1a1a !important;
        white-space: pre-wrap;
      }
      #printPack .sv-print-note-blank {
        min-height: 2.2em;
        border-bottom: 1px solid #bbb;
      }
      #printPack .sv-print-block {
        margin: 0;
        font-size: 10pt;
        line-height: 1.4;
        white-space: pre-wrap;
        color: #1a1a1a !important;
      }
      #printPack .sv-print-lines span {
        display: block;
        border-bottom: 1px solid #bbb;
        height: 1.35em;
        margin-bottom: 0.55em;
      }
      #printPack .sv-print-sign-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
        margin-top: 8px;
      }
      #printPack .sv-print-sign-line {
        border-bottom: 1px solid #333;
        min-height: 2.5em;
        position: relative;
      }
      #printPack .sv-print-sign-label {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 4px;
        font-size: 8pt;
        color: #555 !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      @media print {
        #printPack .sv-print-sign { margin-top: 8px; }
      }

      #printPack .print-batch-page {
        page-break-after: always;
        break-after: page;
      }
      #printPack .print-batch-page:last-child {
        page-break-after: auto;
        break-after: auto;
      }
      #printPack .print-footer {
        margin-top: 16px;
        padding-top: 6px;
        border-top: 1px solid #c5d4a8;
        font-size: 8pt;
        color: #666 !important;
        display: flex;
        justify-content: space-between;
      }
    }
  
    
    
    /* Sticky footer layout: footer sits at bottom when content is short */
    html {
      height: 100%;
    }
    body {
      min-height: 100%;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
    }
    #mainWrapper.site-shell {
      display: flex;
      flex-direction: column;
      flex: 1 0 auto;
      min-height: calc(100vh - 90px);
      min-height: calc(100dvh - 90px);
    }
    #mainWrapper.site-shell > main {
      flex: 1 0 auto;
    }
    #mainWrapper.site-shell > footer.site-footer {
      flex-shrink: 0;
      margin-top: auto;
      width: 100%;
    }
    @media (max-width: 767px) {
      #mainWrapper.site-shell {
        min-height: calc(100vh - 64px);
        min-height: calc(100dvh - 64px);
        /* leave room for bottom tab bar inside the shell height calc */
        min-height: calc(100dvh - 64px - 4.25rem - env(safe-area-inset-bottom, 0px));
      }
    }
    @media (min-width: 768px) {
      #mainWrapper.site-shell {
        min-height: calc(100dvh - 90px);
      }
    }

    /* Community directory: scroll inside panel, never under footer/nav */
    #communityDirectoryList.community-dir-scroll {
      max-height: none;
      overflow: visible;
    }
    #map.section {
      padding-bottom: 1.5rem;
    }

    /* ===== Mobile UX enhancements ===== */
    .touch-btn { min-height: 2.5rem; min-width: 2.5rem; }
    .edit-field-btn { min-width: 2.25rem; min-height: 2.25rem; padding: 0.35rem; }

    #mobileBottomNav .bottom-nav-btn {
      color: var(--muted, #a8b88a);
      transition: color 0.15s, background 0.15s;
    }
    #mobileBottomNav .bottom-nav-btn.is-active {
      color: var(--accent, #c5e1a5);
      background: color-mix(in srgb, var(--army, #556b2f) 22%, transparent);
    }

    @media (max-width: 767px) {
      body { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
      #mainWrapper { padding-bottom: 0.5rem; }
      footer { position: relative; z-index: 1; margin-bottom: 0.25rem; }
      #communityDirectoryList {
        max-height: none !important;
      }
      #map.section { padding-bottom: 2rem; }
      /* Header triage — keep Login / Logout / avatar visible */
      #dateTimePill, #syncStatus { display: none !important; }
      #densityToggle { display: none !important; }

      /* Full-screen-ish modals */
      #loginModal > div,
      #managerDetailModal > div,
      #communityDetailModal > div,
      #auditModal > div,
      #customLinkModal > div,
      #shortcutsModal > div {
        max-width: 100% !important;
        width: 100% !important;
        max-height: calc(100vh - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
        margin: 0.5rem !important;
        border-radius: 1rem !important;
      }
      #loginModal, #managerDetailModal, #communityDetailModal,
      #auditModal, #customLinkModal, #shortcutsModal {
        align-items: flex-end !important;
        padding: 0 !important;
      }
      #loginModal > div,
      #managerDetailModal > div,
      #communityDetailModal > div,
      #auditModal > div {
        margin: 0 !important;
        border-radius: 1rem 1rem 0 0 !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
      }
      /* Login: center in the visible viewport — bottom sheet gets clipped by keyboard / home bar */
      #loginModal {
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto !important;
        padding: max(0.75rem, env(safe-area-inset-top, 0px) + 4.25rem) 0.75rem max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
        -webkit-overflow-scrolling: touch;
      }
      #loginModal > div {
        margin: 0 auto !important;
        border-radius: 1rem !important;
        width: min(24rem, calc(100% - 0rem)) !important;
        max-width: 24rem !important;
        max-height: none !important;
      }

      /* Card tables */
      .table-mobile-cards { min-width: 0 !important; width: 100% !important; }
      .table-mobile-cards thead { display: none; }
      .table-mobile-cards tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.65rem 0.75rem;
        border: 1px solid var(--border, rgba(143,188,143,0.2));
        border-radius: 0.85rem;
        background: var(--card, rgba(26,33,16,0.55));
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      }
      .table-mobile-cards tbody tr.priority-row {
        box-shadow: inset 3px 0 0 #ef4444, 0 4px 16px rgba(0,0,0,0.12);
      }
      .table-mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.4rem 0 !important;
        border: none !important;
        font-size: 0.875rem;
        text-align: right;
      }
      .table-mobile-cards tbody td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted, #a8b88a);
        text-align: left;
        flex: 0 0 34%;
        padding-top: 0.15rem;
      }
      .table-mobile-cards tbody td[data-label="Actions"] {
        justify-content: flex-end;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--border, rgba(143,188,143,0.15));
        padding-bottom: 0.55rem !important;
        margin-bottom: 0.25rem;
      }
      .table-mobile-cards tbody td[data-label="Actions"]::before { display: none; }

      /* Communities map */
      #communityMap { min-height: 50vh !important; }

      /* Print helper note on mobile */
      .mobile-print-hint { display: block !important; }
    }

    .mobile-print-hint { display: none; }

    @media (prefers-reduced-motion: reduce) {
      #bgClouds .cloud,
    }
    @media (max-width: 767px) {
      #bgClouds .cloud { animation-duration: 120s !important; opacity: 0.5; }
    }


/* Manager roster profile cards */
.managers-card-grid .manager-card {
  background: var(--card, rgba(26, 33, 16, 0.72));
  border-color: var(--border, rgba(143, 188, 143, 0.18));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.managers-card-grid .manager-card:hover {
  border-color: color-mix(in srgb, var(--accent, #c5e1a5) 45%, transparent);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.managers-card-grid .manager-card.priority-row {
  /* accent via .manager-card::before */
}


    /* Tree background — fixed decorative layer, never document-flow height */
    #bgTrees {
      position: fixed !important;
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      height: min(42vh, 320px);
      width: 100%;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      display: none;
    }
    #bgTrees .trees-svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    #bgTrees .tree-layer path {
      fill: #2f3b1c;
    }
    #bgTrees .tree-layer { transition: fill 0.35s ease, opacity 0.35s ease; }
    #bgTrees .tree-layer.far { opacity: 0.45; }
    #bgTrees .tree-layer.near { opacity: 0.75; }
    html.theme-forest-dark #bgTrees,
    html[data-theme="forest-dark"] #bgTrees,
    html.theme-forest-light #bgTrees,
    html[data-theme="forest-light"] #bgTrees {
      display: block !important;
    }

    html.theme-forest-dark #bgTrees .tree-layer.far path,
    html[data-theme="forest-dark"] #bgTrees .tree-layer.far path { fill: #1a2110; }
    html.theme-forest-dark #bgTrees .tree-layer.near path,
    html[data-theme="forest-dark"] #bgTrees .tree-layer.near path { fill: #2f3b1c; }
    html.theme-forest-light #bgTrees .tree-layer.far path,
    html[data-theme="forest-light"] #bgTrees .tree-layer.far path { fill: #9ccc65; opacity: 0.55; }
    html.theme-forest-light #bgTrees .tree-layer.near path,
    html[data-theme="forest-light"] #bgTrees .tree-layer.near path { fill: #7cb342; opacity: 0.7; }
    /* Non-forest themes: force trees off */
    
    html.theme-blush-clouds #bgTrees,
    html[data-theme="blush-clouds"] #bgTrees,
    html.theme-mushroom #bgTrees,
    html[data-theme="mushroom"] #bgTrees,


/* Page section headings */
.page-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.page-sub {
  text-transform: lowercase;
}


    .stars-svg { display: none !important; }

    /* ===== Space theme ===== */


    /* Decorative layer: BEHIND all UI (never covers nav) */

    @keyframes stars-drift {
      from { transform: translateY(0); }
      to { transform: translateY(-160px); }
    }

    
/* Space header aligns with shared --header-h (no post-load jump) */
@media (max-width: 767.98px) {
}

    /* Space nav — keep FIXED sidebar visible with readable colors */
    @media (max-width: 767px) {
    }


    /* Meteor shower — own overlay (not inside z-index:-1 starfield) */
    #meteorLayer {
      display: none;
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 25; /* below header/sidebar (z-40+), above page content bg */
    }
    @media (prefers-reduced-motion: reduce) {
    }


/* ===== Pulse animation keyframes (canonical) ===== */
@keyframes stars-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -160px, 0); }
}

@keyframes stars-twinkle {
  0%   { opacity: 0.65; }
  50%  { opacity: 1; }
  100% { opacity: 0.8; }
}



@keyframes cloud-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(100vw + 220px), 0, 0); }
}

@keyframes venom-morph {
  0%, 100% {
    transform: scale(1) translate3d(0, 0, 0) rotate(0deg);
    border-radius: 60% 40% 55% 45%;
  }
  33% {
    transform: scale(1.08) translate3d(2%, -3%, 0) rotate(3deg);
    border-radius: 45% 55% 40% 60%;
  }
  66% {
    transform: scale(0.96) translate3d(-2%, 2%, 0) rotate(-2deg);
    border-radius: 50% 50% 45% 55%;
  }
}

@keyframes soft-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent, #c4b5fd) 35%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  #meteorLayer {
    display: none !important;
  }
  #bgClouds .cloud,
}


.projects-sum-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, rgba(107,142,35,0.35)) 80%, transparent);
  background: color-mix(in srgb, var(--card, rgba(26,33,16,0.5)) 90%, transparent);
  color: var(--text, #e8e6d9);
  font-weight: 500;
}
.project-card .line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.projects-done-panel {
  border-color: color-mix(in srgb, #6ee7b7 22%, var(--border, rgba(107,142,35,0.35)));
  background: color-mix(in srgb, #064e3b 18%, var(--card, rgba(26,33,16,0.5)));
}
.projects-done-summary::-webkit-details-marker,
.projects-done-summary::marker {
  display: none;
  content: '';
}
.projects-done-chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid #a7f3d0;
  border-bottom: 1.5px solid #a7f3d0;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
#projectsDonePanel[open] .projects-done-chevron {
  transform: rotate(45deg);
  margin-top: -2px;
}
.project-card-done {
  opacity: 0.82;
}

/* Optimistic UI feedback */
.optimistic-pending {
  outline: 1px solid color-mix(in srgb, var(--accent, #c5e1a5) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #c5e1a5) 18%, transparent);
  transition: outline 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.optimistic-ok {
  outline: 1px solid rgba(52, 211, 153, 0.65);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.2);
}
.optimistic-banner {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%) translateY(120%);
  z-index: 80;
  max-width: min(92vw, 28rem);
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  background: rgba(30, 20, 20, 0.95);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fecaca;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.optimistic-banner[data-kind="ok"] {
  background: rgba(6, 40, 28, 0.95);
  border-color: rgba(52, 211, 153, 0.4);
  color: #a7f3d0;
}
.optimistic-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Manager profile metric cards */
.mgr-metric-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mgr-metric-card.mgr-metric-warn {
  border-color: rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.12);
}
.mgr-pill-counter {
  background: color-mix(in srgb, var(--card, rgba(0,0,0,0.25)) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, rgba(107,142,35,0.35)) 90%, transparent);
  border-radius: 999px;
  padding: 0.35rem 0.4rem;
}
.mgr-step-lg {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,0.15)) 100%, transparent);
  background: color-mix(in srgb, var(--army, #556b2f) 22%, transparent);
  color: var(--accent, #c5e1a5);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}
.mgr-step-lg:hover {
  background: color-mix(in srgb, var(--army, #556b2f) 40%, transparent);
}
.mgr-step-lg:active {
  transform: scale(0.94);
}
.mgr-stat-display {
  width: 4rem !important;
  text-align: center;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text, #e8e6d9);
  padding: 0.25rem !important;
  outline: none;
  -moz-appearance: textfield;
}
.mgr-stat-display::-webkit-outer-spin-button,
.mgr-stat-display::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mgr-stat-readonly {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text, #e8e6d9);
  line-height: 1.2;
}
.mgr-quick-row {
  justify-content: center;
}
.mgr-quick {
  min-width: 2.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--border, rgba(107,142,35,0.4)) 100%, transparent);
  background: color-mix(in srgb, var(--army, #556b2f) 18%, transparent);
  color: var(--accent, #c5e1a5);
  transition: background 0.15s ease;
}
.mgr-quick:hover {
  background: color-mix(in srgb, var(--army, #556b2f) 35%, transparent);
}
.mgr-quick-clear {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.25);
}
.mgr-quick-clear:hover {
  background: rgba(127, 29, 29, 0.4);
}
@keyframes mgr-stat-pulse-kf {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.mgr-stat-pulse {
  animation: mgr-stat-pulse-kf 0.4s ease;
}


/* ===== Feels-finished polish ===== */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  width: min(92vw, 24rem);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  /* Theme surfaces */
  background: color-mix(in srgb, var(--card, rgba(26, 33, 16, 0.96)) 92%, var(--bg-0, #1a2110)) !important;
  border: 1px solid var(--border, rgba(143, 188, 143, 0.28)) !important;
  color: var(--text, #e8e6d9) !important;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--bg-0, #000) 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent, #c5e1a5) 12%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.2s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-msg { flex: 1; min-width: 0; line-height: 1.35; color: inherit; }
.toast-action {
  flex-shrink: 0;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid var(--border, rgba(197, 225, 165, 0.45));
  color: var(--accent, #c5e1a5);
  background: color-mix(in srgb, var(--army, #556b2f) 35%, transparent);
}
.toast-action:hover {
  background: color-mix(in srgb, var(--army, #556b2f) 55%, transparent);
  color: var(--text, #e8e6d9);
}
.toast-close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  color: var(--muted, #a8b88a);
  font-size: 0.7rem;
  line-height: 1;
}
.toast-close:hover {
  background: color-mix(in srgb, var(--text, #fff) 10%, transparent);
  color: var(--text, #e8e6d9);
}
/* Kind accents — still theme-aware */
.toast-ok {
  border-color: color-mix(in srgb, #34d399 55%, var(--border, transparent)) !important;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--bg-0, #000) 40%, transparent),
    0 0 0 1px color-mix(in srgb, #34d399 25%, transparent);
}
.toast-ok .toast-msg { color: color-mix(in srgb, #6ee7b7 40%, var(--text, #e8e6d9)); }
.toast-err {
  border-color: color-mix(in srgb, #f87171 55%, var(--border, transparent)) !important;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--bg-0, #000) 40%, transparent),
    0 0 0 1px color-mix(in srgb, #f87171 22%, transparent);
}
.toast-err .toast-msg { color: color-mix(in srgb, #fecaca 55%, var(--text, #e8e6d9)); }
.toast-warn {
  border-color: color-mix(in srgb, #fbbf24 50%, var(--border, transparent)) !important;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--bg-0, #000) 40%, transparent),
    0 0 0 1px color-mix(in srgb, #fbbf24 20%, transparent);
}
.toast-warn .toast-msg { color: color-mix(in srgb, #fde68a 45%, var(--text, #e8e6d9)); }
.toast-info {
  border-color: var(--border, rgba(143, 188, 143, 0.35)) !important;
}
.toast-info .toast-msg { color: var(--text, #e8e6d9); }

/* Light themes — slightly stronger card contrast on toasts */
html:not(.dark) .toast,
html.theme-paper .toast,
html.theme-blush-clouds .toast,
html.theme-forest-light .toast {
  background: color-mix(in srgb, var(--card, #fff) 96%, #fff) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px color-mix(in srgb, var(--accent, #1264a3) 15%, transparent);
}

.skeleton-card { pointer-events: none; }
.skeleton-line {
  height: 0.75rem;
  border-radius: 0.35rem;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text, #e8e6d9) 8%, transparent) 0%,
    color-mix(in srgb, var(--text, #e8e6d9) 16%, transparent) 50%,
    color-mix(in srgb, var(--text, #e8e6d9) 8%, transparent) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.skeleton-line-sm { height: 0.55rem; }
.skeleton-btn { height: 2rem; border-radius: 0.5rem; }
.w-2\/3 { width: 66%; }
.w-1\/2 { width: 50%; }
.w-3\/4 { width: 75%; }
.w-full { width: 100%; }
.w-16 { width: 4rem; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
  .toast { transition: none; }
}

.empty-state { color: var(--muted, #a8b88a); }
.empty-state-icon { color: var(--accent, #c5e1a5); }

/* Focus-visible — theme aware */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #c5e1a5) 80%, white);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #c5e1a5) 80%, white);
  outline-offset: 2px;
}

/* Card hover depth */
.project-card,
.manager-card,
article.glass-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.project-card:hover,
.manager-card:hover,
article.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border-color: color-mix(in srgb, var(--accent, #c5e1a5) 35%, var(--border, rgba(107,142,35,0.3)));
}
@media (prefers-reduced-motion: reduce) {
  .project-card:hover,
  .manager-card:hover,
  article.glass-card:hover { transform: none; }
}

/* Unified modal chrome */
.willow-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.willow-modal.flex { display: flex; }
.willow-modal-panel {
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--border, rgba(107,142,35,0.35)) 100%, transparent);
  background: var(--card, #1a2110);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.willow-modal-panel-lg { max-width: 36rem; }
.willow-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,0.1)) 100%, transparent);
  background: color-mix(in srgb, var(--card, #1a2110) 92%, transparent);
  backdrop-filter: blur(8px);
}
.willow-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.15rem;
}
.willow-modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border, rgba(107,142,35,0.3)) 100%, transparent);
}


/* ===== Typography scale ===== */
:root {
  --text-page: 1.5rem;      /* 24px page titles */
  --text-section: 0.875rem; /* 14px section labels */
  --text-body: 0.875rem;    /* 14px body */
  --text-meta: 0.6875rem;   /* 11px meta */
  --text-xs: 0.625rem;      /* 10px chips */
  --leading-tight: 1.25;
  --leading-body: 1.45;
}
.page-title {
  font-size: var(--text-page) !important;
  line-height: var(--leading-tight);
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
}
.page-sub {
  font-size: var(--text-meta) !important;
  line-height: var(--leading-body);
  text-transform: lowercase;
  letter-spacing: 0.01em;
}
body, .section {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.text-xs, .mgr-quick, .projects-sum-pill {
  font-size: var(--text-meta) !important;
}
.text-\[10px\], .text-\[11px\] {
  font-size: var(--text-xs) !important;
}

/* Density consistency */
html.compact {
  --text-page: 1.25rem;
  --text-body: 0.8125rem;
  --text-meta: 0.625rem;
}
html.compact .project-card,
html.compact .manager-card,
html.compact article.glass-card {
  padding: 0.75rem !important;
  gap: 0.5rem !important;
}
html.compact .mgr-step-lg {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}
html.compact .mgr-stat-display {
  font-size: 1.1rem !important;
  width: 3.25rem !important;
}
html.compact .mgr-metric-card {
  padding: 0.75rem !important;
}
html.compact .community-pill,
html.compact .projects-sum-pill {
  padding: 0.1rem 0.4rem !important;
  font-size: 0.6rem !important;
}
html.compact #projectsCards,
html.compact #projectsDoneCards,
html.compact #vacantCards,
html.compact #flipperCards,
html.compact #managersCards {
  gap: 0.75rem !important;
}
html.compact .page-title {
  font-size: 1.25rem !important;
}

/* Icons */
.ui-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.ui-icon-spin {
  animation: ui-spin 0.8s linear infinite;
}
@keyframes ui-spin {
  to { transform: rotate(360deg); }
}
.bottom-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.9;
}
button .ui-icon {
  pointer-events: none;
}

/* Print loading */
body.print-busy {
  cursor: progress;
}
.is-print-loading {
  opacity: 0.85;
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}


/* ===== Microsoft Teams theme ===== */
html.theme-teams,
html[data-theme="teams"] {
  background-color: #1f1f1f !important;
  background-image: none !important;
}
html.theme-teams body,
html[data-theme="teams"] body {
  /* Flat Teams graphite — fixed so it does not scroll/jump */
  background-color: #1f1f1f !important;
  background-image: none !important;
  background-attachment: fixed !important;
  color: #ffffff !important;
  min-height: 100vh;
}
html.theme-teams.dark body,
html[data-theme="teams"].dark body {
  background-color: #1f1f1f !important;
  background-image: none !important;
  background-attachment: fixed !important;
}
/* Kill light-mode body gradient if class mismatch */
html.theme-teams:not(.dark) body,
html[data-theme="teams"]:not(.dark) body {
  background-color: #1f1f1f !important;
  background-image: none !important;
  color: #ffffff !important;
}
html.theme-teams #bgWaves,
html[data-theme="teams"] #bgWaves,
html.theme-teams #bgTrees,
html[data-theme="teams"] #bgTrees,
html.theme-teams #bgClouds,
html[data-theme="teams"] #bgClouds,
html.theme-teams #meteorLayer,
html[data-theme="teams"] #meteorLayer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.theme-teams #mainWrapper,
html[data-theme="teams"] #mainWrapper,
html.theme-teams main,
html[data-theme="teams"] main {
  background: transparent !important;
}
html.theme-teams #desktopSidebar,
html[data-theme="teams"] #desktopSidebar {
  background: #292929 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
html.theme-teams #desktopSidebar .nav-link,
html[data-theme="teams"] #desktopSidebar .nav-link {
  color: #c8c6c4 !important;
  border-radius: 0.35rem;
}
html.theme-teams #desktopSidebar .nav-link:hover,
html[data-theme="teams"] #desktopSidebar .nav-link:hover {
  background: rgba(127, 133, 245, 0.12) !important;
  color: #ffffff !important;
}
html.theme-teams #desktopSidebar .nav-link.active-link,
html[data-theme="teams"] #desktopSidebar .nav-link.active-link {
  background: rgba(91, 95, 199, 0.35) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 #7f85f5;
}
html.theme-teams #desktopSidebar .nav-group-header,
html[data-theme="teams"] #desktopSidebar .nav-group-header {
  color: #8a8886 !important;
}
html.theme-teams header,
html.theme-teams #siteHeader,
html[data-theme="teams"] header,
html[data-theme="teams"] #siteHeader {
  background: rgba(32, 31, 31, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.theme-teams .btn-army,
html[data-theme="teams"] .btn-army {
  background: linear-gradient(180deg, #7f85f5, #5b5fc7) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
html.theme-teams .btn-army:hover,
html[data-theme="teams"] .btn-army:hover {
  filter: brightness(1.08);
}
html.theme-teams .btn-pill,
html[data-theme="teams"] .btn-pill {
  border-color: rgba(127, 133, 245, 0.35) !important;
  color: #e8ebfa !important;
}
html.theme-teams .text-\[\#c5e1a5\],
html[data-theme="teams"] .text-\[\#c5e1a5\] { color: #7f85f5 !important; }
html.theme-teams .text-\[\#a8b88a\],
html[data-theme="teams"] .text-\[\#a8b88a\] { color: #c8c6c4 !important; }
html.theme-teams .text-\[\#e8e6d9\],
html[data-theme="teams"] .text-\[\#e8e6d9\] { color: #ffffff !important; }
html.theme-teams .text-\[\#d4d0b8\],
html[data-theme="teams"] .text-\[\#d4d0b8\] { color: #d2d0ce !important; }
html.theme-teams .glass-card,
html[data-theme="teams"] .glass-card {
  background: rgba(45, 44, 44, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
html.theme-teams .glass-card:hover,
html[data-theme="teams"] .glass-card:hover {
  border-color: rgba(127, 133, 245, 0.35) !important;
}
html.theme-teams .community-pill,
html[data-theme="teams"] .community-pill {
  background: rgba(91, 95, 199, 0.35) !important;
  color: #e8ebfa !important;
}
html.theme-teams input,
html.theme-teams select,
html.theme-teams textarea,
html[data-theme="teams"] input,
html[data-theme="teams"] select,
html[data-theme="teams"] textarea {
  background: #3b3a39 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
html.theme-teams input:focus,
html.theme-teams select:focus,
html.theme-teams textarea:focus,
html[data-theme="teams"] input:focus,
html[data-theme="teams"] select:focus,
html[data-theme="teams"] textarea:focus {
  border-color: #7f85f5 !important;
  box-shadow: 0 0 0 1px rgba(127, 133, 245, 0.45);
}
html.theme-teams .willow-modal-panel,
html[data-theme="teams"] .willow-modal-panel {
  background: #292929 !important;
  border-color: rgba(127, 133, 245, 0.25) !important;
}
html.theme-teams footer,
html[data-theme="teams"] footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #c8c6c4 !important;
}
html.theme-teams .mgr-step-lg,
html[data-theme="teams"] .mgr-step-lg {
  background: rgba(91, 95, 199, 0.25) !important;
  border-color: rgba(127, 133, 245, 0.35) !important;
  color: #b2b5ff !important;
}
html.theme-teams .mgr-quick,
html[data-theme="teams"] .mgr-quick {
  background: rgba(91, 95, 199, 0.2) !important;
  border-color: rgba(127, 133, 245, 0.35) !important;
  color: #b2b5ff !important;
}


/* ===== Nord theme ===== */
html.theme-nord body,
html[data-theme="nord"] body {
  background: linear-gradient(180deg, #3b4252 0%, #2e3440 50%, #242933 100%) !important;
  background-attachment: fixed !important;
  color: #eceff4 !important;
}
html.theme-nord #bgWaves, html[data-theme="nord"] #bgWaves,
html.theme-nord #bgTrees, html[data-theme="nord"] #bgTrees,
html.theme-nord #bgClouds, html[data-theme="nord"] #bgClouds,
html.theme-nord .btn-army, html[data-theme="nord"] .btn-army {
  background: linear-gradient(180deg, #81a1c1, #5e81ac) !important;
  color: #2e3440 !important;
}
html.theme-nord .text-\[\#c5e1a5\], html[data-theme="nord"] .text-\[\#c5e1a5\] { color: #88c0d0 !important; }
html.theme-nord .text-\[\#a8b88a\], html[data-theme="nord"] .text-\[\#a8b88a\] { color: #d8dee9 !important; }
html.theme-nord .glass-card, html[data-theme="nord"] .glass-card {
  background: rgba(59, 66, 82, 0.9) !important;
  border-color: rgba(136, 192, 208, 0.22) !important;
}
html.theme-nord #desktopSidebar .nav-link.active-link,
html[data-theme="nord"] #desktopSidebar .nav-link.active-link {
  background: rgba(94, 129, 172, 0.35) !important;
  color: #eceff4 !important;
  box-shadow: inset 3px 0 0 #88c0d0;
}

/* ===== Paper theme ===== */
html.theme-paper body,
html[data-theme="paper"] body {
  background: linear-gradient(180deg, #faf9f7 0%, #f3f2ef 45%, #e8e6e1 100%) !important;
  background-attachment: fixed !important;
  color: #1b1a19 !important;
}
html.theme-paper #bgWaves, html[data-theme="paper"] #bgWaves,
html.theme-paper #bgTrees, html[data-theme="paper"] #bgTrees,
html.theme-paper #bgClouds, html[data-theme="paper"] #bgClouds,
html.theme-paper .btn-army, html[data-theme="paper"] .btn-army {
  background: linear-gradient(180deg, #2b88d8, #1264a3) !important;
  color: #ffffff !important;
}
html.theme-paper .text-\[\#c5e1a5\], html[data-theme="paper"] .text-\[\#c5e1a5\] { color: #1264a3 !important; }
html.theme-paper .text-\[\#a8b88a\], html[data-theme="paper"] .text-\[\#a8b88a\] { color: #605e5c !important; }
html.theme-paper .text-\[\#e8e6d9\], html[data-theme="paper"] .text-\[\#e8e6d9\] { color: #1b1a19 !important; }
html.theme-paper .glass-card, html[data-theme="paper"] .glass-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(18, 100, 163, 0.16) !important;
  box-shadow: 0 2px 12px rgba(27, 26, 25, 0.06);
}
html.theme-paper #desktopSidebar,
html[data-theme="paper"] #desktopSidebar {
  background: #faf9f7 !important;
  border-right-color: rgba(0, 0, 0, 0.08) !important;
}
html.theme-paper #desktopSidebar .nav-link,
html[data-theme="paper"] #desktopSidebar .nav-link { color: #3b3a39 !important; }
html.theme-paper #desktopSidebar .nav-link.active-link,
html[data-theme="paper"] #desktopSidebar .nav-link.active-link {
  background: rgba(18, 100, 163, 0.12) !important;
  color: #1264a3 !important;
  box-shadow: inset 3px 0 0 #1264a3;
}
html.theme-paper header, html.theme-paper #siteHeader,
html[data-theme="paper"] header, html[data-theme="paper"] #siteHeader {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html.theme-paper input, html.theme-paper select, html.theme-paper textarea,
html[data-theme="paper"] input, html[data-theme="paper"] select, html[data-theme="paper"] textarea {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1b1a19 !important;
}

/* ===== Coffee theme ===== */
html.theme-coffee body,
html[data-theme="coffee"] body {
  background: linear-gradient(180deg, #2a211c 0%, #1a1410 55%, #120e0b 100%) !important;
  background-attachment: fixed !important;
  color: #f5ebe0 !important;
}
html.theme-coffee #bgWaves, html[data-theme="coffee"] #bgWaves,
html.theme-coffee #bgTrees, html[data-theme="coffee"] #bgTrees,
html.theme-coffee #bgClouds, html[data-theme="coffee"] #bgClouds,
html.theme-coffee .btn-army, html[data-theme="coffee"] .btn-army {
  background: linear-gradient(180deg, #c4a484, #a67c52) !important;
  color: #1a1410 !important;
}
html.theme-coffee .text-\[\#c5e1a5\], html[data-theme="coffee"] .text-\[\#c5e1a5\] { color: #e6a86e !important; }
html.theme-coffee .text-\[\#a8b88a\], html[data-theme="coffee"] .text-\[\#a8b88a\] { color: #c4a484 !important; }
html.theme-coffee .glass-card, html[data-theme="coffee"] .glass-card {
  background: rgba(42, 33, 28, 0.92) !important;
  border-color: rgba(230, 168, 110, 0.22) !important;
}
html.theme-coffee #desktopSidebar .nav-link.active-link,
html[data-theme="coffee"] #desktopSidebar .nav-link.active-link {
  background: rgba(166, 124, 82, 0.35) !important;
  color: #f5ebe0 !important;
  box-shadow: inset 3px 0 0 #e6a86e;
}

/* Signed-in user chip — avatar instead of full email */
#userChip.user-chip-avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(145deg, var(--army, #556b2f), color-mix(in srgb, var(--army, #556b2f) 70%, #000));
  border: 1px solid color-mix(in srgb, var(--accent, #c5e1a5) 45%, transparent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Header control height uniformity ===== */
header.fixed {
  --header-ctrl-h: 2.25rem; /* 36px */
}
header.fixed .btn-pill,
header.fixed #saveBtn,
header.fixed #adminBtn,
header.fixed #headerPreviewBtn,
header.fixed #dateTimePill,
header.fixed #densityToggle,
header.fixed #themeToggle,
header.fixed #menuBtn,
header.fixed #sidebarToggleBtn {
  height: var(--header-ctrl-h) !important;
  min-height: var(--header-ctrl-h) !important;
  max-height: var(--header-ctrl-h) !important;
  box-sizing: border-box;
}
header.fixed .btn-pill,
header.fixed #saveBtn,
header.fixed #adminBtn,
header.fixed #headerPreviewBtn,
header.fixed #dateTimePill {
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  line-height: 1 !important;
  font-size: 0.75rem !important;
  border-radius: 999px !important;
}
/* Text/pill controls that should always show as flex when not hidden by other rules */
header.fixed #saveBtn,
header.fixed #adminBtn,
header.fixed #dateTimePill {
  display: inline-flex !important;
}
header.fixed #densityToggle,
header.fixed #themeToggle {
  width: var(--header-ctrl-h) !important;
  min-width: var(--header-ctrl-h) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--border, rgba(107,142,35,0.4)) 100%, transparent);
  background: color-mix(in srgb, var(--card, rgba(85,107,47,0.3)) 70%, transparent);
}
header.fixed #userChip.user-chip-avatar {
  width: var(--header-ctrl-h) !important;
  height: var(--header-ctrl-h) !important;
  min-width: var(--header-ctrl-h) !important;
  min-height: var(--header-ctrl-h) !important;
  padding: 0 !important;
}
header.fixed #userChip .user-avatar {
  width: var(--header-ctrl-h) !important;
  height: var(--header-ctrl-h) !important;
  font-size: 0.65rem;
}
header.fixed #dateTimePill {
  white-space: nowrap;
}

/*
 * Nav chrome visibility — do NOT force display on both toggles.
 * Mobile (<768): hamburger + dropdown. Desktop (≥768): sidebar + collapse btn.
 */
@media (max-width: 767.98px) {
  header.fixed #menuBtn {
    display: inline-flex !important;
    width: var(--header-ctrl-h) !important;
    min-width: var(--header-ctrl-h) !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
  }
  header.fixed #sidebarToggleBtn {
    display: none !important;
  }
  #desktopSidebar {
    display: none !important;
  }
  #navDropdown.md\:hidden,
  #navDropdown {
    /* stays toggled via .hidden in JS; never show as sidebar */
  }
  #mainWrapper,
  #mainWrapper.collapsed {
    margin-left: 0 !important;
  }
  #mobileBottomNav {
    display: grid !important;
  }
}

@media (min-width: 768px) {
  header.fixed #menuBtn {
    display: none !important;
  }
  header.fixed #sidebarToggleBtn {
    display: inline-flex !important;
    width: var(--header-ctrl-h) !important;
    min-width: var(--header-ctrl-h) !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
  }
  #navDropdown {
    display: none !important; /* mobile dropdown never on desktop */
  }
  #desktopSidebar {
    display: flex !important;
  }
  #mobileBottomNav {
    display: none !important;
  }
}

@media (max-width: 640px) {
  header.fixed {
    --header-ctrl-h: 2.125rem; /* 34px on small screens */
  }
}



/* ===== Map section layout ===== */
#mapShell.map-shell {
  height: 55vh;
  min-height: 360px;
}
#mapShell #communityMap {
  height: 100%;
  width: 100%;
  min-height: inherit;
}
/* Dark basemap without a tile-vendor API key: invert OSM tiles, leave pins alone */
#communityMap.map-tiles-dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.92) saturate(0.35);
}
#communityMap.map-tiles-dark .leaflet-control-attribution {
  background: rgba(20, 20, 22, 0.75);
  color: #c8c6c4;
}
#communityMap.map-tiles-dark .leaflet-control-attribution a {
  color: #b2b5ff;
}
#communityDirectoryList,
#communityDirectoryList.community-panel-grid {
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 767.98px) {
  #map.section {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  #mapShell.map-shell {
    height: min(42vh, 22rem);
    min-height: 14rem;
    max-height: 50vh;
    margin-bottom: 0.75rem !important;
  }
  #mapLocateBtn {
    bottom: 0.75rem !important;
    right: 0.75rem !important;
    min-height: 2.5rem;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
  #mapFiltersPanel {
    gap: 0.5rem !important;
    padding: 0.65rem 0.75rem !important;
  }
  #mapFiltersPanel input[type="search"] {
    flex: 1 1 100%;
    min-width: 0 !important;
    width: 100%;
  }
  #mapFiltersPanel select {
    flex: 1 1 auto;
    min-width: 0;
  }
  #mapPinCount {
    width: 100%;
    margin-left: 0 !important;
    text-align: left;
  }
  #mapDirectoryPanel {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #mapDirectoryPanel h3 {
    font-size: 1rem !important;
  }
  #communityDirectoryList {
    max-height: none !important;
    margin-bottom: 0.75rem !important;
  }
  #communityDirAddForm {
    flex-direction: column;
    align-items: stretch !important;
  }
  #communityDirAddForm input,
  #communityDirAddForm button {
    width: 100%;
    min-height: 2.5rem;
  }
  #communityDirNewCode {
    width: 100% !important;
  }
  /* Leaflet controls clear of edges */
  #mapShell .leaflet-top.leaflet-left {
    top: 0.35rem;
    left: 0.35rem;
  }
  #mapShell .leaflet-control-zoom a {
    width: 2.25rem !important;
    height: 2.25rem !important;
    line-height: 2.25rem !important;
    font-size: 1.1rem !important;
  }
}

@media (min-width: 768px) {
  #mapShell.map-shell {
    height: 55vh;
    min-height: 360px;
  }
  #communityDirectoryList {
    max-height: none !important;
  }
}


/* ===== Header + nav + widgets (Pulse v7) ===== */
:root {
  --header-h: 3.75rem;
  --sidebar-w: 16rem;
  --sidebar-w-collapsed: 4.25rem;
}

/* Fixed header — single row, solid bar */
header.fixed {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 50 !important;
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  max-height: var(--header-h) !important;
  display: flex !important;
  align-items: stretch !important;
  background: var(--header-bg, rgba(250,250,245,0.96)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border, rgba(85,107,47,0.2)) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
header.fixed > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  height: 100%;
  padding: 0 0.75rem !important;
  gap: 0.5rem !important;
  box-sizing: border-box;
}

/* Body offset = header only (no stacking) */
html body {
  padding-top: var(--header-h) !important;
}

/* Logo size inside header */
header.fixed #siteLogo {
  height: 2rem !important;
  width: auto !important;
  max-width: 9.5rem;
}
@media (min-width: 640px) {
  header.fixed #siteLogo { height: 2.25rem !important; max-width: 11rem; }
}

/* Icon buttons in header */
.header-icon-btn,
header.fixed #menuBtn,
header.fixed #sidebarToggleBtn,
header.fixed #densityToggle,
header.fixed #themeToggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0 !important;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(85,107,47,0.25));
  background: color-mix(in srgb, var(--card, #fff) 70%, transparent);
  color: var(--text, #1a2110);
  flex-shrink: 0;
}
.header-icon-btn:hover,
header.fixed #menuBtn:hover,
header.fixed #sidebarToggleBtn:hover {
  background: color-mix(in srgb, var(--army, #556b2f) 18%, transparent);
}

header.fixed .btn-pill,
header.fixed #adminBtn,
header.fixed #saveBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 0.85rem !important;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

header.fixed #dateTimePill {
  display: none;
  height: 2.25rem;
  align-items: center;
  padding: 0 0.75rem !important;
  font-size: 0.7rem;
}
@media (min-width: 768px) {
  header.fixed #dateTimePill { display: inline-flex !important; }
}

/* Desktop vs mobile chrome */
@media (min-width: 768px) {
  header.fixed #menuBtn { display: none !important; }
  header.fixed #sidebarToggleBtn { display: inline-flex !important; }
  #desktopSidebar {
    display: flex !important;
    position: fixed !important;
    top: calc(var(--header-h) + var(--shell-gap, 0.65rem) * 2) !important;
    left: var(--shell-gap, 0.65rem);
    bottom: var(--shell-gap, 0.65rem);
    width: var(--sidebar-w);
    z-index: 40;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #desktopSidebar.collapsed { width: var(--sidebar-w-collapsed); }
  #mainWrapper {
    margin-left: calc(var(--sidebar-w) + var(--shell-gap, 0.65rem)) !important;
  }
  #mainWrapper.collapsed {
    margin-left: calc(var(--sidebar-w-collapsed) + var(--shell-gap, 0.65rem)) !important;
  }
  #navDropdown, #mobileBottomNav { display: none !important; }
  #sidebarNav { padding-top: 0.5rem; padding-bottom: 1rem; }
}

@media (max-width: 767.98px) {
  :root { --header-h: 3.5rem; }
  header.fixed #menuBtn { display: inline-flex !important; }
  header.fixed #sidebarToggleBtn { display: none !important; }
  header.fixed #densityToggle { display: none !important; }
  #desktopSidebar { display: none !important; }
  #mainWrapper, #mainWrapper.collapsed { margin-left: 0 !important; }
}

/* Page titles always readable */
.page-title {
  color: var(--text, #1a2110) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.15rem 0 !important;
  line-height: 1.2 !important;
}
/* Never force-show print-only titles on screen */
.page-title.hidden,
h2.page-title.hidden {
  display: none !important;
}
.page-sub {
  display: block !important;
  color: var(--muted, #3d4a22) !important;
  font-size: 0.8125rem !important;
  margin: 0 !important;
}

/* Quick action pills */
#quickActionsBar button,
[data-quick-action] {
  display: inline-flex !important;
  align-items: center;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--border, rgba(107,142,35,0.35)) !important;
  background: color-mix(in srgb, var(--card, #fff) 90%, transparent) !important;
  color: var(--accent, #2f3b1c) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
#quickActionsBar button:hover,
[data-quick-action]:hover {
  background: color-mix(in srgb, var(--army, #556b2f) 22%, transparent) !important;
}

/* KPI widget polish */
#analyticsWidgets .grid {
  display: grid !important;
  gap: 1rem !important;
}
#analyticsWidgets .glass-card {
  min-height: 6.5rem;
}
#analyticsWidgets .text-3xl {
  font-size: 1.875rem !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* Main content padding */
main {
  padding: 1rem !important;
}
@media (min-width: 1024px) {
  main { padding: 1.25rem 1.5rem !important; }
}

/* Teams default polish — header/sidebar align with --header-h */
html.theme-teams header.fixed,
html[data-theme="teams"] header.fixed {
  height: var(--header-h, 3.75rem) !important;
  min-height: var(--header-h, 3.75rem) !important;
  max-height: var(--header-h, 3.75rem) !important;
  background: var(--header-bg, rgba(32, 31, 31, 0.96)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.theme-teams #desktopSidebar,
html[data-theme="teams"] #desktopSidebar {
  top: var(--header-h, 3.75rem) !important;
}
html.theme-teams .page-title,
html[data-theme="teams"] .page-title {
  color: #ffffff !important;
}
html.theme-teams .page-sub,
html[data-theme="teams"] .page-sub {
  color: #c8c6c4 !important;
}
html.theme-teams #mobileBottomNav,
html[data-theme="teams"] #mobileBottomNav {
  background: #292929 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html.theme-teams .header-icon-btn,
html[data-theme="teams"] .header-icon-btn,
html.theme-teams header.fixed #menuBtn,
html.theme-teams header.fixed #sidebarToggleBtn,
html.theme-teams header.fixed #densityToggle,
html.theme-teams header.fixed #themeToggle {
  border-color: rgba(127, 133, 245, 0.35) !important;
  background: rgba(45, 44, 44, 0.9) !important;
  color: #e8ebfa !important;
}


/* ===== Mobile auth visibility (Login / Logout / avatar) ===== */
@media (max-width: 767.98px) {
  header.fixed {
    overflow: visible !important;
  }
  header.fixed > div {
    overflow: visible !important;
    gap: 0.35rem !important;
  }
  /* Mobile: logo mark only (no PULSE wordmark)
     IMPORTANT: only target the brand logo link — never #navDropdown a[href="#dashboard"] */
  header.fixed #siteLogo .logo-wordmark {
    display: none !important;
  }
  header.fixed a.brand-logo-link,
  header.fixed a[href].shrink-0:has(#siteLogo) {
    display: inline-flex !important;
    align-items: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    max-width: 2.5rem !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  header.fixed #siteLogo {
    width: 15rem !important;
    height: 2.5rem !important;
    max-width: none !important;
    overflow: visible !important;
  }
  /* Mobile menu: full-width links, above chrome, never clipped by logo rules */
  header.fixed #navDropdown {
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    max-width: none !important;
    top: calc(var(--header-h, 3.5rem) + 0.35rem) !important;
    margin-top: 0 !important;
    z-index: 80 !important;
    max-height: calc(100vh - var(--header-h, 3.5rem) - 5.5rem) !important;
  }
  header.fixed #navDropdown a.nav-link,
  header.fixed #navDropdown a[href] {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }
  /* Auth cluster never collapses away */
  header.fixed #headerAuthCluster {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
    margin-left: auto;
  }
  header.fixed #adminBtn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    min-width: 3.25rem !important;
    height: var(--header-ctrl-h, 2.25rem) !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    z-index: 5;
  }
  header.fixed #adminControls:not(.hidden) {
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }
  header.fixed #adminControls #saveBtn {
    display: inline-flex !important;
    min-width: 0 !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    font-size: 0.7rem !important;
  }
  /* Avatar when signed in */
  header.fixed #userChip.user-chip-avatar:not(.hidden) {
    display: inline-flex !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
  }
  header.fixed #themeToggle {
    flex-shrink: 0 !important;
  }
}


#settings #settingsThemeGrid > button:hover {
  background: color-mix(in srgb, var(--card, rgba(45, 44, 44, 0.94)) 90%, #fff);
}

/* Settings: panel titles must NOT use global site-header background */
#settings .settings-panel > header,
#settings .settings-panel > .settings-panel-head {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
  box-shadow: none !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0.75rem !important;
  margin: 0 !important;
  display: block !important;
  z-index: auto !important;
}

/* Print pack chrome must always show when printing packs */
@media print {
  body.printing-pack #printPack .print-header,
  body.printing-pack #printPack header.print-header {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    background: transparent !important;
    border-bottom: 3px solid #556b2f !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.printing-pack #printPack .print-footer,
  body.printing-pack #printPack footer.print-footer {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    background: transparent !important;
    border-top: 1px solid #c5d4a8 !important;
    backdrop-filter: none !important;
  }
}

/* ===== Settings panels: masonry columns (no tall-row gaps) ===== */
#settings .settings-panels {
  display: block;
  column-count: 1;
  column-gap: 1.5rem;
}
@media (min-width: 1024px) {
  #settings .settings-panels {
    column-count: 2;
    column-gap: 1.75rem;
  }
}
#settings .settings-panel {
  min-width: 0;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  /* keep each card intact inside a column */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 1.5rem;
}
@media (min-width: 1024px) {
  #settings .settings-panel {
    margin-bottom: 1.75rem;
  }
}
#settings .settings-panel:last-child {
  margin-bottom: 0;
}


.avatar-color-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  background-size: cover !important;
}
.avatar-color-swatch[data-avatar-color="theme"] {
  background: linear-gradient(145deg, var(--army, #556b2f), #2f3b1c) !important;
}
.avatar-color-swatch[data-avatar-color="purple"] {
  background: linear-gradient(145deg, #7f85f5, #5b5fc7) !important;
}
.avatar-color-swatch[data-avatar-color="green"] {
  background: linear-gradient(145deg, #8fbc8f, #556b2f) !important;
}
.avatar-color-swatch[data-avatar-color="sky"] {
  background: linear-gradient(145deg, #7dd3fc, #0284c7) !important;
}
.avatar-color-swatch[data-avatar-color="rose"] {
  background: linear-gradient(145deg, #fda4af, #e11d48) !important;
}
.avatar-color-swatch[data-avatar-color="amber"] {
  background: linear-gradient(145deg, #fcd34d, #d97706) !important;
}
.avatar-color-swatch[data-avatar-color="slate"] {
  background: linear-gradient(145deg, #94a3b8, #475569) !important;
}
.avatar-color-swatch.is-selected {
  border-color: var(--accent, #7f85f5) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #7f85f5) 35%, transparent);
}
.user-avatar.user-avatar-icon svg {
  width: 1rem;
  height: 1rem;
}
#settingsAvatarPreview.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.8rem;
}


/* ===== Panel buttons & pills — theme-aligned surfaces ===== */
/* Outline action buttons inside cards/panels (hardcoded army green in HTML) */
.glass-card button.px-3.py-1\.5,
.glass-card button.px-3.py-2,
.glass-card button.px-4.py-2,
.section button.px-3.py-1\.5:not(.btn-army):not(.btn-pill),
.section button.px-3.py-2:not(.btn-army):not(.btn-pill),
.section a.px-3.py-1\.5,
main button[class*="border-[#6b8e23]"],
main button[class*="border-\[#6b8e23"] {
  border-color: var(--border, rgba(255, 255, 255, 0.12)) !important;
  color: var(--text, #e8e6d9) !important;
  background: color-mix(in srgb, var(--card, rgba(45, 44, 44, 0.94)) 88%, transparent) !important;
}
main button[class*="border-[#6b8e23]"]:hover,
main button[class*="text-[#c5e1a5]"]:hover,
.glass-card button.px-3.py-1\.5:hover,
.glass-card button.px-3.py-2:hover,
.section button.px-3.py-2:not(.btn-army):hover {
  border-color: color-mix(in srgb, var(--accent, #7f85f5) 45%, transparent) !important;
  color: var(--accent, #7f85f5) !important;
  background: color-mix(in srgb, var(--accent, #7f85f5) 12%, transparent) !important;
}

/* Primary filled buttons stay high-contrast */
.btn-army,
button.btn-army {
  background: linear-gradient(180deg, var(--accent, #7f85f5), var(--army, #5b5fc7)) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-army:hover,
button.btn-army:hover {
  filter: brightness(1.08);
}

/* Header / chrome pills */
.btn-pill {
  border-color: var(--border, rgba(255, 255, 255, 0.12)) !important;
  background: color-mix(in srgb, var(--card, rgba(45, 44, 44, 0.9)) 92%, transparent) !important;
  color: var(--text, #e8e6d9) !important;
}
.btn-pill:hover {
  background: color-mix(in srgb, var(--accent, #7f85f5) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent, #7f85f5) 40%, transparent) !important;
  color: var(--accent, #7f85f5) !important;
}

/* Quick actions on dashboard */
#quickActionsBar button,
[data-quick-action] {
  border-color: var(--border, rgba(255, 255, 255, 0.12)) !important;
  background: color-mix(in srgb, var(--card, rgba(45, 44, 44, 0.94)) 90%, transparent) !important;
  color: var(--accent, #7f85f5) !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
}
#quickActionsBar button:hover,
[data-quick-action]:hover {
  background: color-mix(in srgb, var(--accent, #7f85f5) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent, #7f85f5) 40%, transparent) !important;
}

/* Summary / filter pills on list pages */
.projects-sum-pill,
.glass-card .rounded-full.border,
.section .rounded-full.border,
span.community-pill,
.community-pill {
  border-color: var(--border, rgba(255, 255, 255, 0.1)) !important;
  background: color-mix(in srgb, var(--accent, #7f85f5) 14%, transparent) !important;
  color: var(--text, #e8e6d9) !important;
}

/* Status select chips on cards */
.project-card select[data-home-status],
.project-card select[data-project-status],
article select.rounded-full {
  border-radius: 9999px !important;
  font-weight: 600 !important;
}

/* DateTime / filter chips */
#dateTimePill {
  border-color: var(--border, rgba(255, 255, 255, 0.12)) !important;
  background: color-mix(in srgb, var(--card, rgba(45, 44, 44, 0.9)) 95%, transparent) !important;
  color: var(--accent, #7f85f5) !important;
}

/* "Manage on map" and similar underline actions inside panels */
.glass-card button.underline,
.glass-card a.underline {
  color: var(--accent, #7f85f5) !important;
}

/* Modal footer buttons consistency */
.willow-modal button.btn-army {
  border-radius: 0.5rem !important;
}
.willow-modal button.border {
  border-color: var(--border, rgba(255, 255, 255, 0.15)) !important;
  color: var(--text, #e8e6d9) !important;
  background: transparent !important;
}
.willow-modal button.border:hover {
  background: color-mix(in srgb, var(--accent, #7f85f5) 10%, transparent) !important;
}

/* Teams: tighten pill contrast on graphite cards */
html.theme-teams .glass-card button:not(.btn-army):not(.avatar-color-swatch),
html[data-theme="teams"] .glass-card button:not(.btn-army):not(.avatar-color-swatch),
html.theme-teams #quickActionsBar button,
html[data-theme="teams"] #quickActionsBar button {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #c8c6c4 !important;
}
html.theme-teams .glass-card button:not(.btn-army):not(.avatar-color-swatch):hover,
html[data-theme="teams"] .glass-card button:not(.btn-army):not(.avatar-color-swatch):hover,
html.theme-teams #quickActionsBar button:hover,
html[data-theme="teams"] #quickActionsBar button:hover {
  border-color: rgba(127, 133, 245, 0.4) !important;
  background: rgba(127, 133, 245, 0.12) !important;
  color: #e8ebfa !important;
}
html.theme-teams .projects-sum-pill,
html[data-theme="teams"] .projects-sum-pill {
  background: rgba(127, 133, 245, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d2d0ce !important;
  border-radius: 9999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
}
html.theme-teams .btn-army,
html[data-theme="teams"] .btn-army {
  background: linear-gradient(180deg, #7f85f5, #5b5fc7) !important;
  color: #fff !important;
}


/* Footer: tight to content, clear divider line */
footer.site-footer {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.5rem !important;
}
footer.site-footer .site-footer-rule {
  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: var(--border, rgba(255, 255, 255, 0.12)) !important;
  margin: 0 0 0.15rem !important;
  opacity: 1;
}
#mainWrapper.site-shell > main {
  padding-bottom: 0.5rem !important;
}
#mainWrapper.site-shell > footer.site-footer {
  margin-top: 0.5rem !important;
}
@media (max-width: 767px) {
  footer.site-footer {
    margin-top: 0.35rem !important;
    padding-bottom: 0.25rem !important;
  }
}


.region-donut-host {
  min-height: 9rem;
}


/* Interactive tooltips polish */
#globalTooltip {
  position: fixed;
  z-index: 10050;
  pointer-events: none;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  max-width: min(280px, calc(100vw - 1.5rem));
  background: color-mix(in srgb, var(--card, #1a2110) 96%, #000) !important;
  border: 1px solid var(--border, rgba(255,255,255,0.12)) !important;
  color: var(--text, #e8e6d9) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: pre-line;
  word-break: break-word;
}
#globalTooltip.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#globalTooltip[data-placement="bottom"]::after {
  top: -5px;
  bottom: auto;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent color-mix(in srgb, var(--card, #1a2110) 96%, #000) transparent;
}
#globalTooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--card, #1a2110) 96%, #000) transparent transparent transparent;
}
[data-tip] { cursor: help; }
.donut-seg { transition: stroke-opacity 0.15s ease; }
.donut-seg:hover { stroke-opacity: 0.85; filter: brightness(1.12); }

html.theme-teams #globalTooltip,
html[data-theme="teams"] #globalTooltip {
  background: rgba(45, 44, 44, 0.98) !important;
  border-color: rgba(127, 133, 245, 0.35) !important;
  color: #fff !important;
}


/* ===== Dashboard uniformity (desktop / tablet / mobile) ===== */
.dash-page-header {
  text-align: left;
}
.dash-header-btn {
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Quick actions: horizontal chip scroller on mobile */
@media (max-width: 767.98px) {
  #quickActionsBar.dash-quick-actions,
  #quickActionsBar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
    margin-bottom: 1rem !important;
  }
  #quickActionsBar button,
  #quickActionsBar [data-quick-action] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 2.5rem !important;
  }
  /* Left-align page titles; less vertical burn */
  #dashboard .dash-page-header,
  #dashboard .page-title,
  #dashboard .page-sub {
    text-align: left !important;
  }
  #dashboard > .flex.flex-wrap.items-center.justify-between {
    text-align: left;
  }
}

/* Starred card: no overflow of action button */
.starred-card-head {
  min-width: 0;
}
.starred-map-btn {
  max-width: 100%;
}
#starredCommunitiesCard.is-empty {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
#starredCommunitiesCard.is-empty #starredCommunitiesList:empty + .starred-empty,
#starredCommunitiesCard .starred-empty-msg {
  font-size: 0.75rem;
  color: var(--muted, #a8b88a);
}

/* Widget cards: shared min height for grid rhythm */
#dashboard .glass-card[data-dash-widget],
#dashboard #dashWidgetRegion,
#dashboard #dashWidgetCommunitiesRegion,
#dashboard #dashWidgetReceipts,
#dashboard #dashWidgetAttention,
#dashboard #dashWidgetAging,
#dashboard #dashWidgetWorkload,
#dashboard #dashWidgetFocus,
#dashboard #dashWidgetWhatsNew,
#dashboard #dashWidgetFlipper {
  min-height: 11.5rem;
}
#dashboard #dashWidgetRegion,
#dashboard #dashWidgetCommunitiesRegion {
  min-height: 13rem;
}

/* KPI row equal cards */
#analyticsWidgets .glass-card {
  min-height: 6.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Region pair: always full width of widget grid */
#dashWidgetRegionPair.dash-region-pair {
  grid-column: 1 / -1;
}

/* Charts grid: tighter consistent gap */
#dashboard .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3 {
  gap: 1rem !important;
}

/* Section page headers: consistent pattern */
.section > .flex.flex-col.sm\:flex-row,
.section .page-title {
  letter-spacing: 0.04em;
}

/* Hide header date on very small phones only if still visible */
@media (max-width: 767.98px) {
  #dateTimePill {
    display: none !important;
  }
}

/* Tablet: breathing room, auto-friendlier widgets */
@media (min-width: 768px) and (max-width: 1100px) {
  #dashboard .glass-card[data-dash-widget],
  #dashboard #dashWidgetReceipts,
  #dashboard #dashWidgetAttention {
    min-height: 12rem;
  }
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Empty-state text consistency */
#dashboard .text-xs.text-\[\#a8b88a\],
#dashboard p.text-xs.text-\[\#a8b88a\] {
  line-height: 1.4;
}

html.theme-teams .dash-header-btn {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #c8c6c4 !important;
}
html.theme-teams .dash-header-btn:hover {
  border-color: rgba(127, 133, 245, 0.4) !important;
  color: #e8ebfa !important;
  background: rgba(127, 133, 245, 0.12) !important;
}



/* Field photo dashboard widget */
.field-photo-widget {
  cursor: pointer;
  min-height: 7.5rem;
}
.field-photo-widget:hover .field-photo-icon {
  background: color-mix(in srgb, var(--accent, #7f85f5) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent, #7f85f5) 40%, transparent);
  color: var(--accent, #7f85f5);
}
html.theme-teams .field-photo-widget:hover {
  border-color: rgba(127, 133, 245, 0.45) !important;
}


/* ===== Managers roster: density, urgency, tap targets ===== */
#managersBody,
.managers-card-grid,
#managers .managers-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}

.manager-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1rem 0.9rem !important;
  min-height: 11.5rem;
  border-radius: 0.75rem !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
  background: color-mix(in srgb, var(--card, rgba(45, 44, 44, 0.94)) 96%, transparent) !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
/* Urgency bar — pseudo-element so theme border-color !important cannot wipe it */
.manager-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0.75rem 0 0 0.75rem;
  background: color-mix(in srgb, var(--accent, #7f85f5) 55%, transparent);
  pointer-events: none;
  z-index: 2;
}
.manager-card.mgr-urgency-ok::before {
  background: #7f85f5;
}
.manager-card.mgr-urgency-audit::before {
  background: #f59e0b;
}
.manager-card.mgr-urgency-warn::before {
  background: #f59e0b;
}
.manager-card.mgr-urgency-critical::before,
.manager-card.priority-row::before {
  background: #ef4444;
  width: 5px;
}
.manager-card.mgr-urgency-warn {
  background: color-mix(in srgb, #f59e0b 8%, var(--card, #2d2c2c)) !important;
}
.manager-card.mgr-urgency-critical,
.manager-card.priority-row {
  background: color-mix(in srgb, #ef4444 9%, var(--card, #2d2c2c)) !important;
}
.manager-card:hover {
  border-color: color-mix(in srgb, var(--accent, #7f85f5) 35%, transparent) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
html.theme-teams .manager-card.mgr-urgency-ok::before,
html[data-theme="teams"] .manager-card.mgr-urgency-ok::before {
  background: #7f85f5;
}
html.theme-teams .manager-card.mgr-urgency-warn,
html[data-theme="teams"] .manager-card.mgr-urgency-warn,
html.theme-teams .manager-card.mgr-urgency-critical,
html[data-theme="teams"] .manager-card.mgr-urgency-critical,
html.theme-teams .manager-card.priority-row,
html[data-theme="teams"] .manager-card.priority-row {
  /* keep tinted bg over teams glass-card */
}

.mgr-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.mgr-card-name {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text, #e8e6d9);
  background: transparent;
  border: 0;
  padding: 0.15rem 0;
  cursor: pointer;
  border-radius: 0.25rem;
}
.mgr-card-name:hover {
  color: var(--accent, #7f85f5);
}
.mgr-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.mgr-card-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.mgr-tool-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12)) !important;
  background: color-mix(in srgb, var(--card, #fff) 8%, transparent) !important;
  color: var(--muted, #a8b88a) !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mgr-tool-btn:hover {
  background: color-mix(in srgb, var(--accent, #7f85f5) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent, #7f85f5) 40%, transparent) !important;
  color: var(--accent, #7f85f5) !important;
}
.mgr-tool-btn.is-priority,
.mgr-tool-btn.is-on {
  background: rgba(220, 38, 38, 0.85) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #fff !important;
}
.mgr-tool-btn.is-danger:hover {
  background: rgba(220, 38, 38, 0.2) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fca5a5 !important;
}
.mgr-tool-btn.row-handle {
  cursor: grab;
  color: var(--muted, #a8b88a) !important;
}

.mgr-card-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 1.5rem;
}
.mgr-code-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent, #7f85f5) 25%, transparent);
  background: color-mix(in srgb, var(--accent, #7f85f5) 12%, transparent);
  color: var(--text, #e8e6d9);
  cursor: pointer;
}
.mgr-code-pill:hover {
  background: color-mix(in srgb, var(--accent, #7f85f5) 22%, transparent);
}
.mgr-code-more {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted, #a8b88a);
}

.mgr-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.15rem;
}
.mgr-action-primary {
  flex: 1 1 7rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 650;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--accent, #7f85f5), var(--army, #5b5fc7));
  color: #fff !important;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.mgr-action-primary:hover {
  filter: brightness(1.08);
}
.mgr-action-secondary {
  flex: 0 1 auto;
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--card, #fff) 6%, transparent);
  color: var(--text, #e8e6d9);
  cursor: pointer;
}
.mgr-action-secondary:hover {
  border-color: color-mix(in srgb, var(--accent, #7f85f5) 40%, transparent);
  background: color-mix(in srgb, var(--accent, #7f85f5) 12%, transparent);
  color: var(--accent, #7f85f5);
}

/* Audit chip on card — larger tap */
.manager-card .audit-open-btn {
  min-height: 2rem !important;
  min-width: 2.5rem;
  padding: 0.3rem 0.55rem !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
}

/* Profile action bar */
.mgr-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.mgr-profile-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 650;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--card, #fff) 8%, transparent);
  color: var(--text, #e8e6d9);
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mgr-profile-action:hover:not(:disabled):not(.is-muted) {
  border-color: color-mix(in srgb, var(--accent, #7f85f5) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #7f85f5) 14%, transparent);
  color: var(--accent, #7f85f5);
}
.mgr-profile-action.is-primary {
  background: linear-gradient(180deg, var(--accent, #7f85f5), var(--army, #5b5fc7));
  border-color: transparent;
  color: #fff !important;
}
.mgr-profile-action.is-primary:hover {
  filter: brightness(1.08);
  color: #fff !important;
}
.mgr-profile-action.is-muted,
.mgr-profile-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mgr-profile-action-ico {
  font-size: 0.95rem;
  line-height: 1;
}

html.theme-teams .mgr-action-primary,
html[data-theme="teams"] .mgr-action-primary,
html.theme-teams .mgr-profile-action.is-primary,
html[data-theme="teams"] .mgr-profile-action.is-primary {
  background: linear-gradient(180deg, #7f85f5, #5b5fc7) !important;
  color: #fff !important;
}

@media (max-width: 767.98px) {
  #managersBody,
  .managers-card-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .manager-card {
    min-height: 0;
    padding: 0.95rem !important;
  }
  .mgr-tool-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
  }
  .mgr-action-primary,
  .mgr-action-secondary,
  .mgr-profile-action {
    min-height: 3rem;
  }
  .mgr-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mgr-profile-action.is-primary {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  #managersBody,
  .managers-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  .mgr-tool-btn {
    min-width: 2.6rem;
    min-height: 2.6rem;
  }
}



/* Force manager urgency accent (theme-proof) */
#managersBody .manager-card,
.managers-card-grid .manager-card,
article.manager-card {
  position: relative !important;
  overflow: hidden !important;
}
#managersBody .manager-card::before,
.managers-card-grid .manager-card::before,
article.manager-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  border-radius: 0.75rem 0 0 0.75rem;
  background: #7f85f5 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  display: block !important;
}
#managersBody .manager-card.mgr-urgency-ok::before,
article.manager-card.mgr-urgency-ok::before { background: #7f85f5 !important; }
#managersBody .manager-card.mgr-urgency-audit::before,
#managersBody .manager-card.mgr-urgency-warn::before,
article.manager-card.mgr-urgency-audit::before,
article.manager-card.mgr-urgency-warn::before { background: #f59e0b !important; }
#managersBody .manager-card.mgr-urgency-critical::before,
#managersBody .manager-card.priority-row::before,
article.manager-card.mgr-urgency-critical::before,
article.manager-card.priority-row::before {
  background: #ef4444 !important;
  width: 5px !important;
}


/* Community panels below map */
#mapDirectoryPanel.map-directory-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.community-panel-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
  max-height: none !important;
  overflow: visible !important;
}
.community-panel,
article.community-panel.glass-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem !important;
  min-height: 10.5rem;
  border-radius: 0.75rem !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
  background: color-mix(in srgb, var(--card, rgba(45, 44, 44, 0.94)) 96%, transparent) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.community-panel-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.community-panel-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--accent, #7f85f5) 16%, transparent);
  color: var(--accent, #7f85f5);
  border: 1px solid color-mix(in srgb, var(--accent, #7f85f5) 30%, transparent);
}
.community-panel-region {
  font-size: 0.65rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #a8b88a);
}
.community-panel-pin { font-size: 0.75rem; margin-left: auto; }
.community-panel-name {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text, #e8e6d9);
  margin: 0;
}
.community-panel-place {
  font-size: 0.8rem;
  color: var(--muted, #a8b88a);
  margin: 0;
}
.community-panel-mgr-row {
  font-size: 0.8rem;
  color: var(--text, #e8e6d9);
  margin: 0;
}
.community-panel-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #a8b88a);
  margin-right: 0.35rem;
}
.community-panel-mgr {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent, #7f85f5);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.community-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
}
.community-panel-actions .mgr-action-primary,
.community-panel-actions .mgr-action-secondary {
  min-height: 2.5rem;
}
.star-community-btn.is-starred {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}
.community-remove-btn.is-danger:hover {
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  background: rgba(220, 38, 38, 0.12) !important;
}
@media (max-width: 767.98px) {
  .community-panel-grid {
    grid-template-columns: 1fr;
  }
}


/* Compact starred + field photo + clickable KPIs */
#starredCommunitiesCard.is-empty {
  padding: 0.65rem 0.85rem !important;
}
#starredCommunitiesCard.is-empty #starredCommunitiesList {
  margin-top: 0.25rem !important;
}
.field-photo-widget {
  min-height: 0 !important;
}
.kpi-card {
  cursor: pointer;
}
.kpi-card:hover {
  border-color: color-mix(in srgb, var(--accent, #7f85f5) 45%, transparent) !important;
}
@media (max-width: 767.98px) {
  #dateTimePill { display: none !important; }
  #dashCustomizeBtn { min-height: 2.25rem; padding: 0.35rem 0.65rem; }
  .dash-page-header .flex.items-center.gap-2 { margin-left: auto; }
}


#fieldLogModal { z-index: 80 !important; }
#fieldLogModal.flex { display: flex !important; }

/* ===== Dashboard briefing ===== */
.dash-brief {
  display: grid;
  gap: 0.75rem;
}
.dash-personal { display: flex; flex-direction: column; gap: 0.75rem; }
.dash-personal-top { display: flex; flex-direction: column; gap: 0.75rem; }
.dash-today-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dash-today-item {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border-left: 4px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.dash-today-item.is-warm { border-left-color: #fbbf24; }
.dash-today-item.is-hot { border-left-color: #f87171; }
.dash-today-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
}
.dash-today-kind {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--army) 28%, transparent);
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}
.dash-today-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.dash-today-title { font-size: 0.95rem; font-weight: 650; color: var(--text); }
.dash-today-detail { font-size: 0.8rem; color: var(--muted); }
.dash-today-go {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.dash-activity-slim p { font-size: 12px; }
@media (min-width: 768px) {
  .dash-brief {
    grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.85fr);
    align-items: start;
  }
  .dash-personal-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    align-items: stretch;
  }
}
@media (max-width: 767px) {
  .dash-charts { margin-top: 0.25rem; }
  .kpi-card .text-3xl { font-size: 1.65rem; }
}
@media (min-width: 1100px) {
  .dash-brief { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); }
}

/* ===== Wide / ultrawide desktop ===== */
.site-main {
  max-width: 100%;
}
@media (min-width: 1280px) {
  .site-main {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
  #projectsCards,
  #projectsDoneCards,
  #vacantCards,
  #flipperCards,
  .managers-card-grid,
  #auditCards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1600px) {
  .site-main {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }
  .dash-charts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #projectsCards,
  #projectsDoneCards,
  #vacantCards,
  #flipperCards,
  .managers-card-grid,
  #auditCards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .community-panel-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (min-width: 1920px) {
  .site-main {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
  }
  .dash-brief {
    grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.65fr);
  }
  #projectsCards,
  #projectsDoneCards,
  #vacantCards,
  #flipperCards,
  .managers-card-grid,
  #auditCards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .community-panel-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* ===== Phone: larger tap targets, less pinch ===== */
@media (max-width: 767.98px) {
  .site-main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 1.25rem;
  }
  #menuBtn,
  #adminBtn,
  #globalSearchBtn,
  .btn-pill,
  .add-row-btn,
  .dash-header-btn,
  #quickActionsBar button,
  #quickActionsBar [data-quick-action],
  .kpi-card,
  .dash-today-item,
  .mgr-card-actions button,
  .starred-map-btn,
  #fieldPhotoWidgetBtn,
  [data-community-detail],
  [data-queue-go] {
    min-height: 44px;
  }
  #menuBtn,
  #sidebarToggleBtn {
    min-width: 44px;
    min-height: 44px;
  }
  #navDropdown {
    width: min(100vw - 1rem, 20rem);
  }
  #navDropdown .nav-link {
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
  }
  #quickActionsBar button,
  #quickActionsBar [data-quick-action] {
    padding: 0.65rem 0.9rem !important;
    font-size: 0.8rem !important;
  }
  .kpi-card {
    padding: 0.85rem 0.75rem;
  }
  .dash-today-item {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
  .dash-personal-top {
    display: flex;
    flex-direction: column;
  }
  #fieldPhotoWidgetBtn {
    min-height: 3.5rem;
    justify-content: flex-start;
    text-align: left;
    flex-direction: row !important;
    gap: 0.75rem;
  }
  input, select, textarea, button {
    font-size: 16px; /* stop iOS zoom on focus */
  }
  #globalSearchBtn span,
  #adminBtn {
    font-size: 0.8rem;
  }
}

/* ============================================================
   Pulse Command Deck — layout chrome (themes stay token-driven)
   ============================================================ */
header.pulse-topbar {
  border-radius: var(--chrome-radius, 1.15rem);
  border: 1px solid var(--border) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: visible;
}
@media (max-width: 767.98px) {
  header.pulse-topbar {
    border-radius: 0;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  }
}

#desktopSidebar.pulse-rail {
  border-radius: var(--chrome-radius, 1.15rem);
  border: 1px solid var(--border) !important;
  background: var(--sidebar-bg) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.24);
  overflow: hidden;
}

#desktopSidebar .nav-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--army, #556b2f) 22%, transparent);
  color: var(--accent, #c5e1a5);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
#desktopSidebar .nav-link {
  position: relative;
  color: var(--muted, #a8b88a);
}
#desktopSidebar .nav-link:hover {
  background: color-mix(in srgb, var(--army, #556b2f) 14%, transparent);
  color: var(--text, #e8e6d9);
}
#desktopSidebar .nav-link.active-link {
  background: color-mix(in srgb, var(--army, #556b2f) 28%, transparent);
  color: var(--text, #e8e6d9);
  box-shadow: inset 3px 0 0 var(--accent, #c5e1a5);
}
#desktopSidebar .nav-link.active-link .nav-icon {
  background: var(--army, #556b2f);
  color: #fff;
}
#desktopSidebar.collapsed .nav-link {
  justify-content: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
#desktopSidebar.collapsed .nav-link.active-link {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
}

#mainWrapper.pulse-deck {
  padding-right: var(--shell-gap, 0.65rem);
  padding-bottom: var(--shell-gap, 0.65rem);
}
#mainWrapper.pulse-deck > main.site-main {
  background: color-mix(in srgb, var(--card, rgba(26,33,16,0.72)) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--chrome-radius, 1.15rem);
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 767.98px) {
  #mainWrapper.pulse-deck {
    padding-right: 0;
    padding-bottom: 4.75rem;
  }
  #mainWrapper.pulse-deck > main.site-main {
    border-radius: 0.85rem;
    margin: 0 0.4rem;
    border-left: 0;
    border-right: 0;
    background: transparent;
    box-shadow: none;
  }
}

.page-title {
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
}
.page-title::before {
  content: '';
  display: block;
  width: 2.25rem;
  height: 3px;
  border-radius: 99px;
  background: var(--accent, #c5e1a5);
  margin-bottom: 0.45rem;
  opacity: 0.85;
}

.kpi-card {
  border-radius: 1.05rem !important;
  overflow: hidden;
}
.kpi-card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent, #c5e1a5);
  opacity: 0.7;
}
.kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.search-kbd {
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  border: 1px solid var(--border);
  opacity: 0.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#navDropdown {
  border: 1px solid var(--border);
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  border-radius: 1rem;
}

#mobileBottomNav.pulse-dock {
  background: transparent !important;
  border: 0 !important;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.45rem;
  width: auto;
  pointer-events: none;
}
#mobileBottomNav.pulse-dock .pulse-dock-inner {
  pointer-events: auto;
  background: var(--header-bg, rgba(26,33,16,0.92));
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  overflow: hidden;
}
#mobileBottomNav .bottom-nav-btn {
  color: var(--muted);
}
#mobileBottomNav .bottom-nav-btn.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--army) 22%, transparent);
}
#mobileBottomNav .bottom-nav-btn.is-active .bottom-nav-icon {
  transform: translateY(-1px);
}

@media (min-width: 768px) and (max-width: 1100px) {
  :root { --sidebar-w: 14.25rem; }
}

html.compact .page-title { letter-spacing: 0.1em; }
html.compact #mainWrapper.pulse-deck > main.site-main { padding: 0.75rem; }

/* ============================================================
   Readability + tap targets — all sections
   ============================================================ */
.section {
  color: var(--text);
  scroll-margin-top: calc(var(--header-h, 3.5rem) + 1rem);
}
.section > .flex.flex-wrap.items-center:first-child,
.section .dash-page-header {
  position: relative;
  z-index: 2;
  padding-top: 0.15rem;
  margin-bottom: 0.85rem;
}
.section .page-title,
h2.page-title {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
  font-weight: 750 !important;
}
.section .page-sub,
.page-sub {
  text-transform: none !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* Buttons: visible, clickable, consistent */
.section button,
.section [role="button"],
.willow-modal button,
.btn-army,
.btn-pill,
.add-row-btn,
.dash-header-btn,
.managers-view-btn,
[data-quick-action],
[data-print-btn],
.bottom-nav-btn {
  min-height: 44px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.section button.p-0,
.section button.w-10,
header .btn-pill.w-10,
header button.w-10,
.willow-modal button[aria-label="Close"] {
  min-width: 44px;
  min-height: 44px;
}

.section button:not(.btn-army):not(.avatar-color-swatch):not(.kpi-card),
main button[class*="border-"],
.glass-card button:not(.btn-army):not(.kpi-card):not(.avatar-color-swatch),
.managers-view-btn {
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--card) 80%, var(--bg-2)) !important;
  color: var(--text) !important;
  border-radius: 0.7rem !important;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}
.section button:not(.btn-army):not(.kpi-card):hover,
.glass-card button:not(.btn-army):not(.kpi-card):hover,
.managers-view-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
  background: color-mix(in srgb, var(--army) 22%, transparent) !important;
  color: var(--accent) !important;
}
.managers-view-btn[aria-selected="true"] {
  background: color-mix(in srgb, var(--army) 42%, transparent) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
}
.btn-army,
button.btn-army,
.add-row-btn.btn-army {
  min-height: 44px;
  padding: 0.55rem 1rem !important;
  font-size: 0.9rem !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--army) 40%, transparent);
}

/* Inputs / selects readable */
.section input,
.section select,
.section textarea,
.willow-modal input,
.willow-modal select,
.willow-modal textarea {
  min-height: 44px;
  font-size: 1rem !important;
  color: var(--text) !important;
  border-width: 1.5px !important;
  border-radius: 0.7rem !important;
  padding: 0.5rem 0.75rem;
}
.section label,
.willow-modal label,
.section .text-\[10px\].uppercase,
.section [class*="uppercase tracking"] {
  font-size: 0.75rem !important;
  letter-spacing: 0.06em;
  color: var(--muted) !important;
  font-weight: 650;
}

/* Cards and lists */
.section .glass-card {
  padding: 0.95rem 1rem;
}
.kpi-card p:first-child,
.section h3 {
  font-size: 0.8rem !important;
  letter-spacing: 0.06em;
  color: var(--muted) !important;
  font-weight: 700;
}
.kpi-card .text-3xl,
.kpi-card [id^="stat"] {
  color: var(--text);
}
.section table th {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.65rem 0.6rem;
}
.section table td {
  font-size: 0.95rem;
  padding: 0.7rem 0.6rem;
  color: var(--text);
  line-height: 1.4;
}

/* Filter / toolbar rows */
.section .glass-card.flex,
#managersRosterPanel > .glass-card,
.dash-quick-actions {
  gap: 0.5rem;
}
.dash-quick-actions button,
#quickActionsBar button {
  min-height: 44px !important;
  font-size: 0.85rem !important;
  padding: 0.55rem 0.9rem !important;
}

/* Chips / pills in tables */
.section .rounded-full,
.strip-title,
.mgr-card-name {
  font-size: 0.95rem;
}
button.strip-title,
button.mgr-card-name {
  min-height: 40px;
  text-align: left;
  font-weight: 700;
  color: var(--text) !important;
  background: transparent !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Focus visible for keyboard / field use */
.section button:focus-visible,
.section a:focus-visible,
.section input:focus-visible,
.section select:focus-visible,
.btn-pill:focus-visible,
.btn-army:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Modal readability */
.willow-modal h3 {
  font-size: 1.2rem !important;
  color: var(--text) !important;
}
.willow-modal p,
.willow-modal label {
  line-height: 1.45;
}

/* Override tiny 10px body copy inside sections */
.section .text-\[10px\]:not(kbd):not(.search-kbd) {
  font-size: 0.72rem !important;
}
.section .text-xs {
  font-size: 0.82rem !important;
}

@media (max-width: 767.98px) {
  .section .page-title { font-size: 1.35rem !important; }
  .section button,
  .section select,
  .section input,
  #quickActionsBar button {
    min-height: 46px;
  }
}