/* ==========================================================================
   Flekni – Django Admin Custom Branding
   Overrides the default Django admin CSS variables.
   Brand Colors:
     Primary:   #4fde5c  (green)
     Dark:      #1a1a1a  (near black)
     Light BG:  #f9f9f9  (off-white)
   ========================================================================== */

/* ---------- Root variable overrides ---------- */
:root {
    --primary: #4fde5c !important;
    --secondary: #1a1a1a !important;
    --accent: #3cc94a !important;
    --primary-fg: #1a1a1a !important;

    --link-fg: #2ea038 !important;
    --link-hover-color: #1a8a26 !important;
    --link-selected-fg: #1a8a26 !important;

    --button-fg: #1a1a1a !important;
    --button-bg: #4fde5c !important;
    --button-hover-bg: #3cc94a !important;
    --default-button-fg: #1a1a1a !important;
    --default-button-bg: #4fde5c !important;
    --default-button-hover-bg: #3cc94a !important;

    --header-color: #fff !important;
    --header-branding-color: #fff !important;
    --header-bg: #1a1a1a !important;
    --header-link-color: #fff !important;

    --breadcrumbs-fg: #fff !important;
    --breadcrumbs-link-fg: #c8ffc9 !important;
    --breadcrumbs-bg: #2d2d2d !important;

    --body-bg: #f9f9f9 !important;
    --body-quiet-color: #555 !important;
    --body-loud-color: #1a1a1a !important;

    --darkened-bg: #f0f0f0 !important;
    --selected-bg: #e2f7e3 !important;
    --selected-row: #e8f9e9 !important;

    --object-tools-fg: #fff !important;
    --object-tools-bg: #1a1a1a !important;
    --object-tools-hover-bg: #333 !important;

    --close-button-bg: #767676 !important;
    --close-button-hover-bg: #555 !important;
    --delete-button-bg: #ba2121 !important;
    --delete-button-hover-bg: #a41515 !important;
}

/* ---------- Header ---------- */
#header {
    background: #1a1a1a !important;
}

#header a:link,
#header a:visited {
    color: #fff !important;
}

/* ---------- Breadcrumbs ---------- */
div.breadcrumbs {
    background: #2d2d2d !important;
    color: #fff !important;
}

div.breadcrumbs a {
    color: #c8ffc9 !important;
}

/* ---------- Module headers ---------- */
.module h2,
.module caption,
.inline-group h2 {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* ---------- Submit row ---------- */
.submit-row {
    background: #f0f0f0 !important;
    border-top: 2px solid #4fde5c !important;
}

.submit-row input[type="submit"],
.submit-row input.default {
    background: #4fde5c !important;
    border-color: #3cc94a !important;
    color: #1a1a1a !important;
    font-weight: 600;
}

.submit-row input[type="submit"]:hover,
.submit-row input.default:hover {
    background: #3cc94a !important;
}

/* ---------- Object tools (View on site, History etc.) ---------- */
.object-tools a,
.object-tools a:link,
.object-tools a:visited {
    background: #1a1a1a !important;
    color: #fff !important;
}

.object-tools a:hover {
    background: #333 !important;
}

/* ---------- Links ---------- */
a:link,
a:visited {
    color: #2ea038;
}

a:hover {
    color: #1a8a26;
}

/* ---------- Changelist toolbar ---------- */
#changelist #toolbar {
    border-bottom: 2px solid #4fde5c;
}

/* ---------- Active filter ---------- */
#changelist-filter li.selected a {
    color: #2ea038 !important;
    font-weight: 700;
}

/* ---------- Calendar nav ---------- */
.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
    background: #4fde5c !important;
}

/* ---------- Delete confirmation ---------- */
.delete-confirmation .cancel-link {
    color: #2ea038 !important;
}

/* ---------- Related widget links ---------- */
.related-widget-wrapper-link {
    color: #2ea038 !important;
}

/* ---------- Tab focus ring ---------- */
:focus-visible {
    outline-color: #4fde5c !important;
}

/* ---------- Selected actions ---------- */
.actions .button {
    background: #4fde5c !important;
    color: #1a1a1a !important;
    border: 1px solid #3cc94a !important;
}

.actions .button:hover {
    background: #3cc94a !important;
}

/* ---------- Help text ---------- */
.help,
p.help,
span.help {
    color: #666;
}

/* ==========================================================================
   DARK MODE
   Django admin uses [data-theme="dark"] on <html> when toggled.
   ========================================================================== */
[data-theme="dark"] {
    --primary: #4fde5c !important;
    --secondary: #f0f0f0 !important;
    --accent: #5be96a !important;
    --primary-fg: #1a1a1a !important;

    --body-fg: #e0e0e0 !important;
    --body-bg: #121212 !important;
    --body-quiet-color: #999 !important;
    --body-loud-color: #f0f0f0 !important;

    --link-fg: #5be96a !important;
    --link-hover-color: #7af087 !important;
    --link-selected-fg: #4fde5c !important;

    --button-fg: #1a1a1a !important;
    --button-bg: #4fde5c !important;
    --button-hover-bg: #3cc94a !important;
    --default-button-fg: #1a1a1a !important;
    --default-button-bg: #4fde5c !important;
    --default-button-hover-bg: #3cc94a !important;

    --header-color: #fff !important;
    --header-branding-color: #fff !important;
    --header-bg: #0d0d0d !important;
    --header-link-color: #fff !important;

    --breadcrumbs-fg: #e0e0e0 !important;
    --breadcrumbs-link-fg: #5be96a !important;
    --breadcrumbs-bg: #1a1a1a !important;

    --darkened-bg: #1e1e1e !important;
    --selected-bg: #1a3d1d !important;
    --selected-row: #1a3d1d !important;

    --object-tools-fg: #fff !important;
    --object-tools-bg: #2a2a2a !important;
    --object-tools-hover-bg: #3a3a3a !important;

    --close-button-bg: #555 !important;
    --close-button-hover-bg: #666 !important;
    --delete-button-bg: #ba2121 !important;
    --delete-button-hover-bg: #d32f2f !important;

    --hairline-color: #333 !important;
    --border-color: #444 !important;

    --error-fg: #ff6b6b !important;
    --message-success-bg: #1a3d1d !important;
    --message-warning-bg: #4a3c00 !important;
    --message-error-bg: #3d1a1a !important;
}

/* ---------- Dark: Header ---------- */
[data-theme="dark"] #header {
    background: #0d0d0d !important;
}

/* ---------- Dark: Breadcrumbs ---------- */
[data-theme="dark"] div.breadcrumbs {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
}

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

/* ---------- Dark: Body ---------- */
[data-theme="dark"] body {
    background: #121212 !important;
    color: #e0e0e0 !important;
}

/* ---------- Dark: Module headers ---------- */
[data-theme="dark"] .module h2,
[data-theme="dark"] .module caption,
[data-theme="dark"] .inline-group h2 {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* ---------- Dark: Module body ---------- */
[data-theme="dark"] .module {
    background: #1e1e1e !important;
    border-color: #333 !important;
}

/* ---------- Dark: Form rows ---------- */
[data-theme="dark"] .form-row {
    border-bottom-color: #333 !important;
}

[data-theme="dark"] .form-row:hover {
    background: #252525 !important;
}

/* ---------- Dark: Input fields ---------- */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* ---------- Dark: Submit row ---------- */
[data-theme="dark"] .submit-row {
    background: #1a1a1a !important;
    border-top: 2px solid #4fde5c !important;
}

/* ---------- Dark: Links ---------- */
[data-theme="dark"] a:link,
[data-theme="dark"] a:visited {
    color: #5be96a;
}

[data-theme="dark"] a:hover {
    color: #7af087;
}

/* ---------- Dark: Changelist table ---------- */
[data-theme="dark"] #result_list tbody tr:nth-child(odd) {
    background: #1a1a1a !important;
}

[data-theme="dark"] #result_list tbody tr:nth-child(even) {
    background: #1e1e1e !important;
}

[data-theme="dark"] #result_list tbody tr:hover {
    background: #252525 !important;
}

[data-theme="dark"] #result_list th {
    background: #1e1e1e !important;
    border-color: #333 !important;
}

/* ---------- Dark: Filters sidebar ---------- */
[data-theme="dark"] #changelist-filter {
    background: #1e1e1e !important;
}

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

[data-theme="dark"] #changelist-filter li.selected a {
    color: #5be96a !important;
}

/* ---------- Dark: Calendar & date shortcuts ---------- */
[data-theme="dark"] .calendarbox,
[data-theme="dark"] .calendar td,
[data-theme="dark"] .timelist {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
}

/* ---------- Dark: Related-widget popups ---------- */
[data-theme="dark"] .related-widget-wrapper-link {
    color: #5be96a !important;
}

/* ---------- Dark: Help text ---------- */
[data-theme="dark"] .help,
[data-theme="dark"] p.help,
[data-theme="dark"] span.help {
    color: #999 !important;
}

/* ---------- Dark: Object tools ---------- */
[data-theme="dark"] .object-tools a,
[data-theme="dark"] .object-tools a:link,
[data-theme="dark"] .object-tools a:visited {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
}

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

/* ---------- Dark: Actions bar ---------- */
[data-theme="dark"] .actions {
    background: #1a1a1a !important;
}

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

/* ---------- Dark: Dashboard modules ---------- */
[data-theme="dark"] .dashboard #content {
    background: #121212 !important;
}

[data-theme="dark"] caption {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] th {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

[data-theme="dark"] td {
    border-color: #333 !important;
}

/* ==========================================================================
   AUTO MODE – @media (prefers-color-scheme: dark)
   When set to "Auto", Django doesn't add [data-theme="dark"]. Instead it
   relies on the OS / browser preference. We duplicate the dark overrides
   here, scoped to [data-theme="auto"] + prefers-color-scheme.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --primary: #4fde5c !important;
        --secondary: #f0f0f0 !important;
        --accent: #5be96a !important;
        --primary-fg: #1a1a1a !important;

        --body-fg: #e0e0e0 !important;
        --body-bg: #121212 !important;
        --body-quiet-color: #999 !important;
        --body-loud-color: #f0f0f0 !important;

        --link-fg: #5be96a !important;
        --link-hover-color: #7af087 !important;
        --link-selected-fg: #4fde5c !important;

        --button-fg: #1a1a1a !important;
        --button-bg: #4fde5c !important;
        --button-hover-bg: #3cc94a !important;
        --default-button-fg: #1a1a1a !important;
        --default-button-bg: #4fde5c !important;
        --default-button-hover-bg: #3cc94a !important;

        --header-color: #fff !important;
        --header-branding-color: #fff !important;
        --header-bg: #0d0d0d !important;
        --header-link-color: #fff !important;

        --breadcrumbs-fg: #e0e0e0 !important;
        --breadcrumbs-link-fg: #5be96a !important;
        --breadcrumbs-bg: #1a1a1a !important;

        --darkened-bg: #1e1e1e !important;
        --selected-bg: #1a3d1d !important;
        --selected-row: #1a3d1d !important;

        --object-tools-fg: #fff !important;
        --object-tools-bg: #2a2a2a !important;
        --object-tools-hover-bg: #3a3a3a !important;

        --close-button-bg: #555 !important;
        --close-button-hover-bg: #666 !important;
        --delete-button-bg: #ba2121 !important;
        --delete-button-hover-bg: #d32f2f !important;

        --hairline-color: #333 !important;
        --border-color: #444 !important;

        --error-fg: #ff6b6b !important;
        --message-success-bg: #1a3d1d !important;
        --message-warning-bg: #4a3c00 !important;
        --message-error-bg: #3d1a1a !important;
    }

    /* Auto: Header */
    [data-theme="auto"] #header {
        background: #0d0d0d !important;
    }

    /* Auto: Breadcrumbs */
    [data-theme="auto"] div.breadcrumbs {
        background: #1a1a1a !important;
        color: #e0e0e0 !important;
    }

    [data-theme="auto"] div.breadcrumbs a {
        color: #5be96a !important;
    }

    /* Auto: Body */
    [data-theme="auto"] body {
        background: #121212 !important;
        color: #e0e0e0 !important;
    }

    /* Auto: Module headers & body */
    [data-theme="auto"] .module h2,
    [data-theme="auto"] .module caption,
    [data-theme="auto"] .inline-group h2 {
        background: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

    [data-theme="auto"] .module {
        background: #1e1e1e !important;
        border-color: #333 !important;
    }

    /* Auto: Form rows */
    [data-theme="auto"] .form-row {
        border-bottom-color: #333 !important;
    }

    [data-theme="auto"] .form-row:hover {
        background: #252525 !important;
    }

    /* Auto: Input fields */
    [data-theme="auto"] input[type="text"],
    [data-theme="auto"] input[type="password"],
    [data-theme="auto"] input[type="email"],
    [data-theme="auto"] input[type="url"],
    [data-theme="auto"] input[type="number"],
    [data-theme="auto"] textarea,
    [data-theme="auto"] select {
        background: #2a2a2a !important;
        color: #e0e0e0 !important;
        border-color: #444 !important;
    }

    /* Auto: Submit row */
    [data-theme="auto"] .submit-row {
        background: #1a1a1a !important;
        border-top: 2px solid #4fde5c !important;
    }

    /* Auto: Links */
    [data-theme="auto"] a:link,
    [data-theme="auto"] a:visited {
        color: #5be96a;
    }

    [data-theme="auto"] a:hover {
        color: #7af087;
    }

    /* Auto: Changelist table */
    [data-theme="auto"] #result_list tbody tr:nth-child(odd) {
        background: #1a1a1a !important;
    }

    [data-theme="auto"] #result_list tbody tr:nth-child(even) {
        background: #1e1e1e !important;
    }

    [data-theme="auto"] #result_list tbody tr:hover {
        background: #252525 !important;
    }

    [data-theme="auto"] #result_list th {
        background: #1e1e1e !important;
        border-color: #333 !important;
    }

    /* Auto: Filters sidebar */
    [data-theme="auto"] #changelist-filter {
        background: #1e1e1e !important;
    }

    [data-theme="auto"] #changelist-filter h2 {
        color: #e0e0e0 !important;
    }

    [data-theme="auto"] #changelist-filter li.selected a {
        color: #5be96a !important;
    }

    /* Auto: Calendar */
    [data-theme="auto"] .calendarbox,
    [data-theme="auto"] .calendar td,
    [data-theme="auto"] .timelist {
        background: #2a2a2a !important;
        color: #e0e0e0 !important;
    }

    /* Auto: Related widget, help, object tools */
    [data-theme="auto"] .related-widget-wrapper-link {
        color: #5be96a !important;
    }

    [data-theme="auto"] .help,
    [data-theme="auto"] p.help,
    [data-theme="auto"] span.help {
        color: #999 !important;
    }

    [data-theme="auto"] .object-tools a,
    [data-theme="auto"] .object-tools a:link,
    [data-theme="auto"] .object-tools a:visited {
        background: #2a2a2a !important;
        color: #e0e0e0 !important;
    }

    [data-theme="auto"] .object-tools a:hover {
        background: #3a3a3a !important;
    }

    /* Auto: Actions bar */
    [data-theme="auto"] .actions {
        background: #1a1a1a !important;
    }

    [data-theme="auto"] .actions label,
    [data-theme="auto"] .actions span {
        color: #e0e0e0 !important;
    }

    /* Auto: Tables */
    [data-theme="auto"] caption {
        background: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

    [data-theme="auto"] th {
        background: #1a1a1a !important;
        color: #e0e0e0 !important;
        border-color: #333 !important;
    }

    [data-theme="auto"] td {
        border-color: #333 !important;
    }
}