/*
 * Modern theme for Django Admin — deep petrol brand, cool neutral surfaces,
 * dimensional controls.
 *
 * Overrides Django's CSS custom properties (see admin/css/base.css) rather than
 * fighting its layout — this keeps the whole admin (forms, tables, buttons,
 * messages, nav) consistent with one set of variables, in both light and dark mode.
 */

/*
 * !important is used deliberately on every custom-property redeclaration
 * below (but nowhere else in this file). These are the exact same property
 * names Django's own base.css/dark_mode.css declare on :root, and this
 * environment resolves same-specificity :root custom properties by
 * something other than plain source order (verified: a brand-new property
 * name added here cascades normally; every property name Django also
 * defines does not, regardless of link order, cache state, or reload).
 * !important sidesteps that ambiguity entirely per spec. New properties
 * this file introduces (e.g. --surface) don't need it.
 */

/*
 * Mirrors base.css's own "html[data-theme='light'], :root" pairing so an
 * explicit light choice still outranks the prefers-color-scheme block below
 * (which is why that block is guarded with :not([data-theme="light"])).
 */
html[data-theme="light"],
:root {
    --primary: #0f7a6d !important;
    --secondary: #0b5d53 !important;
    --accent: #16a394 !important;
    --primary-fg: #fff !important;

    --body-fg: #14232b !important;
    --body-bg: #f2f5f7 !important;
    --body-loud-color: #0a1519 !important;
    --body-quiet-color: #566a74 !important;
    --body-medium-color: #33474f !important;

    --header-color: #cfe3e4 !important;
    --header-branding-color: #ffffff !important;
    --header-bg: #14303f !important;
    --header-link-color: #ffffff !important;

    --breadcrumbs-fg: #5c6f79 !important;
    --breadcrumbs-link-fg: #0f7a6d !important;
    --breadcrumbs-bg: #e8eef1 !important;

    --link-fg: #0d6b60 !important;
    --link-hover-color: #0a544b !important;
    --link-selected-fg: var(--secondary) !important;

    --hairline-color: #e3eaee !important;
    --border-color: #cfdae1 !important;

    --darkened-bg: #eef2f5 !important;
    --selected-bg: #e2ecec !important;
    --selected-row: #e6f4f1 !important;

    --button-fg: #fff !important;
    --button-bg: var(--primary) !important;
    --button-hover-bg: var(--secondary) !important;
    --default-button-bg: var(--primary) !important;
    --default-button-hover-bg: var(--secondary) !important;
    --close-button-bg: #64757e !important;
    --close-button-hover-bg: #4b5b63 !important;

    --object-tools-bg: #23485a !important;
    --object-tools-hover-bg: #14303f !important;

    --font-family-primary: "IBM Plex Sans Arabic", "Readex Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;

    /* Local to this file. */
    --font-display: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
    --surface: #ffffff;
    --surface-2: #eef2f5;
    --header-grad-a: #14303f;
    --header-grad-b: #0f5259;
    --btn-grad-a: #16a394;
    --btn-grad-b: #0d6f63;
    --btn-grad-a-hover: #18b3a2;
    --btn-grad-b-hover: #0a5d53;
    --notice-bg: #fdf6e6;
    --notice-border: #e8d19a;
    --notice-rail: #d9a441;

    --shadow-sm: 0 1px 2px rgba(16, 38, 46, 0.06), 0 1px 3px rgba(16, 38, 46, 0.08);
    --shadow-md: 0 2px 6px rgba(16, 38, 46, 0.07), 0 8px 20px -8px rgba(16, 38, 46, 0.18);
    --shadow-lg: 0 10px 30px -10px rgba(16, 38, 46, 0.28), 0 2px 8px rgba(16, 38, 46, 0.08);
    /* Top highlight + bottom bevel — what gives the controls their raised edge. */
    --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.16);

    --radius-card: 14px;
    --radius-control: 10px;
    --border-radius: var(--radius-card);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --primary: #17a496 !important;
        --secondary: #12897d !important;
        --accent: #2ec9b8 !important;
        --primary-fg: #04201d !important;

        --body-fg: #e7eef2 !important;
        --body-bg: #0d1418 !important;
        --body-loud-color: #f5fafc !important;
        /* The light-mode values above are tuned for contrast on a LIGHT
           background. Left unset here they would keep winning (they are
           !important and loaded after Django's own dark_mode.css) and go
           nearly invisible on a dark ground. */
        --body-quiet-color: #92a5af !important;
        --body-medium-color: #c3d1d8 !important;

        --header-color: #a9c6c9 !important;
        --header-branding-color: #f2fafb !important;
        --header-bg: #0b1b23 !important;
        --header-link-color: #eaf4f5 !important;

        --breadcrumbs-fg: #92a5af !important;
        --breadcrumbs-link-fg: #2ec9b8 !important;
        --breadcrumbs-bg: #111c22 !important;

        --link-fg: #2ec9b8 !important;
        --link-hover-color: #58e0d1 !important;

        --hairline-color: #243138 !important;
        --border-color: #33454e !important;

        --darkened-bg: #151f25 !important;
        --selected-bg: #1b2a30 !important;
        --selected-row: #14322f !important;

        --button-fg: #04201d !important;
        --close-button-bg: #3c4d56 !important;
        --close-button-hover-bg: #4f636d !important;
        --object-tools-bg: #24576a !important;
        --object-tools-hover-bg: #2e6b81 !important;
        /* Django derives this from --button-fg, which is near-black here so
           that text stays readable on the teal buttons — on the dark slate
           object-tools pill that would be invisible. */
        --object-tools-fg: #eaf4f5 !important;

        --surface: #151f25;
        --surface-2: #1b262d;
        --header-grad-a: #0b1b23;
        --header-grad-b: #103b40;
        --btn-grad-a: #1cb8a7;
        --btn-grad-b: #0f8578;
        --btn-grad-a-hover: #24cdba;
        --btn-grad-b-hover: #0c7268;
        --notice-bg: #2a2415;
        --notice-border: #5c4a22;
        --notice-rail: #d9a441;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
        --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
        --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
    }
}

html[data-theme="dark"] {
    --primary: #17a496 !important;
    --secondary: #12897d !important;
    --accent: #2ec9b8 !important;
    --primary-fg: #04201d !important;

    --body-fg: #e7eef2 !important;
    --body-bg: #0d1418 !important;
    --body-loud-color: #f5fafc !important;
    --body-quiet-color: #92a5af !important;
    --body-medium-color: #c3d1d8 !important;

    --header-color: #a9c6c9 !important;
    --header-branding-color: #f2fafb !important;
    --header-bg: #0b1b23 !important;
    --header-link-color: #eaf4f5 !important;

    --breadcrumbs-fg: #92a5af !important;
    --breadcrumbs-link-fg: #2ec9b8 !important;
    --breadcrumbs-bg: #111c22 !important;

    --link-fg: #2ec9b8 !important;
    --link-hover-color: #58e0d1 !important;

    --hairline-color: #243138 !important;
    --border-color: #33454e !important;

    --darkened-bg: #151f25 !important;
    --selected-bg: #1b2a30 !important;
    --selected-row: #14322f !important;

    --button-fg: #04201d !important;
    --close-button-bg: #3c4d56 !important;
    --close-button-hover-bg: #4f636d !important;
    --object-tools-bg: #24576a !important;
    --object-tools-hover-bg: #2e6b81 !important;
    /* Django derives this from --button-fg, which is near-black here so that
       text stays readable on the teal buttons — on the dark slate
       object-tools pill that would be invisible. */
    --object-tools-fg: #eaf4f5 !important;

    --surface: #151f25;
    --surface-2: #1b262d;
    --header-grad-a: #0b1b23;
    --header-grad-b: #103b40;
    --btn-grad-a: #1cb8a7;
    --btn-grad-b: #0f8578;
    --btn-grad-a-hover: #24cdba;
    --btn-grad-b-hover: #0c7268;
    --notice-bg: #2a2415;
    --notice-border: #5c4a22;
    --notice-rail: #d9a441;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
    --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

body {
    background: var(--body-bg);
}

/* ---- Header / branding ---- */
#header {
    padding: 14px 32px;
    background: linear-gradient(115deg, var(--header-grad-a) 0%, var(--header-grad-b) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 18px -6px rgba(8, 24, 30, 0.55);
}

/* Django's own #user-tools is font-weight 300 at 11px, which reads as washed
   out against the brand gradient. */
#user-tools,
#logout-form button {
    font-weight: 500 !important;
    font-size: 0.75rem;
}

#user-tools a,
#logout-form button {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

#branding h1,
#branding #site-name {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.2px;
    font-size: 1.2rem;
    white-space: nowrap;
}

/* Django's own rule colors #site-name links with --accent, which is too
   low-contrast on the gradient — use the plain header link color. */
#site-name a:link,
#site-name a:visited {
    color: var(--header-link-color);
}

/* The mark carries its own rounded outline, so no ring here — a box-shadow
   would trace the square border-box and cut across the rounded corners. */
#site-name a img {
    display: block;
}

/* Language toggle: a compact EN/AR segmented control, both options always
   visible, the active one raised so it's clear which language you're on. */
.lang-toggle {
    display: inline-flex;
    margin: 0;
    padding: 3px;
    gap: 2px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.lang-toggle-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.lang-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.lang-toggle-active,
.lang-toggle-active:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e4edef 100%) !important;
    color: var(--header-grad-a) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---- Breadcrumbs ---- */
div.breadcrumbs {
    padding: 11px 32px;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--hairline-color);
    box-shadow: none;
}

/* ---- Typography ---- */
h1,
h2,
h3,
.module h2,
.module caption,
#changelist-filter h2 {
    font-family: var(--font-display);
    letter-spacing: -0.2px;
}

#content h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--body-loud-color);
    margin-bottom: 18px;
}

/* ---- Page structure ----
 * Django hard-codes the dashboard to a 600px column (base.css
 * ".dashboard #content { width: 600px }") and positions the right-hand column
 * with a negative float margin. On anything wider than a laptop that leaves
 * most of the screen empty, so the dashboard becomes a real two-track flex
 * layout instead. Flex also drops the physical left/right margins, which is
 * what kept the float layout from mirroring cleanly in Arabic.
 */
.dashboard #content {
    width: auto;
    max-width: 1640px;
    margin-inline: auto;
    padding: 28px 32px 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 24px;
}

/* base.html puts the page title (wrapped in .titles-and-tools) and a float
   clearing <br> inside #content, so both become grid items. The title has to
   span the full width, and the <br> would otherwise occupy a cell and push the
   two real columns out of alignment. */
.dashboard #content > .titles-and-tools,
.dashboard #content > h1 {
    grid-column: 1 / -1;
    margin: 0;
}

.dashboard #content > br.clear {
    display: none;
}

body.dashboard.colMS {
    margin-right: 0;
}

.dashboard #content-main {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard #content-related {
    float: none;
    width: auto;
    margin-right: 0;
    margin-left: 0;
}

/*
 * The app cards flow into as many columns as the window allows instead of
 * stacking in one narrow strip. Multi-column rather than grid: the cards vary
 * from one row to five, and a grid row is as tall as its tallest card, which
 * left a large gap under every short one. Columns pack them end to end.
 */
.dashboard #content-main.app-list {
    column-width: 330px;
    column-gap: 22px;
}

.dashboard #content-main.app-list > .module {
    /* Keep a card from being split across two columns. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

@media (max-width: 1100px) {
    .dashboard #content {
        grid-template-columns: minmax(0, 1fr);
    }
}

#content {
    padding: 24px 32px 48px;
}

/* ---- Cards / modules ---- */
.module,
.dashboard .module,
#content-related .module,
#changelist-filter,
.inline-group {
    background: var(--surface);
    border: 1px solid var(--hairline-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/*
 * Django paints module headings with --primary and white text — a solid bar of
 * brand color on every block flattens the hierarchy. They become quiet titles
 * on the card surface, with the rule doing the separating.
 */
.module h2,
.module caption,
.dashboard .module h2,
.dashboard .module caption,
#changelist-filter h2,
.inline-group h2 {
    background: transparent;
    color: var(--body-loud-color);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    /* Django hardcodes text-align: left, which strands these titles on the
       wrong edge in Arabic. */
    text-align: start;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--hairline-color);
}

/* base.css colors a.section with --header-link-color (white), which was
   correct on Django's solid brand-colored heading bar but disappears now that
   the heading sits on the card surface. */
.module caption a.section:link,
.module caption a.section:visited,
.module h2 a.section:link,
.module h2 a.section:visited {
    color: inherit;
    text-decoration: none;
}

/* column-gap only separates the columns; the bottom margin is what spaces
   cards down a column, so it is set to match rather than zeroed. */
.dashboard #content-main.app-list > .module {
    margin-bottom: 22px;
}

#content-related .module {
    margin-bottom: 22px;
}

#content-related .module:last-child {
    margin-bottom: 0;
}

.dashboard .module table td,
.dashboard .module table th {
    padding: 11px 18px;
    border-bottom: 1px solid var(--hairline-color);
}

.dashboard .module table tr:last-child td,
.dashboard .module table tr:last-child th {
    border-bottom: none;
}

.dashboard .module table tr:hover td,
.dashboard .module table tr:hover th {
    background: var(--surface-2);
}

.dashboard .module table th a,
.dashboard .module table td a {
    font-weight: 500;
}

/*
 * The two dashboard notices ("you have N requests waiting" for HR, and
 * "updates on your requests" for employees) are the one place a warm accent is
 * spent, so they read as the thing to look at first. They must also stay
 * legible in dark mode, which a hardcoded pale yellow cannot.
 */
/* Selected through #content-related so this outranks the "#content-related
   .module" card rule above, which would otherwise repaint them as plain
   surfaces. */
#content-related #pending-review-module,
#content-related #request-updates-module {
    background: var(--notice-bg);
    border-color: var(--notice-border);
    border-inline-start: 4px solid var(--notice-rail);
}

#content-related #pending-review-module h2,
#content-related #request-updates-module h2 {
    background: transparent;
    color: var(--body-loud-color);
    border-bottom-color: var(--notice-border);
    text-transform: none;
    font-size: 0.95rem;
    letter-spacing: -0.1px;
}

#content-related .module h2 {
    background: transparent;
}

#content-related .actionlist li {
    padding: 7px 0;
}

/* ---- Buttons: raised, with a real press ---- */
.button,
input[type="submit"],
input[type="button"],
button:not(.lang-toggle-btn):not(.theme-toggle),
.submit-row input,
.submit-row a.button,
a.button,
.object-tools a {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.1px;
    border: none;
    border-radius: var(--radius-control);
    padding: 9px 18px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(0, 0, 0, 0.1) 100%);
    box-shadow: var(--bevel), var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input:hover,
a.button:hover,
.object-tools a:hover {
    filter: brightness(1.06);
    box-shadow: var(--bevel), var(--shadow-md);
}

.button:active,
input[type="submit"]:active,
input[type="button"]:active,
.submit-row input:active,
a.button:active,
.object-tools a:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28);
}

.button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
a.button:focus-visible,
.object-tools a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The primary action gets the brand gradient; the rest stay neutral so one
   button per row reads as the main one. */
.submit-row input.default,
.button.default,
input[type="submit"].default {
    background-image: linear-gradient(180deg, var(--btn-grad-a) 0%, var(--btn-grad-b) 100%);
    color: var(--primary-fg);
}

.submit-row input.default:hover,
.button.default:hover,
input[type="submit"].default:hover {
    background-image: linear-gradient(180deg, var(--btn-grad-a-hover) 0%, var(--btn-grad-b-hover) 100%);
}

.object-tools a {
    text-transform: none;
    letter-spacing: 0.1px;
}

.submit-row {
    background: var(--surface);
    border: 1px solid var(--hairline-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    padding: 14px 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.submit-row a.deletelink {
    border-radius: var(--radius-control);
    padding: 9px 18px;
}

/* ---- Inputs ---- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
    border-radius: var(--radius-control);
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--body-fg);
    padding: 8px 12px;
    box-shadow: inset 0 1px 2px rgba(16, 38, 46, 0.07);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * base.css pins every select to a fixed height of 1.875rem (30px), measured
 * border-box. The 8px of vertical padding above leaves only ~12px of content
 * box inside that, which clips the selected option's text along the bottom on
 * every form in the admin. Selects need a height that accounts for the
 * padding, matching the text inputs they sit beside.
 *
 * Left as a bare element selector on purpose: the narrow-width rules in
 * responsive.css (.form-row select) and the changelist action dropdown
 * (.actions select) are more specific, so both keep their own sizing.
 */
select {
    height: 2.3125rem;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ---- Tables ---- */
#changelist table {
    border-collapse: separate;
    border-spacing: 0;
}

#result_list thead th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--body-quiet-color);
    padding: 12px 14px;
}

#result_list tbody td,
#result_list tbody th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--hairline-color);
    font-variant-numeric: tabular-nums;
}

#result_list tbody tr:hover td,
#result_list tbody tr:hover th {
    background: var(--surface-2);
}

#changelist .results {
    background: var(--surface);
    border: 1px solid var(--hairline-color);
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
}

#changelist .paginator {
    background: var(--surface);
    border: 1px solid var(--hairline-color);
    border-top: none;
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
}

#toolbar {
    background: var(--surface);
    border: 1px solid var(--hairline-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
}

#changelist-filter li.selected a {
    font-weight: 600;
}

.paginator {
    border-top: 1px solid var(--hairline-color);
    padding: 14px 16px;
}

/* ---- Messages ---- */
ul.messagelist li {
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-sm);
    padding: 12px 16px 12px 42px;
    font-weight: 500;
}

/* ---- Login page ---- */
body.login {
    background:
        radial-gradient(1100px 620px at 78% -12%, color-mix(in srgb, var(--primary) 26%, transparent) 0%, transparent 62%),
        var(--body-bg);
}

body.login #container {
    box-shadow: var(--shadow-lg);
    border-radius: 18px;
    border: 1px solid var(--hairline-color);
    overflow: hidden;
    margin-top: 9vh;
    background: var(--surface);
    min-width: 0;
    width: min(420px, 92vw);
}

body.login #header {
    justify-content: center;
    padding: 30px 22px;
}

body.login #content {
    padding: 26px 30px 8px;
}

body.login .form-row {
    padding: 9px 0;
}

body.login .submit-row {
    padding: 12px 30px 30px;
    border: none;
    box-shadow: none;
    background: transparent;
}

body.login .submit-row input {
    width: 100%;
    padding: 12px;
    font-size: 0.9rem;
}

/* ---- Reports: filters and column picker ---- */
.report-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin-bottom: 16px;
}

.report-filter-row .form-row {
    border: none;
    padding: 0;
    margin: 0;
}

.report-filter-search .form-row {
    flex: 1 1 100%;
    max-width: 480px;
}

.report-filter-search input[type="text"] {
    width: 100%;
}

.report-filter-search .help {
    margin: 5px 0 0;
    font-size: 0.74rem;
}

.report-filter-dates .form-row {
    /* Keeps both date inputs the same width so the range reads as one control
       rather than two unrelated fields. */
    min-width: 190px;
}

/*
 * The column checkboxes used to wrap as a ragged flex row: labels vary from
 * two words to seven, so nothing lined up. A fixed-track grid gives every
 * option the same box, in aligned columns, however many there are.
 */
.column-picker {
    border: 1px solid var(--hairline-color);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: 12px 16px 16px;
    margin: 4px 0 16px;
}

.column-picker > legend {
    padding: 0 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.76rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--body-quiet-color);
}

.column-picker-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

/*
 * A small utility control, not a page action — selected through .column-picker
 * so it outranks the raised-button rule and stays flat.
 */
.column-picker button.column-toggle-all {
    background: var(--surface);
    background-image: none;
    color: var(--link-fg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: none;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0;
    padding: 5px 14px;
}

.column-picker button.column-toggle-all:hover {
    background: var(--surface-2);
    box-shadow: none;
    filter: none;
}

.column-picker button.column-toggle-all:active {
    transform: translateY(1px);
    box-shadow: none;
}

.column-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    gap: 4px 16px;
}

.column-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.column-option input {
    margin: 0;
    flex: none;
}

.column-option:hover {
    background: var(--surface-2);
}

.column-option:has(input:checked) {
    background: var(--selected-row);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
    font-weight: 500;
}

.column-option:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.detail-toggle {
    display: inline-flex;
    margin-bottom: 4px;
}

/* ---- Nav sidebar ---- */
#nav-sidebar {
    background: var(--surface);
    border-inline-end: 1px solid var(--hairline-color);
}

#nav-sidebar .module th {
    font-weight: 500;
}

/* nav_sidebar.css colors the active app's heading with --header-link-color,
   which was legible on Django's brand-colored bar but not on the light
   sidebar surface. */
#nav-sidebar caption a.section:link,
#nav-sidebar caption a.section:visited,
#nav-sidebar .current-app caption a.section:link,
#nav-sidebar .current-app caption a.section:visited {
    color: var(--body-quiet-color);
}

#nav-sidebar .current-model {
    background: var(--selected-row);
    border-radius: 8px;
}

#nav-filter {
    border-radius: var(--radius-control);
    margin: 10px;
    width: calc(100% - 20px);
}