/* iOS safe-area: viewport-fit=cover (above) lets body bg fill
           the notch letter-boxing. Padding keeps admin chrome out from
           under the notch. Overrides admin/base.css's body padding:0;
           env() returns 0 on non-notched devices. */
        body {
            padding: env(safe-area-inset-top) env(safe-area-inset-right)
                     env(safe-area-inset-bottom) env(safe-area-inset-left);
        }

        input.selectsearchwidget-search {
            background-image: url("icon_searchbox.562ca64df360.png");
            background-repeat: no-repeat;
            text-align: right;
        }

        .delete input[type="checkbox"] {
            width: 2em;
            height: 2em;
            float: right;
        }

        /* Neutralize Django admin #header so .muli-nav fills it properly */
        #header {
            background: transparent !important;
            padding: 0 !important;
            height: auto !important;
            overflow: visible;
        }
        /* #branding is left empty by base_site.html — the brand is a flex
           item inside .muli-nav instead, so it reserves space rather than
           floating over the nav items. Admin's own CSS hides it. */
        #header #user-tools {
            display: none !important;
        }
        /* Prevent admin's global link/li rules from overriding our nav.
           `inherit`, not var(--text-sm): the bar itself sets 0.875rem in
           site-nav.css, and pinning the items to the token instead made the
           admin nav a different size from the frontend nav whenever a style
           variant moves --text-sm off 0.875rem — 12px under compact-mono,
           15px under tellurion, against the frontend's constant 14px. */
        .muli-nav a,
        .muli-nav li {
            font-size: inherit !important;
        }
        .muli-nav > ul > li > a {
            display: flex !important;
            box-sizing: border-box !important;
            padding: 8px 12px !important;
            align-items: center !important;
            min-height: 44px !important;
        }
        .muli-nav > ul > li > ul > li > a {
            display: block !important;
            padding: 8px 16px !important;
            color: var(--c-text, #2d3748) !important;
            background: transparent !important;
        }
        .muli-nav > ul > li > ul > li > a:hover {
            background: var(--c-surface2, #edf2f7) !important;
            color: var(--c-text, #2d3748) !important;
        }
        /* ── Burger button ── */
        .muli-nav__burger-item { display: none; }
        .muli-nav__burger {
            display: flex;
            align-items: center;
            min-height: 44px;
            padding: 8px 12px;
            background: none;
            border: none;
            color: var(--nav-fg, #fff);
            font-size: 1.25rem;
            line-height: 1;
            cursor: pointer;
        }
        .muli-nav__burger:hover { background: var(--nav-hover-bg, var(--c-primary-dk, #1a365d)); }
        @media (max-width: 767px) {
            .muli-nav__burger-item { display: flex; margin-left: auto; }
            .muli-nav > ul > li.muli-nav__collapsible { display: none; }
            .muli-nav.is-open > ul > li.muli-nav__collapsible {
                display: flex !important;
                flex-direction: column;
                width: 100%;
                border-top: 1px solid var(--nav-mobile-divider, rgba(255,255,255,.12));
            }
            .muli-nav.is-open > ul > li.muli-nav__collapsible > ul {
                display: block !important;
                position: static !important;
                background: var(--nav-mobile-sub-bg, rgba(0,0,0,.18)) !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                min-width: 0;
                padding: 4px 0;
            }
            .muli-nav.is-open > ul > li.muli-nav__collapsible > ul > li > a {
                padding: 4px 16px 4px 32px !important;
                color: var(--nav-mobile-sub-fg, rgba(255,255,255,.8)) !important;
                background: transparent !important;
            }
            .muli-nav.is-open > ul > li.muli-nav__collapsible > ul > li > a:hover {
                background: rgba(0,0,0,.15) !important;
            }
        }

        /* Form fields on --c-field, as on the management pages, so the
           places to type stand out from the page. admin/base.css paints
           them with --body-bg; the body prefix outranks it whatever the
           load order. */
        body input:not([type]), body input[type=text], body input[type=password],
        body input[type=email], body input[type=url], body input[type=number],
        body input[type=tel], body input[type=search], body input[type=date],
        body textarea, body select, body .vTextField {
            background-color: var(--c-field);
        }