/* ============================================================
   MIRA Insights — Django Admin Dark Theme
   Matches the main app's dark + teal brand identity.
   ============================================================ */

:root {
    --mira-teal: #00D4AA;
    --mira-teal-hover: #00b894;
    --mira-sidebar-bg: #0f1923;
    --mira-content-bg: #132337;
    --mira-card-bg: #1a2d42;
    --mira-card-border: #1e3a5f;
    --mira-text: #e2e8f0;
    --mira-text-muted: #94a3b8;
    --mira-danger: #ef4444;
    --mira-warning: #f59e0b;
}

/* ---------- Global / Body ---------- */
html, body {
    background: var(--mira-content-bg) !important;
    color: var(--mira-text) !important;
}

/* ---------- Header / Branding ---------- */
#header {
    background: var(--mira-sidebar-bg) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--mira-card-border);
}
#header a:link, #header a:visited {
    color: #fff !important;
}
.mira-admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 700;
}
.mira-admin-brand img {
    height: 28px;
    width: auto;
}
.mira-admin-brand em {
    font-style: normal;
    color: var(--mira-teal);
    font-weight: 400;
}
#branding h1, #branding h1 a {
    color: #fff !important;
    font-weight: 700;
}
#user-tools {
    color: var(--mira-text-muted) !important;
}
#user-tools a {
    color: var(--mira-teal) !important;
    border-bottom-color: transparent !important;
}
#user-tools a:hover {
    color: var(--mira-teal-hover) !important;
}

/* ---------- Breadcrumbs ---------- */
div.breadcrumbs {
    background: var(--mira-card-bg) !important;
    color: var(--mira-text-muted) !important;
    border-bottom: 1px solid var(--mira-card-border);
}
div.breadcrumbs a {
    color: var(--mira-teal) !important;
}

/* ---------- Content area ---------- */
#content {
    color: var(--mira-text);
}
#content h1 {
    color: #fff;
}
#content h2 {
    color: var(--mira-text);
}

/* ---------- Module cards on index ---------- */
.module h2, .module caption {
    background: var(--mira-teal) !important;
    color: var(--mira-sidebar-bg) !important;
    font-weight: 600;
}
.module h2 a, .module caption a {
    color: var(--mira-sidebar-bg) !important;
}
.module table {
    background: var(--mira-card-bg);
    border: 1px solid var(--mira-card-border);
}
.module table th {
    background: var(--mira-card-bg) !important;
    color: var(--mira-text) !important;
    border-bottom: 1px solid var(--mira-card-border);
}
.module table td {
    border-bottom: 1px solid var(--mira-card-border);
    color: var(--mira-text);
}
.module table td a {
    color: var(--mira-teal) !important;
}
.module table tr:hover td {
    background: rgba(0, 212, 170, 0.05);
}

/* ---------- Sidebar (admin nav-sidebar) ---------- */
#nav-sidebar {
    background: var(--mira-sidebar-bg) !important;
    border-right: 1px solid var(--mira-card-border);
}
#nav-sidebar .module h2 {
    background: rgba(0, 212, 170, 0.1) !important;
    color: var(--mira-teal) !important;
}
#nav-sidebar .module h2 a {
    color: var(--mira-teal) !important;
}
#nav-sidebar .module table {
    background: transparent;
    border: none;
}
#nav-sidebar .module table th {
    background: transparent !important;
    color: var(--mira-text-muted) !important;
    border-bottom: 1px solid var(--mira-card-border);
}
#nav-sidebar .module table td {
    border-bottom: 1px solid rgba(30, 58, 95, 0.5);
}
#nav-sidebar .module table td a {
    color: var(--mira-text) !important;
}
#nav-sidebar .module table td a:hover {
    color: var(--mira-teal) !important;
}
#nav-sidebar .module table .current-model {
    background: rgba(0, 212, 170, 0.08);
}
#nav-sidebar .module table .current-model a {
    color: var(--mira-teal) !important;
    font-weight: 600;
}
#nav-sidebar #nav-filter {
    background: var(--mira-card-bg);
    border: 1px solid var(--mira-card-border);
    color: var(--mira-text);
}
#nav-sidebar #nav-filter:focus {
    border-color: var(--mira-teal);
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.15);
}
#toggle-nav-sidebar {
    background: var(--mira-sidebar-bg);
    border-right: 1px solid var(--mira-card-border);
    color: var(--mira-text-muted);
}
#toggle-nav-sidebar:hover {
    color: var(--mira-teal);
}

/* ---------- Tables (changelist) ---------- */
#changelist table {
    background: var(--mira-card-bg);
    border: 1px solid var(--mira-card-border);
}
#changelist table thead th {
    background: rgba(0, 212, 170, 0.08) !important;
    color: var(--mira-teal) !important;
    border-bottom: 2px solid var(--mira-card-border);
}
#changelist table thead th a:link,
#changelist table thead th a:visited {
    color: var(--mira-teal) !important;
}
#changelist table tbody tr {
    border-bottom: 1px solid var(--mira-card-border);
}
#changelist table tbody td {
    color: var(--mira-text);
    border-bottom: 1px solid var(--mira-card-border);
}
#changelist table tbody td a {
    color: var(--mira-teal) !important;
}
#changelist table tbody tr:nth-child(odd) {
    background: var(--mira-card-bg);
}
#changelist table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}
#changelist table tbody tr:hover td {
    background: rgba(0, 212, 170, 0.05) !important;
}

/* Changelist toolbar / filters */
#changelist-filter {
    background: var(--mira-card-bg) !important;
    border-left: 1px solid var(--mira-card-border);
}
#changelist-filter h2 {
    color: var(--mira-teal) !important;
    background: transparent !important;
}
#changelist-filter h3 {
    color: var(--mira-text) !important;
    border-bottom: 1px solid var(--mira-card-border);
}
#changelist-filter li {
    color: var(--mira-text-muted);
}
#changelist-filter a {
    color: var(--mira-text-muted) !important;
}
#changelist-filter li.selected a {
    color: var(--mira-teal) !important;
    font-weight: 600;
}

/* Search bar */
#changelist-search {
    background: transparent !important;
    border-bottom: 1px solid var(--mira-card-border);
}
#changelist-search #searchbar {
    background: var(--mira-sidebar-bg);
    border: 1px solid var(--mira-card-border);
    color: var(--mira-text);
    border-radius: 4px;
}
#changelist-search #searchbar:focus {
    border-color: var(--mira-teal);
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.15);
}

/* Pagination */
.paginator {
    background: var(--mira-card-bg) !important;
    border-top: 1px solid var(--mira-card-border);
    color: var(--mira-text-muted) !important;
}
.paginator a:link, .paginator a:visited {
    color: var(--mira-teal) !important;
}

/* ---------- Forms ---------- */
.form-row {
    border-bottom-color: var(--mira-card-border) !important;
    color: var(--mira-text);
}
.form-row label {
    color: var(--mira-text) !important;
}
fieldset {
    border: 1px solid var(--mira-card-border) !important;
    background: var(--mira-card-bg);
    border-radius: 6px;
}
fieldset h2 {
    color: #fff !important;
    background: rgba(0, 212, 170, 0.08) !important;
    border-bottom: 1px solid var(--mira-card-border);
}
.aligned label {
    color: var(--mira-text) !important;
}
.help, .help-tooltip {
    color: var(--mira-text-muted) !important;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.vTextField,
.vURLField,
.vLargeTextField {
    background: var(--mira-sidebar-bg) !important;
    border: 1px solid var(--mira-card-border) !important;
    color: var(--mira-text) !important;
    border-radius: 4px;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--mira-teal) !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.15) !important;
    outline: none !important;
}
select option {
    background: var(--mira-sidebar-bg);
    color: var(--mira-text);
}
.readonly {
    color: var(--mira-text-muted) !important;
    background: var(--mira-sidebar-bg) !important;
}

/* Checkboxes — keep default */
input[type="checkbox"] {
    accent-color: var(--mira-teal);
}

/* Date/time widgets */
.datetimeshortcuts a {
    color: var(--mira-teal) !important;
}
.calendarbox, .clockbox {
    background: var(--mira-card-bg) !important;
    border: 1px solid var(--mira-card-border) !important;
}
.calendar caption {
    background: var(--mira-teal) !important;
    color: var(--mira-sidebar-bg) !important;
}
.calendar td a {
    color: var(--mira-text) !important;
}
.calendar td.today a {
    background: var(--mira-teal) !important;
    color: var(--mira-sidebar-bg) !important;
}

/* ---------- Buttons ---------- */
input[type="submit"],
.submit-row input,
.button, a.button {
    background: var(--mira-teal) !important;
    border: 1px solid var(--mira-teal) !important;
    color: var(--mira-sidebar-bg) !important;
    font-weight: 600;
    border-radius: 4px;
}
input[type="submit"]:hover,
.submit-row input:hover,
.button:hover, a.button:hover {
    background: var(--mira-teal-hover) !important;
    border-color: var(--mira-teal-hover) !important;
}
.submit-row {
    background: var(--mira-card-bg) !important;
    border-top: 1px solid var(--mira-card-border);
}
/* Danger / delete buttons */
.submit-row input.default {
    background: var(--mira-teal) !important;
    border-color: var(--mira-teal) !important;
}
input[type="submit"].default:hover {
    background: var(--mira-teal-hover) !important;
}
.deletelink, .deletelink:link, .deletelink:visited {
    color: var(--mira-danger) !important;
}
a.deletelink {
    background: var(--mira-danger) !important;
    border-color: var(--mira-danger) !important;
    color: #fff !important;
}

/* ---------- Messages ---------- */
.messagelist li {
    border-radius: 4px;
}
.messagelist li.success {
    background: rgba(0, 212, 170, 0.15);
    color: var(--mira-teal);
}
.messagelist li.warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--mira-warning);
}
.messagelist li.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--mira-danger);
}

/* ---------- Inline related objects ---------- */
.inline-group h2 {
    background: rgba(0, 212, 170, 0.08) !important;
    color: var(--mira-teal) !important;
}
.inline-group .tabular td {
    background: var(--mira-card-bg) !important;
    border-bottom: 1px solid var(--mira-card-border);
    color: var(--mira-text);
}
.inline-related h3 {
    background: var(--mira-card-bg) !important;
    border: 1px solid var(--mira-card-border);
    color: var(--mira-text) !important;
}

/* ---------- Related widget wrapper ---------- */
.related-widget-wrapper select {
    background: var(--mira-sidebar-bg) !important;
    color: var(--mira-text) !important;
}

/* ---------- Links ---------- */
a:link, a:visited {
    color: var(--mira-teal);
}
a:hover {
    color: var(--mira-teal-hover);
}
#content a:link, #content a:visited {
    color: var(--mira-teal);
}

/* "Add another" and related lookup links */
.add-row a, .related-lookup {
    color: var(--mira-teal) !important;
}

/* Object tools (add, history, etc.) */
.object-tools a:link, .object-tools a:visited {
    background: var(--mira-card-bg) !important;
    border: 1px solid var(--mira-card-border);
    color: var(--mira-teal) !important;
    border-radius: 4px;
}
.object-tools a:hover {
    background: var(--mira-teal) !important;
    color: var(--mira-sidebar-bg) !important;
}
.object-tools li {
    height: auto;
}

/* ---------- Recent actions (dashboard) ---------- */
#recent-actions-module h2 {
    background: var(--mira-teal) !important;
    color: var(--mira-sidebar-bg) !important;
}
#recent-actions-module {
    background: var(--mira-card-bg);
    border: 1px solid var(--mira-card-border);
}
#recent-actions-module li {
    border-bottom: 1px solid var(--mira-card-border);
    color: var(--mira-text-muted);
}
#recent-actions-module li a {
    color: var(--mira-teal) !important;
}

/* ---------- Login page ---------- */
body.login {
    background: var(--mira-sidebar-bg) !important;
}
body.login #container {
    background: transparent !important;
}
body.login #header {
    background: transparent !important;
    border-bottom: none;
}
body.login #content {
    background: var(--mira-card-bg) !important;
    border: 1px solid var(--mira-card-border);
    border-radius: 10px;
    padding: 30px !important;
}
body.login #content h1 {
    color: #fff;
}
body.login label {
    color: var(--mira-text) !important;
}
body.login .submit-row {
    background: transparent !important;
    border-top: none;
    padding: 10px 0 0 0;
}
body.login .submit-row input {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
}

/* ---------- Error list ---------- */
.errorlist li {
    color: var(--mira-danger) !important;
}
.errornote {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid var(--mira-danger) !important;
    color: var(--mira-danger) !important;
    border-radius: 4px;
}

/* ---------- Responsive overrides ---------- */
@media (prefers-color-scheme: dark) {
    /* Force dark even if browser signals light */
    :root {
        color-scheme: dark;
    }
}

/* ---------- Action bar (bottom of changelist) ---------- */
.actions {
    background: var(--mira-card-bg) !important;
    border-top: 1px solid var(--mira-card-border);
    color: var(--mira-text-muted);
}
.actions select {
    background: var(--mira-sidebar-bg) !important;
    border: 1px solid var(--mira-card-border) !important;
    color: var(--mira-text) !important;
}
.actions label {
    color: var(--mira-text-muted) !important;
}

/* ---------- Sortable header indicators ---------- */
table thead th.sorted {
    background: rgba(0, 212, 170, 0.12) !important;
}
table thead th.sorted a {
    color: #fff !important;
}

/* ---------- Misc ---------- */
.help-text, p.help {
    color: var(--mira-text-muted) !important;
}
code, pre {
    background: var(--mira-sidebar-bg);
    color: var(--mira-teal);
    border: 1px solid var(--mira-card-border);
    border-radius: 3px;
    padding: 2px 6px;
}
hr {
    border-color: var(--mira-card-border);
}

/* Override Django's dark mode variables */
html[data-theme="dark"],
:root {
    --body-bg: var(--mira-content-bg);
    --body-fg: var(--mira-text);
    --header-bg: var(--mira-sidebar-bg);
    --header-link-color: #fff;
    --breadcrumbs-bg: var(--mira-card-bg);
    --breadcrumbs-fg: var(--mira-text-muted);
    --link-fg: var(--mira-teal);
    --link-hover-color: var(--mira-teal-hover);
    --hairline-color: var(--mira-card-border);
    --border-color: var(--mira-card-border);
    --darkened-bg: var(--mira-card-bg);
    --selected-bg: rgba(0, 212, 170, 0.08);
    --selected-row: rgba(0, 212, 170, 0.05);
    --button-bg: var(--mira-teal);
    --button-fg: var(--mira-sidebar-bg);
    --default-button-bg: var(--mira-teal);
    --default-button-hover-bg: var(--mira-teal-hover);
    --close-button-bg: var(--mira-danger);
    --object-tools-bg: var(--mira-card-bg);
    --object-tools-hover-bg: var(--mira-teal);
}