* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Prevent page scrolling */
html, body {
    height: 100%;
    overflow: hidden;
}

/* Dropdown Menu */
body {
    background: #969696;
    /* Copperplate/Papyrus only exist on Mac/iOS — every other OS silently
       fell back to the browser's generic 'fantasy' font for ALL body text,
       which looks completely different device to device. The brand wordmark
       itself is now a real image (see .logo below); everything else just
       uses the same safe cross-platform stack as the `*` rule above. */
}

/* Prevent zoom on double-tap and pinch */
.dashboard-container {
    touch-action: pan-x pan-y; /* Allows panning but prevents pinch zoom */
}

/* Optional: Fix for Safari on iOS */
@supports (-webkit-touch-callout: none) {
    .dashboard-container {
        touch-action: manipulation;
    }
}


.dashboard-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}


.logo {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 22px;
    max-width: 140px;
    width: auto;
    display: block;
    object-fit: contain;
}




@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes backdropFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes drawerSlideIn {
    from { transform: translateX(100%); opacity: 0.4; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

@keyframes slideUp {
    from { transform: translate(-50%, -44%); opacity: 0; }
    to   { transform: translate(-50%, -50%); opacity: 1; }
}

@keyframes loadingBar {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(150%); }
    100% { transform: translateX(400%); }
}

@keyframes slideInToast {
    from { transform: translateY(24px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0)     scale(1);    opacity: 1; }
}

@keyframes toastCountdown {
    from { width: 100%; }
    to   { width: 0%; }
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}





/* Nav Menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 0px;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 5px;
    color: var(--nav-fg, #ffffff);
    text-decoration: none;
    border-radius: 0px;
    font-weight: 600;
    transition: all 0.2s ease;
}







.navbar {
    position: sticky;
    top: 0;
    /* Must beat every section-level sticky header (max found: 1000, e.g. plan.js) —
       otherwise the navbar's own dropdowns (search results, profile card) get
       painted over on ties, since those sections render later in the DOM. */
    z-index: 5000;
}

/* YouTube-style sweeping bar along the navbar's bottom edge — see Navbar's
   navBarLoading state in nave.js. Sits right on the navbar's own bottom
   border, below .navbar-content, so it reads as part of the header. */
.nav-youtube-loading-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    overflow: hidden;
}

.navbar-content {
   background: var(--nav-bg, #5c0000);
    /* white 1.9px bottom border removed — the header now runs straight into
       the same-colour app frame below it */
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1px;
    height: 44px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgb(255, 255, 255);
    min-width: 180px;
    border-radius: 8px;
  
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover & Active State */
.nav-link:hover,
.nav-link.active {
    color: #ffa9a9;
}

.nav-icon {
    font-size: 0.9rem;
}

/* ==================== VS CODE STYLE LEFT SIDEBAR ==================== */


.sidebar {
    width: 180px;
    background: var(--nav-bg, #5c0000);

    color: var(--nav-fg, #ffffff92);
    padding: 1rem 0.5rem;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    /* Relative to .main-content (now position:relative) instead of the
       viewport — top:0/bottom:0 always matches this element's own box no
       matter how tall the real header above it turns out to be. */
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    border: 1px solid #ffffff;
    border-radius: 1px;
    cursor: pointer;
    user-select: none;
    transition: width 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;   /* IE / Edge old */
}

.sidebar::-webkit-scrollbar {
    display: none;              /* Chrome / Safari / Edge */
}
/* Sidebar toggle button */
.sidebar-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 6px 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
    user-select: none;
    border: 1px solid rgba(255,255,255,0.12);
}
.sidebar-section {
    padding: 8px 0;
    margin-bottom: 16px;
}

/* Sidebar Item - Main Style */
.sidebar-item {
    display: flex;
    align-items: flex-start; /* Aligns icon with the top of multi-line text */
    gap: 8px; /* Space between icon and text */
    padding: 8px 6px;
    border-radius: 8px;
     border: 1px solid #ffffff00;
    color: var(--nav-fg, #ffffff);
    text-decoration: none;
    margin: 4px 0; /* Consistent margin between items */
    cursor: pointer;
    margin-bottom: 3px;
    margin: 4px 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

/* Hover & Active State */
.sidebar-item:hover,
.sidebar-item.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ff8181;
}

/* Active icon color */
.sidebar-item.active .sidebar-icon {
    color: var(--nav-fg, #ffffff);
}

/* Optional: Add subtle left border when active */
.sidebar-item.active {
    border-left: 0px solid #ff0000; /* This line is effectively doing nothing, can be removed if not intended for future use */
    border-left: 0px solid #ff0000;
}

/* Hover effect for better UX */
.sidebar-item:hover .sidebar-icon {
    color: #ff0000;
}

.top-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.762);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    backdrop-filter: blur(10px);
}

.top-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    border-radius: 10px;
    border: 0.01px solid rgba(255, 0, 0, 0);
    background: rgba(196, 196, 196, 0);
}

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgb(255, 255, 255);
    border-top-color: #f80000;
    animation: spin 0.8s linear infinite;
}

.top-loading-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0055ff;
}

.top-loading-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: #8b8b8b;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading Animation */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.loading {
    animation: pulse 1.5s infinite;
}





.sidebar-toggle-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.sidebar.collapsed .sidebar-toggle-btn {
    justify-content: center;
    padding: 8px 0;
    margin: 6px 4px 10px;
}
.sidebar-toggle-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Collapsed state - icons only */
.sidebar.collapsed {
    width: 40px;
}

.sidebar.collapsed .sidebar-item span {
    display: none;  /* Hide text when collapsed */
}

.sidebar.collapsed .sidebar-title {
    text-align: center;
    font-size: 10px;
}

/* ── Level-2: fully dismissed ── */
.sidebar.dismissed {
    transform: translateX(-100%);
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
    pointer-events: none;
}

/* Restore tab — thin strip on left edge when sidebar is dismissed */
.sidebar-restore-tab {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2000;
    background: var(--nav-bg, #5c0000);
    color: rgba(255,255,255,0.85);
    width: 20px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    box-shadow: 2px 0 8px rgba(0,0,0,0.35);
    transition: width 0.2s, background 0.2s;
    font-size: 11px;
}
.sidebar-restore-tab:hover {
    width: 28px;
    background: #7a0000;
    color: #fff;
}

/* Row that holds collapse-chevron + dismiss-X side by side */
.sidebar-toggle-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 6px 6px 10px;
}
.sidebar-toggle-row .sidebar-toggle-btn {
    margin: 0;
    flex: 1;
}

/* Dismiss (X) button */
.sidebar-dismiss-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    border: 1px solid rgba(255,255,255,0.1);
}
.sidebar-dismiss-btn:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.sidebar.collapsed .sidebar-dismiss-btn {
    display: none;
}

.sidebar-item span {
    font-size: 14px;
    white-space: normal; /* Allows text to wrap to the next line */
}

.sidebar-icon {
    width: 24px;
    text-align: center;
}

.sidebar-title {
    padding: 8px 16px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #ffffff;
    margin-top: 16px;
}

.main-content {
    position: relative; /* containing block for .sidebar's absolute top:0/bottom:0 —
        without this, .sidebar's old hardcoded "top: 52px" positioned itself
        relative to the viewport instead of this element, so anything that
        changed the real header height (e.g. the admin-only subscription
        banner in nave.js, only ever shown to admin/super_admin) threw the
        sidebar's top alignment off for every other role. */
    padding: 1rem;
    overflow: hidden;
    /* Was a hardcoded "calc(100vh - 52px)", assuming .navbar is always
       exactly 52px tall. It isn't — banners/badges change its real height —
       so whenever the navbar was shorter than 52px, this box (and the
       .sidebar absolutely positioned inside it) fell short of the actual
       bottom of the screen, leaving a visible gap. .dashboard-container is
       already a 100vh flex column with .navbar as the first child, so
       flex:1 here makes this element (and the sidebar inside it) fill
       whatever space is actually left, no matter the navbar's real height. */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.content-area {
    /* .sidebar is an absolutely-positioned CHILD of .main-content (see
       app.js), not a sibling before it — so the "make room for the
       sidebar" margin belongs here, on the flex sibling that actually
       needs to be pushed over, not on .main-content itself. Putting it on
       .main-content shifted the whole box (sidebar included) to the
       right, since the sidebar is contained inside it. */
    margin-left: 180px;  /* Match sidebar width */
    transition: margin-left 0.3s ease;
}

/* Owner-controlled app-wide toggle (Zelatonia Office → App Settings, see
   app.js's sidebarEnabled fetch) — .sidebar itself just doesn't render when
   off, but content-area's margin-left above exists only to make room for
   it, so that room needs to go too or there's an empty 180px gap on the
   left where the sidebar used to be. */
body.sidebar-hidden .content-area {
    margin-left: 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Stacking context for the watermark ::before below, so its z-index:-1
       is guaranteed to paint behind every section's own content without
       touching stacking order relative to .sidebar/.navbar outside it. */
    position: relative;
    z-index: 0;
}

/* Zelatonia wordmark watermark, faint, centered behind every section's
   content (Decisions/Goals/Issues/etc. all render inside .content-area) —
   a brand texture behind the cards, not a photo background. Colored mark
   for the default light theme; the white mark (logo-zelatonia-white.png)
   only reads against the dark-mode panel below, same light/dark logo
   swap the navbar itself already does. */
.content-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/logo-zelatonia.png');
    background-repeat: no-repeat;
    background-position: center 46%;
    background-size: min(560px, 70%) auto;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}
body.dark-mode .content-area::before {
    background-image: url('/logo-zelatonia-white.png');
    opacity: 0.06;
}

/* margin-left on .main-content is set by JS in dashboardData.JS (toggleCollapse / useEffect) */





















/* Custom scrollbar for content-area (cards only) */
.content-area::-webkit-scrollbar {
    width: 8px;
}

.content-area::-webkit-scrollbar-track {
    background: #2c2c2c;
}

.content-area::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.content-area::-webkit-scrollbar-thumb:hover {
    background: #555;
}






/* ===== DARK MODE =========================================================
   One palette, shared by the app shell below AND every section's dark-mode
   block further down this file (Decisions/Goal/Plan/Issue/Mistake/
   Documents/Calendar) — the SAME colors #adm-root.adm-dark (Admin panel)
   already uses, since that's the one part of this app with a genuinely
   complete, correctly-contrasted dark mode. Matching it means the whole
   app reads as one consistent dark theme instead of each section
   inventing its own.
     --dm-bg       #0d1117  page / section background
     --dm-elevated #161b22  cards, popups, dropdowns, table headers
     --dm-hover    #1f2937  row/item hover
     --dm-border   #21262d  ordinary hairline
     --dm-border-2 #30363d  a visibly LIGHTER line — used specifically for
                            table row/column dividers so rows actually read
                            as separated, not just same-color-as-background
     --dm-text     #e6edf3  primary text
     --dm-muted    #8b949e  secondary/placeholder text
     --dm-accent   #ef5555  the brand red, brightened so it still reads as
                            "the brand color" against a dark background —
                            the raw #760000/#5c0000 brand hex is dark
                            itself and goes muddy/illegible as text or a
                            small icon on #0d1117, same reasoning admin.js
                            already applies.
   Previously a blanket CSS `filter: invert()` was tried here instead of a
   real palette — reverted: inverting flips LIGHTNESS along with hue, which
   only does the right thing for colors that were light to begin with. The
   brand red above is already dark in light mode, so inverting it flipped
   it to light pink everywhere it's used (headers, badges, buttons) — the
   exact "candy" bug. A real palette like this one treats "already dark,
   leave it / brighten it on purpose" differently from "light, go dark",
   which a blanket filter structurally cannot do. */

body.dark-mode {
    background: #0d1117;
    color: #e6edf3;
    min-height: 100vh;
    color-scheme: dark;
}

/* The header (.navbar), side menu (.sidebar) and the app frame keep their
   own colours in dark mode — only the screen (content) goes dark. */
body.dark-mode .dropdown-menu,
body.dark-mode .wizard-modal,
body.dark-mode .setup-wizard,
body.dark-mode .content-area,
body.dark-mode .wizard-textarea,
body.dark-mode .step,
body.dark-mode .progress-bar {
    background: #0d1117;
    border: 1px solid #21262d;
    box-shadow: none;
}

body.dark-mode .logo {
    color: #ffffff;
}

body.dark-mode .content-area {
    background: #0d1117;
    border-right: 1px solid #21262d;
}

body.dark-mode .dropdown-menu {
    background: #161b22;
    border: 1px solid #21262d;
}

body.dark-mode,
body.dark-mode .notification-bell,
body.dark-mode .wizard-title {
    color: #e6edf3;
}

body.dark-mode .wizard-subtitle,
body.dark-mode .search-input::placeholder,
body.dark-mode .wizard-input::placeholder,
body.dark-mode .wizard-textarea::placeholder {
    color: #8b949e;
}

body.dark-mode .step {
    background: #161b22;
    border: 1px solid #21262d;
}

body.dark-mode .step.active {
    background: #1f2937;
    color: #ffffff;
    border: 1px solid #30363d;
}

body.dark-mode .progress-bar {
    background: #161b22;
    border: 1px solid #21262d;
}

body.dark-mode .btn-signup,
body.dark-mode .btn-back {
    background: #161b22 !important;
    color: #e6edf3 !important;
    border: 1px solid #21262d;
}

body.dark-mode .btn-next {
    background: #ef5555 !important;
    color: #ffffff !important;
    border: 1px solid #ef5555;
}

body.dark-mode .btn-done {
    background: #16a34a !important;
    color: #ffffff !important;
    border: 1px solid #16a34a;
}

/* Banner text — used by the Mission banner, the Subscription upgrade
   banner, and the decisions empty-state message. Was an infinite scrolling
   marquee (scroll-text-marquee keyframes); reverted to plain static text —
   color/font-size are left to be set inline per usage rather than
   hardcoded, since this is reused on banners with different backgrounds. */
.scroll-text {
    width: 100%;
}

.scroll-text span {
    display: block;
}

/* Loader */
body.dark-mode .loader .jimu-primary-loading {
    background: radial-gradient(circle, #5a8cff, #000000);
}

/* ===== Decisions dashboard (dahborad/renderDashboard.jS) — dark mode =====
   This component predates the site's dark-mode work and was styled with
   hardcoded light inline colors throughout (department switcher, the
   decision table, dropdown popups) — none of it ever went dark with the
   rest of the app. Rather than rewrite every inline style, this reuses the
   same "catch the inline color, force it dark" trick #adm-root.adm-dark
   uses in admin.js: match the literal color the browser reflects back in
   the style attribute (rgb()/hex/named) and override it. */
body.dark-mode .decision-management-system {
    color: #e6edf3;
}
body.dark-mode .decision-management-system [style*="background: rgb(255, 255, 255)"],
body.dark-mode .decision-management-system [style*="background-color: rgb(255, 255, 255)"],
body.dark-mode .decision-management-system [style*="background: white"],
body.dark-mode .decision-management-system [style*="background-color: white"],
body.dark-mode .decision-management-system [style*="255, 255, 255"]:not(img):not(canvas):not([style*="color: rgb(255"]):not([style*="color:#fff"]):not([style*="color: white"]),
body.dark-mode .decision-management-system [style*="255,255,255"]:not(img):not(canvas):not([style*="color:#fff"]),
body.dark-mode .decision-management-system [style*="#ffffff"]:not(img):not(canvas):not([style*="color:#fff"]),
body.dark-mode .decision-management-system [style*=": #fff;"]:not(img):not(canvas),
body.dark-mode .decision-management-system [style*=":#fff;"]:not(img):not(canvas),
body.dark-mode .decision-management-system [style*="248, 250, 252"]:not(img):not(canvas),
body.dark-mode .decision-management-system [style*="249, 250, 251"]:not(img):not(canvas),
body.dark-mode .decision-management-system [style*="241, 245, 249"]:not(img):not(canvas),
body.dark-mode .decision-management-system [style*="243, 244, 246"]:not(img):not(canvas),
body.dark-mode .decision-management-system [style*="240, 240, 240"]:not(img):not(canvas),
body.dark-mode .decision-management-system [style*="245, 245, 245"]:not(img):not(canvas),
body.dark-mode .decision-management-system [style*="239, 246, 255"]:not(canvas),
body.dark-mode .decision-management-system [style*="254, 242, 242"]:not(canvas)
    { background-color: #0d1117 !important; background-image: none !important; }

/* the decision table itself — thead/tbody rows never had a className hook.
   Row/cell borders use the LIGHTER #30363d (not the ordinary #21262d
   hairline) specifically so rows read as visibly separated, not just
   same-color-as-the-background. */
body.dark-mode .decision-management-system table { background-color: #0d1117 !important; }
body.dark-mode .decision-management-system thead tr,
body.dark-mode .decision-management-system th { background-color: #161b22 !important; color: #e6edf3 !important; border-color: #30363d !important; }
body.dark-mode .decision-management-system tbody tr { background-color: #0d1117 !important; }
body.dark-mode .decision-management-system tbody tr:hover { background-color: #1f2937 !important; }
body.dark-mode .decision-management-system td { border-color: #30363d !important; }

/* light borders → a dark hairline */
body.dark-mode .decision-management-system [style*="226, 232, 240"],
body.dark-mode .decision-management-system [style*="229, 231, 235"],
body.dark-mode .decision-management-system [style*="#e2e8f0"],
body.dark-mode .decision-management-system [style*="#e5e7eb"],
body.dark-mode .decision-management-system [style*="#f1f5f9"] { border-color: #21262d !important; }

/* dark body copy sitting on a now-black surface → light */
body.dark-mode .decision-management-system [style*="color: rgb(15, 23, 42)"],
body.dark-mode .decision-management-system [style*="color: rgb(17, 24, 39)"],
body.dark-mode .decision-management-system [style*="color: rgb(0, 0, 0)"],
body.dark-mode .decision-management-system [style*="color: black"],
body.dark-mode .decision-management-system [style*="color:#0f172a"],
body.dark-mode .decision-management-system [style*="color: #0f172a"] { color: #e6edf3 !important; }

/* ===== Department cards — Goal / Plan / Mistake / Issue — dark mode =====
   Same "departments" sidebar card (goal.js/plan.js/mistake.js — literally
   copy-pasted between the three) and the Issue department pill bar, none
   of which had a dark-mode pass either. Marked with a shared className so
   this doesn't need the attribute-selector trick. */
body.dark-mode .dept-sidebar-card {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    box-shadow: none !important;
}
body.dark-mode .dept-sidebar-card [style*="background: rgb(249, 250, 251)"],
body.dark-mode .dept-sidebar-card [style*="background-color: rgb(249, 250, 251)"],
body.dark-mode .dept-sidebar-card [style*="#f9fafb"] { background-color: #161b22 !important; }
body.dark-mode .dept-sidebar-card [style*="#e5e7eb"] { border-color: #21262d !important; }
body.dark-mode .dept-sidebar-card [style*="color: rgb(0, 0, 0)"],
body.dark-mode .dept-sidebar-card [style*="color:#000000"],
body.dark-mode .dept-sidebar-card [style*="color: #000000"] { color: #e6edf3 !important; }

/* Issue's department pill bar — only the UNSELECTED pills are plain white
   (selected ones carry the department's own color and should stay as-is). */
body.dark-mode .dept-pill-bar { background-color: #0d1117 !important; border-color: #21262d !important; }
body.dark-mode .dept-pill-bar button[style*="background: rgb(255, 255, 255)"],
body.dark-mode .dept-pill-bar button[style*="background-color: rgb(255, 255, 255)"],
body.dark-mode .dept-pill-bar button[style*="background: white"] {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

/* ===== Data tables — Goal / Issue / Plan / Mistake / Decisions — dark mode =====
   Every list table across these five sections (10+ of them) was styled the
   same hardcoded-light way, no className, no dark-mode pass. One shared
   class + bare element selectors covers all of them regardless of the
   surrounding markup, plus an attribute fallback for header/cell text and
   backgrounds still set inline per-row (status pills, striping, etc).
   Row/cell borders use #30363d (lighter than the ordinary #21262d
   hairline elsewhere) specifically so each row reads as visibly divided
   from the next, not just flowing into a solid block. */
body.dark-mode table.data-black-table {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}
body.dark-mode table.data-black-table thead,
body.dark-mode table.data-black-table thead tr,
body.dark-mode table.data-black-table th {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}
body.dark-mode table.data-black-table tbody tr {
    background-color: #0d1117 !important;
}
body.dark-mode table.data-black-table tbody tr:nth-child(even) {
    background-color: #161b22 !important;
}
body.dark-mode table.data-black-table tbody tr:hover {
    background-color: #1f2937 !important;
}
body.dark-mode table.data-black-table td {
    color: #e6edf3 !important;
    border-color: #30363d !important;
}
body.dark-mode table.data-black-table [style*="background: rgb(255, 255, 255)"],
body.dark-mode table.data-black-table [style*="background-color: rgb(255, 255, 255)"],
body.dark-mode table.data-black-table [style*="background: white"],
body.dark-mode table.data-black-table [style*="background: rgb(248, 250, 252)"],
body.dark-mode table.data-black-table [style*="background-color: rgb(248, 250, 252)"],
body.dark-mode table.data-black-table [style*="background: rgb(249, 250, 251)"] {
    background-color: #0d1117 !important;
}
body.dark-mode table.data-black-table [style*="color: rgb(0, 0, 0)"],
body.dark-mode table.data-black-table [style*="color: rgb(17, 17, 17)"],
body.dark-mode table.data-black-table [style*="color: black"],
body.dark-mode table.data-black-table [style*="color:#111"],
body.dark-mode table.data-black-table [style*="color: #111"] {
    color: #e6edf3 !important;
}

/* ===== Goal / Plan / Issue / Mistake / Documents / Calendar — dark mode ==
   Same technique as Decisions above, extended to the rest of the app.
   Each section's root div now carries its own className (added alongside
   this CSS — goal-management-system / plan-management-system /
   issue-tracker-system / mistake-management-system (next to the existing,
   previously-unstyled "activity-log" class) / documents-management-system
   / calendar-management-system). Each gets the same three jobs: (1) known
   light backgrounds -> #0d1117, (2) known light/mid-gray borders -> the
   ordinary #21262d hairline, (3) known dark-gray/black text -> readable
   light text — #e6edf3 for body copy, #8b949e for text that was already
   visually "muted"/secondary (gray-400/500 tones), so that hierarchy
   survives into dark mode instead of flattening everything to one brightness.
   Brand/status accent colors (the dark-red brand, danger/success/warning/
   info colors, and small pale badge fills) are deliberately NOT touched —
   they already read fine on a dark surface and forcing them through this
   same bg/text logic is what produced the "candy" bug the filter-based
   attempt had. Each section's own table already carries the shared
   data-black-table class, so its dark-mode styling (further up this file)
   applies automatically — nothing extra needed here for tables. */

body.dark-mode .goal-management-system,
body.dark-mode .plan-management-system,
body.dark-mode .issue-tracker-system,
body.dark-mode .mistake-management-system,
body.dark-mode .documents-management-system,
body.dark-mode .calendar-management-system {
    color: #e6edf3;
    background-color: #0d1117;
}

/* Known light backgrounds -> dark surface. Matches every form a color
   shows up as in a serialized inline style attribute across these six
   files: the named color 'white'/"white", the hex forms #fff/#ffffff,
   and (issue.js specifically) the literal rgb(255, 255, 255) the browser
   sometimes reflects back instead. Excludes cases where that same string
   is actually a TEXT color (white text on a colored button/badge), same
   guard the Decisions block above already uses. */
body.dark-mode .goal-management-system [style*="background: white"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="background-color: white"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="background: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="background-color: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#ffffff"]:not(img):not(canvas):not([style*="color:#fff"]):not([style*="color: #fff"]),
body.dark-mode .goal-management-system [style*=": #fff;"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*=":#fff;"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#f9fafb"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#f8fafc"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#f3f4f6"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#f1f5f9"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#f0f9ff"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#f0fdf4"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#fef2f2"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#fffbeb"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#f5f3ff"]:not(img):not(canvas),
body.dark-mode .goal-management-system [style*="#eff6ff"]:not(img):not(canvas),

body.dark-mode .plan-management-system [style*="background: white"]:not(img):not(canvas),
body.dark-mode .plan-management-system [style*="background-color: white"]:not(img):not(canvas),
body.dark-mode .plan-management-system [style*="background: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .plan-management-system [style*="background-color: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .plan-management-system [style*="#ffffff"]:not(img):not(canvas):not([style*="color:#fff"]):not([style*="color: #fff"]),
body.dark-mode .plan-management-system [style*=": #fff;"]:not(img):not(canvas),
body.dark-mode .plan-management-system [style*=":#fff;"]:not(img):not(canvas),
body.dark-mode .plan-management-system [style*="#f8fafc"]:not(img):not(canvas),
body.dark-mode .plan-management-system [style*="#f1f5f9"]:not(img):not(canvas),
body.dark-mode .plan-management-system [style*="#f0f9ff"]:not(img):not(canvas),

body.dark-mode .issue-tracker-system [style*="background: white"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="background-color: white"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="background: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="background-color: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="#ffffff"]:not(img):not(canvas):not([style*="color:#fff"]):not([style*="color: #fff"]),
body.dark-mode .issue-tracker-system [style*=": #fff;"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*=":#fff;"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="#eee"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="#f1f5f9"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="#f0fdf4"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="#fef2f2"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="#f8fafc"]:not(img):not(canvas),
body.dark-mode .issue-tracker-system [style*="#f8f9fa"]:not(img):not(canvas),

body.dark-mode .mistake-management-system [style*="background: white"]:not(img):not(canvas),
body.dark-mode .mistake-management-system [style*="background-color: white"]:not(img):not(canvas),
body.dark-mode .mistake-management-system [style*="background: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .mistake-management-system [style*="background-color: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .mistake-management-system [style*="#ffffff"]:not(img):not(canvas):not([style*="color:#fff"]):not([style*="color: #fff"]),
body.dark-mode .mistake-management-system [style*=": #fff;"]:not(img):not(canvas),
body.dark-mode .mistake-management-system [style*=":#fff;"]:not(img):not(canvas),
body.dark-mode .mistake-management-system [style*="#f1f5f9"]:not(img):not(canvas),
body.dark-mode .mistake-management-system [style*="#f8fafc"]:not(img):not(canvas),
body.dark-mode .mistake-management-system [style*="#fef2f2"]:not(img):not(canvas),

body.dark-mode .documents-management-system [style*="background: white"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="background-color: white"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="background: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="background-color: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="#ffffff"]:not(img):not(canvas):not([style*="color:#fff"]):not([style*="color: #fff"]),
body.dark-mode .documents-management-system [style*=": #fff;"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*=":#fff;"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="#f9fafb"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="#f8fafc"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="#f1f5f9"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="#f3f4f6"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="#fffbeb"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="#fef2f2"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="#f5f3ff"]:not(img):not(canvas),
body.dark-mode .documents-management-system [style*="#eff6ff"]:not(img):not(canvas),

body.dark-mode .calendar-management-system [style*="background: white"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="background-color: white"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="background: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="background-color: rgb(255, 255, 255)"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="#ffffff"]:not(img):not(canvas):not([style*="color:#fff"]):not([style*="color: #fff"]),
body.dark-mode .calendar-management-system [style*=": #fff;"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*=":#fff;"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="#f8fafc"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="#f1f5f9"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="#f0f0f0"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="#fafafa"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="#f5f5f5"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="#fafbff"]:not(img):not(canvas),
body.dark-mode .calendar-management-system [style*="#fef2f2"]:not(img):not(canvas)
    { background-color: #161b22 !important; background-image: none !important; }

/* Light/mid-gray borders -> the ordinary dark hairline */
body.dark-mode .goal-management-system [style*="#e5e7eb"],
body.dark-mode .goal-management-system [style*="#e2e8f0"],
body.dark-mode .plan-management-system [style*="#e5e7eb"],
body.dark-mode .plan-management-system [style*="#e2e8f0"],
body.dark-mode .issue-tracker-system [style*="#e5e7eb"],
body.dark-mode .issue-tracker-system [style*="#e2e8f0"],
body.dark-mode .mistake-management-system [style*="#e5e7eb"],
body.dark-mode .mistake-management-system [style*="#e2e8f0"],
body.dark-mode .mistake-management-system [style*="#cbd5e1"],
body.dark-mode .documents-management-system [style*="#e5e7eb"],
body.dark-mode .documents-management-system [style*="#e2e8f0"],
body.dark-mode .calendar-management-system [style*="#e5e7eb"],
body.dark-mode .calendar-management-system [style*="#e2e8f0"],
body.dark-mode .calendar-management-system [style*="#cbd5e1"]
    { border-color: #21262d !important; }

/* Dark body-copy text (near-black grays) -> light, readable on the new
   dark surface. #000000 in these six files is confirmed (via the research
   pass) to only ever appear as text/border color, never a background, so
   it's safe to treat as text everywhere here (unlike Decisions, which
   deliberately only targets it inside color: contexts). */
body.dark-mode .goal-management-system [style*="color: rgb(0, 0, 0)"],
body.dark-mode .goal-management-system [style*="color:#000000"],
body.dark-mode .goal-management-system [style*="color: #000000"],
body.dark-mode .goal-management-system [style*="color:#0f172a"],
body.dark-mode .goal-management-system [style*="color: #0f172a"],
body.dark-mode .goal-management-system [style*="color:#1f2937"],
body.dark-mode .goal-management-system [style*="color: #1f2937"],
body.dark-mode .goal-management-system [style*="color:#374151"],
body.dark-mode .goal-management-system [style*="color: #374151"],

body.dark-mode .plan-management-system [style*="color: rgb(0, 0, 0)"],
body.dark-mode .plan-management-system [style*="color:#000000"],
body.dark-mode .plan-management-system [style*="color: #000000"],
body.dark-mode .plan-management-system [style*="color:#0f172a"],
body.dark-mode .plan-management-system [style*="color: #0f172a"],
body.dark-mode .plan-management-system [style*="color:#333"],
body.dark-mode .plan-management-system [style*="color: #333"],

body.dark-mode .issue-tracker-system [style*="color: rgb(0, 0, 0)"],
body.dark-mode .issue-tracker-system [style*="color:#000000"],
body.dark-mode .issue-tracker-system [style*="color: #000000"],
body.dark-mode .issue-tracker-system [style*="color:#0f172a"],
body.dark-mode .issue-tracker-system [style*="color: #0f172a"],
body.dark-mode .issue-tracker-system [style*="color:#111827"],
body.dark-mode .issue-tracker-system [style*="color: #111827"],
body.dark-mode .issue-tracker-system [style*="color:#374151"],
body.dark-mode .issue-tracker-system [style*="color: #374151"],

body.dark-mode .mistake-management-system [style*="color: rgb(0, 0, 0)"],
body.dark-mode .mistake-management-system [style*="color:#000000"],
body.dark-mode .mistake-management-system [style*="color: #000000"],
body.dark-mode .mistake-management-system [style*="color:#0f172a"],
body.dark-mode .mistake-management-system [style*="color: #0f172a"],
body.dark-mode .mistake-management-system [style*="color:#111827"],
body.dark-mode .mistake-management-system [style*="color: #111827"],
body.dark-mode .mistake-management-system [style*="color:#374151"],
body.dark-mode .mistake-management-system [style*="color: #374151"],

body.dark-mode .documents-management-system [style*="color: rgb(0, 0, 0)"],
body.dark-mode .documents-management-system [style*="color:#000000"],
body.dark-mode .documents-management-system [style*="color: #000000"],
body.dark-mode .documents-management-system [style*="color:#0f172a"],
body.dark-mode .documents-management-system [style*="color: #0f172a"],
body.dark-mode .documents-management-system [style*="color:#374151"],
body.dark-mode .documents-management-system [style*="color: #374151"],

body.dark-mode .calendar-management-system [style*="color: rgb(0, 0, 0)"],
body.dark-mode .calendar-management-system [style*="color:#000000"],
body.dark-mode .calendar-management-system [style*="color: #000000"],
body.dark-mode .calendar-management-system [style*="color:#0f172a"],
body.dark-mode .calendar-management-system [style*="color: #0f172a"],
body.dark-mode .calendar-management-system [style*="color:#334155"],
body.dark-mode .calendar-management-system [style*="color: #334155"]
    { color: #e6edf3 !important; }

/* Muted/secondary text (gray-400/500 tones) -> a dimmer light, preserving
   the "this is secondary text" hierarchy instead of flattening it to the
   same brightness as primary body copy. */
body.dark-mode .goal-management-system [style*="color:#6b7280"],
body.dark-mode .goal-management-system [style*="color: #6b7280"],
body.dark-mode .goal-management-system [style*="color:#9ca3af"],
body.dark-mode .goal-management-system [style*="color: #9ca3af"],
body.dark-mode .goal-management-system [style*="color:#4b5563"],
body.dark-mode .goal-management-system [style*="color: #4b5563"],

body.dark-mode .plan-management-system [style*="color:#94a3b8"],
body.dark-mode .plan-management-system [style*="color: #94a3b8"],
body.dark-mode .plan-management-system [style*="color:#64748b"],
body.dark-mode .plan-management-system [style*="color: #64748b"],
body.dark-mode .plan-management-system [style*="color:#9ca3af"],
body.dark-mode .plan-management-system [style*="color: #9ca3af"],
body.dark-mode .plan-management-system [style*="color:#666"],
body.dark-mode .plan-management-system [style*="color: #666"],

body.dark-mode .issue-tracker-system [style*="color:#6b7280"],
body.dark-mode .issue-tracker-system [style*="color: #6b7280"],
body.dark-mode .issue-tracker-system [style*="color:#94a3b8"],
body.dark-mode .issue-tracker-system [style*="color: #94a3b8"],
body.dark-mode .issue-tracker-system [style*="color:#9ca3af"],
body.dark-mode .issue-tracker-system [style*="color: #9ca3af"],
body.dark-mode .issue-tracker-system [style*="color:#64748b"],
body.dark-mode .issue-tracker-system [style*="color: #64748b"],

body.dark-mode .mistake-management-system [style*="color:#94a3b8"],
body.dark-mode .mistake-management-system [style*="color: #94a3b8"],
body.dark-mode .mistake-management-system [style*="color:#6b7280"],
body.dark-mode .mistake-management-system [style*="color: #6b7280"],
body.dark-mode .mistake-management-system [style*="color:#64748b"],
body.dark-mode .mistake-management-system [style*="color: #64748b"],
body.dark-mode .mistake-management-system [style*="color:#9ca3af"],
body.dark-mode .mistake-management-system [style*="color: #9ca3af"],

body.dark-mode .documents-management-system [style*="color:#4b5563"],
body.dark-mode .documents-management-system [style*="color: #4b5563"],
body.dark-mode .documents-management-system [style*="color:#9ca3af"],
body.dark-mode .documents-management-system [style*="color: #9ca3af"],
body.dark-mode .documents-management-system [style*="color:#94a3b8"],
body.dark-mode .documents-management-system [style*="color: #94a3b8"],
body.dark-mode .documents-management-system [style*="color:#64748b"],
body.dark-mode .documents-management-system [style*="color: #64748b"],

body.dark-mode .calendar-management-system [style*="color:#94a3b8"],
body.dark-mode .calendar-management-system [style*="color: #94a3b8"],
body.dark-mode .calendar-management-system [style*="color:#475569"],
body.dark-mode .calendar-management-system [style*="color: #475569"],
body.dark-mode .calendar-management-system [style*="color:#64748b"]
    { color: #8b949e !important; }

/* The paper editor (documentDescriptionEditor.js) marks its actual page
   data-dm-exempt so the NEWER, JS-based dark-mode system
   (darkModeEnforcer.js) leaves it real white — but this file's own older,
   static attribute-selector dark-mode rules above (scoped to
   .documents-management-system, from before that JS system existed) have
   no concept of that exemption at all and were still catching the paper's
   inline background:'#fff' (serialized as "background: rgb(255, 255, 255)"
   in the DOM, which is exactly what several of the selectors above match).
   Both the editor's "page stretches full width" bug (fixed earlier) and
   this one trace back to the same root cause: the Documents section has
   TWO separate, overlapping dark-mode mechanisms where every other section
   only has the one.
   First attempt at this just placed the override after that whole block,
   on the theory that later-in-file wins — it didn't, because `!important`
   ties are resolved by SPECIFICITY first and source order only as the
   final tiebreak when specificity is equal. Several rules above end in
   :not(img):not(canvas), which — since :not() carries the specificity of
   its own argument — makes them MORE specific than a plain
   "later in the file" override, so they kept winning regardless of
   position. [data-dm-exempt][data-dm-exempt] repeats the same attribute
   selector to deliberately out-specify every rule in that block (each
   repetition counts again toward specificity even though it doesn't
   change what matches), which is what actually guarantees this wins. */
body.dark-mode .documents-management-system [data-dm-exempt][data-dm-exempt],
body.dark-mode .documents-management-system [data-dm-exempt][data-dm-exempt] [style]
    { background-color: #ffffff !important; }

/* ── Clean app frame (2026-10-17) ─────────────────────────────────────
   The 16px light-grey gap around the page (body #969696 showing through
   .main-content's padding, and above the navbar from .dashboard-container's
   margin-top) is now a slim frame in slate #1e2a35 — the same colour as
   the Admin Office sidebar: the frame areas are painted dark,
   and .content-area carries the same grey that used to show through it, so
   every section looks the same inside — only the edges change. Dark mode
   keeps its own .content-area colour (body.dark-mode rule is more specific). */
/* Colour / thickness / corner come from the owner's App Border setting
   (Zelatonia Office → App Settings) as CSS variables set by app.js —
   --zf-color, --zf-width, --zf-radius; body.app-frame-off removes it. */
body:has(.dashboard-container) { background: var(--zf-color, #1e2a35); }
.dashboard-container { background: var(--zf-color, #1e2a35); }
.main-content { background: var(--zf-color, #1e2a35); padding: var(--zf-width, 8px); }
body.app-frame-off .main-content { padding: 0; }
body.app-frame-off .content-area { border-radius: 0 !important; }
/* The faint Zelatonia watermark used to be .content-area::before at
   z-index -1, i.e. painted BEHIND this box — a solid background here would
   hide it, so it's drawn into the background instead: the logo under a 95%
   veil of the same colour = the same ~5% watermark as before. */
.content-area {
    border-radius: var(--zf-radius, 10px);
    background:
        linear-gradient(rgba(150,150,150,0.95), rgba(150,150,150,0.95)),
        url('/logo-zelatonia.png') no-repeat center 46% / min(560px, 70%) auto,
        #969696;
}
.content-area::before { display: none; }
body.dark-mode .content-area {
    background:
        linear-gradient(rgba(13,17,23,0.94), rgba(13,17,23,0.94)),
        url('/logo-zelatonia-white.png') no-repeat center 46% / min(560px, 70%) auto,
        #0d1117;
}
/* Dark mode: header, side menu and frame keep the same colour as light
   mode (--zf-color / --nav-bg) — only the screen inside is dark. */

/* ── Admin Office frame (2026-10-17) ─────────────────────────────────
   Same clean framed look as the app, in the Admin Office's own slate
   (the colour of its top bar + sidebar, #1e2a35; black in dark mode), and
   only where it fits there: a slim strip between the content and the
   header above / sidebar on the left, with a rounded top-left corner —
   the right and bottom edges stay flush. */
/* Fixed — NOT tied to the owner's App Border control (that one is the
   main app only). */
#adm-root .adm-main-row { background: #1e2a35; }
#adm-root.adm-dark .adm-main-row { background: #000000; }
#adm-root .adm-main-content { margin: 8px 0 0 8px; border-top-left-radius: 14px; }


/* ── Header search results card in dark mode (2026-10-25) ─────────────
   The card is data-dm-exempt (nave.js) — the generic darkener darkened
   its background but left its navy text dark. Styled here instead:
   dark card, light titles, soft gray details, red icons kept. */
body.dark-mode .zsr { background: #161b22 !important; border-color: #30363d !important; box-shadow: 0 12px 40px rgba(0,0,0,.55) !important; }
body.dark-mode .zsr .zsr-head { border-bottom-color: #30363d !important; }
body.dark-mode .zsr .zsr-head > span:first-child { color: #9da7b3 !important; }
body.dark-mode .zsr .zsr-row { background: #161b22 !important; border-bottom-color: #21262d !important; }
body.dark-mode .zsr .zsr-row:hover { background: #1f2630 !important; }
body.dark-mode .zsr .zsr-title { color: #f0f6fc !important; }
body.dark-mode .zsr .zsr-desc { color: #9da7b3 !important; }
body.dark-mode .zsr .zsr-more { color: #ff8a8a !important; }
body.dark-mode .zsr .zsr-group { background: #0d1117 !important; border-bottom-color: #21262d !important; }
body.dark-mode .zsr .zsr-group span { color: #c9d1d9 !important; }
body.dark-mode .zsr .zsr-group span:last-child { color: #ff8a8a !important; }
body.dark-mode .zsr .zsr-foot { background: #0d1117 !important; border-top-color: #21262d !important; color: #8b949e !important; }
body.dark-mode .zsr .fa-chevron-right { color: #6e7681 !important; }

/* ── Button loading spinner (main.js zBusyButtons) ── */
button[data-zbusy] { position: relative !important; pointer-events: none !important; color: transparent !important; }
button[data-zbusy] > * { visibility: hidden !important; }
button[data-zbusy]::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -9px 0 0 -9px;
    border: 2px solid rgba(15, 23, 42, 0.22); border-top-color: #ffffff; border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 97, 201, 0.25); animation: zBusySpin 0.7s linear infinite;
}
@keyframes zBusySpin { to { transform: rotate(360deg); } }

body.dark-mode .zsr .zsr-tile { background: #0d1117 !important; border-color: #30363d !important; }
body.dark-mode .zsr .zsr-tile:hover { background: #1f2630 !important; }