/*
    Pracownik AI on Orchard's admin theme (TheAdmin: Bootstrap 5.3 + TheAdmin.css + admin-layout.css).
    Loaded with brand.css on every page TheAdmin renders: the admin itself and the sign-in pages
    (Layout-Login: login, password reset, registration, two-factor).

    Specificity, never source order: the result filter that links this file cannot place it after
    Bootstrap and TheAdmin in <head>, so every rule here must outrank the rule it overrides whatever
    order the stylesheets arrive in. Each selector is the one it overrides plus at least one more
    part - usually a leading `html` - so Bootstrap's `:root, [data-bs-theme=light]` (0,1,0) loses to
    `html[data-bs-theme]` (0,1,1), `.btn-primary` to `html .btn-primary`, and so on. !important
    appears only where the overridden rule already carries it (Bootstrap's utilities, a few TheAdmin
    rules). A tie would be decided by order again, so ties are avoided on purpose.

    Light and dark: <html> always carries data-bs-theme. The server writes light, dark or auto;
    theme-head.js resolves auto to light or dark when <body> is inserted (stored choice first, then
    prefers-color-scheme), before the first paint. So dark rules key on [data-bs-theme=dark] and light
    rules on :not([data-bs-theme=dark]) - an unresolved "auto" (scripts off) gets the light look,
    exactly as Bootstrap itself renders it.

    Tokens: --brand-blue, --brand-navy, --brand-slate and --brand-font come from brand.css. The
    literal hexes below are steps of the scales built from them (blue: tints toward white, shades
    toward the brand navy; neutral: cool greys from navy and slate), because Bootstrap bakes many of
    its colours into component variables and SVG data URIs that cannot reference a variable.
    Blue 50 #f1f7fe · 100 #e0edfc · 200 #c2dbf8 · 300 #93bff4 · 400 #569aed · 500 #1473e6 (brand)
         600 #1263c8 · 700 #1053a9 · 800 #0e4389 · 900 #0d3269 · 950 #081531
    Neutral 50 #f6f8fb · 100 #eef2f7 · 200 #dfe5ee · 300 #c5cedb · 400 #8d99ad · 500 #52627a (slate)
            600 #3b4b66 · 700 #1e3259 · 800 #13264b · 900 #0a1b3d (navy) · 950 #06112a
*/

/* ---------------------------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------------------------- */

html[data-bs-theme] {
    --bs-font-sans-serif: var(--brand-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-primary: var(--brand-blue, #1473e6);
    --bs-primary-rgb: 20, 115, 230;
    /* Slate instead of Bootstrap's warm grey, so secondary badges and buttons belong to the palette. */
    --bs-secondary: var(--brand-slate, #52627a);
    --bs-secondary-rgb: 82, 98, 122;
    --bs-focus-ring-color: rgba(20, 115, 230, 0.25);

    /* TheAdmin's left menu sits on the same surface as the content cards and the top bar. */
    --oc-admin-menu-bg-color: var(--bs-body-bg);
    --oc-admin-menu-item-bg-color: var(--bs-body-bg);
    --oc-admin-menu-font-color: var(--bs-secondary-color);
    --oc-admin-menu-font-color-hover: var(--bs-emphasis-color);
    --oc-admin-menu-item-font-color: var(--bs-secondary-color);
    --oc-admin-menu-item-font-color-active: var(--bs-emphasis-color);
    --oc-selected-indicator-color: var(--bs-primary);
}

html:not([data-bs-theme=dark]) {
    --bs-body-color: #1e3259;
    --bs-body-color-rgb: 30, 50, 89;
    --bs-emphasis-color: var(--brand-navy, #0a1b3d);
    --bs-emphasis-color-rgb: 10, 27, 61;
    --bs-secondary-color: var(--brand-slate, #52627a);
    --bs-secondary-color-rgb: 82, 98, 122;
    --bs-secondary-bg: #eef2f7;
    --bs-secondary-bg-rgb: 238, 242, 247;
    --bs-tertiary-color: rgba(30, 50, 89, 0.5);
    --bs-tertiary-color-rgb: 30, 50, 89;
    --bs-tertiary-bg: #f6f8fb;
    --bs-tertiary-bg-rgb: 246, 248, 251;
    --bs-heading-color: var(--brand-navy, #0a1b3d);
    /* Links one step darker than the brand blue: #1473e6 is 4.5:1 on white but only 4.0:1 on the grey page. */
    --bs-link-color: #1263c8;
    --bs-link-color-rgb: 18, 99, 200;
    --bs-link-hover-color: #1053a9;
    --bs-link-hover-color-rgb: 16, 83, 169;
    --bs-border-color: #dfe5ee;
    --bs-border-color-translucent: rgba(10, 27, 61, 0.12);
    --bs-primary-text-emphasis: #0e4389;
    --bs-primary-bg-subtle: #e0edfc;
    --bs-primary-border-subtle: #93bff4;
    --bs-secondary-text-emphasis: #1e3259;
    --bs-secondary-bg-subtle: #eef2f7;
    --bs-secondary-border-subtle: #c5cedb;
    --oc-scrollbar-color: #c5cedb;
    /* Own tokens: the page behind the surfaces, form-control borders, text-primary as text. */
    --pai-page-bg: #eef2f7;
    --pai-control-border: #c5cedb;
    --pai-primary-text-rgb: 18, 99, 200;
    --pai-primary-text-hover-rgb: 16, 83, 169;
    --pai-shadow-color: 10, 27, 61;
}

html[data-bs-theme=dark] {
    --bs-body-color: #dfe5ee;
    --bs-body-color-rgb: 223, 229, 238;
    --bs-body-bg: var(--brand-navy, #0a1b3d);
    --bs-body-bg-rgb: 10, 27, 61;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #8d99ad;
    --bs-secondary-color-rgb: 141, 153, 173;
    --bs-secondary-bg: #1e3259;
    --bs-secondary-bg-rgb: 30, 50, 89;
    --bs-tertiary-color: rgba(223, 229, 238, 0.5);
    --bs-tertiary-color-rgb: 223, 229, 238;
    --bs-tertiary-bg: #13264b;
    --bs-tertiary-bg-rgb: 19, 38, 75;
    --bs-heading-color: #fff;
    /* The brand blue is only 3.7:1 on navy: text and links use the 400 step (5.9:1). Fills keep #1473e6. */
    --bs-link-color: #569aed;
    --bs-link-color-rgb: 86, 154, 237;
    --bs-link-hover-color: #93bff4;
    --bs-link-hover-color-rgb: 147, 191, 244;
    --bs-border-color: #1e3259;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
    --bs-primary-text-emphasis: #93bff4;
    --bs-primary-bg-subtle: #0d3269;
    --bs-primary-border-subtle: #1053a9;
    --bs-secondary-text-emphasis: #c5cedb;
    --bs-secondary-bg-subtle: #13264b;
    --bs-secondary-border-subtle: #3b4b66;
    --oc-scrollbar-color: #3b4b66;
    --pai-page-bg: #06112a;
    --pai-control-border: #3b4b66;
    --pai-primary-text-rgb: 86, 154, 237;
    --pai-primary-text-hover-rgb: 147, 191, 244;
    --pai-shadow-color: 0, 0, 0;
}

/* ---------------------------------------------------------------------------------------------
   Page and type
   --------------------------------------------------------------------------------------------- */

/* The page sits behind the surfaces: --bs-body-bg stays the surface colour (inputs, tables, cards,
   the menu), so only the canvas itself takes the grey (light) or the deepest navy (dark). */
html[data-bs-theme] body {
    background-color: var(--pai-page-bg);
}

html :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-weight: 700;
}

/* TheAdmin tracks page titles at -0.04em, which crowds Montserrat's wide bold capitals. */
html .ta-content h1 {
    letter-spacing: -0.02em;
}

/* Headings take the brand navy, except where a coloured container sets the text colour. `initial`
   makes the variable invalid, so Bootstrap's `color: var(--bs-heading-color)` falls back to inheriting
   the container's colour (`inherit` would inherit the navy value from <html>). */
html .alert,
html .toast,
html [class*="text-bg-"] {
    --bs-heading-color: initial;
}

/* ---------------------------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------------------------- */

/* Montserrat at 400 looks thin on a filled button; 500 is the logo's own second weight. */
html .btn:not(.btn-link) {
    --bs-btn-font-weight: 500;
}

html .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #1263c8;
    --bs-btn-hover-border-color: #1263c8;
    --bs-btn-focus-shadow-rgb: 20, 115, 230;
    --bs-btn-active-bg: #1053a9;
    --bs-btn-active-border-color: #1053a9;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

html .btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 20, 115, 230;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1263c8;
    --bs-btn-active-border-color: #1263c8;
    --bs-btn-disabled-color: var(--bs-link-color);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

html .btn-secondary {
    --bs-btn-bg: #52627a;
    --bs-btn-border-color: #52627a;
    --bs-btn-hover-bg: #3b4b66;
    --bs-btn-hover-border-color: #3b4b66;
    --bs-btn-focus-shadow-rgb: 82, 98, 122;
    --bs-btn-active-bg: #1e3259;
    --bs-btn-active-border-color: #1e3259;
    --bs-btn-disabled-bg: #52627a;
    --bs-btn-disabled-border-color: #52627a;
}

html .btn-outline-secondary {
    --bs-btn-color: #3b4b66;
    --bs-btn-border-color: #c5cedb;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #52627a;
    --bs-btn-hover-border-color: #52627a;
    --bs-btn-focus-shadow-rgb: 82, 98, 122;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3b4b66;
    --bs-btn-active-border-color: #3b4b66;
    --bs-btn-disabled-color: #8d99ad;
    --bs-btn-disabled-border-color: #dfe5ee;
}

html[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-color: #c5cedb;
    --bs-btn-border-color: #3b4b66;
    --bs-btn-hover-bg: #3b4b66;
    --bs-btn-hover-border-color: #3b4b66;
    --bs-btn-active-bg: #52627a;
    --bs-btn-active-border-color: #52627a;
    --bs-btn-disabled-color: #8d99ad;
    --bs-btn-disabled-border-color: #1e3259;
}

html .btn-link {
    --bs-btn-focus-shadow-rgb: 20, 115, 230;
    --bs-btn-disabled-color: var(--bs-secondary-color);
}

html .btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(20, 115, 230, 0.25);
}

/* ---------------------------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------------------------- */

/* A step firmer than the dividers, so an empty field still reads as a field on either surface.
   Set as the variable, not border-color, so validation borders (is-invalid, input-validation-error)
   keep winning. */
html .form-control,
html .form-select,
html .form-check-input,
html .input-group-text {
    --bs-border-color: var(--pai-control-border);
}

html .form-control:focus,
html .form-select:focus {
    border-color: #569aed;
    box-shadow: 0 0 0 0.25rem rgba(20, 115, 230, 0.25);
}

html .form-check-input:focus {
    border-color: #569aed;
    box-shadow: 0 0 0 0.25rem rgba(20, 115, 230, 0.25);
}

html .form-check-input:checked,
html .form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* :not(:checked) keeps this below Bootstrap's white knob for a checked switch that has focus. */
html .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23569aed'/%3e%3c/svg%3e");
}

html .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(20, 115, 230, 0.25);
}

html .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(20, 115, 230, 0.25);
}

html .form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

html .form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

html .form-range::-webkit-slider-thumb:active {
    background-color: #93bff4;
}

html .form-range::-moz-range-thumb:active {
    background-color: #93bff4;
}

/* ---------------------------------------------------------------------------------------------
   Navigation, menus, lists
   --------------------------------------------------------------------------------------------- */

html .nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(20, 115, 230, 0.25);
}

/* TheAdmin underlines every a:hover (0,1,1); on tabs and pills the shape already answers the hover. */
html .nav-link:hover {
    text-decoration: none;
}

html .nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

/* TheAdmin draws tabs as grey folder tabs with a white active one (white in dark mode too). Here they
   are an underline strip: it reads on the grey page, on a card and in dark mode alike, and a
   .tab-pane below still gets its box (the pane is given the surface colour further down). */
html .nav-tabs {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    gap: 0.25rem;
}

html .nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--bs-border-width));
    padding-inline: 0.875rem;
    color: var(--bs-secondary-color);
    font-weight: 600;
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

html .nav-tabs .nav-link:hover,
html .nav-tabs .nav-link:focus {
    color: var(--bs-emphasis-color);
    background-color: transparent;
    border-bottom-color: var(--bs-border-color);
}

html .nav-tabs .nav-link.disabled,
html .nav-tabs .nav-link:disabled {
    color: var(--bs-tertiary-color);
}

html .nav-tabs .nav-link.active,
html .nav-tabs .nav-link.active:hover,
html .nav-tabs .nav-item.show .nav-link {
    color: var(--bs-emphasis-color);
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid var(--bs-primary);
}

html .tab-pane {
    background-color: var(--bs-body-bg);
}

html .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
    --bs-dropdown-header-color: var(--bs-secondary-color);
    --bs-dropdown-box-shadow: 0 0.5rem 1.5rem rgba(var(--pai-shadow-color), 0.12);
}

html .dropdown-menu-dark {
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

html .list-group {
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}

html .pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(20, 115, 230, 0.25);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

html .progress,
html .progress-stacked {
    --bs-progress-bar-bg: var(--bs-primary);
}

html .accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(20, 115, 230, 0.25);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231e3259' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230e4389' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Bootstrap swaps the dark icons in on the ::after itself, so the override has to go there too. */
html[data-bs-theme=dark] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dfe5ee'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2393bff4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

/* Bootstrap's variant keeps a light row in both modes, so this does too - on the blue 100 step. */
html .table-primary {
    --bs-table-color: #0a1b3d;
    --bs-table-bg: #e0edfc;
    --bs-table-border-color: #b3beca;
    --bs-table-striped-bg: #d5e1ef;
    --bs-table-striped-color: #0a1b3d;
    --bs-table-active-bg: #cad5e3;
    --bs-table-active-color: #0a1b3d;
    --bs-table-hover-bg: #cfdbe9;
    --bs-table-hover-color: #0a1b3d;
}

/* ---------------------------------------------------------------------------------------------
   Utilities (Bootstrap marks these !important, so the overrides must too)
   --------------------------------------------------------------------------------------------- */

/* .bg-primary, .border-primary and .text-bg-primary follow --bs-primary-rgb by themselves; the text
   utilities get the text-safe step of the current mode instead. */
html .text-primary {
    color: rgba(var(--pai-primary-text-rgb), var(--bs-text-opacity, 1)) !important;
}

html .link-primary {
    color: rgba(var(--pai-primary-text-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: rgba(var(--pai-primary-text-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

html .link-primary:hover,
html .link-primary:focus {
    color: rgba(var(--pai-primary-text-hover-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: rgba(var(--pai-primary-text-hover-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

/* Slate text on navy is 2.9:1; the neutral 400 step reads at 5.9:1. TheAdmin's .hint is the same
   slate (var(--bs-secondary)). */
html[data-bs-theme=dark] .text-secondary {
    color: rgba(141, 153, 173, var(--bs-text-opacity, 1)) !important;
}

html[data-bs-theme=dark] .hint {
    color: var(--bs-secondary-color) !important;
}

/* Bootstrap's success and danger are tuned to exactly 4.5:1 on white, so as text they drop below it
   on the grey page (4.0:1) and on navy (3.8:1). As text they take the step Bootstrap itself uses next
   to them - the 600 shade in light, the text-emphasis tint in dark; fills and borders stay.
   Validation messages are left out: Orchard already colours them with --bs-danger-text-emphasis. */
html:not([data-bs-theme=dark]) .text-success {
    color: rgba(20, 108, 67, var(--bs-text-opacity, 1)) !important;
}

html:not([data-bs-theme=dark]) .text-danger:not(.field-validation-error) {
    color: rgba(176, 42, 55, var(--bs-text-opacity, 1)) !important;
}

html[data-bs-theme=dark] .text-success {
    color: rgba(117, 183, 152, var(--bs-text-opacity, 1)) !important;
}

html[data-bs-theme=dark] .text-danger:not(.field-validation-error) {
    color: rgba(234, 134, 143, var(--bs-text-opacity, 1)) !important;
}

html:not([data-bs-theme=dark]) .btn-outline-success {
    --bs-btn-color: #146c43;
}

html:not([data-bs-theme=dark]) .btn-outline-danger {
    --bs-btn-color: #b02a37;
}

html[data-bs-theme=dark] .btn-outline-success {
    --bs-btn-color: #75b798;
}

html[data-bs-theme=dark] .btn-outline-danger {
    --bs-btn-color: #ea868f;
}

/* ---------------------------------------------------------------------------------------------
   TheAdmin chrome
   --------------------------------------------------------------------------------------------- */

/* Top bar: the surface colour (TheAdmin paints it --bs-light in light mode; its dark rule already
   uses --bs-body-bg, i.e. the navy surface). */
html .ta-navbar-top.text-bg-theme {
    background-color: var(--bs-body-bg);
}

html[data-bs-theme=dark] .ta-badge {
    background-color: var(--bs-tertiary-bg);
}

html[data-bs-theme=dark] .modal {
    --bs-modal-bg: var(--bs-body-bg);
}

html[data-bs-theme=dark] .btn-theme {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-tertiary-bg);
}

html[data-bs-theme=dark] .btn-theme:hover,
html[data-bs-theme=dark] .btn-theme:focus,
html[data-bs-theme=dark] .btn-theme:active,
html[data-bs-theme=dark] .btn-theme.active {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-bg);
}

/* The compact menu hard-codes a Segoe stack; the flyout titles should be in the brand face too. */
html .left-sidebar-compact #ta-left-sidebar {
    font-family: inherit;
}

/* Where-am-I in the menu: the selected entry gets the blue tint (TheAdmin: a grey overlay), in a
   group and at the top level alike. Colour through TheAdmin's own !important variable. */
html body:not(.left-sidebar-compact) #ta-left-sidebar li > figure > ul > li.active:not(.has-items) > figure > figcaption > .item-label,
html body:not(.left-sidebar-compact) #ta-left-sidebar #left-nav > ul > li.active:not(.has-items) > figure > figcaption > .item-label {
    --oc-admin-menu-item-font-color-active: var(--bs-primary-text-emphasis);
    color: var(--oc-admin-menu-item-font-color-active);
    font-weight: 600;
    background: var(--bs-primary-bg-subtle);
}

/* TheAdmin's black overlays turn into neutral grey on the white menu; the cool steps instead. */
html body:not(.left-sidebar-compact) #ta-left-sidebar li.active > figure > figcaption > .item-label,
html body:not(.left-sidebar-compact) #ta-left-sidebar li ul > li > figure > figcaption > .item-label {
    background: var(--bs-tertiary-bg);
}

html body:not(.left-sidebar-compact) #ta-left-sidebar li .item-label:hover,
html body:not(.left-sidebar-compact) #ta-left-sidebar li.active > figure > figcaption > .item-label:hover {
    background-color: var(--bs-secondary-bg);
}

html .leftbar-compactor:hover {
    color: var(--bs-primary);
    text-shadow: 0 0 4px rgba(20, 115, 230, 0.4);
}

/* ---------------------------------------------------------------------------------------------
   Admin brand (the AdminBranding override): mark + wordmark + site name, mark only when compact
   --------------------------------------------------------------------------------------------- */

html .pai-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    max-width: calc(var(--oc-start-navigation-width, 260px) - 1.25rem);
    margin-right: 0;
    padding-block: 0;
    color: inherit;
}

/* Centres the mark on the menu's 48px icon column (the navbar's container starts 12px in). */
html .pai-brand .pai-brand-mark {
    flex: none;
    width: 32px;
    height: 32px;
    margin-inline-start: -4px;
}

/* (0,2,0) on purpose: TheAdmin's `.left-sidebar-compact .ta-navbar-brand span` (0,2,1) must still
   hide it - and the rule below says the same with more weight, so no tie is left to source order. */
.pai-brand .pai-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    line-height: 1;
}

html .left-sidebar-compact .pai-brand .pai-brand-text {
    display: none;
}

/* Beats `.ta-navbar-brand img` (0,1,1) and loses to the light/dark switch below (0,2,1). */
.pai-brand .pai-brand-wordmark {
    display: block;
    width: auto;
    height: 16px;
}

.pai-brand .pai-brand-site {
    display: block;
    max-width: 100%;
    margin-top: 4px;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* One logo per theme: the navy wordmark disappears on navy. */
html:not([data-bs-theme=dark]) .pai-on-dark,
html[data-bs-theme=dark] .pai-on-light {
    display: none;
}

/* ---------------------------------------------------------------------------------------------
   Sign-in pages (TheAdmin Layout-Login): lockup above a card. Scoped to .auth-wrapper and
   .pai-auth-header, which only those pages have, so the admin is never touched.
   --------------------------------------------------------------------------------------------- */

html[data-bs-theme] body:has(.auth-wrapper),
html[data-bs-theme] body:has(.pai-auth-header) {
    background-image: radial-gradient(70rem 32rem at 50% -8rem, rgba(20, 115, 230, 0.07), transparent 70%);
    background-repeat: no-repeat;
}

/* Layout-Login centres everything in a 100%-high flex box; a tall form (registration) would be cut
   off at the top. min-height keeps the centring for short forms and lets long ones scroll. */
html body:has(.auth-wrapper) > .d-flex.h-100 {
    height: auto !important;
    min-height: 100%;
    padding-block: 2rem;
}

.pai-auth-header {
    max-width: 440px;
    margin: 0 auto 1.5rem;
    text-align: center;
}

/* BrandingFilter adds the header to every non-admin page the admin theme draws; should one of them
   use the full admin layout, its Header section sits inside .ta-content, where a lockup has no place. */
html .ta-content .pai-auth-header {
    display: none;
}

.pai-auth-header .pai-auth-lockup {
    display: block;
    width: auto;
    height: 64px;
    margin-inline: auto;
}

.pai-auth-header .pai-auth-site {
    display: inline-block;
    max-width: 100%;
    margin: 1rem 0 0;
    padding: 0.25rem 0.75rem;
    color: var(--bs-primary-text-emphasis);
    font-size: 0.8125rem;
    font-weight: 600;
    background-color: var(--bs-primary-bg-subtle);
    border-radius: 50rem;
}

/* The wrapper itself is the card, so every auth page (login, forgot password, register, 2FA) gets
   it whatever grid it renders inside. */
html .auth-wrapper {
    max-width: 440px;
    margin: 0 auto;
    /* The bottom is 1rem short because Orchard's auth forms end in a .mb-3 group. */
    padding: 2rem 2rem 1rem;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(var(--pai-shadow-color), 0.04), 0 12px 32px -8px rgba(var(--pai-shadow-color), 0.14);
}

/* The views centre themselves in the old 800px wrapper with col-md-6 offset-md-3; inside the card
   the column should simply fill it. Only the wrapper's own row: form grids inside stay as they are. */
html .auth-wrapper > .row > [class*="col-"] {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

html .auth-wrapper hr {
    margin-block: 1rem 1.5rem;
    color: var(--bs-border-color);
    opacity: 1;
}

/* A lone submit button is the form's one action: full width, as the card is narrow. */
html .auth-wrapper .btn-primary[type=submit]:only-child {
    width: 100%;
    padding-block: 0.5rem;
}

@media (max-width: 575.98px) {
    html .auth-wrapper {
        padding: 1.5rem 1.25rem 0.5rem;
    }

    .pai-auth-header .pai-auth-lockup {
        height: 48px;
    }
}