@media (prefers-color-scheme: dark) {
    :root {
      --primary: #264b5d;
      --primary-fg: #f7f7f7;
  
      --body-fg: #eeeeee;
      --body-bg: #121212;
      --body-quiet-color: #e0e0e0;
      --body-loud-color: #ffffff;
  
      --breadcrumbs-link-fg: #e0e0e0;
      --breadcrumbs-bg: var(--primary);
  
      --link-fg: #81d4fa;
      --link-hover-color: #4ac1f7;
      --link-selected-fg: #6f94c6;
  
      --hairline-color: #272727;
      --border-color: #353535;
  
      --error-fg: #e35f5f;
      --message-success-bg: #006b1b;
      --message-warning-bg: #583305;
      --message-error-bg: #570808;
  
      --darkened-bg: #212121;
      --selected-bg: #1b1b1b;
      --selected-row: #00363a;
  
      --close-button-bg: #333333;
      --close-button-hover-bg: #666666;
    }
  }


html[data-theme="dark"] {
    --primary: #264b5d;
    --primary-fg: #f7f7f7;

    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-quiet-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --breadcrumbs-link-fg: #e0e0e0;
    --breadcrumbs-bg: var(--primary);

    --link-fg: #81d4fa;
    --link-hover-color: #4ac1f7;
    --link-selected-fg: #6f94c6;

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: #212121;
    --selected-bg: #1b1b1b;
    --selected-row: #00363a;

    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
}

/* THEME SWITCH */
.theme-toggle {
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
    vertical-align: middle;
    margin-inline-start: 5px;
    margin-top: -1px;
}

.theme-toggle svg {
    vertical-align: middle;
    height: 1rem;
    width: 1rem;
    display: none;
}

/*
Fully hide screen reader text so we only show the one matching the current
theme.
*/
.theme-toggle .visually-hidden {
    display: none;
}

html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
    display: block;
}

html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
    display: block;
}

html[data-theme="light"] .theme-toggle .theme-label-when-light {
    display: block;
}

/* ICONS */
.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
    fill: var(--header-link-color);
    color: var(--header-bg);
}

html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto {
    display: block;
}

html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
    display: block;
}

html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
    display: block;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

/* ===========================================
   DARK MODE OVERRIDES for legacy base.css
   These override hardcoded colors when dark theme is active
   =========================================== */

html[data-theme="dark"] body {
    background: #121212 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited {
    color: #81d4fa !important;
}

html[data-theme="dark"] a:focus,
html[data-theme="dark"] a:hover {
    color: #4ac1f7 !important;
}

html[data-theme="dark"] #header {
    background: #264b5d !important;
}

html[data-theme="dark"] #branding h1,
html[data-theme="dark"] #branding h1 a:link,
html[data-theme="dark"] #branding h1 a:visited {
    color: #f7f7f7 !important;
}

html[data-theme="dark"] #user-tools {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] #user-tools a {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] div.breadcrumbs {
    background: #264b5d !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] div.breadcrumbs a {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] #changelist-filter {
    background: #1b1b1b !important;
}

html[data-theme="dark"] #changelist-filter h2 {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] #changelist-filter h3,
html[data-theme="dark"] #changelist-filter summary {
    color: #eeeeee !important;
    background: #212121 !important;
}

html[data-theme="dark"] #changelist-filter details {
    background: #1b1b1b !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] #changelist-filter details[open] summary {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] #changelist-filter li {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] #changelist-filter li a {
    color: #81d4fa !important;
}

html[data-theme="dark"] .module,
html[data-theme="dark"] .dashboard #content {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .module h2,
html[data-theme="dark"] .module caption {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] #result_list {
    background: #1b1b1b !important;
}

html[data-theme="dark"] #result_list th {
    background: #212121 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] #result_list th a {
    color: #81d4fa !important;
}

html[data-theme="dark"] #result_list td {
    background: #1b1b1b !important;
    color: #eeeeee !important;
    border-bottom: 1px solid #353535 !important;
}

html[data-theme="dark"] #result_list tr:nth-child(odd) td {
    background: #212121 !important;
}

html[data-theme="dark"] #result_list tr.selected td {
    background: #00363a !important;
}

html[data-theme="dark"] .paginator {
    background: #1b1b1b !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] #toolbar {
    background: #212121 !important;
}

html[data-theme="dark"] #searchbar {
    background: #1b1b1b !important;
    color: #eeeeee !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] textarea {
    background: #1b1b1b !important;
    color: #eeeeee !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .object-tools a {
    background: #264b5d !important;
}

html[data-theme="dark"] .object-tools a:hover {
    background: #417690 !important;
}

/* Login page */
html[data-theme="dark"] #content {
    background: #1b1b1b !important;
}

html[data-theme="dark"] #content-main {
    background: #1b1b1b !important;
}

html[data-theme="dark"] #login-form {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .form-row {
    background: transparent !important;
}

html[data-theme="dark"] .form-row label {
    color: #eeeeee !important;
}

html[data-theme="dark"] .submit-row {
    background: transparent !important;
    border: none !important;
}

html[data-theme="dark"] .submit-row input[type="submit"] {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .submit-row input[type="submit"]:hover {
    background: #417690 !important;
}

/* Actions bar */
html[data-theme="dark"] .actions {
    background: #212121 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .actions label {
    color: #eeeeee !important;
}

html[data-theme="dark"] .actions .button {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

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

html[data-theme="dark"] .action-counter,
html[data-theme="dark"] .actions span {
    color: #e0e0e0 !important;
}

/* Main content area */
html[data-theme="dark"] .main,
html[data-theme="dark"] #main {
    background: #121212 !important;
}

html[data-theme="dark"] .content {
    background: #121212 !important;
}

html[data-theme="dark"] .colM {
    background: #121212 !important;
}

/* Navigation sidebar */
html[data-theme="dark"] #nav-sidebar {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .nav-sidebar .module th {
    background: #212121 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .nav-sidebar .module td {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .nav-sidebar .module td a {
    color: #81d4fa !important;
}

/* Buttons */
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] button[type="submit"] {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] input[type="submit"]:hover,
html[data-theme="dark"] button[type="submit"]:hover {
    background: #417690 !important;
}

/* ===========================================
   DATERANGEPICKER - Dark Mode
   =========================================== */
html[data-theme="dark"] .daterangepicker {
    background-color: #1b1b1b !important;
    border-color: #353535 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .daterangepicker::before,
html[data-theme="dark"] .daterangepicker::after {
    border-bottom-color: #353535 !important;
}

html[data-theme="dark"] .daterangepicker .calendar-table {
    background-color: #1b1b1b !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .daterangepicker td,
html[data-theme="dark"] .daterangepicker th {
    background-color: #1b1b1b !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .daterangepicker td.off {
    background-color: #121212 !important;
    color: #666666 !important;
}

html[data-theme="dark"] .daterangepicker td.available:hover {
    background-color: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover {
    background-color: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .daterangepicker td.in-range {
    background-color: #1e3a4a !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .daterangepicker .drp-buttons {
    background-color: #212121 !important;
    border-top-color: #353535 !important;
}

html[data-theme="dark"] .daterangepicker .drp-buttons .btn {
    background-color: #264b5d !important;
    color: #f7f7f7 !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .daterangepicker .drp-buttons .btn:hover {
    background-color: #417690 !important;
}

html[data-theme="dark"] .daterangepicker .drp-selected {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker select.yearselect {
    background-color: #1b1b1b !important;
    color: #eeeeee !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .daterangepicker .ranges li {
    background-color: #1b1b1b !important;
    color: #81d4fa !important;
}

html[data-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .daterangepicker .ranges li.active {
    background-color: #264b5d !important;
    color: #f7f7f7 !important;
}

/* ===========================================
   CALENDAR & CLOCK WIDGETS - Dark Mode
   =========================================== */
html[data-theme="dark"] .calendarbox,
html[data-theme="dark"] .clockbox {
    background: #1b1b1b !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .calendar table {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .calendar caption,
html[data-theme="dark"] .calendarbox h2 {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .calendar th {
    background: #212121 !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .calendar td {
    background: #1b1b1b !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .calendar td a {
    color: #81d4fa !important;
}

html[data-theme="dark"] .calendar td a:hover {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .calendar td.selected a {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .calendar-shortcuts {
    background: #212121 !important;
    border-top-color: #353535 !important;
}

html[data-theme="dark"] .calendar-shortcuts a {
    color: #81d4fa !important;
}

html[data-theme="dark"] .calendar-cancel {
    background: #212121 !important;
}

html[data-theme="dark"] .calendar-cancel a {
    color: #e35f5f !important;
}

html[data-theme="dark"] .timelist {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .timelist a {
    color: #81d4fa !important;
}

html[data-theme="dark"] .timelist a:hover {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

/* ===========================================
   SELECTOR WIDGET (ManyToMany) - Dark Mode
   =========================================== */
html[data-theme="dark"] .selector {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .selector-available h2,
html[data-theme="dark"] .selector-chosen h2 {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .selector .selector-filter {
    background: #212121 !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .selector .selector-filter input {
    background: #1b1b1b !important;
    color: #eeeeee !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .selector select {
    background: #1b1b1b !important;
    color: #eeeeee !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .selector option {
    background: #1b1b1b !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .selector option:checked {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

/* ===========================================
   SELECT2 AUTOCOMPLETE - Dark Mode
   =========================================== */
html[data-theme="dark"] .select2-container--admin-autocomplete .select2-selection--single,
html[data-theme="dark"] .select2-container--admin-autocomplete .select2-selection--multiple {
    background-color: #1b1b1b !important;
    border-color: #353535 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .select2-container--admin-autocomplete .select2-selection__rendered {
    color: #eeeeee !important;
}

html[data-theme="dark"] .select2-dropdown {
    background-color: #1b1b1b !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .select2-search__field {
    background-color: #212121 !important;
    color: #eeeeee !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] .select2-results__option {
    background-color: #1b1b1b !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .select2-results__option--highlighted {
    background-color: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .select2-container--admin-autocomplete .select2-selection__choice {
    background-color: #264b5d !important;
    color: #f7f7f7 !important;
    border-color: #353535 !important;
}

/* ===========================================
   FORMS - Dark Mode
   =========================================== */
html[data-theme="dark"] fieldset {
    background: #1b1b1b !important;
    border-color: #353535 !important;
}

html[data-theme="dark"] fieldset .collapse-toggle {
    color: #81d4fa !important;
}

html[data-theme="dark"] .inline-related fieldset {
    background: #212121 !important;
}

html[data-theme="dark"] .inline-related fieldset.module h3 {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] .errornote {
    background-color: #570808 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] ul.errorlist {
    background: #570808 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] ul.errorlist li {
    color: #eeeeee !important;
}

/* ===========================================
   TABLE ROWS - Dark Mode
   =========================================== */
html[data-theme="dark"] thead th,
html[data-theme="dark"] tfoot td {
    background: #212121 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] .row1 {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .row2 {
    background: #212121 !important;
}

/* ===========================================
   DELETE CONFIRMATION - Dark Mode
   =========================================== */
html[data-theme="dark"] .delete-confirmation {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .delete-confirmation form input[type="submit"] {
    background: #e35f5f !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .delete-confirmation form input[type="submit"]:hover {
    background: #c74545 !important;
}

/* ===========================================
   OBJECT HISTORY - Dark Mode
   =========================================== */
html[data-theme="dark"] #change-history {
    background: #1b1b1b !important;
}

html[data-theme="dark"] #change-history table {
    background: #1b1b1b !important;
}

html[data-theme="dark"] #change-history th {
    background: #212121 !important;
    color: #eeeeee !important;
}

html[data-theme="dark"] #change-history td {
    background: #1b1b1b !important;
    color: #eeeeee !important;
    border-color: #353535 !important;
}

/* ===========================================
   HELP TEXT & DESCRIPTIONS - Dark Mode
   =========================================== */
html[data-theme="dark"] .help,
html[data-theme="dark"] .help-tooltip {
    color: #b0b0b0 !important;
}

html[data-theme="dark"] p.help {
    color: #b0b0b0 !important;
}

/* ===========================================
   STACKED INLINES - Dark Mode
   =========================================== */
html[data-theme="dark"] .inline-group .tabular fieldset.module {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .inline-group .tabular tr.has_original td {
    background: #1b1b1b !important;
}

html[data-theme="dark"] .inline-group .tabular tr:nth-child(odd) td {
    background: #212121 !important;
}

/* ===========================================
   RECENT ACTIONS MODULE - Dark Mode
   =========================================== */
html[data-theme="dark"] #content-related {
    background: #1b1b1b !important;
}

html[data-theme="dark"] #recent-actions-module {
    background: #1b1b1b !important;
}

html[data-theme="dark"] #recent-actions-module h2 {
    background: #264b5d !important;
    color: #f7f7f7 !important;
}

html[data-theme="dark"] #recent-actions-module h3 {
    color: #eeeeee !important;
    border-bottom-color: #353535 !important;
}

html[data-theme="dark"] #recent-actions-module .actionlist li {
    color: #eeeeee !important;
    border-bottom-color: #353535 !important;
}

html[data-theme="dark"] #recent-actions-module .actionlist li a {
    color: #81d4fa !important;
}

html[data-theme="dark"] #recent-actions-module .mini.quiet {
    color: #b0b0b0 !important;
}

html[data-theme="dark"] #recent-actions-module .actionlist .deletelink {
    color: #e35f5f !important;
}

html[data-theme="dark"] #recent-actions-module .actionlist .addlink {
    color: #66bb6a !important;
}

html[data-theme="dark"] #recent-actions-module .actionlist .changelink {
    color: #81d4fa !important;
}

/* ===========================================
   MOBILE CARD LAYOUT - Dark Mode
   =========================================== */
@media (max-width: 767px) {
    html[data-theme="dark"] .model-comrade #result_list tbody tr {
        background: var(--body-bg, #121212);
        border-color: var(--border-color, #353535);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    html[data-theme="dark"] .model-comrade #result_list tbody tr.selected {
        border-color: var(--primary, #264b5d);
        box-shadow: 0 2px 8px rgba(38, 75, 93, 0.5);
    }

    html[data-theme="dark"] .model-comrade #result_list tbody td {
        border-bottom-color: var(--hairline-color, #272727);
    }

    html[data-theme="dark"] .model-comrade #result_list tbody td.field-id,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-visible_name,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-ssn,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-address_display {
        background: var(--darkened-bg, #1a1a1a);
    }

    html[data-theme="dark"] .model-comrade #result_list tbody td.field-postal_code_display,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-country_display,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-date_joined,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-phone_display,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-email_display,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-cell_display,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-union_memberships_display,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-titles_display,
    html[data-theme="dark"] .model-comrade #result_list tbody td.field-housing_situation {
        color: var(--body-quiet-color, #b0b0b0);
    }

    html[data-theme="dark"] .model-comrade #result_list tbody td a {
        color: var(--link-fg, #81d4fa);
    }
}