/* Application-wide dark mode. Loaded last so legacy page-specific colours inherit the theme. */
html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #eef4f0;
    --muted: #a7b5ae;
    --line: #35463e;
    --surface: #17231e;
    --soft: #1d2b25;
    --canvas: #0f1613;
    --green: #365f55;
    --green-2: #8eb9ad;
    --green-soft: #223b33;
    --peach: #dfa184;
    --peach-soft: #3b2c26;
    --purple: #b9addd;
    --purple-soft: #302c3b;
    --amber: #e2a45e;
    --amber-soft: #3c2d1d;
    --red: #e68181;
    --red-soft: #3b2323;
    --nav: #0b110e;
    --shadow: 0 14px 36px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] body {
    background: #0f1613 !important;
    color: #eef4f0 !important;
}

html[data-theme="dark"] .topbar {
    background: rgba(11, 17, 14, .98) !important;
    border-bottom-color: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .brand strong,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong {
    color: #eef4f0;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .brand small,
html[data-theme="dark"] .panel-head > span,
html[data-theme="dark"] .notice-head span {
    color: #a7b5ae !important;
}

html[data-theme="dark"] .button.ghost,
html[data-theme="dark"] .theme-toggle {
    border-color: #40534a !important;
    background: #17231e !important;
    color: #eef4f0 !important;
}

html[data-theme="dark"] .button.ghost:hover,
html[data-theme="dark"] .theme-toggle:hover {
    border-color: #668177 !important;
    background: #203029 !important;
}

html[data-theme="dark"] .button.primary {
    background: #365f55 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .button.primary:hover {
    background: #2d5148 !important;
}

html[data-theme="dark"] .notice-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .roster-card,
html[data-theme="dark"] .status-strip,
html[data-theme="dark"] .person-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .flash,
html[data-theme="dark"] .cap-card {
    background: #17231e !important;
    border-color: #35463e !important;
    color: #eef4f0 !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme="dark"] .notice-panel.clean,
html[data-theme="dark"] .status.approved,
html[data-theme="dark"] .chip.on,
html[data-theme="dark"] .flash.success {
    background: #223b33 !important;
    border-color: #36594d !important;
    color: #a9d5c6 !important;
}

html[data-theme="dark"] .status.pending {
    background: #3c2d1d !important;
    color: #efb66f !important;
}

html[data-theme="dark"] .flash.error,
html[data-theme="dark"] .assignment-cell.conflict {
    background: #3b2323 !important;
    border-color: #6d3b3b !important;
    color: #f0a2a2 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    border-color: #40534a !important;
    background: #18251f !important;
    color: #eef4f0 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #7f9188 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #6f9b8d !important;
    outline-color: rgba(111, 155, 141, .35) !important;
}

html[data-theme="dark"] option {
    background: #18251f;
    color: #eef4f0;
}

html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .status-strip > div,
html[data-theme="dark"] .summary-card-head {
    border-color: #35463e !important;
}

html[data-theme="dark"] .summary-items > div,
html[data-theme="dark"] .chip {
    background: #1d2b25 !important;
    color: #b7c3bd !important;
}

html[data-theme="dark"] .avatar {
    background: #3b2c26 !important;
    color: #efb79e !important;
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .inline-form label,
html[data-theme="dark"] .stack-form label,
html[data-theme="dark"] .cg-v2-dialog-form label {
    color: #b7c3bd !important;
}

/* Main roster board. Keep the green identity; replace cream/brown surfaces with forest/gold. */
html[data-theme="dark"] .sheet-roster-card {
    background: #16231e !important;
    border-color: #42685f !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .sheet-roster-table {
    color: #dbc982 !important;
}

html[data-theme="dark"] .sheet-roster-table .day-dark {
    background: #365f55 !important;
}

html[data-theme="dark"] .sheet-roster-table .day-light {
    background: #4b7b71 !important;
}

html[data-theme="dark"] .sheet-roster-table .sheet-side-head {
    background: #628f85 !important;
    border-color: #42685f !important;
}

html[data-theme="dark"] .sheet-roster-table td.merged-level {
    background: #284c43 !important;
    border-color: #42685f !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .sheet-roster-table td.merged-section,
html[data-theme="dark"] .sheet-roster-table td.role-cell,
html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .role-cell {
    background: #17231e !important;
    color: #dbc982 !important;
    border-color: #4a5542 !important;
    box-shadow: 7px 0 12px -14px rgba(0, 0, 0, .8) !important;
}

html[data-theme="dark"] .sheet-roster-table .day-cream,
html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .assignment-cell {
    background: #1b2822 !important;
}

html[data-theme="dark"] .sheet-roster-table .day-peach {
    background: #24312b !important;
}

html[data-theme="dark"] .sheet-roster-table th,
html[data-theme="dark"] .sheet-roster-table td {
    border-color: #3a463d !important;
}

html[data-theme="dark"] .sheet-roster-table .assignment-select,
html[data-theme="dark"] .sheet-roster-table .assignment-readonly,
html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .role-chip,
html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .role-label,
html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .assignment-cell .assignment-chip:not(.assignment-chip-empty),
html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .assignment-cell .assignment-tile:not(.assignment-chip-empty),
html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .assignment-cell .assignment-readonly {
    color: #dbc982 !important;
}

html[data-theme="dark"] .sheet-roster-table .assignment-select:hover,
html[data-theme="dark"] .sheet-roster-table .assignment-select:focus,
html[data-theme="dark"] .sheet-roster-card.editing-roster .sheet-roster-table.grouped-board-layout .assignment-cell:hover .assignment-chip-empty {
    border-color: #69877c !important;
    background: rgba(255, 255, 255, .06) !important;
    box-shadow: 0 0 0 2px rgba(111, 155, 141, .12) !important;
}

html[data-theme="dark"] .sheet-roster-table .assignment-select.saved {
    background: #223b33 !important;
}

html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .roster-cohort-row td {
    background: #101713 !important;
}

html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .roster-cohort-badge,
html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .cohort-heading {
    color: #91c4b5 !important;
}

html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .roster-cohort-row[data-level="VT"] .roster-cohort-badge {
    color: #c1b4e3 !important;
}

html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .sub-group-row td {
    background: #141e19 !important;
}

html[data-theme="dark"] .sheet-roster-table.grouped-board-layout .sub-group-heading {
    color: #91bdae !important;
}

html[data-theme="dark"] .roster-health-trigger,
html[data-theme="dark"] .roster-health-panel {
    background: #17231e !important;
    border-color: #40534a !important;
}

html[data-theme="dark"] .roster-health-head {
    background: #1d2b25 !important;
    border-color: #35463e !important;
}

html[data-theme="dark"] .roster-health-trigger strong,
html[data-theme="dark"] .roster-health-head strong {
    color: #eef4f0 !important;
}

html[data-theme="dark"] .roster-health-trigger small,
html[data-theme="dark"] .roster-health-head span,
html[data-theme="dark"] .health-item {
    color: #a7b5ae !important;
}

html[data-theme="dark"] .health-item:hover {
    background: #1d2b25 !important;
}

html[data-theme="dark"] .roster-health-clean {
    background: #223b33 !important;
    border-color: #36594d !important;
    color: #a9d5c6 !important;
}

/* Multi-CG roster. */
html[data-theme="dark"] .cg-v2-month-nav h1 {
    color: #eef4f0 !important;
}

html[data-theme="dark"] .cg-v2-group-heading h2 {
    color: #9acabc !important;
}

html[data-theme="dark"] .cg-v2-group-heading p {
    color: #94a69e !important;
}

html[data-theme="dark"] .cg-v2-table {
    background: #17231e !important;
}

html[data-theme="dark"] .cg-v2-role-head {
    background: #628f85 !important;
}

html[data-theme="dark"] .cg-v2-date-head:nth-child(even) {
    background: #365f55 !important;
}

html[data-theme="dark"] .cg-v2-date-head:nth-child(odd) {
    background: #4b7b71 !important;
}

html[data-theme="dark"] .cg-v2-role-cell {
    background: #17231e !important;
    color: #dbc982 !important;
    border-color: #3a463d !important;
}

html[data-theme="dark"] .cg-v2-assignment-cell {
    background: #1b2822 !important;
    color: #dbc982 !important;
    border-color: #3a463d !important;
}

html[data-theme="dark"] .cg-v2-assignment-button {
    color: #dbc982 !important;
}

html[data-theme="dark"] .cg-v2-assignment-button:hover {
    background: rgba(255, 255, 255, .055) !important;
}

html[data-theme="dark"] .cg-v2-assignment-button.is-empty {
    color: #718179 !important;
}

html[data-theme="dark"] .cg-v2-dialog {
    background: #17231e !important;
    color: #eef4f0 !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .52) !important;
}

html[data-theme="dark"] .cg-v2-dialog::backdrop {
    background: rgba(0, 0, 0, .58) !important;
}

html[data-theme="dark"] .cg-v2-dialog-close {
    background: #24332c !important;
    color: #b7c3bd !important;
}

html[data-theme="dark"] .cg-v2-manage-button {
    border-color: #40534a !important;
    background: #17231e !important;
    color: #b7c3bd !important;
}

html[data-theme="dark"] .cg-v2-manage-button:hover {
    border-color: #668177 !important;
    background: #203029 !important;
    color: #eef4f0 !important;
}

html[data-theme="dark"] .cg-v2-manage-button.danger {
    border-color: #704441 !important;
    color: #ef9d95 !important;
}

html[data-theme="dark"] .cg-v2-manage-button.danger:hover {
    border-color: #96564f !important;
    background: #321f1e !important;
    color: #ffb5ae !important;
}

html[data-theme="dark"] .cg-v2-warning {
    border-color: #66512c !important;
    background: #302716 !important;
    color: #e7c784 !important;
}

html[data-theme="dark"] .cg-v2-confirm-check {
    color: #e7c784 !important;
}

html[data-theme="dark"] .cg-v2-delete-copy {
    border-color: #704441 !important;
    background: #321f1e !important;
    color: #efaaa3 !important;
}

/* Theme switch itself. */
.theme-toggle {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #e8eeeb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.theme-toggle:hover {
    background: rgba(223, 161, 132, .13);
    border-color: rgba(223, 161, 132, .35);
}

.theme-toggle-icon {
    width: 15px;
    text-align: center;
    font-size: 15px;
    line-height: 1;
}

.theme-toggle-floating {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1000;
    background: rgba(21, 29, 26, .94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

@media (max-width: 780px) {
    .theme-toggle-label {
        display: none;
    }

    .theme-toggle {
        width: 36px;
        padding: 7px;
    }
}