/*
 * VaultChat Control Center — Unfold Admin Theme Supplement
 *
 * Loaded via UNFOLD["STYLES"] before unfold/css/styles.css.
 *
 * CSS cascade layer mechanics (Tailwind v4):
 *   Tailwind utilities live inside named @layer blocks (theme, base, utilities…).
 *   Any CSS declared OUTSIDE a @layer is "unlayered" and sits above all named
 *   layers in the cascade — no !important required.  Rules here therefore safely
 *   override any Tailwind utility class without specificity games.
 *
 * Color scheme:
 *   Background     #0B1525  (base-900)
 *   Panels/hover   #0F1E32  (base-800)
 *   Borders        #172C41  (base-700)
 *   Accent cyan    oklch(72% 0.140 208)  (primary-500 ≈ #20BBDB)
 *   Primary text   oklch(93% 0.010 240)  (base-100   ≈ #E2EDF8)
 *   Body text      oklch(68% 0.027 240)  (base-300   ≈ #8FA8C0)
 *   Muted text     oklch(53% 0.033 240)  (base-400   ≈ #5E7B94)
 */

/* ── 1. Force dark color-scheme on html and all native widgets ────────────── */

html.dark,
html.dark * {
    color-scheme: dark;
}

/* ── 2. Deepen the page body behind all panels ───────────────────────────── */
/*
 * base-900 (≈ #0B1525) is used for sidebar, header, form inputs, and table bg.
 * We push the outermost #page wrapper a shade darker so panels "float" on it.
 */
html.dark #page {
    background-color: #081120;
}

/* ── 3. Table headers — add a distinct dark band ────────────────────────── */
/*
 * Unfold's thead has no background class in dark mode; it inherits base-900.
 * A subtly lighter band helps separate column headers from data rows.
 */
html.dark #result_list thead th,
html.dark .result-list thead th {
    background-color: var(--color-base-800);
    border-bottom: 1px solid var(--color-base-700);
}

/* ── 4. Row selection — cyan accent tint ────────────────────────────────── */
/*
 * Django admin adds class="selected" to <tr> when checkbox is ticked.
 * Tailwind doesn't know about this — add a restrained cyan highlight.
 */
html.dark tr.selected td {
    background-color: oklch(72% 0.140 208 / 0.09);
    border-color: oklch(72% 0.140 208 / 0.20) !important;
}

/* ── 5. Form input focus ring — visible cyan glow ───────────────────────── */
/*
 * Unfold already sets outline-primary-400 on focus via BASE_CLASSES.
 * This adds a soft ambient glow for stronger visual feedback.
 */
html.dark input:focus-visible,
html.dark select:focus-visible,
html.dark textarea:focus-visible {
    box-shadow: 0 0 0 3px oklch(72% 0.140 208 / 0.18);
}

/* ── 6. Action bar select options — harden option list styling ───────────── */
/*
 * Native <option> lists inherit the browser's OS styling unless we explicitly
 * set background/color.  These rules ensure the list popup stays dark.
 * (The action bar container background is overridden by Section I below.)
 */
html.dark #changelist-actions select option,
html.dark .actions select option {
    background-color: var(--color-base-800);
    color: var(--color-base-100);
}

/* ── 7. Message banners — wrap long tokens, no overflow ─────────────────── */
/*
 * Identity token-creation actions output full opaque token values in messages.
 * Without word-break they overflow on small screens.
 */
html.dark ul.flex.flex-col li > div,
ul.flex.flex-col li > div {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ── 8. Monospace code blocks — consistent dark styling ─────────────────── */
/*
 * The admin.py _mono() helper generates <code> spans with inline styles.
 * This rule ensures any other <code> inside the admin is also dark-themed.
 */
html.dark code {
    font-family: ui-monospace, "Cascadia Mono", "Menlo", "Monaco", monospace;
    background-color: oklch(72% 0.140 208 / 0.08);
    border: 1px solid oklch(72% 0.140 208 / 0.18);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.80em;
}

/* ── 9. Scrollbar — match the dark palette ───────────────────────────────── */
html.dark ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

html.dark ::-webkit-scrollbar-track {
    background: var(--color-base-900);
}

html.dark ::-webkit-scrollbar-thumb {
    background: var(--color-base-600);
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--color-base-500);
}

/* ── 10. Filter panel — enforce dark bg even at 2xl breakpoint ──────────── */
/*
 * At large screens Unfold sets the filter panel to transparent so it floats
 * inline.  Give it a very subtle panel background so it reads as separate from
 * the main table, with a left-border accent line for visual anchoring.
 */
@media (min-width: 1536px) {
    html.dark #changelist-filter > div > div {
        background-color: transparent !important;
        border-left: 2px solid oklch(72% 0.140 208 / 0.25);
        padding-left: 0.75rem;
    }
}

/* ── 11. Login page polish ───────────────────────────────────────────────── */
html.dark #login-form,
html.dark .login form {
    background-color: var(--color-base-800);
    border: 1px solid var(--color-base-700);
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION B: SIDEBAR VISUAL OVERRIDES
   Targets stable IDs / attributes from Unfold's nav templates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── B-1. Sidebar inner panel — solid deep navy background ───────────────── */
/*
 * Unfold uses dark:bg-base-950/20 which is semi-transparent. Over our
 * #081120 page background that reads as nearly invisible. Solid panel needed.
 */
html.dark nav#nav-sidebar-inner {
    background-color: oklch(7.2% 0.022 249) !important;
    border-right: 1px solid oklch(20% 0.035 245 / 0.45);
}

/* ── B-2. Sidebar header border ──────────────────────────────────────────── */
html.dark nav#nav-sidebar-inner > div:first-child {
    border-bottom-color: oklch(20% 0.035 245 / 0.50) !important;
}

/* ── B-3. Section headers (Operations / Certificates / Billing …) ───────── */
html.dark #nav-sidebar-apps h2 {
    color: oklch(47% 0.032 240) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
}

/* ── B-4. Nav item — active state: left accent bar + subtle fill ─────────── */
html.dark #nav-sidebar-apps a.active {
    border-left: 2px solid var(--color-primary-500) !important;
    background-color: oklch(72% 0.140 208 / 0.09) !important;
    margin-left: -2px;
    padding-left: calc(0.75rem - 0px);
}

/* ── B-5. Nav item — hover ───────────────────────────────────────────────── */
html.dark #nav-sidebar-apps a:not(.active):hover {
    background-color: oklch(72% 0.140 208 / 0.05) !important;
}

/* ── B-6. Sidebar footer user area ───────────────────────────────────────── */
/*
 * navigation_user.html is the last direct child of #nav-sidebar-inner,
 * and it always has x-data="{ openUserLinks: false }" — unique in the sidebar.
 */
html.dark #nav-sidebar-inner > div[x-data] {
    border-top: 1px solid oklch(20% 0.035 245 / 0.55) !important;
    background-color: oklch(6.0% 0.018 249) !important;
}

/* ── B-7. Sidebar separator rules ────────────────────────────────────────── */
html.dark #nav-sidebar-apps hr {
    border-top-color: oklch(20% 0.035 245 / 0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION C: AVATAR CIRCLE
   .vc-avatar is added by our templates/unfold/helpers/avatar.html override.
   ═══════════════════════════════════════════════════════════════════════════ */

html.dark .vc-avatar {
    background-color: oklch(10.5% 0.025 248);
    color: var(--color-primary-400);             /* teal initials text */
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    border: 1px solid oklch(20% 0.035 245 / 0.70);
    box-shadow: 0 0 0 2px oklch(72% 0.140 208 / 0.10);
}

/* ── When sidebar user button is open/hovered ─────────────────────────────── */
html.dark #nav-sidebar-inner > div[x-data] .vc-avatar {
    border-color: oklch(72% 0.140 208 / 0.30);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION D: ACCOUNT DROPDOWN POPUP
   The popup opens above the user row (bottom-[73px]) inside the sidebar footer.
   It uses dark:bg-base-800 dark:border-base-700 from Unfold.
   These overrides deepen it to match the overall dark palette.
   ═══════════════════════════════════════════════════════════════════════════ */

html.dark #nav-sidebar-inner [x-show="openUserLinks"] {
    background-color: oklch(11% 0.026 248) !important;
    border-color: oklch(20% 0.035 245 / 0.70) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.50) !important;
}

/* Account dropdown link items — subdued default, teal hover */
html.dark #nav-sidebar-inner [x-show="openUserLinks"] a {
    color: oklch(68% 0.027 240) !important;
}

html.dark #nav-sidebar-inner [x-show="openUserLinks"] a:hover {
    background-color: oklch(72% 0.140 208 / 0.09) !important;
    color: oklch(82% 0.018 240) !important;
}

/* Log out button — keep the red destructive color */
html.dark #nav-sidebar-inner [x-show="openUserLinks"] button[type="submit"] {
    color: oklch(60% 0.19 25) !important;
}

html.dark #nav-sidebar-inner [x-show="openUserLinks"] button[type="submit"]:hover {
    background-color: oklch(60% 0.19 25 / 0.12) !important;
}

/* Divider above log out */
html.dark #nav-sidebar-inner [x-show="openUserLinks"] .border-t {
    border-top-color: oklch(20% 0.035 245 / 0.50) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION E: HEADER BAR
   Unfold's header.html renders in #main > div (the sticky top bar).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── E-1. Header container ────────────────────────────────────────────────── */
html.dark #main > div:first-child {
    border-bottom: 1px solid oklch(20% 0.035 245 / 0.40) !important;
    background-color: oklch(9.5% 0.025 248) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION F: TABLE ENHANCEMENTS
   Additional polish beyond what the base rules set.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── F-1. Subtly stripe odd rows to help scanning long lists ─────────────── */
html.dark #result_list tbody tr:nth-child(odd) td,
html.dark .result-list tbody tr:nth-child(odd) td {
    background-color: oklch(72% 0.140 208 / 0.015);
}

/* ── F-2. Table border — single solid colour rather than inherited ─────────── */
html.dark #result_list td,
html.dark .result-list td {
    border-bottom-color: oklch(20% 0.035 245 / 0.40) !important;
}

/* ── F-3. Count bar / info line above table ──────────────────────────────── */
html.dark .paginator {
    border-top-color: oklch(20% 0.035 245 / 0.40) !important;
    color: oklch(47% 0.032 240) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION G: MESSAGES / BANNERS (Unfold native message blocks)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Unfold renders messages with specific background classes. We keep those
   but ensure our dark palette variables are available for the inline style. */
html.dark .messagelist li {
    border-radius: 5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION H: MISC CLEANUPS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Suppress the theme toggle completely (forced dark mode) */
.theme-toggle,
button.theme-toggle,
#toggle-theme,
.theme-toggle svg {
    display: none !important;
    visibility: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION I: SELECTED-ACTIONS BAR — DARK, NOT CYAN
   ─────────────────────────────────────────────────────────────────────────
   Unfold's actions.html uses  bg-primary-600 dark:bg-primary-500  on the
   inner bar div.  With our primary-500 = oklch(72% 0.140 208) that renders
   as a glaring full-width cyan block.  These non-layered rules beat every
   @layer utility, so no !important is needed — but we add it for safety
   against any future specificity collision.
   ═══════════════════════════════════════════════════════════════════════════ */

/* I-1. Bar container — kill the bright background, replace with dark panel */
html.dark #changelist-actions > div {
    background-color: oklch(10.5% 0.026 248) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.50) !important;
    box-shadow: none !important;
    color: oklch(68% 0.027 240) !important;
}

/* Light-mode bar also toned down — keeps the site usable if dark is toggled */
#changelist-actions > div {
    background-color: oklch(26.5% 0.037 243) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.40) !important;
    color: oklch(93% 0.010 240) !important;
}

/* I-2. Run button — dark base + teal border accent  */
html.dark #changelist-actions button[type="submit"] {
    background-color: oklch(8% 0.022 248) !important;
    border: 1px solid oklch(72% 0.140 208 / 0.40) !important;
    color: oklch(72% 0.140 208) !important;
    box-shadow: none !important;
}

html.dark #changelist-actions button[type="submit"]:hover {
    background-color: oklch(72% 0.140 208 / 0.10) !important;
    border-color: oklch(72% 0.140 208 / 0.65) !important;
    color: oklch(82% 0.065 208) !important;
}

/* I-3. Action dropdown select — matches our dark form input style */
html.dark #changelist-actions select,
html.dark .actions select {
    background-color: oklch(9.5% 0.025 248) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.65) !important;
    color: oklch(82% 0.018 240) !important;
    box-shadow: none !important;
}

html.dark #changelist-actions select option,
html.dark .actions select option {
    background-color: oklch(11% 0.026 248) !important;
    color: oklch(82% 0.018 240) !important;
}

/* I-4. Counter text ("N of M selected") */
html.dark #changelist-actions .action-counter {
    color: oklch(53% 0.033 240) !important;
}

/* I-5. "Select all N / Clear selection" inline links */
html.dark #changelist-actions .question a,
html.dark #changelist-actions .clear a {
    background-color: oklch(72% 0.140 208 / 0.10) !important;
    border: 1px solid oklch(72% 0.140 208 / 0.30) !important;
    color: oklch(72% 0.140 208) !important;
}

html.dark #changelist-actions .question a:hover,
html.dark #changelist-actions .clear a:hover {
    background-color: oklch(72% 0.140 208 / 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION J: ACCENT BUTTONS — restrained teal, not bright primary
   ═══════════════════════════════════════════════════════════════════════════ */

/* J-1. Add / + round button in changelist header */
html.dark a.addlink {
    background-color: oklch(16% 0.038 210) !important;
    color: oklch(72% 0.140 208) !important;
}

html.dark a.addlink:hover {
    background-color: oklch(20% 0.048 210) !important;
}

/* J-2. Filters button — when active (has active filters applied) */
html.dark a[class*="bg-primary-600"][class*="border-primary-600"] {
    background-color: oklch(14% 0.030 247) !important;
    border-color: oklch(72% 0.140 208 / 0.50) !important;
    color: oklch(72% 0.140 208) !important;
}

html.dark a[class*="bg-primary-600"][class*="border-primary-600"]:hover {
    background-color: oklch(72% 0.140 208 / 0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION K: GLOBAL SELECT / INPUT DARK THEME
   ─────────────────────────────────────────────────────────────────────────
   Unfold's SELECT_CLASSES / BASE_CLASSES give inputs dark:bg-base-900 /
   dark:border-base-700 inside @layer utilities.  These non-layered rules
   beat all @layer blocks, ensuring every <select> in the admin is themed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* K-1. Native select — all instances */
html.dark select {
    background-color: oklch(9.5% 0.025 248) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.65) !important;
    color: oklch(82% 0.018 240) !important;
    color-scheme: dark;
}

html.dark select:focus {
    border-color: oklch(72% 0.140 208 / 0.55) !important;
    box-shadow: 0 0 0 2px oklch(72% 0.140 208 / 0.15) !important;
    outline: none;
}

/* K-2. Native select option popup list */
html.dark select option {
    background-color: oklch(11% 0.026 248);
    color: oklch(82% 0.018 240);
}

html.dark select optgroup {
    background-color: oklch(9.5% 0.025 248);
    color: oklch(47% 0.032 240);
    font-weight: 700;
}

/* K-3. All form text inputs / textareas — consistent dark baseline */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark textarea {
    background-color: oklch(9.5% 0.025 248) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.65) !important;
    color: oklch(82% 0.018 240) !important;
    color-scheme: dark;
}

/* Unified focus glow across all focusable inputs */
html.dark input:focus-visible,
html.dark select:focus-visible,
html.dark textarea:focus-visible {
    border-color: oklch(72% 0.140 208 / 0.60) !important;
    box-shadow: 0 0 0 3px oklch(72% 0.140 208 / 0.15) !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION L: SELECT2 AUTOCOMPLETE DARK THEME
   ─────────────────────────────────────────────────────────────────────────
   FK / M2M fields use Django's Select2.  Its dropdown is appended directly
   to <body>, so rules must be body-scoped (not inside #nav-sidebar-inner).
   ═══════════════════════════════════════════════════════════════════════════ */

/* L-1. Closed selection widget */
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple {
    background-color: oklch(9.5% 0.025 248) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.65) !important;
    border-radius: 6px !important;
}

html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: oklch(82% 0.018 240) !important;
    line-height: 36px;
}

html.dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: oklch(47% 0.032 240) !important;
}

/* Dropdown arrow */
html.dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: oklch(47% 0.032 240) !important;
}

html.dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: oklch(47% 0.032 240) !important;
    border-top-color: transparent !important;
}

/* L-2. Open dropdown container */
html.dark .select2-dropdown {
    background-color: oklch(11% 0.026 248) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.70) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important;
}

/* L-3. Search box inside dropdown */
html.dark .select2-search--dropdown {
    border-bottom: 1px solid oklch(20% 0.035 245 / 0.45) !important;
    padding: 6px;
}

html.dark .select2-search--dropdown .select2-search__field {
    background-color: oklch(9.5% 0.025 248) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.65) !important;
    color: oklch(82% 0.018 240) !important;
    border-radius: 4px;
    padding: 4px 8px;
}

html.dark .select2-search--dropdown .select2-search__field:focus {
    border-color: oklch(72% 0.140 208 / 0.55) !important;
    box-shadow: 0 0 0 2px oklch(72% 0.140 208 / 0.15) !important;
    outline: none;
}

/* L-4. Result options */
html.dark .select2-results__option {
    color: oklch(75% 0.022 240) !important;
    background-color: transparent !important;
    padding: 7px 12px;
    transition: background-color 0.1s;
}

html.dark .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: oklch(72% 0.140 208 / 0.12) !important;
    color: oklch(88% 0.018 240) !important;
}

html.dark .select2-results__option[aria-selected="true"] {
    background-color: oklch(72% 0.140 208 / 0.08) !important;
    color: oklch(72% 0.140 208) !important;
    font-weight: 600;
}

/* L-5. Multiple selection tags */
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: oklch(72% 0.140 208 / 0.14) !important;
    border: 1px solid oklch(72% 0.140 208 / 0.35) !important;
    color: oklch(72% 0.140 208) !important;
    border-radius: 4px;
}

html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: oklch(72% 0.140 208 / 0.70) !important;
}

html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: oklch(72% 0.140 208) !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION M: FILTER PANEL POLISH
   ─────────────────────────────────────────────────────────────────────────
   Unfold renders the filter panel as a modal (small screens) or inline
   sidebar (2xl+).  The modal inner div uses dark:bg-base-800.  We deepen
   it and style filter headings + option links to match the nav palette.
   ═══════════════════════════════════════════════════════════════════════════ */

/* M-1. Filter panel modal inner card */
html.dark #changelist-filter .bg-white,
html.dark #changelist-filter [class*="dark:bg-base-800"] {
    background-color: oklch(10.5% 0.026 248) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.50) !important;
}

/* M-2. Filter section headings ("By Status", "By Created at" …) */
html.dark #changelist-filter h3 {
    color: oklch(47% 0.032 240) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* M-3. Filter boolean / toggle pill groups */
html.dark #changelist-filter ul.dark\:bg-base-900,
html.dark #changelist-filter ul[class*="dark:bg-base-900"] {
    background-color: oklch(9.5% 0.025 248) !important;
    border-color: oklch(20% 0.035 245 / 0.55) !important;
}

/* M-4. Filter option list items */
html.dark #changelist-filter ul > li {
    border-color: oklch(20% 0.035 245 / 0.40) !important;
}

html.dark #changelist-filter ul > li a {
    color: oklch(68% 0.027 240) !important;
    transition: color 0.12s;
}

html.dark #changelist-filter ul > li a:hover,
html.dark #changelist-filter ul > li.selected a {
    color: oklch(72% 0.140 208) !important;
}

html.dark #changelist-filter ul > li.selected a {
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION N: FORM FIELDSET / CHANGE-FORM POLISH
   ─────────────────────────────────────────────────────────────────────────
   Change-form fieldsets render as dark panels.  These rules tighten the
   borders and ensure label/help-text colors are consistent.
   ═══════════════════════════════════════════════════════════════════════════ */

/* N-1. Fieldset card border */
html.dark fieldset.module,
html.dark .form-row fieldset {
    border-color: oklch(20% 0.035 245 / 0.50) !important;
}

/* N-2. Fieldset heading */
html.dark fieldset.module h2,
html.dark fieldset > h2 {
    background-color: oklch(11% 0.026 248) !important;
    border-bottom: 1px solid oklch(20% 0.035 245 / 0.45) !important;
    color: oklch(53% 0.033 240) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

/* N-3. Form row dividers */
html.dark .form-row {
    border-bottom-color: oklch(20% 0.035 245 / 0.35) !important;
}

/* N-4. Field labels */
html.dark .form-row label,
html.dark label {
    color: oklch(53% 0.033 240) !important;
    font-size: 0.82rem;
}

/* N-5. Help text */
html.dark .help,
html.dark p.help {
    color: oklch(42% 0.030 240) !important;
    font-size: 0.74rem;
}

/* N-6. Submit row */
html.dark .submit-row {
    background-color: oklch(9.5% 0.025 248) !important;
    border-top: 1px solid oklch(20% 0.035 245 / 0.45) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION O: BREADCRUMB & OBJECT-TOOLS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* O-1. Breadcrumb bar */
html.dark .breadcrumbs {
    background-color: oklch(9.5% 0.025 248) !important;
    border-bottom: 1px solid oklch(20% 0.035 245 / 0.35) !important;
    color: oklch(47% 0.032 240) !important;
    font-size: 0.78rem;
}

html.dark .breadcrumbs a {
    color: oklch(53% 0.033 240) !important;
}

html.dark .breadcrumbs a:hover {
    color: oklch(72% 0.140 208) !important;
}

/* O-2. Object tools (History, View on site etc.) */
html.dark .object-tools a {
    background-color: oklch(14% 0.030 247) !important;
    border: 1px solid oklch(20% 0.035 245 / 0.50) !important;
    color: oklch(68% 0.027 240) !important;
}

html.dark .object-tools a:hover {
    background-color: oklch(72% 0.140 208 / 0.10) !important;
    color: oklch(72% 0.140 208) !important;
    border-color: oklch(72% 0.140 208 / 0.35) !important;
}