/* ===== 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-midnight-ops,
html[data-theme="midnight-ops"] {
--bg-0: #020617;
--bg-1: #0a0f1c;
--bg-2: #111827;
--card: rgba(15, 23, 42, 0.92);
--text: #e2e8f0;
--muted: #64748b;
--accent: #2dd4bf;
--border: rgba(45, 212, 191, 0.22);
--army: #14b8a6;
--wave-1: #020617; --wave-2: #0f172a; --wave-3: #134e4a; --wave-4: #2dd4bf;
--header-bg: rgba(2, 6, 23, 0.94);
--sidebar-bg: rgba(2, 6, 23, 0.97);
--logo-mark-1: #0f172a;
--logo-mark-2: #020617;
--logo-stroke: #2dd4bf;
--logo-w: #5eead4;
--logo-seed: #14b8a6;
--logo-text: #e2e8f0;
}
html.theme-web-slinger,
html[data-theme="web-slinger"] {
--bg-0: #0a0a12;
--bg-1: #12122a;
--bg-2: #1a1030;
--card: rgba(22, 18, 48, 0.92);
--text: #f1f5f9;
--muted: #94a3b8;
--accent: #60a5fa;
--border: rgba(239, 68, 68, 0.4);
--army: #e11d48;
--wave-1: #0a0a12; --wave-2: #1e3a8a; --wave-3: #dc2626; --wave-4: #3b82f6;
--header-bg: rgba(10, 10, 18, 0.94);
--sidebar-bg: rgba(12, 12, 28, 0.97);
--logo-mark-1: #1e3a8a;
--logo-mark-2: #0a0a12;
--logo-stroke: #e11d48;
--logo-w: #60a5fa;
--logo-seed: #ef4444;
--logo-text: #f1f5f9;
}
html.theme-space,
html[data-theme="space"] {
--bg-0: #030712;
--bg-1: #0b1026;
--bg-2: #1e1b4b;
--card: rgba(15, 23, 42, 0.82);
--text: #e2e8f0;
--muted: #94a3b8;
--accent: #c4b5fd;
--border: rgba(167, 139, 250, 0.22);
--army: #4c1d95;
--wave-1: #030712; --wave-2: #0b1026; --wave-3: #312e81; --wave-4: #7c3aed;
--header-bg: rgba(3, 7, 18, 0.92);
--sidebar-bg: rgba(2, 6, 23, 0.96);
--logo-mark-1: #1e1b4b;
--logo-mark-2: #0b1026;
--logo-stroke: #a78bfa;
--logo-w: #e9d5ff;
--logo-seed: #8b5cf6;
--logo-text: #e2e8f0;
}
/* 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);
--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 #logoMarkBg stop:nth-child(1) { stop-color: var(--logo-mark-1, #3d4a22); }
#siteLogo #logoMarkBg stop:nth-child(2) { stop-color: var(--logo-mark-2, #2f3b1c); }
#siteLogo .logo-mark-stroke { stroke: var(--logo-stroke, #6b8e23); }
#siteLogo .logo-w-path { stroke: var(--logo-w, #c5e1a5); }
#siteLogo .logo-seed { fill: var(--logo-seed, #6b8e23); }
#siteLogo .logo-wordmark { fill: var(--logo-text, #e8e6d9); }
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-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: 90px;
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; }
html.theme-midnight-ops #bgWaves,
html[data-theme="midnight-ops"] #bgWaves {
display: none !important;
}
/* soft atmospheric overlays for new themes (no waves) */
html.theme-midnight-ops body::before,
html[data-theme="midnight-ops"] body::before {
content: '';
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 50% 40% at 70% 15%, rgba(45, 212, 191, 0.08), transparent 50%),
radial-gradient(ellipse 40% 30% at 20% 80%, rgba(20, 184, 166, 0.06), transparent 50%),
radial-gradient(circle at 15% 20%, rgba(148, 163, 184, 0.12) 0 1px, transparent 2px),
radial-gradient(circle at 40% 60%, rgba(148, 163, 184, 0.1) 0 1px, transparent 2px),
radial-gradient(circle at 75% 35%, rgba(148, 163, 184, 0.12) 0 1px, transparent 2px),
radial-gradient(circle at 60% 80%, rgba(148, 163, 184, 0.08) 0 1px, transparent 2px);
background-size: auto, auto, 120px 120px, 160px 160px, 100px 100px, 140px 140px;
}
/* Utility remaps — Midnight Ops */
html.theme-midnight-ops .btn-army { background: linear-gradient(180deg, #2dd4bf, #0f766e) !important; }
html.theme-midnight-ops .text-\[\#c5e1a5\] { color: #5eead4 !important; }
html.theme-midnight-ops .text-\[\#a8b88a\] { color: #64748b !important; }
html.theme-midnight-ops .text-\[\#e8e6d9\],
html.theme-midnight-ops .text-\[\#d4d0b8\] { color: #e2e8f0 !important; }
html.theme-midnight-ops .border-\[\#6b8e23\]\/40,
html.theme-midnight-ops .border-\[\#6b8e23\]\/30,
html.theme-midnight-ops .border-\[\#6b8e23\]\/25 { border-color: rgba(45, 212, 191, 0.3) !important; }
html.theme-midnight-ops .bg-\[\#556b2f\],
html.theme-midnight-ops .bg-\[\#556b2f\]\/30,
html.theme-midnight-ops .bg-\[\#556b2f\]\/40 { background-color: rgba(20, 184, 166, 0.22) !important; }
html.theme-midnight-ops .bg-\[\#1a2110\],
html.theme-midnight-ops .bg-\[\#1a2110\]\/95 { background-color: #0a0f1c !important; }
html.theme-midnight-ops #desktopSidebar .nav-link.active-link,
html.theme-midnight-ops #navDropdown .nav-link.active-link {
background: rgba(45, 212, 191, 0.18) !important; color: #ccfbf1 !important;
}
/* ===== Spider-Man / Web-Slinger theme ===== */
#bgWebs {
display: none;
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
color: rgba(239, 68, 68, 0.35);
background:
radial-gradient(ellipse 70% 50% at 15% 20%, rgba(30, 58, 138, 0.45), transparent 55%),
radial-gradient(ellipse 60% 45% at 90% 75%, rgba(225, 29, 72, 0.28), transparent 50%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(59, 130, 246, 0.12), transparent 55%),
linear-gradient(165deg, #0a0a12 0%, #12122a 40%, #1a0a18 100%);
}
#bgWebs .web-svg {
position: absolute;
width: 140%;
height: 140%;
left: -20%;
top: -20%;
opacity: 0.7;
}
html.theme-web-slinger #bgWebs,
html[data-theme="web-slinger"] #bgWebs { display: block; }
html.theme-web-slinger #bgWaves,
html[data-theme="web-slinger"] #bgWaves,
html.theme-web-slinger #bgTrees,
html[data-theme="web-slinger"] #bgTrees,
html.theme-web-slinger #bgClouds,
html[data-theme="web-slinger"] #bgClouds { display: none !important; }
html.theme-web-slinger .btn-army {
background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}
html.theme-web-slinger .text-\[\#c5e1a5\] { color: #60a5fa !important; }
html.theme-web-slinger .text-\[\#a8b88a\] { color: #94a3b8 !important; }
html.theme-web-slinger .text-\[\#e8e6d9\],
html.theme-web-slinger .text-\[\#d4d0b8\] { color: #f1f5f9 !important; }
html.theme-web-slinger .border-\[\#6b8e23\]\/40,
html.theme-web-slinger .border-\[\#6b8e23\]\/30,
html.theme-web-slinger .border-\[\#6b8e23\]\/25 {
border-color: rgba(239, 68, 68, 0.4) !important;
}
html.theme-web-slinger .bg-\[\#556b2f\],
html.theme-web-slinger .bg-\[\#556b2f\]\/30,
html.theme-web-slinger .bg-\[\#556b2f\]\/40 {
background-color: rgba(30, 64, 175, 0.35) !important;
}
html.theme-web-slinger .bg-\[\#1a2110\],
html.theme-web-slinger .bg-\[\#1a2110\]\/95 {
background-color: #12122a !important;
}
html.theme-web-slinger #desktopSidebar .nav-link.active-link,
html.theme-web-slinger #navDropdown .nav-link.active-link {
background: rgba(225, 29, 72, 0.25) !important;
color: #fecdd3 !important;
box-shadow: inset 3px 0 0 #3b82f6;
}
html.theme-web-slinger .btn-pill {
border-color: rgba(59, 130, 246, 0.45) !important;
background: rgba(30, 58, 138, 0.4) !important;
color: #93c5fd !important;
}
html.theme-web-slinger #scrollProgress {
background: linear-gradient(90deg, #1e3a8a, #e11d48, #3b82f6) !important;
}
html.theme-web-slinger .glass-card {
border-color: rgba(239, 68, 68, 0.28) !important;
box-shadow: 0 8px 28px rgba(30, 58, 138, 0.25);
}
#bgVenom {
display: none;
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background:
radial-gradient(ellipse 80% 50% at 20% 90%, rgba(20, 83, 45, 0.35), transparent 55%),
radial-gradient(ellipse 60% 40% at 85% 15%, rgba(255, 255, 255, 0.04), transparent 50%),
linear-gradient(180deg, #000 0%, #050505 50%, #0a0a0a 100%);
}
#bgVenom .venom-goo {
position: absolute;
border-radius: 60% 40% 55% 45%;
filter: blur(2px);
opacity: 0.55;
animation: venom-morph 14s ease-in-out infinite;
}
#bgVenom .g1 {
width: 55vmax; height: 35vmax;
left: -15%; bottom: -20%;
background: radial-gradient(circle at 40% 40%, rgba(34, 197, 94, 0.25), rgba(0,0,0,0.9) 70%);
}
#bgVenom .g2 {
width: 40vmax; height: 30vmax;
right: -10%; top: 10%;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), rgba(0,0,0,0.95) 65%);
animation-delay: -4s;
animation-duration: 18s;
}
#bgVenom .g3 {
width: 30vmax; height: 25vmax;
left: 35%; bottom: 5%;
background: radial-gradient(circle at 30% 30%, rgba(22, 101, 52, 0.35), transparent 70%);
animation-delay: -8s;
animation-duration: 16s;
}
#bgVenom .venom-teeth {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 12vh;
background:
linear-gradient(135deg, transparent 40%, #0a0a0a 40%, #0a0a0a 60%, transparent 60%),
linear-gradient(225deg, transparent 40%, #050505 40%, #050505 60%, transparent 60%);
background-size: 28px 100%, 28px 100%;
background-position: 0 0, 14px 0;
opacity: 0.85;
}
@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) {
#bgVenom .venom-goo { animation: none; }
}
/* ===== 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 {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.32s ease, transform 0.32s ease;
display: none !important;
}
.section.active {
display: block !important;
opacity: 1;
transform: translateY(0);
}
/* 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: 72px;
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;
}
/* Smaller logo so it doesn't crush controls */
header img {
height: 2.75rem !important;
max-height: 44px;
}
#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 */
}
/* Hide tooltip on coarse pointers (prefer native) */
#globalTooltip { display: none; }
}
@media (max-width: 480px) {
body { padding-top: 64px; }
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; }
#questionnaire, #questionnaire *,
#training, #training *,
#site-visit, #site-visit *,
#printPack, #printPack * { visibility: visible !important; }
#questionnaire, #training, #site-visit, #printPack {
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: only #printPack — hide live forms that share absolute print stacking */
body.printing-pack #site-visit,
body.printing-pack #site-visit *,
body.printing-pack #questionnaire,
body.printing-pack #questionnaire *,
body.printing-pack #training,
body.printing-pack #training * {
display: none !important;
visibility: hidden !important;
}
body.printing-pack #printPack {
display: block !important;
visibility: visible !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
z-index: 99999 !important;
background: white !important;
color: #1a1a1a !important;
font-size: 10pt;
line-height: 1.35;
}
body.printing-pack #printPack * {
visibility: visible !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: avoid;
margin-bottom: 14px;
}
#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;
}
/* 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 {
max-height: min(52vh, 32rem);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-right: 0.15rem;
margin-bottom: 0.25rem;
}
#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: min(40vh, 20rem);
}
#map.section { padding-bottom: 2rem; }
/* Header triage */
#dateTimePill, #syncStatus, #userChip { 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;
}
/* 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,
#bgVenom .venom-goo { animation: none !important; }
}
@media (max-width: 767px) {
#bgClouds .cloud { animation-duration: 120s !important; opacity: 0.5; }
#bgVenom .venom-goo { animation: none !important; }
}
/* 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 {
box-shadow: inset 3px 0 0 #ef4444;
}
/* 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-midnight-ops #bgTrees,
html[data-theme="midnight-ops"] #bgTrees,
html.theme-web-slinger #bgTrees,
html[data-theme="web-slinger"] #bgTrees{
display: none !important;
}
/* Page section headings */
.page-title {
text-transform: uppercase;
letter-spacing: 0.04em;
}
.page-sub {
text-transform: lowercase;
}
/* ===== Space theme ===== */
html.theme-space,
html[data-theme="space"] {
background-color: #030712 !important;
/* Stars painted on root so they always show behind UI */
background-image:
radial-gradient(1.5px 1.5px at 8% 12%, #fff, transparent),
radial-gradient(2px 2px at 18% 28%, rgba(233,213,255,0.95), transparent),
radial-gradient(1.5px 1.5px at 28% 8%, #fff, transparent),
radial-gradient(2.5px 2.5px at 42% 22%, #c4b5fd, transparent),
radial-gradient(1.5px 1.5px at 55% 15%, #fff, transparent),
radial-gradient(2px 2px at 68% 30%, rgba(255,255,255,0.9), transparent),
radial-gradient(1.5px 1.5px at 78% 10%, #e9d5ff, transparent),
radial-gradient(2px 2px at 88% 25%, #fff, transparent),
radial-gradient(1.5px 1.5px at 12% 48%, #fff, transparent),
radial-gradient(2.5px 2.5px at 32% 55%, #a5b4fc, transparent),
radial-gradient(1.5px 1.5px at 48% 42%, #fff, transparent),
radial-gradient(2px 2px at 62% 58%, rgba(196,181,253,0.95), transparent),
radial-gradient(1.5px 1.5px at 75% 45%, #fff, transparent),
radial-gradient(2px 2px at 92% 52%, #fff, transparent),
radial-gradient(1.5px 1.5px at 5% 72%, rgba(255,255,255,0.9), transparent),
radial-gradient(2px 2px at 22% 80%, #c4b5fd, transparent),
radial-gradient(1.5px 1.5px at 38% 70%, #fff, transparent),
radial-gradient(2.5px 2.5px at 58% 85%, #e9d5ff, transparent),
radial-gradient(1.5px 1.5px at 72% 75%, #fff, transparent),
radial-gradient(2px 2px at 85% 88%, #fff, transparent),
radial-gradient(ellipse 90% 60% at 50% -20%, rgba(91, 33, 182, 0.4), transparent 55%),
radial-gradient(ellipse 50% 40% at 90% 90%, rgba(37, 99, 235, 0.2), transparent 50%),
linear-gradient(180deg, #0b1026 0%, #030712 50%, #020617 100%) !important;
background-attachment: fixed !important;
}
html.theme-space body,
html[data-theme="space"] body {
background: transparent !important;
background-image: none !important;
}
/* Decorative layer: BEHIND all UI (never covers nav) */
#bgStars {
display: none;
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
html.theme-space #bgStars,
html[data-theme="space"] #bgStars {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: -1 !important;
background:
radial-gradient(ellipse 80% 50% at 20% 30%, rgba(139, 92, 246, 0.15), transparent 50%),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(59, 130, 246, 0.12), transparent 50%);
}
html.theme-space #bgWaves,
html[data-theme="space"] #bgWaves,
html.theme-space #bgTrees,
html[data-theme="space"] #bgTrees,
html.theme-space #bgClouds,
html[data-theme="space"] #bgClouds,
html.theme-space #bgWebs,
html[data-theme="space"] #bgWebs,
html.theme-space #bgVenom,
html[data-theme="space"] #bgVenom {
display: none !important;
visibility: hidden !important;
}
.stars-field {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
pointer-events: none;
}
.stars-field-a {
opacity: 0.9;
background-size: 160px 160px;
background-image:
radial-gradient(2px 2px at 10px 20px, #fff, transparent),
radial-gradient(1.5px 1.5px at 50px 80px, rgba(255,255,255,0.95), transparent),
radial-gradient(2.5px 2.5px at 100px 40px, #e9d5ff, transparent),
radial-gradient(1.5px 1.5px at 140px 120px, #fff, transparent),
radial-gradient(2px 2px at 30px 140px, rgba(196,181,253,0.95), transparent),
radial-gradient(1.5px 1.5px at 80px 10px, #fff, transparent);
animation: stars-drift 120s linear infinite;
}
.stars-field-b {
opacity: 0.75;
background-size: 260px 260px;
background-image:
radial-gradient(2px 2px at 40px 60px, #fff, transparent),
radial-gradient(3px 3px at 150px 110px, #c4b5fd, transparent),
radial-gradient(1.5px 1.5px at 210px 30px, rgba(255,255,255,0.9), transparent),
radial-gradient(2px 2px at 90px 190px, #a5b4fc, transparent);
animation: stars-drift 160s linear infinite reverse;
}
.stars-field-c {
opacity: 0.6;
background-size: 360px 360px;
background-image:
radial-gradient(2px 2px at 60px 90px, #fff, transparent),
radial-gradient(2.5px 2.5px at 200px 160px, #e9d5ff, transparent),
radial-gradient(1.5px 1.5px at 300px 40px, rgba(255,255,255,0.85), transparent);
animation: stars-drift 200s linear infinite;
}
.stars-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.9;
animation: stars-twinkle 3.5s ease-in-out infinite alternate;
}
.stars-nebula {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 40% at 25% 30%, rgba(139, 92, 246, 0.2), transparent 60%),
radial-gradient(ellipse 40% 30% at 75% 65%, rgba(59, 130, 246, 0.15), transparent 55%);
animation: stars-nebula-pulse 12s ease-in-out infinite alternate;
}
@keyframes stars-drift {
from { transform: translateY(0); }
to { transform: translateY(-160px); }
}
/* Space nav — keep FIXED sidebar visible with readable colors */
html.theme-space #desktopSidebar,
html[data-theme="space"] #desktopSidebar {
position: fixed !important;
top: 90px !important;
left: 0 !important;
bottom: 0 !important;
z-index: 40 !important;
display: flex !important;
flex-direction: column !important;
visibility: visible !important;
opacity: 1 !important;
background: rgba(2, 6, 23, 0.96) !important;
border-right: 1px solid rgba(167, 139, 250, 0.25) !important;
color: #e2e8f0 !important;
}
html.theme-space #desktopSidebar .nav-link,
html[data-theme="space"] #desktopSidebar .nav-link,
html.theme-space #sidebarNav a,
html[data-theme="space"] #sidebarNav a {
color: #e2e8f0 !important;
}
html.theme-space #desktopSidebar .nav-link:hover,
html[data-theme="space"] #desktopSidebar .nav-link:hover {
background: rgba(91, 33, 182, 0.35) !important;
color: #e9d5ff !important;
}
html.theme-space #desktopSidebar .nav-link.active-link,
html[data-theme="space"] #desktopSidebar .nav-link.active-link {
background: rgba(91, 33, 182, 0.45) !important;
color: #e9d5ff !important;
}
html.theme-space #desktopSidebar .nav-group-header,
html[data-theme="space"] #desktopSidebar .nav-group-header {
color: #94a3b8 !important;
}
@media (max-width: 767px) {
html.theme-space #desktopSidebar,
html[data-theme="space"] #desktopSidebar {
display: none !important;
}
}
html.theme-space .btn-army,
html[data-theme="space"] .btn-army {
background: linear-gradient(135deg, #5b21b6, #4c1d95) !important;
color: #f5f3ff !important;
}
html.theme-space .text-\[\#c5e1a5\],
html[data-theme="space"] .text-\[\#c5e1a5\] { color: #c4b5fd !important; }
html.theme-space .text-\[\#a8b88a\],
html[data-theme="space"] .text-\[\#a8b88a\] { color: #94a3b8 !important; }
html.theme-space .glass-card,
html[data-theme="space"] .glass-card {
background: rgba(15, 23, 42, 0.78) !important;
border-color: rgba(167, 139, 250, 0.22) !important;
}
/* Meteor shower — own overlay (not inside z-index:-1 starfield) */
.meteor-layer,
#meteorLayer {
display: none;
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 25; /* below header/sidebar (z-40+), above page content bg */
}
html.theme-space .meteor-layer,
html[data-theme="space"] .meteor-layer,
html.theme-space #meteorLayer,
html[data-theme="space"] #meteorLayer {
display: block !important;
visibility: visible !important;
}
.meteor {
position: absolute;
top: var(--my, 10vh);
left: var(--mx, 50vw);
width: var(--mlen, 100px);
height: var(--mthick, 2.5px);
border-radius: 999px;
background: linear-gradient(
90deg,
hsla(var(--mhue, 250), 90%, 85%, 0) 0%,
hsla(var(--mhue, 250), 95%, 92%, 0.45) 30%,
#fff 100%
);
box-shadow:
0 0 8px 2px hsla(var(--mhue, 250), 100%, 90%, 0.7),
0 0 18px 3px hsla(var(--mhue, 250), 90%, 70%, 0.35);
transform: rotate(125deg);
opacity: 0;
animation: meteor-fall var(--mdur, 0.8s) var(--mdelay, 0s) linear forwards;
will-change: transform, opacity;
z-index: 1;
}
@keyframes meteor-fall {
0% { opacity: 0; transform: rotate(125deg) translate(0, 0); }
8% { opacity: 1; }
70% { opacity: 1; }
100% {
opacity: 0;
transform: rotate(125deg) translate(var(--mdrift, 120px), var(--mdrop, 180px));
}
}
@media (prefers-reduced-motion: reduce) {
.meteor-layer { display: none !important; }
.stars-field-a, .stars-field-b, .stars-field-c {
animation: none !important;
}
}
/* ===== 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 stars-nebula-pulse {
0% { opacity: 0.7; transform: scale(1); }
100% { opacity: 1; transform: scale(1.04); }
}
@keyframes meteor-fall {
0% {
opacity: 0;
transform: rotate(125deg) translate3d(0, 0, 0);
}
5% {
opacity: 1;
}
15% {
opacity: 1;
}
70% {
opacity: 0.85;
}
100% {
opacity: 0;
transform: rotate(125deg) translate3d(var(--mdrift, 140px), var(--mdrop, 200px), 0);
}
}
@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) {
.meteor-layer,
#meteorLayer {
display: none !important;
}
.stars-field-a,
.stars-field-b,
.stars-field-c,
.stars-svg,
.stars-nebula,
#bgClouds .cloud,
#bgVenom .venom-goo {
animation: none !important;
}
}
.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;
}
/* 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 #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 #bgWebs,
html[data-theme="teams"] #bgWebs,
html.theme-teams #bgVenom,
html[data-theme="teams"] #bgVenom,
html.theme-teams #bgStars,
html[data-theme="teams"] #bgStars,
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 #bgWebs, html[data-theme="nord"] #bgWebs,
html.theme-nord #bgVenom, html[data-theme="nord"] #bgVenom,
html.theme-nord #bgStars, html[data-theme="nord"] #bgStars {
display: none !important;
}
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 #bgWebs, html[data-theme="paper"] #bgWebs,
html.theme-paper #bgVenom, html[data-theme="paper"] #bgVenom,
html.theme-paper #bgStars, html[data-theme="paper"] #bgStars {
display: none !important;
}
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 #bgWebs, html[data-theme="coffee"] #bgWebs,
html.theme-coffee #bgVenom, html[data-theme="coffee"] #bgVenom,
html.theme-coffee #bgStars, html[data-theme="coffee"] #bgStars {
display: none !important;
}
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;
}
#communityDirectoryList {
max-height: min(52vh, 32rem);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
@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.85rem !important;
}
#mapDirectoryPanel h3 {
font-size: 1rem !important;
}
#communityDirectoryList {
max-height: min(38vh, 16rem) !important;
margin-bottom: 0.5rem !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: min(52vh, 32rem);
}
}