/* django-admin-shell — small patches on top of Django Admin CSS.
   Markup should use Django Admin classes. This file only fixes gaps. */

html[data-theme="light"] {
    --primary: #1d4f73;
    --secondary: #12344d;
    --accent: #ffffff;
    --primary-fg: #fff;
    --body-fg: #1a1a1a;
    --body-bg: #f4f1ea;
    --body-quiet-color: #333;
    --body-loud-color: #000;
    --header-color: #ffffff;
    --header-branding-color: #ffffff;
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);
    --breadcrumbs-fg: #ffffff;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: var(--primary);
    --link-fg: #0b4f8a;
    --link-hover-color: #083a66;
    --link-selected-fg: #0b4f8a;
    --hairline-color: #e8e8e8;
    --border-color: #ccc;
    --error-fg: #ba2121;
    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;
    --darkened-bg: #f8f8f8;
    --selected-bg: #e4e4e4;
    --selected-row: #ffe08a;
    --button-fg: #fff;
    --button-bg: var(--secondary);
    --button-hover-bg: #1d4f73;
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: #0b2233;
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;
    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);
}

body.dashboard,
body.change-list,
body.change-form,
body.login {
    font-family: var(--font-family-primary);
}

#container table {
    caption-side: top;
}

/* Keep dashboard pages full width when the app is not vanilla Django. */
.dashboard #content.colM,
.dashboard #content.full {
    width: auto;
    max-width: 100%;
}

#user-tools .lang-switcher {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
}

#user-tools .lang-switcher a {
    color: var(--header-link-color);
}

.login #header {
    justify-content: space-between;
}

.login #user-tools {
    float: none;
    margin: 0;
}

.login .form-control,
.login input[type="text"],
.login input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
}

.login .submit-row {
    overflow: visible;
}

.login .submit-row input[type="submit"],
.login .submit-row .btn,
.login .submit-row .btn-fslc,
.login .submit-row a.default {
    background: var(--default-button-bg);
    border: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 15px;
    border-radius: 4px;
    width: auto;
    text-decoration: none;
    display: inline-block;
}

.login .submit-row a.default:hover {
    background: var(--default-button-hover-bg);
}

.login .errornote,
.login .alert {
    font-size: 0.8125rem;
    margin-bottom: 12px;
}

.password-toggle-btn {
    background: none;
    border: 0;
    color: var(--link-fg);
    cursor: pointer;
    padding: 4px 0 0;
    font-size: 0.75rem;
}

.submit-row a.default {
    display: inline-block;
    background: var(--default-button-bg);
    color: var(--button-fg);
    padding: 10px 15px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 0.9375rem;
    height: auto;
    text-decoration: none;
}

.submit-row a.default:hover {
    background: var(--default-button-hover-bg);
    color: var(--button-fg);
    text-decoration: none;
}

.submit-row button.deletelink,
#result_list button.deletelink {
    background: none;
    border: 0;
    padding: 0;
    color: var(--delete-button-bg);
    cursor: pointer;
    font-size: inherit;
}

.submit-row button.deletelink {
    display: block;
    background: var(--delete-button-bg);
    color: var(--button-fg);
    border-radius: 4px;
    padding: 10px 15px;
}

#changelist table {
    width: 100%;
}

.base-svgs {
    display: none;
}

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

#nav-sidebar .module.nav-collapsible:not(.current-app) tr {
    display: none;
}

#nav-sidebar.nav-filtering .module.nav-collapsible.nav-filter-hit tr.nav-search-match,
#nav-sidebar.nav-filtering .module.nav-collapsible.current-app tr.nav-search-match {
    display: table-row !important;
}

#nav-sidebar.nav-filtering .module.nav-filter-hit {
    outline: 1px solid var(--selected-row, #ffe08a);
}

#nav-sidebar table td,
#nav-sidebar table th {
    border-bottom: 1px solid var(--hairline-color);
}

#nav-sidebar details.nav-group {
    margin: 0;
}

#nav-sidebar details.nav-group > summary.section {
    display: block;
    margin: 0;
    padding: 8px 8px 8px 16px;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    background: var(--primary);
    color: var(--header-link-color);
    cursor: pointer;
    list-style: none;
}

#nav-sidebar details.nav-group > summary.section::-webkit-details-marker,
#nav-sidebar details.nav-group > summary.section::marker {
    display: none;
    content: "";
}

#nav-sidebar details.nav-group > summary.section::after {
    content: "\00BB";
    float: right;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
}

#nav-sidebar details.nav-group[open] > summary.section::after {
    content: "\00AB";
}

#nav-sidebar details.nav-group.current-app > summary.section {
    color: var(--header-color);
    font-weight: bold;
}

#nav-sidebar details.nav-subgroup > summary.section {
    padding-left: 24px;
    font-size: 0.6875rem;
}

#nav-sidebar details.nav-group:not([open]) > table,
#nav-sidebar details.nav-group:not([open]) > details {
    display: none !important;
}

/* Keep database text visible inside form boxes, cards, and tables. */
#container {
    min-width: 0;
}

#content-main,
#content-main .form-row,
#content-main .module,
#content-main .card,
#content-main .card-body,
#content-main .fieldset,
#content-main fieldset {
    overflow: visible;
}

#content-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
#content-main select,
#content-main textarea,
#content-main .form-control,
#content-main .form-select {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    height: auto;
    min-height: 2.25rem;
    line-height: 1.4;
    box-sizing: border-box;
}

#content-main,
#content .table-responsive,
#content .sms-table-scroll,
#content-main .results,
#changelist-form .results {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

#content-main table,
#content-main .table,
#content-main .data-table,
.dashboard .module table {
    width: max-content;
    min-width: 100%;
}

#content-main td,
#content-main th,
#content-main .table td,
#content-main .table th,
.dashboard .module table td,
.dashboard .module table th {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

div.breadcrumbs,
div.breadcrumbs a,
div.breadcrumbs a:link,
div.breadcrumbs a:visited,
div.breadcrumbs a:hover,
div.breadcrumbs a:focus {
    color: var(--breadcrumbs-fg);
}

#content-main a:link,
#content-main a:visited {
    color: var(--link-fg);
}

#content-main a:hover,
#content-main a:focus {
    color: var(--link-hover-color);
}

ul.actionlist li {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* Page-to-page buttons should read as links, not blend into form submits. */
#content-main a.btn,
#content-main a.object-tools,
#content .page-header a.btn,
#content-main .object-tools a {
    display: inline-block;
    border-radius: 15px;
    padding: 4px 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--hairline-color);
}

#content-main a.btn-primary,
#content-main a.btn-success,
#content a.btn-primary,
#content a.btn-success,
#content .btn-primary,
#content .btn-success,
#content button.btn-primary,
ul.object-tools a {
    background: var(--button-bg, #12344d) !important;
    color: #ffffff !important;
    border-color: var(--button-bg, #12344d) !important;
}

#content-main a.btn-secondary,
#content-main a.btn-outline-primary,
#content-main a.btn-outline-secondary,
#content a.btn-outline-secondary,
#content a.btn-outline-primary,
#content a.btn-secondary {
    background: #ffffff !important;
    color: var(--button-bg, #12344d) !important;
    border: 2px solid var(--button-bg, #12344d) !important;
}

.nav-sidebar-overlay {
    display: none;
}

.sms-mobile-menu-btn {
    display: none;
}

@media (max-width: 767px) {
    html, body, #container {
        min-width: 0 !important;
        width: 100%;
        overflow-x: hidden;
    }

    #content-main,
    .sms-table-scroll,
    #content-main .results {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    #header,
    #user-tools {
        overflow: visible;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .sms-mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 6px;
        padding: 6px 12px;
        border: 1px solid var(--header-link-color, #fff);
        border-radius: 4px;
        background: transparent;
        color: var(--header-link-color, #fff) !important;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        cursor: pointer;
    }

    #toggle-nav-sidebar {
        display: flex !important;
        visibility: visible !important;
        position: fixed;
        z-index: 1100;
        left: 12px;
        bottom: 16px;
        top: auto;
        width: auto;
        min-width: 44px;
        height: 44px;
        flex: none;
        padding: 0 12px;
        border: 1px solid var(--hairline-color);
        border-radius: 4px;
        background: var(--header-bg);
        color: var(--header-link-color);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }

    .toggle-nav-sidebar::before {
        content: "\2630";
        margin-right: 6px;
    }

    .main.shifted .toggle-nav-sidebar::before {
        content: "\00D7";
    }

    #toggle-nav-sidebar::after {
        content: "Menu";
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #nav-sidebar {
        display: block !important;
        visibility: visible !important;
        position: fixed;
        z-index: 1090;
        top: 0;
        left: 0;
        width: min(86vw, 300px);
        height: 100vh;
        max-height: 100vh;
        margin-left: 0 !important;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.28);
        background: var(--body-bg);
        overflow-y: auto;
    }

    .main.shifted > #nav-sidebar {
        transform: translateX(0);
        margin-left: 0 !important;
        visibility: visible !important;
    }

    .main > #nav-sidebar + .content,
    .main.shifted > #nav-sidebar + .content {
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    #nav-sidebar .module.nav-collapsible:not(.current-app) tr {
        display: table-row !important;
    }

    #nav-sidebar .module td {
        white-space: normal;
    }

    .nav-sidebar-overlay.is-visible {
        display: block;
        position: fixed;
        z-index: 1080;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
    }

    body.nav-drawer-open {
        overflow: hidden;
    }
}

@media print {
    #header,
    #nav-sidebar,
    .toggle-nav-sidebar,
    .breadcrumbs,
    #user-tools,
    .theme-toggle,
    .skip-to-content-link,
    ul.messagelist,
    .object-tools {
        display: none !important;
    }

    #container,
    .main,
    .content,
    #content,
    #content-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}