/*
 * Shared Jeannie Meows admin layout.
 *
 * The custom litter intake screen is the visual reference for the
 * entire staff area: calm panels, strong section headings, aligned
 * controls, and actions near the place where work begins.
 */

:root {
    --jeannie-admin-radius: 0.8rem;
    --jeannie-admin-small-radius: 0.55rem;
    --jeannie-admin-shadow:
        0 0.2rem 0.8rem rgb(0 0 0 / 6%);
    --jeannie-rescue-yellow: #fff9ad;
    --jeannie-rescue-blue: #7bb7db;
    --jeannie-rescue-gradient:
        linear-gradient(
            110deg,
            var(--jeannie-rescue-yellow) 0%,
            #f9fcfe 52%,
            var(--jeannie-rescue-blue) 100%
        );
    --jeannie-rescue-gradient-text: #142b36;
    --jeannie-admin-field-border:
        color-mix(
            in srgb,
            var(--hairline-color) 78%,
            var(--body-quiet-color)
        );
    --jeannie-admin-sidebar-bg: #f5fafc;
    --jeannie-admin-sidebar-border: #bfd3dc;
    --jeannie-admin-sidebar-text: #142b36;
    --jeannie-admin-sidebar-muted: #496570;
    --jeannie-admin-sidebar-link: #075979;
    --jeannie-admin-sidebar-link-hover: #003f58;
    --jeannie-admin-sidebar-section-bg: #1f5268;
    --jeannie-admin-sidebar-section-text: #ffffff;
    --jeannie-admin-sidebar-selected-bg: #d5edf7;
    --jeannie-admin-sidebar-selected-text: #103746;
    --jeannie-admin-sidebar-field-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --jeannie-admin-sidebar-bg: #16242b;
        --jeannie-admin-sidebar-border: #405862;
        --jeannie-admin-sidebar-text: #f2f7f9;
        --jeannie-admin-sidebar-muted: #c1d0d6;
        --jeannie-admin-sidebar-link: #9edcf4;
        --jeannie-admin-sidebar-link-hover: #d7f3ff;
        --jeannie-admin-sidebar-section-bg: #244e61;
        --jeannie-admin-sidebar-section-text: #ffffff;
        --jeannie-admin-sidebar-selected-bg: #2f5362;
        --jeannie-admin-sidebar-selected-text: #ffffff;
        --jeannie-admin-sidebar-field-bg: #20343d;
    }
}

html[data-theme="light"] {
    --jeannie-admin-sidebar-bg: #f5fafc;
    --jeannie-admin-sidebar-border: #bfd3dc;
    --jeannie-admin-sidebar-text: #142b36;
    --jeannie-admin-sidebar-muted: #496570;
    --jeannie-admin-sidebar-link: #075979;
    --jeannie-admin-sidebar-link-hover: #003f58;
    --jeannie-admin-sidebar-section-bg: #1f5268;
    --jeannie-admin-sidebar-section-text: #ffffff;
    --jeannie-admin-sidebar-selected-bg: #d5edf7;
    --jeannie-admin-sidebar-selected-text: #103746;
    --jeannie-admin-sidebar-field-bg: #ffffff;
}

html[data-theme="dark"] {
    --jeannie-admin-sidebar-bg: #16242b;
    --jeannie-admin-sidebar-border: #405862;
    --jeannie-admin-sidebar-text: #f2f7f9;
    --jeannie-admin-sidebar-muted: #c1d0d6;
    --jeannie-admin-sidebar-link: #9edcf4;
    --jeannie-admin-sidebar-link-hover: #d7f3ff;
    --jeannie-admin-sidebar-section-bg: #244e61;
    --jeannie-admin-sidebar-section-text: #ffffff;
    --jeannie-admin-sidebar-selected-bg: #2f5362;
    --jeannie-admin-sidebar-selected-text: #ffffff;
    --jeannie-admin-sidebar-field-bg: #20343d;
}

body {
    background:
        linear-gradient(
            180deg,
            rgb(121 188 220 / 8%),
            transparent 15rem
        ),
        var(--body-bg);
}

#header {
    background: var(--jeannie-rescue-gradient);
    color: var(--jeannie-rescue-gradient-text);
    box-shadow: 0 0.15rem 0.55rem rgb(0 0 0 / 12%);
    min-height: 3.5rem;
    padding: 0.7rem 1.5rem;
}

#header #branding,
#header #site-name,
#header #site-name a,
#header #site-name a:link,
#header #site-name a:visited,
#header #user-tools {
    color: var(--jeannie-rescue-gradient-text);
}

#header #user-tools a,
#header #user-tools a:link,
#header #user-tools a:visited,
#header .theme-toggle {
    color: var(--jeannie-rescue-gradient-text);
    font-weight: 700;
}

#header #user-tools a:hover,
#header #user-tools a:focus-visible,
#header .theme-toggle:hover,
#header .theme-toggle:focus-visible {
    color: var(--jeannie-rescue-gradient-text);
    text-decoration: underline;
    text-decoration-thickness: 0.12rem;
    text-underline-offset: 0.22rem;
}

#header .theme-toggle {
    background: rgb(255 255 255 / 52%);
    border: 1px solid rgb(20 43 54 / 30%);
    border-radius: 999px;
}

#branding #site-name {
    font-weight: 750;
    letter-spacing: 0.01em;
}

#branding #site-name a {
    align-items: center;
    display: inline-flex;
    min-height: 2rem;
}

div.breadcrumbs {
    background: var(--jeannie-rescue-gradient);
    border-bottom: 1px solid rgb(20 43 54 / 20%);
    border-top: 1px solid rgb(20 43 54 / 14%);
    color: var(--jeannie-rescue-gradient-text);
    padding: 0.75rem 1.5rem;
}

div.breadcrumbs a,
div.breadcrumbs a:link,
div.breadcrumbs a:visited {
    color: var(--jeannie-rescue-gradient-text);
    font-weight: 750;
}

div.breadcrumbs a:hover,
div.breadcrumbs a:focus-visible {
    color: var(--jeannie-rescue-gradient-text);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

#content {
    padding: 1.5rem;
}

#content > h1,
#content-main > h1 {
    color: var(--body-fg);
    font-size: clamp(1.55rem, 2.5vw, 2.1rem);
    font-weight: 750;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

#content-main {
    min-width: 0;
}

/*
 * Keep every app and model label in the Django navigation sidebar
 * readable in light, dark, and automatic color modes.
 */
#nav-sidebar,
#nav-sidebar .module {
    background: var(--jeannie-admin-sidebar-bg);
    color: var(--jeannie-admin-sidebar-text);
}

#nav-sidebar {
    border-right-color:
        var(--jeannie-admin-sidebar-border);
}

#nav-sidebar .module {
    border-color: var(--jeannie-admin-sidebar-border);
    box-shadow: none;
}

#nav-sidebar .module caption {
    background: var(--jeannie-rescue-gradient);
    border-bottom-color:
        var(--jeannie-admin-sidebar-border);
}

#nav-sidebar .module caption,
#nav-sidebar .module caption a,
#nav-sidebar .module caption a:link,
#nav-sidebar .module caption a:visited {
    color:
        var(--jeannie-rescue-gradient-text) !important;
    font-weight: 900;
    text-shadow: 0 1px 0 rgb(255 255 255 / 85%);
}

#nav-sidebar .module caption a.section {
    -webkit-text-fill-color:
        var(--jeannie-rescue-gradient-text);
}

#nav-sidebar .current-app .section,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
    color:
        var(--jeannie-rescue-gradient-text) !important;
    -webkit-text-fill-color:
        var(--jeannie-rescue-gradient-text);
}

#nav-sidebar .module th,
#nav-sidebar .module td {
    background: transparent;
    border-bottom-color:
        var(--jeannie-admin-sidebar-border);
    color: var(--jeannie-admin-sidebar-text);
}

#nav-sidebar .module th a:link,
#nav-sidebar .module th a:visited,
#nav-sidebar .module td a:link,
#nav-sidebar .module td a:visited {
    color: var(--jeannie-admin-sidebar-link);
    font-weight: 700;
}

#nav-sidebar .module th a:hover,
#nav-sidebar .module th a:focus-visible,
#nav-sidebar .module td a:hover,
#nav-sidebar .module td a:focus-visible {
    color:
        var(--jeannie-admin-sidebar-link-hover);
    text-decoration: underline;
}

#nav-sidebar .current-model,
#nav-sidebar .current-model th,
#nav-sidebar .current-model td {
    background:
        var(--jeannie-admin-sidebar-selected-bg);
    color:
        var(--jeannie-admin-sidebar-selected-text);
}

#nav-sidebar .current-model a,
#nav-sidebar .current-model a:link,
#nav-sidebar .current-model a:visited {
    color:
        var(--jeannie-admin-sidebar-selected-text);
    font-weight: 800;
}

#nav-filter {
    background:
        var(--jeannie-admin-sidebar-field-bg);
    border-color:
        var(--jeannie-admin-sidebar-border);
    color: var(--jeannie-admin-sidebar-text);
}

#nav-filter::placeholder {
    color: var(--jeannie-admin-sidebar-muted);
    opacity: 1;
}

/* Actions belong above the work area, never isolated at far right. */
#content .object-tools {
    align-items: center;
    clear: both;
    display: flex;
    float: none;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-start;
    margin: 0 0 1rem;
    padding: 0;
    position: static;
}

#content .object-tools li {
    float: none;
    height: auto;
    margin: 0;
}

#content .object-tools a,
#content .object-tools a:link,
#content .object-tools a:visited {
    align-items: center;
    border-radius: var(--jeannie-admin-small-radius);
    display: inline-flex;
    font-weight: 700;
    min-height: 2rem;
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
}

#content .object-tools a.addlink {
    background-position: 0.65rem center;
    padding-left: 1.75rem;
}

#changelist {
    clear: both;
}

#changelist .changelist-form-container {
    min-width: 0;
}

#changelist .actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/*
 * Standard change forms now use the same panel treatment as the
 * new-litter workflow, without requiring a custom template per model.
 */
.change-form #content-main > form > div > fieldset.module,
.change-form #content-main > form > fieldset.module,
.module,
.inline-group {
    background: var(--body-bg);
    border: 1px solid var(--hairline-color);
    border-radius: var(--jeannie-admin-radius);
    box-shadow: var(--jeannie-admin-shadow);
    margin-bottom: 1.1rem;
    overflow: hidden;
}

fieldset.module > h2,
.module > h2,
.module caption,
.inline-group > h2 {
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--hairline-color);
    color: var(--body-fg);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: 0;
    margin: 0;
    padding: 0.9rem 1.1rem;
    text-transform: none;
}

fieldset.module .description {
    background: color-mix(
        in srgb,
        var(--darkened-bg) 55%,
        var(--body-bg)
    );
    border-bottom: 1px solid var(--hairline-color);
    color: var(--body-quiet-color);
    margin: 0;
    padding: 0.75rem 1.1rem;
}

.form-row {
    border-bottom-color: var(--hairline-color);
    padding: 0.9rem 1.1rem;
}

.form-row:last-child {
    border-bottom: 0;
}

.aligned label,
.form-row label {
    color: var(--body-fg);
    font-weight: 700;
}

.aligned label {
    padding-top: 0.55rem;
}

.aligned .help,
.form-row .help,
.help {
    color: var(--body-quiet-color);
    line-height: 1.45;
}

.form-row input:not(
    [type="checkbox"]
):not(
    [type="radio"]
):not(
    [type="hidden"]
),
.form-row select,
.form-row textarea,
#changelist-search input[type="text"],
#changelist .actions select {
    border-color: var(--jeannie-admin-field-border);
    border-radius: 0.45rem;
    box-sizing: border-box;
    min-height: 2.35rem;
}

.form-row textarea {
    line-height: 1.45;
    min-height: 5rem;
    resize: vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
#changelist-search input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.18rem rgb(121 188 220 / 22%);
    outline: none;
}

.readonly {
    background: var(--darkened-bg);
    border-radius: 0.4rem;
    display: inline-block;
    min-height: 1.4rem;
    padding: 0.45rem 0.6rem;
}

.submit-row {
    align-items: center;
    background: var(--body-bg);
    border: 1px solid var(--hairline-color);
    border-radius: var(--jeannie-admin-radius);
    box-shadow: var(--jeannie-admin-shadow);
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-start;
    padding: 0.9rem 1rem;
}

.submit-row input,
.submit-row a,
input[type="submit"],
button,
.button {
    border-radius: var(--jeannie-admin-small-radius);
}

.submit-row input,
.submit-row a {
    margin: 0 !important;
}

.submit-row p.deletelink-box {
    margin-left: auto;
}

.inline-group .tabular fieldset.module {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.inline-group .tabular tr.has_original td {
    padding-top: 0.8rem;
}

.inline-related {
    border-bottom-color: var(--hairline-color);
}

.inline-related h3 {
    background: color-mix(
        in srgb,
        var(--darkened-bg) 72%,
        var(--body-bg)
    );
    color: var(--body-fg);
    padding: 0.75rem 1rem;
}

/* Search, filters, and data tables read as one organized workspace. */
#changelist #toolbar,
#changelist-search {
    background: var(--body-bg);
    border: 1px solid var(--hairline-color);
    border-radius: var(--jeannie-admin-radius);
    box-shadow: var(--jeannie-admin-shadow);
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
}

#changelist-search > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

#changelist-search label {
    align-items: center;
    display: inline-flex;
}

#changelist-search input[type="text"] {
    flex: 1 1 18rem;
    min-width: 12rem;
}

#changelist .actions {
    background: var(--darkened-bg);
    border: 1px solid var(--hairline-color);
    border-radius: var(--jeannie-admin-small-radius);
    margin-bottom: 0.8rem;
    padding: 0.7rem 0.8rem;
}

#changelist .results {
    background: var(--body-bg);
    border: 1px solid var(--hairline-color);
    border-radius: var(--jeannie-admin-radius);
    box-shadow: var(--jeannie-admin-shadow);
    overflow-x: auto;
}

#changelist .results table {
    border-collapse: separate;
    border-spacing: 0;
}

#changelist .results thead th {
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--hairline-color);
    color: var(--body-fg);
    font-weight: 750;
}

#changelist .results tbody tr:hover {
    background: color-mix(
        in srgb,
        var(--accent) 7%,
        var(--body-bg)
    );
}

#changelist .results tbody tr:last-child td,
#changelist .results tbody tr:last-child th {
    border-bottom: 0;
}

#changelist-filter {
    background: var(--body-bg);
    border: 1px solid var(--hairline-color);
    border-radius: var(--jeannie-admin-radius);
    box-shadow: var(--jeannie-admin-shadow);
    overflow: hidden;
}

#changelist-filter h2 {
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--hairline-color);
    color: var(--body-fg);
    font-size: 1rem;
    text-transform: none;
}

#changelist-filter h3 {
    color: var(--body-fg);
    font-weight: 750;
}

.paginator {
    background: transparent;
    border: 0;
    color: var(--body-quiet-color);
    margin-top: 0.8rem;
}

/* Dashboard and app index modules share the same card language. */
.dashboard #content-main,
.app-index #content-main {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(
        auto-fit,
        minmax(21rem, 1fr)
    );
}

.dashboard #content-main .module,
.app-index #content-main .module {
    margin: 0;
}

.dashboard #content-main .module caption,
.app-index #content-main .module caption {
    background: var(--jeannie-rescue-gradient);
    border-bottom-color: rgb(20 43 54 / 22%);
    color:
        var(--jeannie-rescue-gradient-text) !important;
    font-size: 1.05rem;
    font-weight: 900;
    text-shadow: 0 1px 0 rgb(255 255 255 / 85%);
}

.dashboard #content-main .module caption a,
.dashboard #content-main .module caption a:link,
.dashboard #content-main .module caption a:visited,
.app-index #content-main .module caption a,
.app-index #content-main .module caption a:link,
.app-index #content-main .module caption a:visited {
    color:
        var(--jeannie-rescue-gradient-text) !important;
    -webkit-text-fill-color:
        var(--jeannie-rescue-gradient-text);
    font-weight: 900;
}

.dashboard #content-main .module caption a:hover,
.dashboard #content-main .module caption a:focus-visible,
.app-index #content-main .module caption a:hover,
.app-index #content-main .module caption a:focus-visible {
    color: var(--jeannie-rescue-gradient-text);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.dashboard #content-main .module tbody a,
.dashboard #content-main .module tbody a:link,
.dashboard #content-main .module tbody a:visited,
.app-index #content-main .module tbody a,
.app-index #content-main .module tbody a:link,
.app-index #content-main .module tbody a:visited {
    color: var(--jeannie-admin-sidebar-link);
    font-weight: 750;
}

.dashboard #content-main .module tbody a:hover,
.dashboard #content-main .module tbody a:focus-visible,
.app-index #content-main .module tbody a:hover,
.app-index #content-main .module tbody a:focus-visible {
    color:
        var(--jeannie-admin-sidebar-link-hover);
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

.dashboard .module table,
.app-index .module table {
    width: 100%;
}

.dashboard .module td,
.dashboard .module th,
.app-index .module td,
.app-index .module th {
    padding-bottom: 0.7rem;
    padding-top: 0.7rem;
}

ul.messagelist {
    margin: 0 0 1rem;
    padding: 0;
}

ul.messagelist li {
    border: 1px solid var(--hairline-color);
    border-radius: var(--jeannie-admin-small-radius);
    box-shadow: 0 0.12rem 0.4rem rgb(0 0 0 / 5%);
    margin-bottom: 0.55rem;
}

.errornote,
.errorlist {
    border-radius: var(--jeannie-admin-small-radius);
}

.selector {
    max-width: 100%;
}

.selector .selector-available,
.selector .selector-chosen {
    border: 1px solid var(--hairline-color);
    border-radius: var(--jeannie-admin-small-radius);
    overflow: hidden;
}

@media (max-width: 767px) {
    #header,
    div.breadcrumbs,
    #content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #content .object-tools {
        align-items: stretch;
        flex-direction: column;
    }

    #content .object-tools a {
        box-sizing: border-box;
        justify-content: flex-start;
        width: 100%;
    }

    .aligned label {
        display: block;
        float: none;
        padding: 0 0 0.35rem;
        width: auto;
    }

    .form-row input:not(
        [type="checkbox"]
    ):not(
        [type="radio"]
    ):not(
        [type="hidden"]
    ),
    .form-row select,
    .form-row textarea {
        max-width: 100%;
        width: 100%;
    }

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

    .submit-row input,
    .submit-row a {
        box-sizing: border-box;
        text-align: center;
        width: 100%;
    }

    .submit-row p.deletelink-box {
        margin: 0;
    }

    .dashboard #content-main,
    .app-index #content-main {
        grid-template-columns: 1fr;
    }
}