/* Company Design Tokens for Django Admin */
:root {
    /* Colors - Brand & Functional */
    --primary-color: #FEC437;
    /* $ob-bg-brand-normal */
    --primary-text: #273240;
    /* $ob-text-primary */
    --secondary-color: #4E4076;
    /* $ob-background-inverse, $ob-border-hover */
    --accent-color: #0C83D9;
    /* $ob-support-info */

    /* Backgrounds */
    --bg-system: #FCFCFC;
    /* $ob-background-gray50 */
    --bg-card: #F5F5F5;
    /* $ob-background-gray100 */
    --bg-hover: #EDEDED;
    /* $ob-background-gray200 */
    --bg-header: var(--primary-color);

    /* Text */
    --text-primary: #273240;
    /* $ob-text-primary */
    --text-secondary: #707070;
    /* Assuming distinct from primary, or use Gray800 */
    --text-disabled: #273240;
    /* $ob-text-disabled (Same val in token sheet, but logically distinct) */
    --text-link: #0C83D9;
    /* $ob-support-info (Blue) */

    /* Borders */
    /*--border-color: #C5C5C5;*/
    /* $ob-border-default */
    /*--border-input: #C5C5C5;*/
    /* $ob-background-gray400 (Input borders) */

    /* Support/Status */
    --success-color: #4BAF4F;
    /* $ob-support-success */
    --warning-color: #FDBA01;
    /* $ob-support-warning */
    --error-color: #FF0000;
    /* $ob-support-error (Red 1) */

    /* Django Admin Variable Overrides */
    --header-bg: var(--bg-header);
    --header-color: var(--primary-text);
    --header-link-color: var(--primary-text);

    --primary-button-bg: var(--primary-color);
    --primary-button-hover-bg: #F5AF04;
    /* $ob-bg-brand-dark */
    --secondary-button-bg: var(--secondary-color);

    --body-bg: var(--bg-system);
    --body-fg: var(--text-primary);

    --link-fg: var(--text-link);
    --link-hover-color: #0a6eb5;
    /* Darker blue */
    --link-selected-fg: #0a6eb5;

    --sidebar-bg: var(--bg-card);
    --menu-bg: var(--bg-card);

    --object-tools-bg: var(--bg-card);
    --object-tools-fg: var(--text-link);
    --object-tools-hover-bg: var(--bg-hover);
}

/* Global Overrides */
body {
    background-color: var(--body-bg) !important;
    color: var(--body-fg) !important;
}

/* Header */
#header {
    background: var(--header-bg) !important;
    color: var(--header-color) !important;
    border-bottom: 2px solid var(--secondary-color);
}

#header a:link,
#header a:visited {
    color: var(--header-color) !important;
}

#branding h1 {
    color: var(--header-color) !important;
}

/* Modules / Dashboard Cards */
.module {
    /*background: var(--bg-card) !important;*/
    /*border: 1px solid var(--border-color);*/
    /*border-radius: 4px;*/
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.module caption,
.module h2 {
    background: var(--bg-hover) !important;
    /* Slightly darker header for modules */
    color: var(--text-primary) !important;
}

/* Buttons */
.button,
input[type=submit],
input[type=button],
.submit-row input,
.object-tools a {
    background: var(--secondary-button-bg);
    color: #ffffff;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.2s;
}

.button:hover,
input[type=submit]:hover,
input[type=button]:hover {
    background: #403565;
    /* Darker purple */
}

/* Primary Action Buttons (Save, etc) using Brand Yellow */
.submit-row input[type=submit].default,
.submit-row input[name="_save"] {
    background: var(--primary-button-bg) !important;
    color: var(--primary-text) !important;
}

.submit-row input[type=submit].default:hover,
.submit-row input[name="_save"]:hover {
    background: var(--primary-button-hover-bg) !important;
}

/* Inputs */
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
textarea,
select,
.vTextField {
    border: 1px solid var(--border-input) !important;
    border-radius: 3px;
    background: #FFFFFF;
    /* $ob-field-default: White */
    color: var(--text-primary);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--secondary-color) !important;
    outline: none;
}

/* Links */
a:link,
a:visited {
    color: var(--link-fg);
}

/* Changelist Table */
#changelist table thead th {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

#changelist table tbody tr.row1 {
    background: #FFFFFF;
}

#changelist table tbody tr.row2 {
    background: var(--bg-system);
}

#changelist table tbody tr:hover {
    background: #fdf6e3;
    /* Light warm hover */
}

/* Sidebar / Nav */
#nav-sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border-color);
}

/* Dark Mode Overrides */
[data-theme="dark"] {
    /* Invert Colors for Dark Mode */
    --primary-text: #FFFFFF;
    /* White text for header/primary buttons */
    --bg-system: #121212;
    /* Very dark gray */
    --bg-card: #1E1E1E;
    /* Dark gray for cards */
    --bg-hover: #2C2C2C;
    /* Lighter gray for hover */

    --text-primary: #E0E0E0;
    /* Light gray text */
    --text-secondary: #B0B0B0;
    --text-link: #4FC3F7;
    /* Light blue for links */

    --border-color: #333333;
    --border-input: #444444;

    /* Re-apply variables that depend on the above */
    --header-color: var(--primary-text);
    --header-link-color: var(--primary-text);
    --body-bg: var(--bg-system);
    --body-fg: var(--text-primary);
    --link-fg: var(--text-link);
    --sidebar-bg: var(--bg-card);
    --menu-bg: var(--bg-card);
    --object-tools-bg: var(--bg-card);
    --object-tools-fg: var(--text-link);
}

/* Specific Dark Mode Element Overrides */
[data-theme="dark"] .module {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
}

[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,
[data-theme="dark"] .vTextField {
    background: #2D2D2D;
    color: #FFFFFF;
    border-color: var(--border-input) !important;
}

[data-theme="dark"] #changelist table tbody tr.row1 {
    background: #1E1E1E;
    /* Dark card bg */
}

[data-theme="dark"] #changelist table tbody tr.row2 {
    background: #121212;
    /* System bg */
}

[data-theme="dark"] #changelist table tbody tr:hover {
    background: #333333;
}

[data-theme="dark"] .module caption,
[data-theme="dark"] .module h2 {
    background: #2C2C2C !important;
    color: #FFFFFF !important;
}