@layer base {
    body {
        background: var(--oc-bg);
        color: var(--oc-ink);
    }

    #content {
        color: var(--oc-ink);
    }

    #container,
    #main,
    #content-main,
    .module,
    fieldset.module,
    .inline-group,
    .inline-related,
    .form-row,
    .form-row label,
    .form-row .help,
    .form-row .readonly,
    #changelist-filter,
    #changelist-filter a,
    #changelist-filter li,
    .results,
    .results table,
    .results td,
    .results th,
    #result_list td,
    #result_list th {
        color: var(--oc-ink);
    }

    #changelist-filter {
        box-shadow: var(--oc-shadow-1, 0 4px 12px rgba(16, 24, 40, .08));
    }

    /* Kill blue admin bars: header/breadcrumbs + section captions */
    #header {
        background: rgba(255, 255, 255, .02);
        border-bottom: 1px solid var(--oc-border);
    }

    #header,
    #header a,
    #header a:visited {
        color: var(--oc-ink);
    }

    #branding h1,
    #site-name {
        font-weight: 800;
        letter-spacing: .2px;
    }

    div.breadcrumbs {
        background: rgba(255, 255, 255, .02);
        border-bottom: 1px solid var(--oc-border);
        color: var(--oc-muted);
    }

    div.breadcrumbs a {
        color: var(--oc-ink);
        text-decoration: underline;
    }

    /* Light theme corrections */
    html[data-oc-theme="light"] #header,
    html[data-oc-theme="light"] div.breadcrumbs,
    html[data-oc-theme="light"] #nav-sidebar {
        background: rgba(255, 255, 255, .95);
        border-color: var(--oc-border-weak, rgba(16, 24, 40, .10));
        color: var(--oc-ink);
    }

    /* Nav Sidebar overrides */
    #nav-sidebar .module caption,
    #nav-sidebar .module h2,
    #nav-sidebar .module h3 {
        background: rgba(255, 255, 255, .04);
        color: var(--oc-ink);
        border: 1px solid var(--oc-border);
        border-radius: var(--oc-radius-m, 10px);
        padding: 10px 12px;
    }

    #nav-sidebar,
    .toggle-nav-sidebar {
        border-right: 1px solid var(--oc-border);
    }

    .toggle-nav-sidebar {
        background: rgba(255, 255, 255, .04);
        border: 1px solid var(--oc-border);
        border-radius: var(--oc-radius-m, 10px);
    }

    #user-tools .theme-toggle,
    #user-tools .theme-toggle svg,
    #user-tools button[title*="theme"],
    #user-tools a[title*="theme"] {
        display: none;
        /* Hide default theme switcher to support OC dots */
    }

    /* Hide custom injected table controls in sidebar */
    #nav-sidebar .oc-table-controls,
    #nav-sidebar .table-resizer-controls,
    #nav-sidebar .oc-table-btn {
        display: none;
    }
}

/* Unlayered Light-specific hierarchy/separation tweaks (must outrank Django admin defaults). */
html[data-oc-theme="light"] #content {
    background: var(--oc-surface-subtle, rgba(244, 247, 252, .96));
}

html[data-oc-theme="light"] #content-main {
    background: var(--oc-surface-raised, #fff);
    border: 1px solid var(--oc-border-weak, rgba(16, 24, 40, .10));
    border-radius: var(--oc-radius-l, 14px);
    box-shadow: var(--oc-shadow-1, 0 2px 10px rgba(16, 24, 40, .05));
}

/* Login panel needs an explicit opaque surface in every theme. */
body.login #content-main {
    background: var(--oc-surface-raised, var(--oc-panel));
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-l, 14px);
    box-shadow: var(--oc-shadow-2, 0 10px 30px rgba(16, 24, 40, .12));
}

html[data-oc-theme="light"] .module,
html[data-oc-theme="light"] fieldset.module,
html[data-oc-theme="light"] .inline-group,
html[data-oc-theme="light"] .inline-related,
html[data-oc-theme="light"] .changelist-form-container,
html[data-oc-theme="light"] .changelist-form,
html[data-oc-theme="light"] .results {
    background: var(--oc-surface-raised, #fff);
    border-color: var(--oc-border-strong, rgba(16, 24, 40, .18));
    box-shadow: var(--oc-shadow-2, 0 8px 24px rgba(16, 24, 40, .08));
}

html[data-oc-theme="light"] .module h2,
html[data-oc-theme="light"] .module h3,
html[data-oc-theme="light"] .module caption,
html[data-oc-theme="light"] .inline-group h2,
html[data-oc-theme="light"] .inline-related h2,
html[data-oc-theme="light"] .inline-related h3,
html[data-oc-theme="light"] #changelist-filter h2,
html[data-oc-theme="light"] #changelist-filter h3 {
    background: var(--oc-surface-subtle, rgba(244, 247, 252, .96));
    color: var(--oc-ink);
    border-color: var(--oc-border-strong, rgba(16, 24, 40, .18));
}

html[data-oc-theme="light"] .form-row {
    border-bottom-color: var(--oc-border-weak, rgba(16, 24, 40, .10));
}

html[data-oc-theme="light"] .form-row:last-child {
    border-bottom-color: transparent;
}

html[data-oc-theme="light"] #changelist-filter {
    background: var(--oc-surface-raised, #fff);
    box-shadow: inset 0 0 0 1px var(--oc-border-strong, rgba(16, 24, 40, .18)), var(--oc-shadow-1, 0 2px 10px rgba(16, 24, 40, .05));
}

html[data-oc-theme="light"] #changelist-filter li {
    border-color: var(--oc-border-weak, rgba(16, 24, 40, .08));
}

html[data-oc-theme="light"] #changelist-filter li.selected,
html[data-oc-theme="light"] #changelist-filter li.selected a {
    color: var(--oc-ink);
    font-weight: 700;
}

html[data-oc-theme="light"] #changelist .results,
html[data-oc-theme="light"] #changelist .results table,
html[data-oc-theme="light"] #result_list {
    background: var(--oc-surface-raised, #fff);
}

html[data-oc-theme="light"] #result_list thead th,
html[data-oc-theme="light"] .results thead th {
    background: var(--oc-table-head-bg, rgba(241, 245, 251, .98));
    color: rgba(16, 24, 40, .86);
    border-bottom-color: var(--oc-border-strong, rgba(16, 24, 40, .18));
}

html[data-oc-theme="light"] #result_list tbody td,
html[data-oc-theme="light"] #result_list tbody th,
html[data-oc-theme="light"] .results tbody td,
html[data-oc-theme="light"] .results tbody th {
    background: rgba(255, 255, 255, .98);
    border-bottom-color: var(--oc-border-weak, rgba(16, 24, 40, .08));
}

html[data-oc-theme="light"] #result_list tbody tr:nth-child(even) td,
html[data-oc-theme="light"] #result_list tbody tr:nth-child(even) th {
    background: var(--oc-table-row-alt-bg, rgba(248, 250, 253, .96));
}

html[data-oc-theme="light"] #result_list tbody tr:hover td,
html[data-oc-theme="light"] #result_list tbody tr:hover th {
    background: var(--oc-table-row-hover-bg, rgba(37, 99, 235, .045));
}
/* Orders changelist: density + scanability (scoped, no layout shifts). */
#changelist[data-oc-orders-list="1"] #result_list {
    line-height: 1.4;
}

#changelist[data-oc-orders-list="1"] #result_list thead th {
    padding-top: 9px;
    padding-bottom: 9px;
}

#changelist[data-oc-orders-list="1"] #result_list tbody td,
#changelist[data-oc-orders-list="1"] #result_list tbody th {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.4;
}

#changelist[data-oc-orders-list="1"] #result_list tbody tr:nth-child(even) td,
#changelist[data-oc-orders-list="1"] #result_list tbody tr:nth-child(even) th {
    background: var(--oc-table-row-alt-bg, rgba(255, 255, 255, .02));
}

#changelist[data-oc-orders-list="1"] #result_list tbody tr:hover td,
#changelist[data-oc-orders-list="1"] #result_list tbody tr:hover th {
    background: var(--oc-table-row-hover-bg, rgba(255, 255, 255, .05));
}

#changelist[data-oc-orders-list="1"].oc-density-compact #result_list thead th {
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 1.3;
}

#changelist[data-oc-orders-list="1"].oc-density-compact #result_list tbody td,
#changelist[data-oc-orders-list="1"].oc-density-compact #result_list tbody th {
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.3;
}

/* Orders changelist: sidebar filters ergonomics (scoped, styles only). */
#changelist[data-oc-orders-list="1"] #changelist-filter {
    padding: 0 0 8px;
}

#changelist[data-oc-orders-list="1"] #changelist-filter h2 {
    margin: 0;
    padding: 10px 12px;
}

#changelist[data-oc-orders-list="1"] #changelist-filter h3 {
    margin: 8px 0 2px;
    padding: 8px 12px 6px;
    font-weight: var(--oc-type-section-weight, 600);
}

#changelist[data-oc-orders-list="1"] #changelist-filter ul {
    margin: 0;
    padding: 0 8px 6px;
}

#changelist[data-oc-orders-list="1"] #changelist-filter li {
    margin: 2px 0;
    border-radius: var(--oc-radius-s, 6px);
}

#changelist[data-oc-orders-list="1"] #changelist-filter li > a {
    display: block;
    padding: 5px 10px;
    border-radius: inherit;
    text-decoration: none;
    transition: background-color .12s ease, box-shadow .12s ease;
}

#changelist[data-oc-orders-list="1"] #changelist-filter li > a:hover,
#changelist[data-oc-orders-list="1"] #changelist-filter li > a:focus-visible {
    background: var(--oc-table-row-hover-bg, rgba(255, 255, 255, .05));
}

#changelist[data-oc-orders-list="1"] #changelist-filter li.selected {
    background: var(--selected-row, rgba(109, 40, 217, .10));
    box-shadow: inset 3px 0 0 var(--oc-accent2, #2563eb);
}

#changelist[data-oc-orders-list="1"] #changelist-filter li.selected,
#changelist[data-oc-orders-list="1"] #changelist-filter li.selected > a {
    font-weight: 600;
}

/* Orders change_form: section hierarchy and primary action ergonomics (scoped). */
body.app-orders.model-order.change-form #content-main #order_form .submit-row {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--oc-surface-raised, var(--oc-panel));
    border: 1px solid var(--oc-border-strong, var(--oc-border));
    border-radius: var(--oc-radius-m, 10px);
    box-shadow: var(--oc-shadow-1, 0 4px 12px rgba(16, 24, 40, .08));
}

body.app-orders.model-order.change-form #content-main #order_form .submit-row a,
body.app-orders.model-order.change-form #content-main #order_form .submit-row input {
    font-weight: 600;
}

body.app-orders.model-order.change-form #content-main #order_form fieldset.module,
body.app-orders.model-order.change-form #content-main #order_form .inline-group {
    margin-block: 10px;
    background: var(--oc-panel);
    border-color: var(--oc-border);
}

body.app-orders.model-order.change-form #content-main #order_form fieldset.module.oc-tab-basic,
body.app-orders.model-order.change-form #content-main #order_form #items-group,
body.app-orders.model-order.change-form #content-main #order_form #items-group > fieldset.module {
    background: var(--oc-surface-raised, var(--oc-panel));
    border-color: var(--oc-border-strong, var(--oc-border));
    box-shadow: var(--oc-shadow-1, 0 4px 12px rgba(16, 24, 40, .08));
}

/* Unlayered typography hierarchy: override Django defaults consistently across themes. */
:root,
html[data-oc-theme] {
    --oc-type-page-size: 24px;
    --oc-type-page-weight: 600;
    --oc-type-page-line-height: 1.3;

    --oc-type-section-size: 14px;
    --oc-type-section-weight: 600;
    --oc-type-section-line-height: 1.35;

    --oc-type-minor-size: 12px;
    --oc-type-minor-weight: 600;
    --oc-type-minor-line-height: 1.35;
}

#content h1,
#content-main h1,
.content h1 {
    font-size: var(--oc-type-page-size);
    font-weight: var(--oc-type-page-weight);
    line-height: var(--oc-type-page-line-height);
    letter-spacing: 0;
    text-transform: none;
}

.module h2,
.module h3,
.module caption,
.inline-group h2,
.inline-related h2,
.inline-related h3,
#changelist-filter h2,
#changelist-filter h3,
.filter-title {
    font-size: var(--oc-type-section-size);
    font-weight: var(--oc-type-section-weight);
    line-height: var(--oc-type-section-line-height);
    letter-spacing: 0;
    text-transform: none;
}

#result_list thead th,
.results thead th {
    font-size: var(--oc-type-minor-size);
    font-weight: var(--oc-type-minor-weight);
    line-height: var(--oc-type-minor-line-height);
    letter-spacing: 0;
    text-transform: none;
}