/*
    Collide Enterprise Admin Theme
    Overrides Django 6.0 CSS custom properties to match the Collide design system.

    Color palette:
    - Night Ops (dark bg): #050505
    - Brass/Gold accent: #d69414 (dark), #b8780f (light)
    - Signal Green (success): #05ffc4
    - Off-white text: #ebebeb
*/

/* ============================================
   LIGHT THEME
   ============================================ */
html[data-theme="light"],
:root {
    --primary: #b8780f;
    --secondary: #b8780f;
    --accent: #d69414;
    --primary-fg: #ffffff;

    --body-fg: #1a1a1a;
    --body-bg: #ffffff;
    --body-quiet-color: #555555;
    --body-medium-color: #333333;
    --body-loud-color: #000000;

    --header-color: #1a1a1a;
    --header-branding-color: #b8780f;
    --header-bg: #ffffff;
    --header-link-color: #1a1a1a;

    --breadcrumbs-fg: #555555;
    --breadcrumbs-link-fg: #1a1a1a;
    --breadcrumbs-bg: #f5f5f5;

    --link-fg: #b8780f;
    --link-hover-color: #d69414;
    --link-selected-fg: #b8780f;

    --hairline-color: #e0e0e0;
    --border-color: #cccccc;

    --error-fg: #ba2121;

    --message-success-bg: #d4f5e9;

    --darkened-bg: #f5f5f5;
    --selected-bg: #f0e8d8;
    --selected-row: #fdf6e8;

    --button-fg: #ffffff;
    --button-bg: #b8780f;
    --button-hover-bg: #9a6400;
    --default-button-bg: #9a6400;
    --default-button-hover-bg: #b8780f;
    --close-button-bg: #555555;
    --close-button-hover-bg: #333333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --object-tools-fg: #ffffff;
    --object-tools-bg: #555555;
    --object-tools-hover-bg: #333333;

    --font-family-primary:
        "Inter",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;
    --font-family-monospace:
        "JetBrains Mono",
        ui-monospace,
        "Cascadia Mono",
        "Segoe UI Mono",
        monospace;
}

/* ============================================
   DARK THEME — explicit toggle
   ============================================ */
html[data-theme="dark"] {
    --primary: #d69414;
    --secondary: #d69414;
    --accent: #d69414;
    --primary-fg: #0a0a0a;

    --body-fg: #ebebeb;
    --body-bg: #050505;
    --body-quiet-color: #aaaaaa;
    --body-medium-color: #cccccc;
    --body-loud-color: #ffffff;

    --header-color: #ffffff;
    --header-branding-color: #d69414;
    --header-bg: #0a0a0a;
    --header-link-color: #ebebeb;

    --breadcrumbs-fg: #aaaaaa;
    --breadcrumbs-link-fg: #ebebeb;
    --breadcrumbs-bg: #0a0a0a;

    --link-fg: #d69414;
    --link-hover-color: #e8a832;
    --link-selected-fg: #b8780f;

    --hairline-color: #1f1f1f;
    --border-color: #2a2a2a;

    --error-fg: #e35f5f;

    --message-debug-bg: #1a1a1a;
    --message-info-bg: #1a2a3a;
    --message-success-bg: #0a2a1a;
    --message-warning-bg: #2a1a0a;
    --message-error-bg: #2a0a0a;

    --darkened-bg: #0a0a0a;
    --selected-bg: #1a1a0a;
    --selected-row: #1a1a0a;

    --button-fg: #0a0a0a;
    --button-bg: #d69414;
    --button-hover-bg: #e8a832;
    --default-button-bg: #b8780f;
    --default-button-hover-bg: #d69414;
    --close-button-bg: #333333;
    --close-button-hover-bg: #555555;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #e35f5f;

    --object-tools-fg: #ffffff;
    --object-tools-bg: #333333;
    --object-tools-hover-bg: #555555;

    --font-family-primary:
        "Inter",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;
    --font-family-monospace:
        "JetBrains Mono",
        ui-monospace,
        "Cascadia Mono",
        "Segoe UI Mono",
        monospace;

    color-scheme: dark;
}

/* ============================================
   DARK THEME — OS preference (auto mode)
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #d69414;
        --secondary: #d69414;
        --accent: #d69414;
        --primary-fg: #0a0a0a;

        --body-fg: #ebebeb;
        --body-bg: #050505;
        --body-quiet-color: #aaaaaa;
        --body-medium-color: #cccccc;
        --body-loud-color: #ffffff;

        --header-color: #ffffff;
        --header-branding-color: #d69414;
        --header-bg: #0a0a0a;
        --header-link-color: #ebebeb;

        --breadcrumbs-fg: #aaaaaa;
        --breadcrumbs-link-fg: #ebebeb;
        --breadcrumbs-bg: #0a0a0a;

        --link-fg: #d69414;
        --link-hover-color: #e8a832;
        --link-selected-fg: #b8780f;

        --hairline-color: #1f1f1f;
        --border-color: #2a2a2a;

        --error-fg: #e35f5f;

        --message-debug-bg: #1a1a1a;
        --message-info-bg: #1a2a3a;
        --message-success-bg: #0a2a1a;
        --message-warning-bg: #2a1a0a;
        --message-error-bg: #2a0a0a;

        --darkened-bg: #0a0a0a;
        --selected-bg: #1a1a0a;
        --selected-row: #1a1a0a;

        --button-fg: #0a0a0a;
        --button-bg: #d69414;
        --button-hover-bg: #e8a832;
        --default-button-bg: #b8780f;
        --default-button-hover-bg: #d69414;
        --close-button-bg: #333333;
        --close-button-hover-bg: #555555;
        --delete-button-bg: #ba2121;
        --delete-button-hover-bg: #e35f5f;

        --object-tools-fg: #ffffff;
        --object-tools-bg: #333333;
        --object-tools-hover-bg: #555555;

        --font-family-primary:
            "Inter",
            system-ui,
            -apple-system,
            "Segoe UI",
            Roboto,
            sans-serif;
        --font-family-monospace:
            "JetBrains Mono",
            ui-monospace,
            "Cascadia Mono",
            "Segoe UI Mono",
            monospace;

        color-scheme: dark;
    }
}

/* ============================================
   COMPONENT REFINEMENTS
   ============================================ */

/* Module headers — dark bg, gold text, no left border by default */
.module h2,
.module caption,
.inline-group h2 {
    background: var(--darkened-bg);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ============================================
   HOME DASHBOARD — module sections
   ============================================ */

/* Module container — subtle zinc border, rounded card */
#content-main.app-list .module {
    border: 1px solid var(--hairline-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Section header (caption) — flat muted bg */
#content-main.app-list .module caption {
    background: var(--darkened-bg);
    padding: 8px 16px;
    text-align: left;
}

/* No dot before section name — clean text only */
#content-main.app-list .module caption a::before {
    content: none;
}

/* Section header link — gold text */
#content-main.app-list .module caption a {
    color: var(--accent);
}

/* Home dashboard model links — white text */
#content-main .module table a {
    color: var(--body-fg);
}
#content-main .module table a:hover {
    color: var(--accent);
}

/* Input focus ring — brass glow */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(214, 148, 20, 0.25);
}

/* Nav sidebar active highlight */
#nav-sidebar .module th a.current {
    color: var(--accent);
}

/* Success messages — signal green */
.success,
ul.messagelist li.success {
    background-color: var(--message-success-bg);
}

/* Login page button */
.login input[type="submit"] {
    background: var(--button-bg);
    color: var(--button-fg);
}

.login input[type="submit"]:hover {
    background: var(--button-hover-bg);
}

/* Related widget wrapper links */
.related-widget-wrapper-link {
    color: var(--link-fg);
}

/* Calendar and date shortcuts */
.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
    color: var(--link-fg);
}

/* Breadcrumbs refinement */
#header {
    border-bottom: 1px solid #e4e4e7;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
}

#user-tools {
    align-self: flex-end;
    margin-bottom: 4px;
}

html[data-theme="dark"] #header {
    border-bottom-color: #1f1f1f;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #header {
        border-bottom-color: #1f1f1f;
    }
}

/* ============================================
   NAV SIDEBAR
   ============================================ */

/* Module cleanup — no borders/shadow in sidebar */
#nav-sidebar .module {
    border: none;
    box-shadow: none;
}

/* Sidebar section headers */
#nav-sidebar .module caption {
    padding: 8px 16px;
    text-align: left;
}

/* Sidebar section header links — gold text (override default current-app style too) */
#nav-sidebar .module caption a,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
    color: var(--accent);
}

/* Model name links — white text */
#nav-sidebar .module th a {
    color: var(--body-fg);
}

/* "+ Add" links — gold accent */
#nav-sidebar .module td a {
    color: var(--accent);
}

/* Current model row — rounded highlight, no left border */
#nav-sidebar .current-model {
    background: rgba(214, 148, 20, 0.1);
    border-radius: 6px;
}

/* ============================================
   TABLE HEADERS — muted gray text, clean style
   Note: #result_list IS the <table>, not a wrapper div
   ============================================ */
#result_list thead th {
    background: transparent;
    color: var(--body-quiet-color);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--hairline-color);
}

#result_list thead th a {
    color: var(--body-quiet-color);
}

/* Sorted/active column — normal text weight */
#result_list thead th.sorted,
#result_list thead th.sorted a {
    color: var(--body-fg);
}

/* ============================================
   ADD BUTTON (object-tools) — gold text on dark bg
   ============================================ */
.object-tools a,
.object-tools a:link,
.object-tools a:visited {
    background: var(--darkened-bg);
    color: var(--accent);
    border: 1px solid var(--hairline-color);
    border-radius: 8px;
}

.object-tools a:hover,
.object-tools a:focus {
    background: rgba(214, 148, 20, 0.1);
    color: #ffffff;
}

#result_list caption {
    background: var(--darkened-bg);
    color: var(--accent);
}

/* ============================================
   TABLE BODY TEXT
   ============================================ */
html[data-theme="dark"] #result_list tbody td {
    color: #ffffff;
}

html[data-theme="dark"] #result_list tbody td a {
    color: #d69414;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #result_list tbody td {
        color: #ffffff;
    }

    html:not([data-theme="light"]) #result_list tbody td a {
        color: #d69414;
    }
}

/* ============================================
   FILTER PANEL
   ============================================ */
#changelist-filter {
    position: relative;
    background: transparent;
    border: none;
}

/* Corner bracket accents */
#changelist-filter::before,
#changelist-filter::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

#changelist-filter::before {
    top: 0;
    left: 0;
    border-top: 2px solid #d69414;
    border-left: 2px solid #d69414;
}

#changelist-filter::after {
    top: 0;
    right: 0;
    border-top: 2px solid #d69414;
    border-right: 2px solid #d69414;
}

/* "FILTER" title — gold text + same bg as table headers */
#changelist-filter h2 {
    color: var(--accent);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    background: rgba(214, 148, 20, 0.08);
    border-bottom: 1px solid rgba(214, 148, 20, 0.3);
    padding: 5px 15px 8px;
    margin-bottom: 8px;
}

/* Section sub-headers (details summary) */
#changelist-filter details summary {
    color: var(--body-quiet-color);
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 8px 15px;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
}

/* Remove default Django arrow/marker on summary */
#changelist-filter details summary::before {
    content: none;
}
#changelist-filter details > summary::marker,
#changelist-filter details > summary::-webkit-details-marker {
    display: none;
}

/* Filter list items — bullet indicators */
#changelist-filter ul {
    padding: 0 15px;
    list-style: none;
}

#changelist-filter li {
    padding: 4px 0 4px 0;
}

#changelist-filter li a::before {
    content: "\25CB";
    color: var(--body-quiet-color);
    margin-right: 8px;
    font-size: 0.6rem;
    vertical-align: middle;
}

/* Selected item — filled gold bullet + gold text */
#changelist-filter li.selected a {
    color: var(--accent);
    font-weight: 600;
}

#changelist-filter li.selected a::before {
    content: "\25CF";
    color: var(--accent);
}

/* ============================================
   HEADER LOGO
   ============================================ */
#site-name {
    display: flex;
    align-items: center;
}

#site-name a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

#site-name .collide-logo {
    height: 36px;
    width: auto;
    margin: 12px 0;
}

/* Light theme: show light logo (black text), hide dark logo */
#site-name .collide-logo-light {
    display: inline-block;
}
#site-name .collide-logo-dark {
    display: none;
}

/* Dark theme: show dark logo (white text), hide light logo */
html[data-theme="dark"] #site-name .collide-logo-light {
    display: none;
}
html[data-theme="dark"] #site-name .collide-logo-dark {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #site-name .collide-logo-light {
        display: none;
    }
    html:not([data-theme="light"]) #site-name .collide-logo-dark {
        display: inline-block;
    }
}