@layer components {

    /* Replaces scattered component styles (modules, buttons, tabs, object-tools, etc.) */
    .module,
    fieldset.module,
    .inline-group,
    .inline-related,
    .dashboard .module,
    .oc-card,
    .oc-panel,
    .changelist-form-container,
    .changelist-form,
    .results,
    .oc-topbar {
        background: 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));
    }

    /* Tabs / pill row */
    .tabs a,
    .tabs li,
    .object-tools a {
        background: rgba(255, 255, 255, .04);
        border: 1px solid var(--oc-border);
        color: var(--oc-ink);
        border-radius: var(--oc-radius-m, 10px);
    }

    html[data-oc-theme="light"] .tabs a,
    html[data-oc-theme="light"] .object-tools a {
        background: #ffffff;
    }

    .tabs a.selected {
        border-color: rgba(167, 139, 250, .30);
        background: rgba(167, 139, 250, .10);
    }

    /* Inputs */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        background: var(--oc-bg-input);
        border: 1px solid var(--oc-border);
        color: var(--oc-ink);
        border-radius: var(--oc-radius-s, 6px);
    }

    html[data-oc-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
    html[data-oc-theme="light"] select,
    html[data-oc-theme="light"] textarea {
        background: #ffffff;
        border-color: var(--oc-border-strong, rgba(16, 24, 40, .18));
    }

    /* Date/time shortcut icons */
    .datetimeshortcuts a {
        color: var(--oc-ink);
    }

    html[data-oc-theme="dark"] .datetimeshortcuts .clock-icon,
    html[data-oc-theme="graphite"] .datetimeshortcuts .clock-icon,
    html[data-oc-theme="galaxy"] .datetimeshortcuts .clock-icon,
    html[data-oc-theme="dark"] .datetimeshortcuts .date-icon,
    html[data-oc-theme="graphite"] .datetimeshortcuts .date-icon,
    html[data-oc-theme="galaxy"] .datetimeshortcuts .date-icon {
        filter: invert(1) saturate(0) brightness(1.2);
        opacity: .85;
    }

    /* Theme Switcher Dots (oc-theme-switch) */
    .oc-theme-switch {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-left: 10px;
        padding: 6px 10px;
        border-radius: var(--oc-radius-m, 10px);
        border: 1px solid var(--oc-border);
        background: rgba(255, 255, 255, .04);
    }

    html[data-oc-theme="light"] .oc-theme-switch {
        background: rgba(255, 255, 255, .75);
    }

    .oc-dot {
        width: 14px;
        height: 14px;
        border-radius: var(--oc-radius-m, 10px);
        border: 1px solid var(--oc-border);
        --oc-focus-ring-radius: var(--oc-radius-m, 10px);
        cursor: pointer;
        position: relative;
        display: inline-block;
    }

    .oc-dot[aria-pressed="true"] {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
    }

    html[data-oc-theme="light"] .oc-dot[aria-pressed="true"] {
        box-shadow: 0 0 0 2px rgba(16, 24, 40, .25);
    }

    .oc-dot.light {
        background: #ffffff;
    }

    .oc-dot.dark {
        background: #2b145c;
        border-color: var(--oc-border-strong, rgba(255, 255, 255, .18));
    }

    .oc-dot.graphite {
        background: #353535;
        border-color: var(--oc-border-strong, rgba(255, 255, 255, .18));
    }

    .oc-dot.galaxy {
        background: conic-gradient(from 180deg, #5adcff, #ff5ac8, #6effbe, #ffd66e, #5adcff);
        border-color: var(--oc-border-strong, rgba(255, 255, 255, .18));
        box-shadow: 0 0 16px rgba(90, 220, 255, .20), 0 0 16px rgba(255, 90, 200, .16);
    }

    .oc-dot.galaxy[aria-pressed="true"] {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, .22), 0 0 22px rgba(90, 220, 255, .25), 0 0 22px rgba(255, 90, 200, .18);
    }

    /* Table controls (reset/columns) */
    .oc-table-controls {
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }

    .oc-table-btn {
        display: inline-flex;
        padding: 6px 10px;
        border-radius: var(--oc-radius-m, 10px);
        --oc-focus-ring-radius: var(--oc-radius-m, 10px);
        border: 1px solid var(--oc-border);
        background: rgba(255, 255, 255, .04);
        color: var(--oc-ink);
        font-weight: 800;
        font-size: 12px;
    }

    .oc-table-btn:hover {
        background: rgba(255, 255, 255, .06);
    }

    .oc-preset,
    .oc-pill,
    .oc-chip,
    .badge,
    .pill {
        background: rgba(255, 255, 255, .05);
        border: 1px solid var(--oc-border-strong, rgba(255, 255, 255, .16));
        color: var(--oc-ink);
        border-radius: var(--oc-radius-m, 10px);
    }

    html[data-oc-theme="light"] .oc-preset,
    html[data-oc-theme="light"] .oc-pill,
    html[data-oc-theme="light"] .oc-chip {
        background: #ffffff;
        border-color: var(--oc-border);
    }

    .button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .submit-row a,
    .submit-row input,
    .object-tools a,
    .tabs a {
        --oc-focus-ring-radius: var(--oc-radius-m, 10px);
    }
}

/* Unlayered on purpose: Django admin focus styles are also unlayered. */
:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):focus:not(:focus-visible) {
    outline: none;
}

:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):not(.oc-dot):focus:not(:focus-visible) {
    box-shadow: none;
}

:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: var(--oc-focus-ring-width, 2px) solid transparent;
    outline-offset: var(--oc-focus-ring-offset, 2px);
    box-shadow: var(--oc-focus-ring-shadow, 0 0 0 3px rgba(37, 99, 235, .5));
    border-radius: var(--oc-focus-ring-radius, var(--oc-radius-m, 10px));
}