/* =========================================================================
   MMTAX Admin — Modes.css
   Display modes: Light (Theme.css as it is), Dusk (blue slate) and Night (graphite).
   Each user picks one with the top-bar button or in the account menu (Scripts/Modes.js);
   the master renders it on <html data-mode="light|dusk|night"> (plus class "mode-dark"
   for the two dark ones) from that user's cookie, so a page opens in its mode with no
   flash (Shared.ColorMode). MMTAX keeps its green and blue in every mode: in the dark
   ones they are lifted to read on the dark ground, and text on a green fill turns dark
   (--on-accent). Every text colour here reads at 4.5:1 or better on its ground.
   Loaded after Theme.css and Pages.css. Screen only: printing keeps the light colours.
   ========================================================================= */

/* ---------- the switch (every mode) ---------- */
/* Lucide glyphs used only here (lucide-static 1.52.0, as Icons.css) */
.lc-moon::before { content: "\e11e"; }
.lc-moon-star::before { content: "\e410"; }
.lc-sun::before { content: "\e178"; }

/* top-bar button: the icon is the mode a click switches TO - moon in Light (to Dusk), moon-star in Dusk (to Night), sun in Night (to Light) */
.mode-toggle { cursor: pointer; }
.mode-toggle .lc { display: none; font-size: 16px; }
html:not([data-mode="dusk"]):not([data-mode="night"]) .mode-toggle .lc-moon,
html[data-mode="dusk"] .mode-toggle .lc-moon-star,
html[data-mode="night"] .mode-toggle .lc-sun { display: inline-block; }

/* account menu: Light / Dusk / Night as one segmented control */
.side-foot .dropdown-menu > li.mode-pick { padding: 6px 6px 4px; }
.mode-pick-label { display: block; padding: 0 4px 6px; font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); }
.mode-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: 8px; background: var(--nav-hover-bg); }
.mode-seg button {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 4px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text-secondary); font: 500 12px/1 var(--font); cursor: pointer; white-space: nowrap;
}
.mode-seg button .lc { font-size: 13px; color: var(--text-tertiary); }
.mode-seg button:hover { color: var(--text-primary); }
.mode-seg button[aria-checked="true"] { background: var(--card-bg); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.mode-seg button[aria-checked="true"] .lc { color: var(--accent); }
.mode-seg button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 1px; }

/* while switching, colours change at once instead of each one fading at its own speed */
html.mode-switching *, html.mode-switching *::before, html.mode-switching *::after { transition: none !important; }

@media screen {

/* ---------- Dusk: blue slate ---------- */
:root[data-mode="dusk"] {
    color-scheme: dark;
    --bg-page: #0f172a;
    --card-bg: #1e293b;
    --card-border: #334155;
    --row-divider: #273449;
    --surface: #243044;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .28);
    --pop-shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);

    --text-primary: #e8edf5;
    --text-secondary: #cbd5e1;
    --text-soft: #b4c0d0;
    --text-tertiary: #a7b4c6;
    --text-subtle: #8b9ab0;
    --text-faint: #475569;

    --accent: #3ecf7a;
    --accent-hover: #5bd98f;
    --accent-focus: #6ee7a0;
    --accent-soft: rgba(62, 207, 122, .14);
    --accent-soft-hover: rgba(62, 207, 122, .22);
    --accent-soft-border: rgba(62, 207, 122, .40);
    --link: #7cc4f0;
    --link-hover: #a8d8f6;

    --brand-green: #3ecf7a;
    --brand-green-dark: #2fb868;
    --brand-green-soft: rgba(62, 207, 122, .14);
    --brand-green-border: rgba(62, 207, 122, .40);
    --brand-blue: #4fb3e8;

    --control-border: #3b4a63;
    --control-bg: #162133;
    --nav-hover-bg: #273449;
    --nav-active-bg: #2c3a52;

    --danger-bg: rgba(248, 113, 113, .14); --danger-border: rgba(248, 113, 113, .40); --danger-text: #fca5a5;
    --warn-bg: rgba(251, 191, 36, .14);    --warn-border: rgba(251, 191, 36, .40);    --warn-text: #fcd34d;
    --info-bg: rgba(56, 189, 248, .14);    --info-border: rgba(56, 189, 248, .40);    --info-text: #7dd3fc;
    --ok-bg: rgba(52, 211, 153, .14);      --ok-border: rgba(52, 211, 153, .40);      --ok-text: #6ee7b7;

    --badge-warning-bg: rgba(251, 191, 36, .16); --badge-warning-text: #fcd34d;
    --badge-danger-bg: rgba(248, 113, 113, .16); --badge-danger-text: #fca5a5;
    --badge-success-bg: rgba(52, 211, 153, .16); --badge-success-text: #6ee7b7;
    --badge-neutral-bg: #273449;                 --badge-neutral-text: #cbd5e1;

    --on-accent: #05230f;
    --surface-raised: #1e293b;
    --pop-bg: #222f45;
    --row-alt: rgba(255, 255, 255, .02);
    --row-hover: #243044;
    --hover-tint: rgba(255, 255, 255, .08);
    --focus-glow: rgba(62, 207, 122, .22);
    --bar-bg: #f1f5f9; --bar-text: #0f172a; --bar-muted: #475569; --bar-dim: #64748b; --bar-hover: rgba(15, 23, 42, .08);
    --tag-t2-bg: rgba(62, 207, 122, .18);   --tag-t2-text: #86efac;
    --tag-t4-bg: rgba(45, 212, 191, .18);   --tag-t4-text: #5eead4;
    --tag-t1-bg: rgba(96, 165, 250, .20);   --tag-t1-text: #93c5fd;
    --tag-task-bg: rgba(167, 139, 250, .20); --tag-task-text: #c4b5fd;
}

/* ---------- Night: near-black graphite, neon green and electric blue ---------- */
:root[data-mode="night"] {
    color-scheme: dark;
    --bg-page: #0b0e14;
    --card-bg: #12161e;
    --card-border: #252c3b;
    --row-divider: #1c2230;
    --surface: #1a1f2a;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .4);
    --pop-shadow: 0 12px 36px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .45);

    --text-primary: #f5f7fb;
    --text-secondary: #d3d9e4;
    --text-soft: #b3bccb;
    --text-tertiary: #a3acbd;
    --text-subtle: #8891a5;
    --text-faint: #3a4356;

    --accent: #4ade80;
    --accent-hover: #6ee79a;
    --accent-focus: #86efac;
    --accent-soft: rgba(74, 222, 128, .14);
    --accent-soft-hover: rgba(74, 222, 128, .22);
    --accent-soft-border: rgba(74, 222, 128, .40);
    --link: #38bdf8;
    --link-hover: #7dd3fc;

    --brand-green: #4ade80;
    --brand-green-dark: #22c55e;
    --brand-green-soft: rgba(74, 222, 128, .14);
    --brand-green-border: rgba(74, 222, 128, .40);
    --brand-blue: #38bdf8;

    --control-border: #323c50;
    --control-bg: #0e1219;
    --nav-hover-bg: #1e2433;
    --nav-active-bg: #232a39;

    --danger-bg: rgba(255, 93, 93, .14);  --danger-border: rgba(255, 93, 93, .40);  --danger-text: #ff8a8a;
    --warn-bg: rgba(250, 204, 21, .14);   --warn-border: rgba(250, 204, 21, .40);   --warn-text: #fde047;
    --info-bg: rgba(34, 211, 238, .14);   --info-border: rgba(34, 211, 238, .40);   --info-text: #67e8f9;
    --ok-bg: rgba(74, 222, 128, .14);     --ok-border: rgba(74, 222, 128, .40);     --ok-text: #86efac;

    --badge-warning-bg: rgba(250, 204, 21, .16); --badge-warning-text: #fde047;
    --badge-danger-bg: rgba(255, 93, 93, .16);   --badge-danger-text: #ff8a8a;
    --badge-success-bg: rgba(74, 222, 128, .16); --badge-success-text: #86efac;
    --badge-neutral-bg: #1e2433;                 --badge-neutral-text: #d3d9e4;

    --on-accent: #032612;
    --surface-raised: #12161e;
    --pop-bg: #181d27;
    --row-alt: rgba(255, 255, 255, .02);
    --row-hover: #1a1f2a;
    --hover-tint: rgba(255, 255, 255, .08);
    --focus-glow: rgba(74, 222, 128, .25);
    --bar-bg: #f5f7fb; --bar-text: #0b0e14; --bar-muted: #4a5568; --bar-dim: #6e778b; --bar-hover: rgba(11, 14, 20, .08);
    --tag-t2-bg: rgba(74, 222, 128, .16);   --tag-t2-text: #86efac;
    --tag-t4-bg: rgba(45, 212, 191, .16);   --tag-t4-text: #5eead4;
    --tag-t1-bg: rgba(56, 189, 248, .18);   --tag-t1-text: #7dd3fc;
    --tag-task-bg: rgba(192, 132, 252, .18); --tag-task-text: #d8b4fe;
}

/* ---------- dashboard (Dashboard.css keeps its own names on .dash) ---------- */
html[data-mode="dusk"] .dash {
    --bg: #0f172a; --surface: #1e293b; --surface-2: #243044; --surface-3: #2c3a52;
    --line: #334155; --line-strong: #3b4a63;
    --ink: #e8edf5; --ink-2: #cbd5e1; --ink-3: #a7b4c6; --ink-4: #8b9ab0;
    --value: #f1f5ff;
    --green: #3ecf7a; --green-hover: #5bd98f; --green-ink: #6ee7a0; --green-soft: rgba(62, 207, 122, .14); --green-line: rgba(62, 207, 122, .40);
    --blue: #4fb3e8; --blue-ink: #7cc4f0; --blue-soft: rgba(79, 179, 232, .16);
    --danger: #f87171; --danger-soft: rgba(248, 113, 113, .16);
    --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .16);
    /* bright = the main type, muted = its companion, as light's dark / pale pairs */
    --c-t2: #3ecf7a; --c-t4: #2b8a57; --c-t1: #4fb3e8; --c-task: #2f7cab;
    /* workflow stages run dim to bright on a dark card */
    --st1: #24563a; --st2: #2f7a4f; --st3: #3b9e66; --st4: #4fc17e; --st5: #7be3a4; --st-done: #3b4a63;
    --on-green: #05230f; --tip-bg: #f1f5f9; --tip-text: #0f172a; --av-bg: #5b6f84; --pair-prev: #4b5b76;
}
html[data-mode="night"] .dash {
    --bg: #0b0e14; --surface: #12161e; --surface-2: #1a1f2a; --surface-3: #232a39;
    --line: #252c3b; --line-strong: #323c50;
    --ink: #f5f7fb; --ink-2: #d3d9e4; --ink-3: #a3acbd; --ink-4: #8891a5;
    --value: #ffffff;
    --green: #4ade80; --green-hover: #6ee79a; --green-ink: #86efac; --green-soft: rgba(74, 222, 128, .14); --green-line: rgba(74, 222, 128, .40);
    --blue: #38bdf8; --blue-ink: #7dd3fc; --blue-soft: rgba(56, 189, 248, .16);
    --danger: #ff6b6b; --danger-soft: rgba(255, 93, 93, .16);
    --warn: #facc15; --warn-soft: rgba(250, 204, 21, .16);
    --c-t2: #4ade80; --c-t4: #2a9a5a; --c-t1: #38bdf8; --c-task: #2a7fae;
    --st1: #1d4a32; --st2: #26703f; --st3: #2f9a55; --st4: #3fc56d; --st5: #86efac; --st-done: #323c50;
    --on-green: #032612; --tip-bg: #f5f7fb; --tip-text: #0b0e14; --av-bg: #4a5670; --pair-prev: #3a4356;
}

/* ---------- Dusk and Night: what Theme.css / Pages.css / the old stylesheets draw with fixed colours ---------- */
/* solid buttons whose fill turns pale in the dark sets */
.mode-dark .btn-green, .mode-dark .GreenButton { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.mode-dark .btn-green:hover, .mode-dark .GreenButton:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.mode-dark .RedButton { background: #f87171 !important; border-color: #f87171 !important; color: #2a0707 !important; }
.mode-dark .RedButton:hover { background: #fca5a5 !important; border-color: #fca5a5 !important; }
.mode-dark .btn-danger:hover, .mode-dark .btn-danger:focus { background: rgba(248, 113, 113, .24) !important; border-color: var(--danger-border) !important; }

/* the inline SVG icons (Theme.css --icon-*) drawn in a mid grey for dark boxes */
.mode-dark {
    --icon-select: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a7b4c6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icon-date: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7b4c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
    --icon-search: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
    --icon-crumb: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b9ab0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}

/* pager arrows are dark PNGs (PageNavigation.ascx): squeeze the picture to nothing and draw the same arrows as light line icons.
   !important on the background longhands because the hover rule in Theme.css resets the background shorthand */
.mode-dark .PageNavigation input[type=image] { padding: 28px 0 0 !important; overflow: hidden; }
.mode-dark .PageNavigation input[type=image] { background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important; }
.mode-dark .PageNavigation input[src*="pager-first"] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5'/%3E%3Cpath d='m18 17-5-5 5-5'/%3E%3C/svg%3E") !important; }
.mode-dark .PageNavigation input[src*="pager-prev"] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") !important; }
.mode-dark .PageNavigation input[src*="pager-next"] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important; }
.mode-dark .PageNavigation input[src*="pager-last"] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E") !important; }

/* legacy bitmap icons (Icons.css paints grid View / Edit / Delete, Active, the search button and Refresh as dark-grey, red
   and green line drawings for white rows): the same drawings in lighter strokes, and dark hover washes */
.mode-dark :is(img, input[type=image])[src$="view_icon.png" i] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important; }
.mode-dark :is(img, input[type=image])[src$="edit_icon.png" i] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/svg%3E") !important; }
.mode-dark :is(img, input[type=image])[src$="searchicon.png" i] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") !important; }
.mode-dark :is(img, input[type=image])[src$="refresh.png" i] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E") !important; }
.mode-dark :is(img, input[type=image])[src$="delete_icon.png" i] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") !important; }
.mode-dark :is(img, input[type=image])[src$="active_true.gif" i] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important; }
.mode-dark :is(:is(img, input[type=image])[src$="view_icon.png" i], :is(img, input[type=image])[src$="edit_icon.png" i]):hover, .mode-dark a:hover > :is(:is(img, input[type=image])[src$="view_icon.png" i], :is(img, input[type=image])[src$="edit_icon.png" i]) { background-color: var(--hover-tint) !important; }
.mode-dark :is(img, input[type=image])[src$="delete_icon.png" i]:hover { background-color: var(--danger-bg) !important; }

/* browser autofill paints its own pale box */
.mode-dark input:-webkit-autofill, .mode-dark input:-webkit-autofill:hover, .mode-dark input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px var(--control-bg) inset !important; -webkit-text-fill-color: var(--text-primary) !important; caret-color: var(--text-primary);
}

/* dimmer behind dialogs */
.mode-dark .modal-backdrop.in, .mode-dark #overlay { background: #000; opacity: .6; }

/* Bootstrap 3 and jQuery UI (smoothness) defaults */
.mode-dark .dropdown-menu { background: var(--pop-bg); border-color: var(--card-border); box-shadow: var(--pop-shadow); }
.mode-dark .dropdown-menu > li > a { color: var(--text-secondary); }
.mode-dark .dropdown-menu > li > a:hover, .mode-dark .dropdown-menu > li > a:focus { background: var(--nav-hover-bg); color: var(--text-primary); }
.mode-dark .dropdown-menu .divider { background: var(--row-divider); }
.mode-dark .ui-widget-content { background: var(--card-bg); color: var(--text-secondary); border-color: var(--card-border); }
.mode-dark .ui-widget-header { background: var(--surface); color: var(--text-primary); border-color: var(--card-border); }
.mode-dark .ui-state-default, .mode-dark .ui-widget-content .ui-state-default { background: var(--surface); color: var(--text-secondary); border-color: var(--card-border); }
.mode-dark .ui-state-hover, .mode-dark .ui-widget-content .ui-state-hover, .mode-dark .ui-menu .ui-menu-item-wrapper.ui-state-active { background: var(--nav-hover-bg); color: var(--text-primary); border-color: var(--card-border); }
.mode-dark .ui-datepicker .ui-datepicker-prev span, .mode-dark .ui-datepicker .ui-datepicker-next span { filter: invert(1) brightness(1.4); }
.mode-dark .ui-autocomplete, .mode-dark .ui-menu { background: var(--pop-bg); border-color: var(--card-border); color: var(--text-secondary); }

/* the old checkbox drop-down (Year end / Status filters) */
.mode-dark .cs_cbl_DD { background: var(--pop-bg); border-color: var(--card-border) !important; color: var(--text-secondary); }

/* avatar tones beside staff initials (Pages.css .pg-av) */
.mode-dark .pg-av[data-tone="1"] { background: rgba(96, 165, 250, .20); color: #93c5fd; }
.mode-dark .pg-av[data-tone="2"] { background: rgba(167, 139, 250, .20); color: #c4b5fd; }
.mode-dark .pg-av[data-tone="3"] { background: rgba(244, 114, 182, .20); color: #f9a8d4; }
.mode-dark .pg-av[data-tone="4"] { background: rgba(251, 146, 60, .20); color: #fdba74; }

/* segmented choice on record pages (Pages.css .rec-seg, e.g. "Task for"): the picked option must sit lighter than its track, as the white one does in light */
html.mode-dark .rec-seg input:checked + label { box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
html[data-mode="dusk"] .rec-seg input:checked + label { background: #334155; }
html[data-mode="night"] .rec-seg input:checked + label { background: #2a3242; }

/* task board (Assign tasks): grey lanes, white cards, pastel tags */
.mode-dark .tb-col { background: #152033; }
html[data-mode="night"] .tb-col { background: #10141b; }
.mode-dark .tb-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.mode-dark .tb-card:hover, .mode-dark .tb-drag { border-color: #4b5b76; }
html[data-mode="night"] .tb-card:hover, html[data-mode="night"] .tb-drag { border-color: #4a5670; }
.mode-dark .tb-av.none { border-color: var(--text-subtle); color: var(--text-subtle); background: transparent; }
.mode-dark .tb-due.over { color: var(--danger-text); }
.mode-dark .tb-due.soon { color: var(--accent-focus); }
.mode-dark .tb-slot { border-color: #4b5b76; background: rgba(255, 255, 255, .03); }
.mode-dark .tb-sorting .tb-col { border-color: rgba(255, 255, 255, .06); }
.mode-dark .tb-list:not(:has(.tb-card, .tb-composer))::before { border-color: rgba(255, 255, 255, .14); }
.mode-dark .tb-tag.c0 { background: rgba(244, 114, 182, .18); color: #f9a8d4; }
.mode-dark .tb-tag.c1 { background: rgba(167, 139, 250, .20); color: #c4b5fd; }
.mode-dark .tb-tag.c2 { background: rgba(96, 165, 250, .20);  color: #93c5fd; }
.mode-dark .tb-tag.c3 { background: rgba(248, 113, 113, .18); color: #fca5a5; }
.mode-dark .tb-tag.c4 { background: rgba(251, 146, 60, .18);  color: #fdba74; }
.mode-dark .tb-tag.c5 { background: rgba(250, 204, 21, .16);  color: #fde047; }
.mode-dark .tb-tag.c6 { background: rgba(74, 222, 128, .16);  color: #86efac; }
.mode-dark .tb-tag.c7 { background: rgba(45, 212, 191, .16);  color: #5eead4; }
.mode-dark .tb-tag.c8 { background: rgba(129, 140, 248, .20); color: #c7d2fe; }
.mode-dark .tb-tag.c9 { background: rgba(255, 255, 255, .08); color: #cbd5e1; }

/* due-date calendar (FullCalendar 3 sets its own pale fills) */
.mode-dark #calendar .fc-day.fc-today { background: rgba(62, 207, 122, .08); }
.mode-dark .fc-unthemed .fc-popover { background: var(--pop-bg); }
.mode-dark .fc-unthemed .fc-divider, .mode-dark .fc-unthemed .fc-popover > .fc-header, .mode-dark .fc-unthemed .fc-list-empty { background: var(--surface); }
.mode-dark .fc-unthemed .fc-list-item:hover td { background: var(--row-hover); }

}