/*
 * Django Admin Dark Mode
 * Overrides django-admin-interface inline styles via !important
 * Targets both [data-theme="dark"] (manual toggle) and prefers-color-scheme (auto)
 */

/* ===== CSS Custom Properties (Django 3.2+ native dark mode vars) ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --body-bg: #1a1a2e;
    --darkened-bg: #16213e;
    --selected-bg: #1a3a5c;
    --selected-row: #1a3a5c;
    --body-fg: #e0e0e0;
    --body-quiet-color: #a0a0b0;
    --body-loud-color: #ffffff;
    --link-fg: #7cb3f2;
    --link-hover-color: #a8d0ff;
    --link-selected-fg: #a8d0ff;
    --header-color: #e0e0e0;
    --header-branding-color: #ffffff;
    --header-bg: #0f3460;
    --header-link-color: #e0e0e0;
    --breadcrumbs-fg: #c0c0d0;
    --breadcrumbs-link-fg: #7cb3f2;
    --breadcrumbs-bg: #16213e;
    --nav-sidebar-background-color: #16213e;
    --button-fg: #ffffff;
    --button-bg: #2a6496;
    --button-hover-bg: #3578b0;
    --default-button-bg: #2e7d32;
    --default-button-hover-bg: #388e3c;
    --close-button-bg: #6c757d;
    --close-button-hover-bg: #868e96;
    --delete-button-bg: #c0392b;
    --delete-button-hover-bg: #e74c3c;
    --hairline-color: #2a2a4a;
    --border-color: #3a3a5a;
    --error-fg: #ff6b6b;
    --message-success-bg: #1a3a2a;
    --message-warning-bg: #3a3a1a;
    --message-error-bg: #3a1a1a;
    --object-tools-fg: #e0e0e0;
    --object-tools-bg: #2a6496;
    --object-tools-hover-bg: #3578b0;
    --calendar-today-bg: #2a6496;
    --calendar-today-fg: #ffffff;
  }
}

[data-theme="dark"] {
  --body-bg: #1a1a2e;
  --darkened-bg: #16213e;
  --selected-bg: #1a3a5c;
  --selected-row: #1a3a5c;
  --body-fg: #e0e0e0;
  --body-quiet-color: #a0a0b0;
  --body-loud-color: #ffffff;
  --link-fg: #7cb3f2;
  --link-hover-color: #a8d0ff;
  --link-selected-fg: #a8d0ff;
  --header-color: #e0e0e0;
  --header-branding-color: #ffffff;
  --header-bg: #0f3460;
  --header-link-color: #e0e0e0;
  --breadcrumbs-fg: #c0c0d0;
  --breadcrumbs-link-fg: #7cb3f2;
  --breadcrumbs-bg: #16213e;
  --nav-sidebar-background-color: #16213e;
  --button-fg: #ffffff;
  --button-bg: #2a6496;
  --button-hover-bg: #3578b0;
  --default-button-bg: #2e7d32;
  --default-button-hover-bg: #388e3c;
  --close-button-bg: #6c757d;
  --close-button-hover-bg: #868e96;
  --delete-button-bg: #c0392b;
  --delete-button-hover-bg: #e74c3c;
  --hairline-color: #2a2a4a;
  --border-color: #3a3a5a;
  --error-fg: #ff6b6b;
  --message-success-bg: #1a3a2a;
  --message-warning-bg: #3a3a1a;
  --message-error-bg: #3a1a1a;
  --object-tools-fg: #e0e0e0;
  --object-tools-bg: #2a6496;
  --object-tools-hover-bg: #3578b0;
  --calendar-today-bg: #2a6496;
  --calendar-today-fg: #ffffff;
}

/* ===== Element overrides for django-admin-interface inline styles ===== */
/* Using both selectors: data-theme for manual toggle, media query for auto */

/* --- Body & Content --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body,
  html:not([data-theme="light"]) #container {
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
  }
  html:not([data-theme="light"]) #content {
    background: transparent !important;
    color: #e0e0e0 !important;
  }
}
html[data-theme="dark"] body,
html[data-theme="dark"] #container {
  background: #1a1a2e !important;
  color: #e0e0e0 !important;
}
html[data-theme="dark"] #content {
  background: transparent !important;
  color: #e0e0e0 !important;
}

/* --- Header --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #header {
    background: #0f3460 !important;
    color: #e0e0e0 !important;
  }
  html:not([data-theme="light"]) #header a:link,
  html:not([data-theme="light"]) #header a:visited {
    color: #e0e0e0 !important;
  }
  html:not([data-theme="light"]) #branding h1,
  html:not([data-theme="light"]) #branding h1 a:link,
  html:not([data-theme="light"]) #branding h1 a:visited {
    color: #ffffff !important;
  }
}
html[data-theme="dark"] #header {
  background: #0f3460 !important;
  color: #e0e0e0 !important;
}
html[data-theme="dark"] #header a:link,
html[data-theme="dark"] #header a:visited {
  color: #e0e0e0 !important;
}
html[data-theme="dark"] #branding h1,
html[data-theme="dark"] #branding h1 a:link,
html[data-theme="dark"] #branding h1 a:visited {
  color: #ffffff !important;
}

/* --- Breadcrumbs --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) div.breadcrumbs {
    background: #16213e !important;
    color: #c0c0d0 !important;
  }
  html:not([data-theme="light"]) div.breadcrumbs a {
    color: #7cb3f2 !important;
  }
}
html[data-theme="dark"] div.breadcrumbs {
  background: #16213e !important;
  color: #c0c0d0 !important;
}
html[data-theme="dark"] div.breadcrumbs a {
  color: #7cb3f2 !important;
}

/* --- Module headers (green section bars) --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .module > h2,
  html:not([data-theme="light"]) .module > caption,
  html:not([data-theme="light"]) .module caption {
    background: #0f3460 !important;
    color: #e0e0e0 !important;
  }
}
html[data-theme="dark"] .module > h2,
html[data-theme="dark"] .module > caption,
html[data-theme="dark"] .module caption {
  background: #0f3460 !important;
  color: #e0e0e0 !important;
}

/* --- Navigation sidebar --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #nav-sidebar {
    background: #16213e !important;
  }
  html:not([data-theme="light"]) #nav-sidebar .module h2,
  html:not([data-theme="light"]) #nav-sidebar .module caption {
    background: #0f3460 !important;
    color: #e0e0e0 !important;
  }
  html:not([data-theme="light"]) #nav-sidebar th,
  html:not([data-theme="light"]) #nav-sidebar td {
    background: #16213e !important;
  }
  html:not([data-theme="light"]) #nav-sidebar th a,
  html:not([data-theme="light"]) #nav-sidebar td a {
    color: #7cb3f2 !important;
  }
  html:not([data-theme="light"]) #nav-sidebar .current-app {
    background: #1a3a5c !important;
  }
  html:not([data-theme="light"]) #nav-filter input {
    background: #2a2a4a !important;
    color: #e0e0e0 !important;
    border-color: #3a3a5a !important;
  }
}
html[data-theme="dark"] #nav-sidebar {
  background: #16213e !important;
}
html[data-theme="dark"] #nav-sidebar .module h2,
html[data-theme="dark"] #nav-sidebar .module caption {
  background: #0f3460 !important;
  color: #e0e0e0 !important;
}
html[data-theme="dark"] #nav-sidebar th,
html[data-theme="dark"] #nav-sidebar td {
  background: #16213e !important;
}
html[data-theme="dark"] #nav-sidebar th a,
html[data-theme="dark"] #nav-sidebar td a {
  color: #7cb3f2 !important;
}
html[data-theme="dark"] #nav-sidebar .current-app {
  background: #1a3a5c !important;
}
html[data-theme="dark"] #nav-filter input {
  background: #2a2a4a !important;
  color: #e0e0e0 !important;
  border-color: #3a3a5a !important;
}

/* --- Content related column (right side on dashboard) --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #content-related {
    background: transparent !important;
  }
}
html[data-theme="dark"] #content-related {
  background: transparent !important;
}

/* --- Dashboard modules (index page) --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #content-main .module,
  html:not([data-theme="light"]) #content-related .module,
  html:not([data-theme="light"]) #recent-actions-module {
    background: #1e1e3a !important;
  }
  html:not([data-theme="light"]) #content-main .module table tr,
  html:not([data-theme="light"]) #content-main .module table td,
  html:not([data-theme="light"]) #content-main .module table th,
  html:not([data-theme="light"]) #content-related .module table tr,
  html:not([data-theme="light"]) #content-related .module table td,
  html:not([data-theme="light"]) #content-related .module table th {
    background: transparent !important;
    color: #e0e0e0 !important;
  }
  html:not([data-theme="light"]) #content-main .module table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03) !important;
  }
  html:not([data-theme="light"]) .actionlist li {
    background: transparent !important;
    border-color: #2a2a4a !important;
    color: #c0c0d0 !important;
  }
  html:not([data-theme="light"]) .actionlist .mini {
    color: #808090 !important;
  }
}
html[data-theme="dark"] #content-main .module,
html[data-theme="dark"] #content-related .module,
html[data-theme="dark"] #recent-actions-module {
  background: #1e1e3a !important;
}
html[data-theme="dark"] #content-main .module table tr,
html[data-theme="dark"] #content-main .module table td,
html[data-theme="dark"] #content-main .module table th,
html[data-theme="dark"] #content-related .module table tr,
html[data-theme="dark"] #content-related .module table td,
html[data-theme="dark"] #content-related .module table th {
  background: transparent !important;
  color: #e0e0e0 !important;
}
html[data-theme="dark"] #content-main .module table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}
html[data-theme="dark"] .actionlist li {
  background: transparent !important;
  border-color: #2a2a4a !important;
  color: #c0c0d0 !important;
}
html[data-theme="dark"] .actionlist .mini {
  color: #808090 !important;
}

/* --- Table rows (change list) --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #result_list tbody tr,
  html:not([data-theme="light"]) #result_list tbody tr td,
  html:not([data-theme="light"]) #result_list tbody tr th,
  html:not([data-theme="light"]) #changelist .results tbody tr td,
  html:not([data-theme="light"]) #changelist .results tbody tr th {
    background: #1e1e3a !important;
    color: #e0e0e0 !important;
    border-bottom-color: #2a2a4a !important;
  }
  html:not([data-theme="light"]) #result_list tbody tr.row2,
  html:not([data-theme="light"]) #result_list tbody tr.row2 td,
  html:not([data-theme="light"]) #result_list tbody tr.row2 th {
    background: #1a1a2e !important;
  }
  html:not([data-theme="light"]) #result_list tbody tr:hover td,
  html:not([data-theme="light"]) #result_list tbody tr:hover th,
  html:not([data-theme="light"]) #changelist .results tbody tr:hover td,
  html:not([data-theme="light"]) #changelist .results tbody tr:hover th {
    background: #1a3a5c !important;
  }
  html:not([data-theme="light"]) #result_list thead th,
  html:not([data-theme="light"]) #changelist table thead th {
    background: #16213e !important;
    color: #c0c0d0 !important;
    border-bottom-color: #3a3a5a !important;
  }
  html:not([data-theme="light"]) #result_list thead th a,
  html:not([data-theme="light"]) #changelist table thead th a {
    color: #c0c0d0 !important;
  }
  /* General table cells */
  html:not([data-theme="light"]) table td,
  html:not([data-theme="light"]) table th {
    border-color: #2a2a4a !important;
  }
}
html[data-theme="dark"] #result_list tbody tr,
html[data-theme="dark"] #result_list tbody tr td,
html[data-theme="dark"] #result_list tbody tr th,
html[data-theme="dark"] #changelist .results tbody tr td,
html[data-theme="dark"] #changelist .results tbody tr th {
  background: #1e1e3a !important;
  color: #e0e0e0 !important;
  border-bottom-color: #2a2a4a !important;
}
html[data-theme="dark"] #result_list tbody tr.row2,
html[data-theme="dark"] #result_list tbody tr.row2 td,
html[data-theme="dark"] #result_list tbody tr.row2 th {
  background: #1a1a2e !important;
}
html[data-theme="dark"] #result_list tbody tr:hover td,
html[data-theme="dark"] #result_list tbody tr:hover th,
html[data-theme="dark"] #changelist .results tbody tr:hover td,
html[data-theme="dark"] #changelist .results tbody tr:hover th {
  background: #1a3a5c !important;
}
html[data-theme="dark"] #result_list thead th,
html[data-theme="dark"] #changelist table thead th {
  background: #16213e !important;
  color: #c0c0d0 !important;
  border-bottom-color: #3a3a5a !important;
}
html[data-theme="dark"] #result_list thead th a,
html[data-theme="dark"] #changelist table thead th a {
  color: #c0c0d0 !important;
}
html[data-theme="dark"] table td,
html[data-theme="dark"] table th {
  border-color: #2a2a4a !important;
}

/* --- Dashboard tables --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .dashboard #content-main .module table td,
  html:not([data-theme="light"]) .dashboard #content-main .module table th {
    background: transparent !important;
  }
}
html[data-theme="dark"] .dashboard #content-main .module table td,
html[data-theme="dark"] .dashboard #content-main .module table th {
  background: transparent !important;
}

/* --- Links --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) a:link,
  html:not([data-theme="light"]) a:visited {
    color: #7cb3f2 !important;
  }
  html:not([data-theme="light"]) a:hover {
    color: #a8d0ff !important;
  }
  /* Changelist row links — text in table cells */
  html:not([data-theme="light"]) #result_list a,
  html:not([data-theme="light"]) #changelist .results a {
    color: #7cb3f2 !important;
  }
}
html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited {
  color: #7cb3f2 !important;
}
html[data-theme="dark"] a:hover {
  color: #a8d0ff !important;
}
html[data-theme="dark"] #result_list a,
html[data-theme="dark"] #changelist .results a {
  color: #7cb3f2 !important;
}

/* --- Filter sidebar --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #changelist-filter {
    background: #16213e !important;
    border-color: #2a2a4a !important;
  }
  html:not([data-theme="light"]) #changelist-filter h2,
  html:not([data-theme="light"]) #changelist-filter h3 {
    background: #0f3460 !important;
    color: #e0e0e0 !important;
  }
  html:not([data-theme="light"]) #changelist-filter li.selected a {
    color: #7cb3f2 !important;
  }
  html:not([data-theme="light"]) #changelist-filter ul li a {
    color: #a0a0b0 !important;
  }
  html:not([data-theme="light"]) #changelist-filter select {
    background: #2a2a4a !important;
    color: #e0e0e0 !important;
    border-color: #3a3a5a !important;
  }
  html:not([data-theme="light"]) #changelist-filter summary {
    color: #7cb3f2 !important;
  }
}
html[data-theme="dark"] #changelist-filter {
  background: #16213e !important;
  border-color: #2a2a4a !important;
}
html[data-theme="dark"] #changelist-filter h2,
html[data-theme="dark"] #changelist-filter h3 {
  background: #0f3460 !important;
  color: #e0e0e0 !important;
}
html[data-theme="dark"] #changelist-filter li.selected a {
  color: #7cb3f2 !important;
}
html[data-theme="dark"] #changelist-filter ul li a {
  color: #a0a0b0 !important;
}
html[data-theme="dark"] #changelist-filter select {
  background: #2a2a4a !important;
  color: #e0e0e0 !important;
  border-color: #3a3a5a !important;
}
html[data-theme="dark"] #changelist-filter summary {
  color: #7cb3f2 !important;
}

/* --- Forms --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) input[type="text"],
  html:not([data-theme="light"]) input[type="password"],
  html:not([data-theme="light"]) input[type="email"],
  html:not([data-theme="light"]) input[type="url"],
  html:not([data-theme="light"]) input[type="number"],
  html:not([data-theme="light"]) input[type="search"],
  html:not([data-theme="light"]) input[type="date"],
  html:not([data-theme="light"]) input[type="datetime-local"],
  html:not([data-theme="light"]) input[type="time"],
  html:not([data-theme="light"]) textarea,
  html:not([data-theme="light"]) select {
    background: #2a2a4a !important;
    color: #e0e0e0 !important;
    border-color: #3a3a5a !important;
  }
  html:not([data-theme="light"]) input:focus,
  html:not([data-theme="light"]) textarea:focus,
  html:not([data-theme="light"]) select:focus {
    border-color: #7cb3f2 !important;
  }
}
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"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #2a2a4a !important;
  color: #e0e0e0 !important;
  border-color: #3a3a5a !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: #7cb3f2 !important;
}

/* --- Fieldsets --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) fieldset {
    border-color: #2a2a4a !important;
    background: #1e1e3a !important;
  }
  html:not([data-theme="light"]) fieldset .form-row {
    border-color: #2a2a4a !important;
  }
  html:not([data-theme="light"]) .help,
  html:not([data-theme="light"]) .help-text,
  html:not([data-theme="light"]) span.helptext {
    color: #808090 !important;
  }
  html:not([data-theme="light"]) label {
    color: #e0e0e0 !important;
  }
}
html[data-theme="dark"] fieldset {
  border-color: #2a2a4a !important;
  background: #1e1e3a !important;
}
html[data-theme="dark"] fieldset .form-row {
  border-color: #2a2a4a !important;
}
html[data-theme="dark"] .help,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] span.helptext {
  color: #808090 !important;
}
html[data-theme="dark"] label {
  color: #e0e0e0 !important;
}

/* --- Buttons --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .submit-row {
    background: #16213e !important;
    border-color: #2a2a4a !important;
  }
  html:not([data-theme="light"]) .submit-row input[type="submit"],
  html:not([data-theme="light"]) input[type="submit"],
  html:not([data-theme="light"]) button[type="submit"],
  html:not([data-theme="light"]) .button,
  html:not([data-theme="light"]) a.button {
    background: #2e7d32 !important;
    color: #ffffff !important;
  }
  html:not([data-theme="light"]) .submit-row input[type="submit"]:hover,
  html:not([data-theme="light"]) input[type="submit"]:hover,
  html:not([data-theme="light"]) button[type="submit"]:hover {
    background: #388e3c !important;
  }
  html:not([data-theme="light"]) .deletelink,
  html:not([data-theme="light"]) .deletelink:link,
  html:not([data-theme="light"]) .deletelink:visited {
    color: #ff6b6b !important;
  }
  html:not([data-theme="light"]) a.deletelink:link,
  html:not([data-theme="light"]) a.deletelink:visited,
  html:not([data-theme="light"]) .delete a {
    background: #c0392b !important;
    color: #ffffff !important;
  }
  html:not([data-theme="light"]) .object-tools a:link,
  html:not([data-theme="light"]) .object-tools a:visited {
    background: #2a6496 !important;
    color: #ffffff !important;
  }
  html:not([data-theme="light"]) .object-tools a:hover {
    background: #3578b0 !important;
  }
}
html[data-theme="dark"] .submit-row {
  background: #16213e !important;
  border-color: #2a2a4a !important;
}
html[data-theme="dark"] .submit-row input[type="submit"],
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] button[type="submit"],
html[data-theme="dark"] .button,
html[data-theme="dark"] a.button {
  background: #2e7d32 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .submit-row input[type="submit"]:hover,
html[data-theme="dark"] input[type="submit"]:hover,
html[data-theme="dark"] button[type="submit"]:hover {
  background: #388e3c !important;
}
html[data-theme="dark"] .deletelink,
html[data-theme="dark"] .deletelink:link,
html[data-theme="dark"] .deletelink:visited {
  color: #ff6b6b !important;
}
html[data-theme="dark"] a.deletelink:link,
html[data-theme="dark"] a.deletelink:visited,
html[data-theme="dark"] .delete a {
  background: #c0392b !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .object-tools a:link,
html[data-theme="dark"] .object-tools a:visited {
  background: #2a6496 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .object-tools a:hover {
  background: #3578b0 !important;
}

/* --- Toolbar (search bar area) --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #toolbar {
    background: #16213e !important;
    color: #e0e0e0 !important;
  }
}
html[data-theme="dark"] #toolbar {
  background: #16213e !important;
  color: #e0e0e0 !important;
}

/* --- Action bar --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #changelist .actions {
    background: #16213e !important;
    border-color: #2a2a4a !important;
    color: #c0c0d0 !important;
  }
}
html[data-theme="dark"] #changelist .actions {
  background: #16213e !important;
  border-color: #2a2a4a !important;
  color: #c0c0d0 !important;
}

/* --- Pagination --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .paginator {
    background: #16213e !important;
    color: #c0c0d0 !important;
    border-color: #2a2a4a !important;
  }
}
html[data-theme="dark"] .paginator {
  background: #16213e !important;
  color: #c0c0d0 !important;
  border-color: #2a2a4a !important;
}

/* --- Messages --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .messagelist li.success {
    background: #1a3a2a !important;
    color: #6fda6f !important;
  }
  html:not([data-theme="light"]) .messagelist li.warning {
    background: #3a3a1a !important;
    color: #f0d060 !important;
  }
  html:not([data-theme="light"]) .messagelist li.error {
    background: #3a1a1a !important;
    color: #ff6b6b !important;
  }
}
html[data-theme="dark"] .messagelist li.success {
  background: #1a3a2a !important;
  color: #6fda6f !important;
}
html[data-theme="dark"] .messagelist li.warning {
  background: #3a3a1a !important;
  color: #f0d060 !important;
}
html[data-theme="dark"] .messagelist li.error {
  background: #3a1a1a !important;
  color: #ff6b6b !important;
}

/* --- Inlines --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .inline-group .tabular td,
  html:not([data-theme="light"]) .inline-group .tabular th {
    background: transparent !important;
  }
  html:not([data-theme="light"]) .inline-group h2 {
    background: #0f3460 !important;
    color: #e0e0e0 !important;
  }
  html:not([data-theme="light"]) .inline-related {
    background: #1e1e3a !important;
    border-color: #2a2a4a !important;
  }
}
html[data-theme="dark"] .inline-group .tabular td,
html[data-theme="dark"] .inline-group .tabular th {
  background: transparent !important;
}
html[data-theme="dark"] .inline-group h2 {
  background: #0f3460 !important;
  color: #e0e0e0 !important;
}
html[data-theme="dark"] .inline-related {
  background: #1e1e3a !important;
  border-color: #2a2a4a !important;
}

/* --- Misc --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .readonly,
  html:not([data-theme="light"]) div.readonly {
    color: #c0c0d0 !important;
  }
  html:not([data-theme="light"]) .actionlist li {
    border-color: #2a2a4a !important;
  }
  html:not([data-theme="light"]) fieldset.collapse .collapse-toggle {
    color: #7cb3f2 !important;
  }
  html:not([data-theme="light"]) .vColorField {
    background: #2a2a4a !important;
    color: #e0e0e0 !important;
  }
  html:not([data-theme="light"]) #footer {
    background: #16213e !important;
    color: #808090 !important;
  }
  /* Calendar widgets */
  html:not([data-theme="light"]) .calendar td,
  html:not([data-theme="light"]) .timelist {
    background: #2a2a4a !important;
  }
  html:not([data-theme="light"]) .calendar td a {
    color: #7cb3f2 !important;
  }
  html:not([data-theme="light"]) .calendar td.today a {
    background: #2a6496 !important;
    color: #ffffff !important;
  }
  /* Module table borders */
  html:not([data-theme="light"]) .module table td,
  html:not([data-theme="light"]) .module table th {
    border-color: #2a2a4a !important;
  }
}
html[data-theme="dark"] .readonly,
html[data-theme="dark"] div.readonly {
  color: #c0c0d0 !important;
}
html[data-theme="dark"] .actionlist li {
  border-color: #2a2a4a !important;
}
html[data-theme="dark"] fieldset.collapse .collapse-toggle {
  color: #7cb3f2 !important;
}
html[data-theme="dark"] .vColorField {
  background: #2a2a4a !important;
  color: #e0e0e0 !important;
}
html[data-theme="dark"] #footer {
  background: #16213e !important;
  color: #808090 !important;
}
html[data-theme="dark"] .calendar td,
html[data-theme="dark"] .timelist {
  background: #2a2a4a !important;
}
html[data-theme="dark"] .calendar td a {
  color: #7cb3f2 !important;
}
html[data-theme="dark"] .calendar td.today a {
  background: #2a6496 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .module table td,
html[data-theme="dark"] .module table th {
  border-color: #2a2a4a !important;
}