/*
 * Frame Work admin design system
 *
 * Canonical Django mapping of the SMART frontend contract. This file is
 * intentionally loaded after Django and admin-brand.css compatibility rules.
 */

/* 1. Semantic tokens ------------------------------------------------------ */
:root,
html[data-theme="auto"],
html[data-theme="light"] {
    --background: #fafaf9;
    --foreground: #0b0a09;
    --card: #ffffff;
    --card-foreground: #0b0a09;
    --popover: #ffffff;
    --popover-foreground: #0b0a09;
    --primary: #0b0a09;
    --primary-foreground: #fafaf9;
    --secondary: #f5f5f4;
    --secondary-foreground: #1c1917;
    --muted: #f5f5f4;
    --muted-foreground: #6f6760;
    --accent: #f5f5f4;
    --accent-foreground: #0b0a09;
    --destructive: #dc2626;
    --border: #e7e5e4;
    --input: #d6d3d1;
    --ring: #ff6f20;
    --brand-accent: #ff6f20;
    --brand-orange: #ff6f20;
    --brand-yellow: #fff146;
    --selection-row: #fbebd7;
    --chart-1: #ff6f20;
    --chart-2: #fff146;
    --chart-3: #8b8178;
    --chart-4: #57534e;
    --chart-5: #292524;
    --sidebar: #ffffff;
    --sidebar-foreground: #0b0a09;
    --sidebar-primary: #0b0a09;
    --sidebar-primary-foreground: #fafaf9;
    --sidebar-accent: #e7e5e4;
    --sidebar-accent-foreground: #0b0a09;
    --sidebar-border: #e7e5e4;
    --sidebar-ring: #ff6f20;
    --radius: 4px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]),
    html[data-theme="auto"] {
        --background: #0b0a09;
        --foreground: #fafaf9;
        --card: #1b1917;
        --card-foreground: #fafaf9;
        --popover: #1b1917;
        --popover-foreground: #fafaf9;
        --primary: #fafaf9;
        --primary-foreground: #0b0a09;
        --secondary: #292524;
        --secondary-foreground: #fafaf9;
        --muted: #292524;
        --muted-foreground: #8b8178;
        --accent: #292524;
        --accent-foreground: #fafaf9;
        --destructive: #f87171;
        --border: #2b2524;
        --input: #46403b;
        --ring: #fff146;
        --brand-accent: #fff146;
        --brand-orange: #fff146;
        --selection-row: #3c2b0c;
        --chart-1: #fff146;
        --chart-2: #ff6f20;
        --chart-3: #aaa7ff;
        --chart-4: #63f26f;
        --chart-5: #3bdcff;
        --sidebar: #141210;
        --sidebar-foreground: #fafaf9;
        --sidebar-primary: #fafaf9;
        --sidebar-primary-foreground: #0b0a09;
        --sidebar-accent: #292524;
        --sidebar-accent-foreground: #fafaf9;
        --sidebar-border: #2b2524;
        --sidebar-ring: #fff146;
        color-scheme: dark;
    }
}

html[data-theme="dark"],
html.dark {
    --background: #0b0a09;
    --foreground: #fafaf9;
    --card: #1b1917;
    --card-foreground: #fafaf9;
    --popover: #1b1917;
    --popover-foreground: #fafaf9;
    --primary: #fafaf9;
    --primary-foreground: #0b0a09;
    --secondary: #292524;
    --secondary-foreground: #fafaf9;
    --muted: #292524;
    --muted-foreground: #8b8178;
    --accent: #292524;
    --accent-foreground: #fafaf9;
    --destructive: #f87171;
    --border: #2b2524;
    --input: #46403b;
    --ring: #fff146;
    --brand-accent: #fff146;
    --brand-orange: #fff146;
    --selection-row: #3c2b0c;
    --chart-1: #fff146;
    --chart-2: #ff6f20;
    --chart-3: #aaa7ff;
    --chart-4: #63f26f;
    --chart-5: #3bdcff;
    --sidebar: #141210;
    --sidebar-foreground: #fafaf9;
    --sidebar-primary: #fafaf9;
    --sidebar-primary-foreground: #0b0a09;
    --sidebar-accent: #292524;
    --sidebar-accent-foreground: #fafaf9;
    --sidebar-border: #2b2524;
    --sidebar-ring: #fff146;
    color-scheme: dark;
}

:root,
html[data-theme] {
    /* Django compatibility aliases always resolve through semantic tokens. */
    --fw-background: var(--background);
    --fw-foreground: var(--foreground);
    --fw-card: var(--card);
    --fw-card-foreground: var(--card-foreground);
    --fw-muted: var(--muted);
    --fw-muted-strong: var(--sidebar-accent);
    --fw-muted-foreground: var(--muted-foreground);
    --fw-border: var(--border);
    --fw-input: var(--input);
    --fw-primary: var(--primary);
    --fw-primary-foreground: var(--primary-foreground);
    --fw-orange: var(--brand-orange);
    --fw-yellow: var(--brand-yellow);
    --fw-ring: var(--ring);
    --fw-danger: var(--destructive);
    --fw-sidebar: var(--sidebar);
    --fw-sidebar-border: var(--sidebar-border);
    --fw-radius: var(--radius-md);
    --fw-shadow: none;

    --body-fg: var(--foreground);
    --body-bg: var(--background);
    --body-quiet-color: var(--muted-foreground);
    --body-medium-color: var(--muted-foreground);
    --body-loud-color: var(--foreground);
    --hairline-color: var(--border);
    --border-color: var(--border);
    --link-fg: var(--foreground);
    --link-hover-color: var(--brand-orange);
    --link-selected-fg: var(--brand-orange);
    --button-bg: var(--primary);
    --button-fg: var(--primary-foreground);
    --default-button-bg: var(--primary);
    --default-button-hover-bg: color-mix(in srgb, var(--primary) 85%, var(--background));
    --delete-button-bg: color-mix(in srgb, var(--destructive) 10%, transparent);
    --delete-button-hover-bg: color-mix(in srgb, var(--destructive) 20%, transparent);
}

/* 2. Base typography and global behavior -------------------------------- */
html,
body {
    background: var(--background);
    color: var(--foreground);
}

body,
button,
input,
select,
textarea {
    font-family: "Stack Sans Text", sans-serif;
}

body {
    font-feature-settings: "ss01" 1, "cv02" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: color-mix(in srgb, var(--foreground) 14%, transparent);
    color: var(--foreground);
}

strong,
b {
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--foreground);
}

h1 {
    font-family: "Stack Sans Notch", "Stack Sans Text", sans-serif;
    font-size: 1.875rem;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

h2 {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

h3 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

h4,
h5 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
}

small {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.125rem;
    }
}

/* 3. Authenticated shell ------------------------------------------------- */
body:not(.login):not(.popup) {
    min-height: 100svh;
    background: var(--sidebar);
    overflow: hidden;
}

body:not(.login):not(.popup) #container {
    min-height: 100svh;
    height: 100svh;
    background: var(--sidebar);
    overflow: hidden;
}

body:not(.login):not(.popup) #header {
    min-height: 3rem;
    height: 3rem;
    border-color: var(--border);
    background: var(--card);
    backdrop-filter: none;
}

body:not(.login):not(.popup) #header #branding,
body:not(.login):not(.popup) #header #user-tools {
    min-height: 0;
}

.framework-header-context,
body:not(.login):not(.popup) #header #user-tools {
    font-size: 0.875rem;
}

body:not(.login):not(.popup) .main > #nav-sidebar {
    width: 15rem;
    border-color: var(--sidebar-border);
    background: var(--sidebar);
    color: var(--sidebar-foreground);
    box-shadow: none;
}

.framework-sidebar-content {
    scrollbar-width: none;
}

.framework-sidebar-content::-webkit-scrollbar {
    display: none;
}

#nav-sidebar .module {
    margin: 0;
}

#nav-sidebar .module caption {
    height: 2rem;
    box-sizing: border-box;
    /* Match model-link text, including its 2 px active-state border. */
    padding: 0 0.625rem;
    color: color-mix(in srgb, var(--sidebar-foreground) 70%, transparent);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 2rem;
    text-transform: none;
}

#nav-sidebar .module caption .framework-sidebar-section {
    color: var(--brand-orange);
    font-weight: 600;
}

#nav-sidebar .module th a {
    min-height: 2rem;
    gap: 0.5rem;
    padding: 0.5rem;
    border-left: 2px solid transparent;
    border-radius: 0;
    color: var(--sidebar-foreground);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
}

#nav-sidebar .module th a:hover,
#nav-sidebar .module th a:focus-visible {
    background: transparent;
    color: var(--brand-orange);
}

#nav-sidebar .current-model th a {
    border-left-color: var(--brand-orange);
    background: transparent;
    color: var(--sidebar-accent-foreground);
    font-weight: 500;
}

.framework-sidebar-footer {
    padding: 0.5rem;
    border-color: var(--sidebar-border);
    background: var(--card);
}

.framework-sidebar-tools {
    display: grid;
    gap: 0.125rem;
    padding: 0.5rem;
    border-top: 1px solid var(--sidebar-border);
}

.framework-sidebar-tools a {
    display: block;
    padding: 0.5rem;
    color: var(--sidebar-foreground);
    font-size: 0.875rem;
    text-decoration: none;
}

.framework-sidebar-tools a:hover,
.framework-sidebar-tools a:focus-visible {
    background: transparent;
    color: var(--brand-orange);
    text-decoration: none;
}

/* The sidebar container already contributes the shell's 1 px top rule.
   Subtract it from the internal brand row so its bottom divider aligns with
   the 48 px breadcrumb/header section. */
#nav-sidebar > .framework-sidebar-brand {
    height: calc(3rem - 1px);
    min-height: calc(3rem - 1px);
}

.framework-sidebar-user {
    min-height: 3rem;
}

.framework-sidebar-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
}

.framework-sidebar-user-copy strong {
    font-size: 0.875rem;
    font-weight: 500;
}

.framework-sidebar-user-copy small {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

body:not(.login):not(.popup) .main > #nav-sidebar + .content,
body:not(.login):not(.popup) .main.shifted > #nav-sidebar + .content {
    max-width: none;
    border-color: var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--card);
}

body:not(.login):not(.popup) #content {
    width: auto;
    max-width: 90rem;
    min-width: 0;
    margin-inline: auto;
    padding: 1rem;
}

/* Keep the operational content inset white in light mode while the outer
   shell rail retains its separate pattern treatment. */
.main > main {
    background: var(--card);
}

/* Direct user requirement: sidebar state changes remain animation-free. */
body:not(.login):not(.popup) #header,
body:not(.login):not(.popup) .main > #nav-sidebar,
body:not(.login):not(.popup) .main > #nav-sidebar + .content,
body:not(.login):not(.popup) .toggle-nav-sidebar {
    transition: none;
}

/* Keep the sidebar control as a bare chevron: its 32 px hit target remains,
   but no rounded button surface is drawn around it. */
body:not(.login):not(.popup) .toggle-nav-sidebar,
body:not(.login):not(.popup) .toggle-nav-sidebar:hover,
body:not(.login):not(.popup) .toggle-nav-sidebar:focus,
body:not(.login):not(.popup) .toggle-nav-sidebar:focus-visible {
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    outline: none;
}

body:not(.login):not(.popup) .toggle-nav-sidebar:hover,
body:not(.login):not(.popup) .toggle-nav-sidebar:focus-visible {
    color: var(--brand-orange);
}

body:not(.login):not(.popup) .toggle-nav-sidebar:focus:not(:focus-visible) {
    color: var(--muted-foreground);
}

body:not(.login):not(.popup) .toggle-nav-sidebar::before {
    display: grid;
    position: static;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    font-size: 1.25rem;
    line-height: 1;
    transform: none;
}

body:not(.login):not(.popup) .toggle-nav-sidebar[aria-expanded="true"]::before {
    content: "‹";
}

body:not(.login):not(.popup) .toggle-nav-sidebar[aria-expanded="false"]::before {
    content: "›";
    transform: none;
}

.framework-sidebar-close {
    display: none;
}

html[data-admin-sidebar-open="false"] body:not(.login):not(.popup) .toggle-nav-sidebar {
    left: 1rem;
}

html[data-admin-sidebar-open="true"] body:not(.login):not(.popup) .toggle-nav-sidebar,
body:not(.login):not(.popup) .main.shifted > .toggle-nav-sidebar {
    left: calc(var(--fw-sidebar-width) + 0.5rem);
}

/* 4. Page hierarchy and surfaces ---------------------------------------- */
.framework-page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.framework-page-heading h1 {
    grid-column: 1 / -1;
    margin: 0;
    font-family: "Stack Sans Notch", "Stack Sans Text", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

#content > h1:not(.framework-page-heading h1) {
    margin: 0 0 1.25rem;
    font-family: "Stack Sans Notch", "Stack Sans Text", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.framework-page-back,
.framework-page-back:link,
.framework-page-back:visited {
    min-height: 1.25rem;
    gap: 0.25rem;
    margin: 0 0 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.framework-page-back:hover,
.framework-page-back:focus-visible {
    color: var(--brand-orange);
}

.framework-page-back-icon {
    position: relative;
    display: block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.framework-page-back-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.375rem;
    height: 0.375rem;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    content: "";
    transform: translate(-35%, -50%) rotate(45deg);
}

.module,
.inline-group,
fieldset.module,
#content-related .module {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: none;
}

.module h2,
.module caption,
.inline-group h2 {
    border-color: var(--border);
    background: color-mix(in srgb, var(--muted) 60%, transparent);
}

/* 5. Buttons and actions ------------------------------------------------- */
.button,
button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button,
.object-tools a,
.closelink,
.deletelink {
    height: 2rem;
    min-height: 2rem;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.button,
button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button,
.object-tools a {
    padding: 0 0.625rem;
    background: var(--primary);
    color: var(--primary-foreground);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input:hover,
a.button:hover,
.object-tools a:hover {
    background: color-mix(in srgb, var(--primary) 85%, var(--background));
    color: var(--primary-foreground);
}

.button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
a.button:active {
    transform: translateY(1px);
}

button[aria-haspopup]:active,
summary:active {
    transform: none;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.button[aria-disabled="true"] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.45;
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
a.button:focus-visible,
.object-tools a:focus-visible {
    border-color: var(--ring);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent);
}

.closelink,
.closelink:link,
.closelink:visited {
    display: inline-flex;
    align-items: center;
    padding: 0 0.625rem;
    border-color: var(--border);
    background: var(--background);
    color: var(--foreground);
}

.deletelink,
.deletelink:link,
.deletelink:visited,
.submit-row a.deletelink {
    display: inline-flex;
    align-items: center;
    padding: 0 0.625rem !important;
    border-color: transparent;
    background: color-mix(in srgb, var(--destructive) 10%, transparent);
    color: var(--destructive);
}

.deletelink:hover,
.submit-row a.deletelink:hover {
    background: color-mix(in srgb, var(--destructive) 20%, transparent);
    color: var(--destructive);
}

.delete-confirmation form input[type="submit"] {
    background: var(--destructive);
    color: #ffffff;
}

.delete-confirmation form input[type="submit"]:hover {
    background: color-mix(in srgb, var(--destructive) 85%, var(--background));
    color: #ffffff;
}

.delete-confirmation form .cancel-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #0b0a09 !important;
    color: #fafaf9 !important;
    text-align: center;
}

.delete-confirmation form .cancel-link:hover,
.delete-confirmation form .cancel-link:focus,
.delete-confirmation form .cancel-link:active {
    background: #292524 !important;
    color: #fafaf9 !important;
}

/* Django's stock submit-row rules are more specific than its ordinary button
   rules. Keep form actions on the same 32 px control geometry. */
.submit-row input[type="submit"] {
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 0.625rem !important;
    border: 1px solid transparent !important;
}

/* 6. Form primitives ----------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 400;
    transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
}

/* Keep one-line form controls as compact as selects and action buttons. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="file"],
.vTextField {
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.875rem;
}

select {
    min-height: 2rem;
    padding: 0.25rem 2rem 0.25rem 0.625rem;
}

textarea {
    min-height: 5rem;
    padding: 0.5rem 0.75rem;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted-foreground);
    opacity: 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--ring);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent);
}

body:not(.login):not(.popup) input:focus,
body:not(.login):not(.popup) input:focus-visible,
body:not(.login):not(.popup) select:focus,
body:not(.login):not(.popup) select:focus-visible,
body:not(.login):not(.popup) textarea:focus,
body:not(.login):not(.popup) textarea:focus-visible,
body:not(.login):not(.popup) .vTextField:focus,
body:not(.login):not(.popup) .vTextField:focus-visible {
    border-color: var(--brand-orange) !important;
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-orange) 20%, transparent) !important;
}

input:disabled,
select:disabled,
textarea:disabled {
    background: color-mix(in srgb, var(--input) 50%, transparent);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.errors input,
.errors select,
.errors textarea {
    border-color: var(--destructive);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--destructive) 20%, transparent);
}

.aligned label,
.form-row label,
label.required {
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
}

.help,
p.help,
div.help,
.readonly {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.errorlist,
.errornote {
    color: var(--destructive);
    font-size: 0.875rem;
    font-weight: 400;
}

.form-row {
    border-color: var(--border);
}

.submit-row {
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--muted) 50%, transparent);
    box-shadow: none;
}

/* Read-only item pages expose only a close action. It belongs to the page,
   not inside a second panel shell. */
.framework-readonly-change .submit-row {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.framework-readonly-change .submit-row .closelink,
.framework-readonly-change .submit-row .closelink:link,
.framework-readonly-change .submit-row .closelink:visited {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 0.625rem;
    border: 1px solid transparent;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
}

.framework-readonly-change .submit-row .closelink:hover {
    background: color-mix(in srgb, var(--primary) 85%, var(--background));
    color: var(--primary-foreground);
}

/* The canonical tabular-inline template places record actions last instead
   of letting Django's zero-width original column overlap the first field. */
.tabular th.original,
.tabular td.original,
.tabular th.delete,
.tabular td.delete {
    width: 1%;
    min-width: 5rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.tabular th.original,
.tabular th.delete {
    padding: 0 1rem;
}

/* One header-row rhythm for every inline column, including action columns. */
.inline-group .tabular thead th {
    height: 2.75rem;
    padding: 0 1rem !important;
    vertical-align: middle;
}

.framework-inline-mobile-label {
    display: none;
}

.tabular td.original a,
.tabular td.original a.inlineviewlink,
.tabular td.original a.inlinechangelink {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.625rem !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
    font-size: 0.8rem;
    font-weight: 500;
    background-image: none !important;
    text-decoration: none !important;
}

.tabular td.original a:hover,
.tabular td.original a.inlineviewlink:hover,
.tabular td.original a.inlinechangelink:hover {
    border-color: color-mix(in srgb, var(--foreground) 30%, var(--border));
    background: color-mix(in srgb, var(--muted) 35%, transparent);
    color: var(--brand-orange);
    text-decoration: none !important;
}

.tabular.inline-related tbody tr.has_original > td {
    padding-block: 0.75rem;
}

.tabular.inline-related tbody tr.has_original > td.original {
    padding-inline: 1rem;
}

/* Every content table uses one uninterrupted body surface. This intentionally
   resets Django's alternating row fills globally without affecting the
   sidebar navigation table. */
.content table tbody tr,
.content table tbody th,
.content table tbody td,
.inline-group .tabular tbody tr,
.inline-group .tabular tbody th,
.inline-group .tabular tbody td {
    background: var(--card) !important;
}

.content table tbody tr:hover,
.content table tbody tr:hover th,
.content table tbody tr:hover td,
.inline-group .tabular tbody tr.form-row:hover,
.inline-group .tabular tbody tr.form-row:hover th,
.inline-group .tabular tbody tr.form-row:hover td {
    background: color-mix(in srgb, var(--muted) 35%, var(--card)) !important;
}

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-sm);
    accent-color: var(--primary);
}

/* 7. Search, filters, tables, and pagination ----------------------------- */
.framework-changelist-controls {
    margin: 0 0 1rem;
}

.framework-changelist-controls-toggle {
    display: inline-flex;
    cursor: pointer;
    list-style: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 500;
}

.framework-changelist-controls-toggle::-webkit-details-marker {
    display: none;
}

.framework-changelist-controls-toggle:hover,
.framework-changelist-controls-toggle:focus-visible {
    color: var(--brand-orange);
}

.framework-changelist-controls-toggle:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--ring);
    outline-offset: 3px;
}

.framework-changelist-controls-chevron {
    width: 0.375rem;
    height: 0.375rem;
    margin-top: -0.1875rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
}

.framework-changelist-controls[open] .framework-changelist-controls-chevron {
    margin-top: 0.1875rem;
    transform: rotate(225deg);
}

.framework-changelist-controls-body {
    margin-top: 1rem;
}

#toolbar {
    margin: 0 0 1rem;
}

#toolbar form {
    gap: 0.5rem;
}

#toolbar #searchbar {
    width: min(28rem, 100%);
    height: 2rem;
    min-height: 2rem;
    background: var(--card);
}

#changelist-search input[type="submit"],
#changelist-search button[type="submit"] {
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 0.625rem !important;
    font-size: 0.875rem !important;
}

.change-list #changelist-filter {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.framework-filter-fields {
    gap: 0.75rem;
}

.framework-facet-toggle {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    margin: 0 0 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    text-decoration: none !important;
}

.framework-facet-toggle:hover,
.framework-facet-toggle:focus-visible {
    color: var(--brand-orange);
    text-decoration: none !important;
}

.framework-filter {
    width: 12.5rem;
}

.framework-filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
}

.framework-filter-trigger {
    height: 2rem;
    padding-inline: 0.75rem;
    border-color: var(--input);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--muted-foreground);
}

.framework-filter[open] .framework-filter-trigger {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent);
}

.change-list #changelist-filter .framework-filter > ul {
    top: calc(100% - 0.375rem) !important;
    margin-top: 0 !important;
    padding: 0.25rem;
    border-color: var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: 0 10px 20px rgba(11, 10, 9, 0.12);
}

.change-list #changelist .actions .framework-action-dropdown > ul {
    top: calc(100% + 0.25rem) !important;
    margin-top: 0 !important;
}

.framework-filter li a:hover,
.framework-filter li a:focus-visible {
    background: transparent;
    color: var(--brand-orange);
    text-decoration: none;
}

.framework-filter li a,
.framework-filter li a:link,
.framework-filter li a:visited {
    text-decoration: none;
}

.change-list #changelist-filter .framework-filter li a,
.change-list #changelist-filter .framework-filter li a:link,
.change-list #changelist-filter .framework-filter li a:visited,
.change-list #changelist-filter .framework-filter li a:hover,
.change-list #changelist-filter .framework-filter li a:focus-visible {
    text-decoration: none !important;
}

.change-list #changelist .actions {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    min-height: 2rem;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.change-list #changelist .actions .action-counter {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    margin: 0;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.change-list #changelist .actions .button {
    margin-inline: 0;
}

.change-list #changelist .actions select {
    height: 2rem;
}

.change-list #changelist .actions .framework-action-field {
    min-width: 12.5rem;
    align-items: flex-start;
}

.change-list #changelist .actions .framework-action-dropdown {
    width: 12.5rem;
}

.change-list #changelist .actions .framework-action-dropdown > summary {
    gap: 0.375rem;
}

/* The legacy action-bar rule makes every nested span consume a full row.
   Keep the custom action control's spans in their intended filter layout. */
.change-list #changelist .actions .framework-action-dropdown > summary > span {
    flex: 0 0 auto;
}

.change-list #changelist .actions .framework-action-dropdown .framework-filter-trigger {
    flex: 0 0 auto;
}

.change-list #changelist .actions .framework-action-dropdown .framework-filter-value {
    flex: 1 1 auto;
}

.change-list #changelist .actions .framework-action-dropdown .framework-filter-chevron {
    flex: 0 0 auto;
}

.change-list #changelist .actions .framework-action-dropdown button {
    display: flex;
    min-height: 2rem;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--foreground);
    font: inherit;
    line-height: 1.25rem;
    text-align: left;
}

.change-list #changelist .actions .framework-action-dropdown button:hover,
.change-list #changelist .actions .framework-action-dropdown button:focus-visible {
    background: var(--muted);
    color: var(--brand-orange);
    outline: none;
}

.change-list #changelist .actions .framework-action-dropdown li.selected > button {
    color: var(--brand-orange);
}

.change-list #changelist-form .results {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--card);
}

.change-list #changelist-form .results table {
    min-width: 45rem;
    background: var(--card);
    color: var(--card-foreground);
    font-size: 0.875rem;
}

.change-list #changelist-form .results thead {
    background: color-mix(in srgb, var(--muted) 60%, transparent);
}

.change-list #changelist-form .results thead th,
.change-list #changelist-form .results thead td {
    height: 2.75rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.change-list #changelist-form .results tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background-color 150ms;
}

.change-list #changelist-form .results tbody tr:last-child {
    border-bottom: 0;
}

.change-list #changelist-form .results tbody tr:hover {
    background: color-mix(in srgb, var(--muted) 35%, transparent);
}

.change-list #changelist-form .results tbody tr.selected,
.change-list #changelist-form .results tbody tr:has(.action-select:checked) {
    background: var(--selection-row);
}

.change-list #changelist-form .results tbody tr.selected > th,
.change-list #changelist-form .results tbody tr.selected > td,
.change-list #changelist-form .results tbody tr:has(.action-select:checked) > th,
.change-list #changelist-form .results tbody tr:has(.action-select:checked) > td {
    background: var(--selection-row) !important;
}

.change-list #changelist-form .results tbody th,
.change-list #changelist-form .results tbody td {
    height: 3rem;
    padding: 0.75rem 1rem;
    border: 0;
    color: var(--foreground);
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

/* Django adds padding to the header's inner .text span, while row action
   checkboxes sit directly in their cell. Give both the same column geometry. */
.change-list #changelist-form .results .action-checkbox-column,
.change-list #changelist-form .results .action-checkbox {
    width: 2.75rem;
    min-width: 2.75rem;
    box-sizing: border-box;
    padding-inline: 1rem 0;
    text-align: start;
    vertical-align: middle;
}

.change-list #changelist-form .results .action-checkbox-column .text span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

.change-list #changelist-form .changelist-footer {
    min-height: 3rem;
    padding: 0.75rem;
    border-color: var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--card);
}

.change-list #changelist-form .paginator {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.framework-result-summary {
    white-space: nowrap;
}

.framework-page-controls {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
}

.framework-page-controls li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.paginator a:link,
.paginator a:visited,
.paginator .this-page {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--radius-md);
}

.paginator .this-page {
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
}

/* 8. Messages, dashboard, and account popovers -------------------------- */
ul.messagelist li {
    border: 1px solid var(--border);
    border-left: 2px solid var(--brand-accent);
    border-radius: var(--radius-lg);
    background-color: var(--card);
    color: var(--foreground);
    box-shadow: none;
}

.framework-account-popover {
    min-width: 12rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: 0 10px 24px rgba(11, 10, 9, 0.14);
}

.framework-account-popover a,
.framework-account-popover button {
    min-height: 2rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--popover-foreground);
    font-size: 0.875rem;
    font-weight: 400;
}

.framework-account-popover a:hover,
.framework-account-popover button:hover {
    background: transparent;
    color: var(--brand-orange);
}

.framework-header-theme-selector {
    display: flex;
    align-items: center;
    justify-content: center;
}

body:not(.login):not(.popup) #header .framework-header-theme-selector .theme-toggle {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--foreground);
    box-shadow: none;
}

body:not(.login):not(.popup) #header .framework-header-theme-selector .theme-toggle:hover {
    background: color-mix(in srgb, var(--muted) 60%, transparent);
    color: var(--brand-orange);
}

body:not(.login):not(.popup) #header .framework-header-theme-selector .theme-toggle svg {
    width: 1rem !important;
    height: 1rem !important;
}

.dashboard #content-main .module,
.dashboard #content-related .module {
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.celery-monitor-empty {
    padding-top: 0.5rem;
}

.celery-task-table {
    width: 100%;
}

.dashboard .module caption a,
.dashboard .module caption a:link,
.dashboard .module caption a:visited,
.dashboard .module caption a:hover,
.dashboard .module caption a:focus-visible {
    color: inherit;
    cursor: default;
    text-decoration: none !important;
}

.dashboard #content-main .module tbody tr,
.dashboard #content-related .module tbody tr,
.dashboard #content-main .module tbody th,
.dashboard #content-main .module tbody td,
.dashboard #content-related .module tbody th,
.dashboard #content-related .module tbody td {
    background: var(--card) !important;
}

.dashboard #content-main .module tbody tr:hover,
.dashboard #content-related .module tbody tr:hover,
.dashboard #content-main .module tbody tr:hover th,
.dashboard #content-main .module tbody tr:hover td,
.dashboard #content-related .module tbody tr:hover th,
.dashboard #content-related .module tbody tr:hover td {
    background: color-mix(in srgb, var(--muted) 35%, var(--card)) !important;
}

/* 9. Login --------------------------------------------------------------- */
body.login {
    min-height: 100svh;
    background: var(--background);
}

body.login #container {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: none;
}

body.login #content h1 {
    font-size: 2.25rem;
}

/* The login action is a standalone primary button, not a nested panel. */
body.login .submit-row {
    margin: 1rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 10. Responsive behavior ----------------------------------------------- */
@media (min-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 0.875rem;
    }
}

/* Django's responsive base stacks the header below 1024 px. Keep the page
   context and theme selector in one utility row at tablet and mobile sizes. */
@media (max-width: 1024px) {
    body:not(.login):not(.popup) #header {
        display: flex;
        height: 3rem;
        min-height: 3rem;
        box-sizing: border-box;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0 0.75rem 0 4rem;
    }

    body:not(.login):not(.popup) #header #branding {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        align-items: center;
        margin: 0;
    }

    body:not(.login):not(.popup) #header #user-tools {
        display: flex;
        max-width: none;
        flex: 0 0 auto;
        align-items: center;
        margin: 0 0 0 auto;
        overflow: visible;
        line-height: 1;
        white-space: nowrap;
    }

    body:not(.login):not(.popup) #header .framework-header-theme-selector {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    /* Django adds horizontal search margins throughout its tablet range.
       Normalize the complete search row here, not only at phone widths. */
    #toolbar form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    #toolbar form #searchbar {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        margin: 0;
        padding-inline: 0.625rem !important;
    }

    #toolbar .search-result-count {
        width: auto;
        min-width: 0;
        grid-column: 1 / -1;
        margin: 0;
    }
}

@media (max-width: 767px) {
    body:not(.login):not(.popup) #toggle-nav-sidebar {
        display: grid;
        align-items: center;
        justify-content: center;
    }

    .framework-sidebar-close {
        display: block;
        position: absolute;
        z-index: 2;
        top: 0.625rem;
        right: 0.625rem;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--sidebar-foreground);
        cursor: pointer;
    }

    .framework-sidebar-close::before,
    .framework-sidebar-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.875rem;
        height: 1px;
        background: currentColor;
        transform-origin: center;
    }

    .framework-sidebar-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .framework-sidebar-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .framework-sidebar-close:hover,
    .framework-sidebar-close:focus-visible {
        background: color-mix(in srgb, var(--muted) 60%, transparent);
        color: var(--brand-orange);
        outline: none;
    }

    .framework-sidebar-close:focus-visible {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent);
    }

    html[data-admin-sidebar-open="true"] body:not(.login):not(.popup) .toggle-nav-sidebar {
        visibility: hidden;
        pointer-events: none;
    }

    /* Django sizes mobile aligned-form children against the viewport. Inside
       the inset admin surface that is wider than their actual container and
       creates a page-level horizontal scrollbar. Size them against the form
       row instead, including autocomplete/related-widget wrappers. */
    .change-form .aligned .form-row > div,
    .change-form .aligned .form-row .flex-container,
    .change-form .aligned .form-row label,
    .change-form .aligned .form-row .readonly,
    .change-form .aligned .form-row .related-widget-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .change-form .aligned .form-row .select2-container {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    .change-form .submit-row {
        width: 100%;
        box-sizing: border-box;
    }

    /* Tabular formsets become labeled record blocks on mobile. Keeping the
       native table structure in the DOM preserves Django inline JavaScript,
       while removing the wide presentation prevents nested horizontal
       scrolling on edit pages. */
    .change-form .inline-group .tabular .wrapper {
        overflow-x: visible;
    }

    .change-form .inline-group .tabular table,
    .change-form .inline-group .tabular tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .change-form .inline-group .tabular thead {
        display: none;
    }

    .change-form .inline-group .tabular tbody tr.form-row {
        display: grid;
        width: 100%;
        box-sizing: border-box;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border);
    }

    .change-form .inline-group .tabular tbody tr.form-row:last-of-type {
        border-bottom: 0;
    }

    .change-form .inline-group .tabular tbody tr.form-row > td {
        display: grid;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: minmax(6.5rem, 35%) minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;
        padding: 0 !important;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .change-form .inline-group .tabular tbody tr.form-row > td.hidden,
    .change-form .inline-group .tabular tbody tr.form-row > td.original:not(:has(a)) {
        display: none;
    }

    .framework-inline-mobile-label {
        display: block;
        min-width: 0;
        color: var(--muted-foreground);
        font-family: "Geist Mono", monospace;
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .change-form .inline-group .tabular tbody tr.form-row > td > p,
    .change-form .inline-group .tabular tbody tr.form-row > td > p a,
    .change-form .inline-group .tabular tbody tr.form-row > td .clearable-file-input {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .change-form .inline-group .tabular tbody tr.form-row input:not([type="checkbox"]),
    .change-form .inline-group .tabular tbody tr.form-row select,
    .change-form .inline-group .tabular tbody tr.form-row textarea {
        width: 100%;
        max-width: 100%;
    }

    .change-form .inline-group .tabular tbody tr.add-row,
    .change-form .inline-group .tabular tbody tr.add-row > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .change-form .inline-group .tabular tbody tr.add-row > td {
        padding: 0.75rem 1rem;
    }

    body:not(.login):not(.popup) #content {
        padding: 1rem;
    }

    body:not(.login):not(.popup) .main > #nav-sidebar {
        width: min(18rem, calc(100vw - 2rem));
        border-radius: var(--radius-lg);
        background: var(--sidebar);
        box-shadow: 0 12px 28px rgba(11, 10, 9, 0.18);
    }

    .framework-page-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .framework-page-heading h1 {
        grid-column: 1;
    }

    .object-tools {
        justify-content: flex-start;
    }

    .change-list #content-main > .object-tools {
        margin: 0 0 0.75rem;
    }

    .change-list #changelist .actions {
        align-items: flex-end;
        flex-direction: row;
        gap: 0.75rem;
    }

    .change-list #changelist .actions .framework-action-field,
    .change-list #changelist .actions .framework-action-dropdown {
        min-width: 0;
    }

    .change-list #changelist .actions .framework-action-field {
        display: block;
        width: auto;
        flex: 1 1 auto;
    }

    .change-list #changelist .actions .framework-action-dropdown {
        width: 100%;
    }

    .change-list #changelist .actions .framework-action-dropdown > ul {
        width: 100%;
        max-width: none;
    }

    .change-list #changelist .actions .button {
        align-self: flex-end;
    }

    .change-list #changelist .actions .action-counter {
        width: 100%;
        flex: 0 0 100%;
        align-self: flex-start;
    }

    .framework-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .framework-filter,
    .framework-filter-trigger {
        width: 100%;
        min-width: 0;
    }

    .submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-row input,
    .submit-row a {
        width: 100%;
        justify-content: center;
    }

    .change-list #changelist-form .paginator {
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
}

/* 11. Theme and motion --------------------------------------------------- */
.framework-theme-changing *,
.framework-theme-changing *::before,
.framework-theme-changing *::after {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .motion-safe-brand {
        display: none !important;
    }
}