/* ===========================================================================
   Dark theme.

   The prototype stylesheets hard-code their colours, so rather than rewriting
   them this sheet restates the surfaces, borders and text under
   :root[data-theme="dark"]. The effective theme is resolved before paint by a
   small script in the layout head, so this only ever needs the dark case.
   =========================================================================== */

:root[data-theme="dark"] {
    --ink: #e7eeea;
    --muted: #8fa09a;
    --green: #2ec27e;
    --line: #2b3733;
    --bg: #101614;

    /* Surfaces, from the page backdrop up to raised cards. */
    --surface: #18211e;
    --surface-2: #1f2a26;
    --surface-3: #263330;

    /* Status palette, lifted for contrast on a dark ground. */
    --danger-ink: #ff8a80;
    --danger-bg: #3a201e;
    --danger-line: #57302c;

    --warn-ink: #f0b357;
    --warn-bg: #362a17;
    --warn-line: #4d3c21;

    --success-ink: #55d197;
    --success-bg: #14301f;
    --success-line: #1f4a31;

    --info-ink: #7fb2f0;
    --info-bg: #17273a;
    --info-line: #24384f;

    --quiet-ink: #9aaaa4;
    --quiet-bg: #232e2a;
    --quiet-line: #2f3c38;

    color-scheme: dark;
}

/* --- Ground and panels ----------------------------------------------------- */

:root[data-theme="dark"] body {
    background: var(--bg);
    color: var(--ink);
}

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .kpis article,
:root[data-theme="dark"] .createModal,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .record,
:root[data-theme="dark"] .boardCard,
:root[data-theme="dark"] .authCard,
:root[data-theme="dark"] .sectionStats div,
:root[data-theme="dark"] .sectionStats a,
:root[data-theme="dark"] .notification,
:root[data-theme="dark"] .attentionRow,
:root[data-theme="dark"] .projectRow,
:root[data-theme="dark"] .calendarDay,
:root[data-theme="dark"] .undatedChip,
:root[data-theme="dark"] .assetCard,
:root[data-theme="dark"] .templateCard,
:root[data-theme="dark"] .goalCard,
:root[data-theme="dark"] .productCard,
:root[data-theme="dark"] .searchRow,
:root[data-theme="dark"] .settingList,
:root[data-theme="dark"] .settingsTabs a,
:root[data-theme="dark"] .roleList > a,
:root[data-theme="dark"] .intakeMenu a,
:root[data-theme="dark"] .viewSwitch a,
:root[data-theme="dark"] .viewSwitch button,
:root[data-theme="dark"] .filter,
:root[data-theme="dark"] .calendarNav a,
:root[data-theme="dark"] .boardGroupBy a,
:root[data-theme="dark"] .editButton,
:root[data-theme="dark"] .headerActions button,
:root[data-theme="dark"] .projectRow button,
:root[data-theme="dark"] .taskPicker,
:root[data-theme="dark"] .pickerSearch,
:root[data-theme="dark"] .importForm input[type="file"] {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

:root[data-theme="dark"] .boardColumn,
:root[data-theme="dark"] .tabs,
:root[data-theme="dark"] .workspace,
:root[data-theme="dark"] .calendarDayName,
:root[data-theme="dark"] .teamOptions,
:root[data-theme="dark"] .settingsHead,
:root[data-theme="dark"] .calendarDay.outside,
:root[data-theme="dark"] .reviewPanel.invite {
    background: var(--surface-2);
    border-color: var(--line);
}

:root[data-theme="dark"] .recordHead,
:root[data-theme="dark"] .tableHead,
:root[data-theme="dark"] .peopleHead,
:root[data-theme="dark"] .permissionHead,
:root[data-theme="dark"] .serviceHead,
:root[data-theme="dark"] .budgetHead {
    background: var(--surface-2);
    color: var(--muted);
    border-color: var(--line);
}

/* --- Text ------------------------------------------------------------------ */

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .record p b,
/* Not the status and priority chips on a card: they carry their own ink. */
:root[data-theme="dark"] .boardCard b:not(.pill):not(.priority),
:root[data-theme="dark"] .healthName b,
:root[data-theme="dark"] .attentionRow b,
:root[data-theme="dark"] .projectRow b,
:root[data-theme="dark"] .teamRow,
:root[data-theme="dark"] .peopleAccessRow,
:root[data-theme="dark"] .serviceRow,
:root[data-theme="dark"] .detailLine,
:root[data-theme="dark"] .searchRow b,
:root[data-theme="dark"] .settingList input,
:root[data-theme="dark"] .taskPicker b,
:root[data-theme="dark"] .teamGroup p,
:root[data-theme="dark"] .owner,
:root[data-theme="dark"] .kpis h2,
:root[data-theme="dark"] .kpiCard h2 {
    color: var(--ink);
}

:root[data-theme="dark"] .record p small,
:root[data-theme="dark"] .boardCard small,
:root[data-theme="dark"] .healthName small,
:root[data-theme="dark"] .attentionRow p,
:root[data-theme="dark"] .projectRow small,
:root[data-theme="dark"] .panelHead p,
:root[data-theme="dark"] header p,
:root[data-theme="dark"] .crumb,
:root[data-theme="dark"] .fieldHelp,
:root[data-theme="dark"] .searchRow span,
:root[data-theme="dark"] .authNote,
:root[data-theme="dark"] .cellClient,
:root[data-theme="dark"] .cellDue,
:root[data-theme="dark"] .activityWho,
:root[data-theme="dark"] .taskPicker small,
:root[data-theme="dark"] .kpis article > span,
:root[data-theme="dark"] .kpiCard > article > span,
:root[data-theme="dark"] .teamGroup > small,
:root[data-theme="dark"] .empty,
:root[data-theme="dark"] .projectEmpty,
:root[data-theme="dark"] .searchCount {
    color: var(--muted);
}

/* --- Sidebar navigation ---------------------------------------------------- */

:root[data-theme="dark"] .sidebar nav a,
:root[data-theme="dark"] .admin a,
:root[data-theme="dark"] .profile b,
:root[data-theme="dark"] .workspace b {
    color: #c3d0ca;
}

:root[data-theme="dark"] .sidebar nav a.active,
:root[data-theme="dark"] .admin a.active {
    background: #1c3a2c;
    color: #6fd7a3;
}

:root[data-theme="dark"] .sidebar nav a:hover,
:root[data-theme="dark"] .admin a:hover {
    background: var(--surface-2);
}

:root[data-theme="dark"] .profile,
:root[data-theme="dark"] .sidebar {
    border-color: var(--line);
}

/* A purpose-built light wordmark, rather than filtering the dark one: an
   invert leaves the grey lettering mid-grey and turns the green squares
   purple. */
.brandMark.dark {
    display: none;
}

:root[data-theme="dark"] .brandMark.light {
    display: none;
}

:root[data-theme="dark"] .brandMark.dark {
    display: block;
}

/* --- Interactive states ---------------------------------------------------- */

:root[data-theme="dark"] .record:hover,
:root[data-theme="dark"] .searchRow:hover,
:root[data-theme="dark"] a.healthRow:hover,
:root[data-theme="dark"] .projectRow:hover,
:root[data-theme="dark"] .attentionRow:hover,
:root[data-theme="dark"] .taskPicker label:hover,
:root[data-theme="dark"] .undatedChip:hover,
:root[data-theme="dark"] .boardCard:hover {
    background: var(--surface-3);
}

:root[data-theme="dark"] .tabs a.selected,
:root[data-theme="dark"] .tabs button.selected {
    background: var(--surface);
    color: #6fd7a3;
    box-shadow: none;
}

:root[data-theme="dark"] .tabs a,
:root[data-theme="dark"] .tabs button,
:root[data-theme="dark"] .sortLink,
:root[data-theme="dark"] .deliveryTabs a,
:root[data-theme="dark"] .accessTabs a,
:root[data-theme="dark"] .boardGroupBy a,
:root[data-theme="dark"] .calendarNav a,
:root[data-theme="dark"] .viewSwitch a,
:root[data-theme="dark"] .filter {
    color: #a9b8b2;
}

:root[data-theme="dark"] .sortLink:hover,
:root[data-theme="dark"] .sortLink.sorted,
:root[data-theme="dark"] .viewSwitch a.selected,
:root[data-theme="dark"] .boardGroupBy a.selected,
:root[data-theme="dark"] .settingsTabs a.selected,
:root[data-theme="dark"] .roleList > a.selected,
:root[data-theme="dark"] .intakeMenu a.selected {
    background: #1c3a2c;
    color: #6fd7a3;
    border-color: #2f5c45;
}

:root[data-theme="dark"] .deliveryTabs a.selected,
:root[data-theme="dark"] .accessTabs a.selected {
    color: #6fd7a3;
    border-bottom-color: #6fd7a3;
}

/* --- Forms ----------------------------------------------------------------- */

/* The colour, not the `background` shorthand: selects draw their arrow, and
   an owner's colour dot, as background images, and the shorthand wiped both. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: #6d7c76;
}

:root[data-theme="dark"] .search input,
:root[data-theme="dark"] .settingList input,
:root[data-theme="dark"] .phoneField {
    background: transparent;
}

:root[data-theme="dark"] .shortcutHint {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--muted);
}

/* --- Notices and accents --------------------------------------------------- */

:root[data-theme="dark"] .notice {
    background: #14301f;
    border-color: #1f4a31;
    color: #a9e2c4;
}

:root[data-theme="dark"] .accessHero {
    background: linear-gradient(135deg, #14301f, #10261a);
}

:root[data-theme="dark"] .progress,
:root[data-theme="dark"] .load i,
:root[data-theme="dark"] .miniProgress i,
:root[data-theme="dark"] .bigProgress i,
:root[data-theme="dark"] .productBar > i,
:root[data-theme="dark"] .projectProgress i,
:root[data-theme="dark"] .timelineTrack {
    background: var(--surface-3);
}

:root[data-theme="dark"] .ref,
:root[data-theme="dark"] .lock {
    background: var(--surface-3);
    color: #a9b8b2;
}

:root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .person,
:root[data-theme="dark"] .owner i,
:root[data-theme="dark"] .activityRow > span,
:root[data-theme="dark"] .peopleAccessRow > div i,
:root[data-theme="dark"] .teamGroup p i {
    background: #1c3a2c;
    color: #6fd7a3;
}

:root[data-theme="dark"] .recordIcon,
:root[data-theme="dark"] .projectIcon,
:root[data-theme="dark"] .flag {
    background: var(--surface-3);
}

:root[data-theme="dark"] .close {
    background: var(--surface-3);
    color: var(--ink);
}

:root[data-theme="dark"] .overlay {
    background: rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .modalLayer {
    background: rgba(0, 0, 0, .6) !important;
}

:root[data-theme="dark"] .toast {
    background: var(--surface-3);
    color: var(--ink);
}

:root[data-theme="dark"] .formErrors {
    background: var(--danger-bg);
    border-color: var(--danger-line);
    color: var(--danger-ink);
}

:root[data-theme="dark"] .importErrors {
    background: var(--danger-bg);
    border-color: var(--danger-line);
}

:root[data-theme="dark"] .importErrors li {
    color: #f0b0a8;
}

:root[data-theme="dark"] .importSteps li {
    border-left-color: var(--line);
}

:root[data-theme="dark"] .importSteps li::before {
    background: #1c3a2c;
    color: #6fd7a3;
}

/* --- Borders that separate rows -------------------------------------------- */

:root[data-theme="dark"] .record,
:root[data-theme="dark"] .teamRow,
:root[data-theme="dark"] .peopleAccessRow,
:root[data-theme="dark"] .permissionRow,
:root[data-theme="dark"] .serviceRow,
:root[data-theme="dark"] .budgetRow,
:root[data-theme="dark"] .healthRow,
:root[data-theme="dark"] .attentionRow,
:root[data-theme="dark"] .projectRow,
:root[data-theme="dark"] .automationRow,
:root[data-theme="dark"] .detailLine,
:root[data-theme="dark"] .projectTask,
:root[data-theme="dark"] .searchRow,
:root[data-theme="dark"] .settingList > div,
:root[data-theme="dark"] .calendarDay,
:root[data-theme="dark"] .panelHead,
:root[data-theme="dark"] .drawerMeta,
:root[data-theme="dark"] .description,
:root[data-theme="dark"] .timeline,
:root[data-theme="dark"] .teamSection,
:root[data-theme="dark"] .projectWork,
:root[data-theme="dark"] .recordPageHead {
    border-color: var(--line);
}

/* --- The theme control itself ---------------------------------------------- */

.themeButton {
    display: grid;
    place-items: center;
    color: #74817a;
    cursor: pointer;
}

.themeButton:hover {
    color: #128755;
    border-color: #bfe3cf;
}

:root[data-theme="dark"] .themeButton {
    color: #a9b8b2;
}

:root[data-theme="dark"] .themeButton:hover {
    color: #6fd7a3;
    border-color: #2f5c45;
}

/* Show the mark for the theme you are in; the tooltip says what a click does. */
.themeIcon {
    grid-area: 1 / 1;
}

.themeIcon.sun {
    display: none;
}

:root[data-theme="dark"] .themeIcon.sun {
    display: block;
}

:root[data-theme="dark"] .themeIcon.moon {
    display: none;
}

/* ===========================================================================
   What the first pass missed (Sanket, 2026-09-14: "a few pages are bleeding
   white"). Found by walking every page, tab, modal and panel in dark mode and
   listing each element whose painted ground was still light. Most are
   prototype tints written as literal colours, plus sections added since that
   drew on an undefined `--panel` and fell back to white.
   =========================================================================== */

:root[data-theme="dark"] {
    /* theme.css paints cards with var(--panel, #fff) — every section of a
       record's page, the subtask fold, the ring around overlapping initials —
       and nothing defined it, so dark mode took the white fallback. */
    --panel: var(--surface);

    /* "Planned" violet, lifted the way the other status tints are. */
    --planned-ink: #b9a5f0;
    --planned-bg: #251e3b;
    --planned-line: #3a2f55;
}

/* --- Status and priority chips ------------------------------------------ */

/* The colour only, not the `background` shorthand: a status select draws its
   arrow as a background image, and the shorthand would wipe it. */
:root[data-theme="dark"] .pill.st-planned,
:root[data-theme="dark"] .calendarItem.st-planned,
:root[data-theme="dark"] .sensitivityPill {
    background-color: var(--planned-bg);
    border-color: var(--planned-line);
    color: var(--planned-ink);
}

/* Flags are solid in both themes (theme.css), so only these two. */
:root[data-theme="dark"] .recordIcon.st-planned,
:root[data-theme="dark"] .projectIcon.st-planned {
    color: var(--planned-ink);
}

:root[data-theme="dark"] .priority.medium { --chip-ink: #a9bac6; --chip-bg: #1f2a30; }
:root[data-theme="dark"] .priority.low { --chip-ink: #8fa09a; --chip-bg: #1c2522; }
:root[data-theme="dark"] .priority.none { color: #6d7c76; }

/* --- Figure tiles --------------------------------------------------------- */

:root[data-theme="dark"] .metricIcon.green { background: var(--success-bg); color: var(--success-ink); }
:root[data-theme="dark"] .metricIcon.red { background: var(--danger-bg); color: var(--danger-ink); }
:root[data-theme="dark"] .metricIcon.amber { background: var(--warn-bg); color: var(--warn-ink); }
:root[data-theme="dark"] .metricIcon.blue { background: var(--info-bg); color: var(--info-ink); }

:root[data-theme="dark"] .kpiCard small.green { color: var(--success-ink); }

:root[data-theme="dark"] .unit { background: var(--surface-3); }
:root[data-theme="dark"] .unit.red { background: var(--danger-bg); }
:root[data-theme="dark"] .unit.amber { background: var(--warn-bg); }

/* --- People's initials ---------------------------------------------------- */

/* Each person keeps their tone: a deep ground and a light ink, instead of the
   light-theme wash dimmed by a filter, which stayed a pale block. */
:root[data-theme="dark"] .pt-0 { --person-bg: #173029; --person-ink: #7fd8c3; }
:root[data-theme="dark"] .pt-1 { --person-bg: #251e3b; --person-ink: #b9a5f0; }
:root[data-theme="dark"] .pt-2 { --person-bg: #33270f; --person-ink: #f0c06a; }
:root[data-theme="dark"] .pt-3 { --person-bg: #172739; --person-ink: #8db8f2; }
:root[data-theme="dark"] .pt-4 { --person-bg: #3a1d27; --person-ink: #f29bb3; }
:root[data-theme="dark"] .pt-5 { --person-bg: #262d14; --person-ink: #bcd27a; }
:root[data-theme="dark"] .pt-6 { --person-bg: #142c36; --person-ink: #7cc8e6; }
:root[data-theme="dark"] .pt-7 { --person-bg: #3a2418; --person-ink: #f5a57a; }

/* Outranks the plain green initials above, which every `.owner i` takes. */
:root[data-theme="dark"] .owner i[class*="pt-"],
:root[data-theme="dark"] .alsoOn i[class*="pt-"],
:root[data-theme="dark"] .peekPerson i[class*="pt-"],
:root[data-theme="dark"] .teamSection .teamGroup i[class*="pt-"] {
    background: var(--person-bg);
    color: var(--person-ink);
}

:root[data-theme="dark"] .alsoOn i,
:root[data-theme="dark"] .peekPerson i,
:root[data-theme="dark"] .factGlyph.person {
    background: var(--person-bg, #1c3a2c);
    color: var(--person-ink, #6fd7a3);
}

:root[data-theme="dark"] .owner i.more {
    background: var(--surface-3);
    color: #a9b8b2;
}

:root[data-theme="dark"] .owner i + i {
    border-color: var(--surface);
}

/* --- Counts inside tabs --------------------------------------------------- */

:root[data-theme="dark"] .tabs b,
:root[data-theme="dark"] .tabs a b,
:root[data-theme="dark"] .deliveryTabs a b,
:root[data-theme="dark"] .deliveryTabs button b,
:root[data-theme="dark"] .accessTabs a b,
:root[data-theme="dark"] .settingsTabs a b,
:root[data-theme="dark"] .boardColumn > header span {
    background: var(--surface-3);
    color: #a9b8b2;
}

:root[data-theme="dark"] .settingsTabs a.selected b {
    background: #2f5c45;
    color: #cdeedd;
}

:root[data-theme="dark"] .listSwitch a.selected b {
    background: #0f1613;
    color: var(--tone);
}

/* The Service Desk and Assets tab strips are a white bar of their own. */
:root[data-theme="dark"] .deliveryTabs.wide {
    background: var(--surface);
    border-color: var(--line);
}

/* --- Header, sidebar, timeline ------------------------------------------- */

:root[data-theme="dark"] .iconBtn i,
:root[data-theme="dark"] .timelineBar.point {
    border-color: var(--surface);
}

:root[data-theme="dark"] .sidebar nav a i:not(.areaDot) {
    background: var(--danger-bg);
    color: var(--danger-ink);
}

/* --- Service Desk --------------------------------------------------------- */

:root[data-theme="dark"] .hodBanner > span {
    background: var(--warn-bg);
    color: var(--warn-ink);
}

:root[data-theme="dark"] .process span {
    background: var(--surface-2);
    color: var(--ink);
}

/* --- Modals ------------------------------------------------------------- */

/* Cancel, beside a submit that keeps its own colour (last, or destructive). */
:root[data-theme="dark"] .modalActions button:not(:last-child):not(.destructive) {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}

:root[data-theme="dark"] .assignmentNote {
    background: var(--success-bg);
}

:root[data-theme="dark"] .saved span {
    background: #1c3a2c;
    color: #6fd7a3;
}

/* --- Record pages --------------------------------------------------------- */

:root[data-theme="dark"] .teamGroup p em {
    background: #1c3a2c;
    color: #6fd7a3;
}

:root[data-theme="dark"] .reviewPanel {
    background: var(--warn-bg);
}

:root[data-theme="dark"] .editButton:hover {
    background: var(--surface-2);
    border-color: #2f5c45;
}

:root[data-theme="dark"] .notification:hover,
:root[data-theme="dark"] .peekClose:hover,
:root[data-theme="dark"] .peekClose:focus-visible {
    background: var(--surface-3);
}

/* Hover edges were a pale green line. */
:root[data-theme="dark"] .kpiCard:hover article,
:root[data-theme="dark"] .calendarNav a:hover,
:root[data-theme="dark"] .boardGroupBy a:hover,
:root[data-theme="dark"] .shortcutHint:hover,
:root[data-theme="dark"] .cellEdit select:hover,
:root[data-theme="dark"] .dueButton:hover {
    border-color: #2f5c45;
}

:root[data-theme="dark"] .cellDue.overdue .dueButton {
    border-color: var(--danger-line);
}

/* --- Automations ---------------------------------------------------------- */

:root[data-theme="dark"] .automationTop {
    background: var(--success-bg);
    border-color: var(--success-line);
}

:root[data-theme="dark"] .toggle:not(.on) {
    background: #3a4843;
}

/* --- System Settings, Data Import, profile -------------------------------- */

:root[data-theme="dark"] .settingsHead > span,
:root[data-theme="dark"] .settingList em {
    background: #1c3a2c;
    color: #6fd7a3;
}

:root[data-theme="dark"] .settingList em.muted {
    background: var(--surface-3);
    color: var(--muted);
}

:root[data-theme="dark"] .addSetting,
:root[data-theme="dark"] .settingList > div.isHidden {
    background: var(--surface-2);
}

:root[data-theme="dark"] .settingsNote {
    background: var(--success-bg);
    border-color: var(--success-line);
    color: #a9e2c4;
}

/* --- People & Roles ------------------------------------------------------- */

:root[data-theme="dark"] .accessHero button {
    background: #6fd7a3;
    color: #0c1f16;
}

/* The empty box only: ticked, given, taken and capped keep their colours. */
:root[data-theme="dark"] .permissionCheck:not(.checked):not(.taken):not(.capped) {
    background: var(--surface-2);
    border-color: #3a4843;
}

:root[data-theme="dark"] .permissionCheck.checked.given {
    color: #0f1613;
}

/* --- Product Portfolio, Assets, Templates -------------------------------- */

:root[data-theme="dark"] .journey > span > b {
    color: var(--ink);
}

:root[data-theme="dark"] .productCard > div > i,
:root[data-theme="dark"] .productTitle > i,
:root[data-theme="dark"] .templateCard > i {
    background: #1c3a2c;
    color: #6fd7a3;
}

:root[data-theme="dark"] .detailStats span {
    background: var(--surface-2);
}

:root[data-theme="dark"] .milestone > i {
    border-color: var(--line);
}

:root[data-theme="dark"] .milestone > i.done {
    background: var(--success-bg);
    border-color: var(--success-line);
    color: var(--success-ink);
}

:root[data-theme="dark"] .deliveryRow > i {
    background: var(--surface-3);
}

:root[data-theme="dark"] .assetCard > small {
    background: var(--success-bg);
    color: var(--success-ink);
}

:root[data-theme="dark"] .productCard footer,
:root[data-theme="dark"] .assetCard footer,
:root[data-theme="dark"] .templateCard footer {
    border-top-color: var(--line);
}

/* --- Sign in -------------------------------------------------------------- */

:root[data-theme="dark"] .authShell {
    background:
        radial-gradient(circle at 15% 20%, #14301f 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, #122a20 0%, transparent 40%),
        var(--bg);
}

:root[data-theme="dark"] .authCard button.secondary {
    background: var(--surface-2);
    border-color: #2f5c45;
    color: #6fd7a3;
}

:root[data-theme="dark"] .authCard button.secondary:hover {
    background: var(--surface-3);
}

/* Error pages and the sign-in extras link back in the dark theme's green. */
:root[data-theme="dark"] .backLink {
    color: #6fd7a3;
}