/* ============================================================
   MFA-CMS internal admin styles — dashboard + badges + panels.
   Consolidates what used to live in inline <style> blocks across
   workflow/, embassy/, and the welcome panel.

   Rules applied:
   - One color system: Wagtail's --w-color-* for UI chrome, our
     --gok-* tokens for brand accents. NO hardcoded Bootstrap hex.
   - Semantic badges: success/warning/critical/info — colour mapped.
   - 4/8 px spacing rhythm, 4.5:1 contrast, visible focus rings.
   - Works in light AND dark mode (no hardcoded black backgrounds).
   ============================================================ */

/* ---------- Dashboard welcome strip ------------------------- */
.mfa-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--w-color-surface-page, #fff);
    border: 1px solid var(--w-color-border-furniture, #e5e7eb);
    border-radius: var(--gok-radius, 0.5rem);
    border-left: 4px solid var(--gok-green, #006F3C);
}
.mfa-welcome__identity { display: flex; align-items: center; gap: 0.85rem; }
.mfa-welcome__logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--w-color-surface-field, #f8fafc);
    padding: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.mfa-welcome__text h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--w-color-text-label, #0f172a);
}
.mfa-welcome__eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--w-color-text-meta, #64748b);
    margin: 0;
}
.mfa-welcome__meta {
    font-size: 0.82rem;
    color: var(--w-color-text-meta, #64748b);
    text-align: right;
}
.mfa-welcome__meta-name { font-weight: 600; color: var(--w-color-text-label, #0f172a); }
.mfa-welcome__actions {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.mfa-welcome__actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--w-color-text-link-default, #0d9488);
    background: var(--w-color-surface-field-inactive, #f1f5f9);
    border-radius: var(--gok-radius-sm, 0.25rem);
    text-decoration: none;
    transition: background 120ms ease;
}
.mfa-welcome__actions a:hover,
.mfa-welcome__actions a:focus-visible {
    background: var(--w-color-surface-button-hover, #e2e8f0);
    text-decoration: none;
}
.mfa-welcome__actions a:focus-visible {
    outline: 2px solid var(--gok-focus, #0A66C2);
    outline-offset: 2px;
}
.mfa-welcome__actions svg { width: 16px; height: 16px; }

/* ---------- Unified dashboard panel ------------------------- */
.mfa-dash {
    margin-bottom: 1.5rem;
    background: var(--w-color-surface-page, #fff);
    border-radius: var(--gok-radius, 0.5rem);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--w-color-border-furniture, #e5e7eb);
}
.mfa-dash__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--w-color-text-meta, #64748b);
}
.mfa-dash__title svg { width: 16px; height: 16px; }

.mfa-dash__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}
.mfa-dash__stat {
    background: var(--w-color-surface-field-inactive, #f8fafc);
    border-radius: var(--gok-radius-sm, 0.25rem);
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--w-color-text-meta, #cbd5e1);
    transition: transform 120ms ease;
}
.mfa-dash__stat:hover { transform: translateY(-1px); }
.mfa-dash__stat--urgent   { border-left-color: var(--gok-red, #BE0027); }
.mfa-dash__stat--high     { border-left-color: #EA580C; }
.mfa-dash__stat--soon     { border-left-color: #CA8A04; }
.mfa-dash__stat--ok       { border-left-color: var(--gok-green, #006F3C); }

.mfa-dash__stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--w-color-text-label, #0f172a);
    font-variant-numeric: tabular-nums;
}
.mfa-dash__stat-label {
    font-size: 0.72rem;
    color: var(--w-color-text-meta, #64748b);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mfa-dash__stat-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.mfa-dash__stat-link:focus-visible {
    outline: 2px solid var(--gok-focus, #0A66C2);
    outline-offset: 2px;
    border-radius: var(--gok-radius-sm, 0.25rem);
}

.mfa-dash__list { list-style: none; margin: 0; padding: 0; }
.mfa-dash__list-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--w-color-border-furniture, #e5e7eb);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
}
.mfa-dash__list-item:last-child { border-bottom: none; }
.mfa-dash__list-item a {
    color: var(--w-color-text-link-default, #0d9488);
    text-decoration: none;
}
.mfa-dash__list-item a:hover { text-decoration: underline; }

.mfa-dash__empty {
    color: var(--w-color-text-meta, #94a3b8);
    font-style: italic;
    padding: 0.75rem 0;
    font-size: 0.85rem;
}

.mfa-dash__freshness {
    padding: 0.85rem 1rem;
    border-radius: var(--gok-radius-sm, 0.25rem);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88rem;
}
.mfa-dash__freshness-value {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mfa-dash__freshness--ok      { background: #F0FDFA; color: #134E4A; }
.mfa-dash__freshness--soon    { background: #FEFCE8; color: #713F12; }
.mfa-dash__freshness--urgent  { background: #FFF7ED; color: #7C2D12; }
.mfa-dash__freshness--overdue { background: var(--gok-red-tint, #FCEAEE); color: #7F1D1D; }
.mfa-dash__freshness--unknown { background: var(--w-color-surface-field-inactive, #f1f5f9); color: #334155; }

/* ---------- Unified badge system ---------------------------- */
/* Replaces: .embassy-badge, .workflow-status, .urgency-badge,
   .pending-count, .mfa-dash__badge --- one class, semantic variants. */
.mfa-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}
.mfa-badge--neutral  { background: #E2E8F0; color: #334155; }
.mfa-badge--info     { background: #DBEAFE; color: #1E40AF; }
.mfa-badge--success  { background: var(--gok-green-tint, #E6F1EB); color: var(--gok-green-dark, #00502B); }
.mfa-badge--warning  { background: #FEF3C7; color: #854D0E; }
.mfa-badge--critical { background: var(--gok-red-tint, #FCEAEE); color: #7F0019; }
.mfa-badge--orange   { background: #FFEDD5; color: #9A3412; }

/* Region badges — map to neutral semantic variants. */
.mfa-badge--region-africa        { background: var(--gok-green-tint, #E6F1EB); color: var(--gok-green-dark, #00502B); }
.mfa-badge--region-europe        { background: #DBEAFE; color: #1E40AF; }
.mfa-badge--region-americas      { background: var(--gok-red-tint, #FCEAEE); color: #7F0019; }
.mfa-badge--region-asia-pacific  { background: #FEF3C7; color: #854D0E; }
.mfa-badge--region-middle-east   { background: #CCFBF1; color: #115E59; }
.mfa-badge--region-hq            { background: #E2E8F0; color: #334155; }

/* Count pill — small counter that goes beside a label. */
.mfa-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    background: var(--gok-red, #BE0027);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    margin-left: 0.4rem;
}

/* ---------- Back-compat shims so existing templates don't break.
   Map the old class names to the new system. Remove these once
   templates are migrated. ------------------------------------- */
.embassy-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.embassy-badge.africa        { background: var(--gok-green-tint, #E6F1EB); color: var(--gok-green-dark, #00502B); }
.embassy-badge.europe        { background: #DBEAFE; color: #1E40AF; }
.embassy-badge.americas      { background: var(--gok-red-tint, #FCEAEE); color: #7F0019; }
.embassy-badge.asia_pacific  { background: #FEF3C7; color: #854D0E; }
.embassy-badge.middle_east   { background: #CCFBF1; color: #115E59; }
.embassy-badge.hq            { background: #E2E8F0; color: #334155; }

.workflow-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.workflow-status.pending   { background: #FEF3C7; color: #854D0E; }
.workflow-status.approved  { background: var(--gok-green-tint, #E6F1EB); color: var(--gok-green-dark, #00502B); }
.workflow-status.rejected  { background: var(--gok-red-tint, #FCEAEE); color: #7F0019; }

.urgency-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.urgency-badge.normal  { background: #E2E8F0; color: #334155; }
.urgency-badge.high    { background: #FFEDD5; color: #9A3412; }
.urgency-badge.urgent  { background: var(--gok-red-tint, #FCEAEE); color: #7F0019; }

.pending-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    background: var(--gok-red, #BE0027);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    margin-left: 0.5rem;
}

/* Sidebar — icon + label alignment. Selector covers BOTH the in-sidebar items
   AND the sub-menu panel items (which Wagtail renders outside .sidebar). */
.sidebar-menu-item__link,
.sidebar .sidebar-menu-item__link,
.sidebar-sub-menu-panel .sidebar-menu-item__link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
    padding: 0.45rem 1rem !important;
    min-height: 36px !important;
    font-size: 0.88rem;
    line-height: 1.35;
    text-decoration: none;
}
.sidebar-menu-item__link .icon--menuitem,
.sidebar-sub-menu-panel .sidebar-menu-item__link .icon--menuitem {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    opacity: 1 !important;
}
.sidebar-menu-item__link .menuitem,
.sidebar-sub-menu-panel .sidebar-menu-item__link .menuitem {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    margin: 0 !important;
}
.sidebar-menu-item__link .menuitem-label,
.sidebar-sub-menu-panel .sidebar-menu-item__link .menuitem-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
}
.sidebar-menu-item__link .sidebar-sub-menu-trigger-icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    opacity: 0.55;
    margin-left: auto !important;
}

/* Pin the submenu panel background to the dark sidebar surface.
   Wagtail 7 ships a default that resolves greenish on prod due to a
   CSS-variable mismatch against the upstream admin theme; this rule
   forces the same dark panel users see locally.

   Text + anchor colors are pinned here (not in admin.css) because
   admin.css's earlier rules treated this panel like a light pop-over,
   leaving dark text on a dark surface. */
.sidebar-sub-menu-panel {
    background: var(--w-color-surface-menus, #1a2332) !important;
    color: var(--w-color-text-label-menus-default, #e2e8f0) !important;
}
.sidebar-sub-menu-panel a,
.sidebar-sub-menu-panel button {
    color: var(--w-color-text-label-menus-default, #e2e8f0) !important;
}
.sidebar-sub-menu-panel a:hover,
.sidebar-sub-menu-panel button:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.sidebar-sub-menu-panel .icon {
    color: currentColor !important;
}
.sidebar-sub-menu-panel ul,
.sidebar-sub-menu-panel li,
.sidebar-sub-menu-panel__header,
.sidebar-sub-menu-panel__footer {
    background: transparent !important;
}

/* Submenu panel header — force the icon + label onto one horizontal row. */
.sidebar-sub-menu-panel h2.w-h4 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.9rem 1.25rem 0.65rem !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--w-color-text-label-menus-default, #94a3b8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left !important;
}
.sidebar-sub-menu-panel h2.w-h4 svg.icon--submenu-header {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    opacity: 0.75;
}
.sidebar-sub-menu-panel ul {
    padding: 0.25rem 0;
    margin: 0;
    list-style: none;
}
/* Tighter spacing inside submenu panels. */
.sidebar-sub-menu-panel .sidebar-menu-item__link {
    min-height: 34px !important;
    padding: 0.35rem 1.25rem !important;
    font-size: 0.86rem;
}
.sidebar-sub-menu-panel__footer {
    padding: 0.5rem 1.25rem;
    font-size: 0.7rem;
    color: var(--w-color-text-label-menus-default, #94a3b8);
    opacity: 0.55;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Flash messages — Wagtail's default is pale-text on pale-bg (unreadable).
   Force WCAG-AA contrast with dark text on tinted backgrounds. */
.messages > ul > li.success,
.messages > ul > li.error,
.messages > ul > li.warning,
.messages > ul > li.info {
    background: #fff !important;
    color: #0f172a !important;
    border-radius: var(--gok-radius, 0.5rem);
    box-shadow: 0 4px 16px rgba(11, 11, 11, 0.12);
    border-left: 4px solid transparent;
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    font-weight: 500;
}
.messages > ul > li.success {
    background: var(--gok-green-tint, #E6F1EB) !important;
    color: #00391F !important;
    border-left-color: var(--gok-green, #006F3C) !important;
}
.messages > ul > li.error {
    background: var(--gok-red-tint, #FCEAEE) !important;
    color: #5C0014 !important;
    border-left-color: var(--gok-red, #BE0027) !important;
}
.messages > ul > li.warning {
    background: #FEF3C7 !important;
    color: #713F12 !important;
    border-left-color: #CA8A04 !important;
}
.messages > ul > li.info {
    background: #DBEAFE !important;
    color: #1E3A8A !important;
    border-left-color: #1D4ED8 !important;
}
.messages > ul > li .messages-icon {
    color: currentColor !important;
    opacity: 1 !important;
}

/* "(2)" dismissible badge in Help — gov-red pill, doesn't push arrow off-axis. */
.sidebar .w-dismissible-badge--count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--gok-red, #BE0027);
    color: #fff !important;
    border-radius: 999px;
    margin-left: auto;
    margin-right: 0.25rem;
    line-height: 1;
}

/* Kill the yellow "Pending Approvals" construction-tape header.
   The hooks inject <h2 style="background:#ffc107;color:black;...">,
   this overrides it back to a sensible panel header. Remove once
   the template is updated. */
section.panel > h2[style*="#ffc107"],
section.panel > h2[style*="ffc107"] {
    background: transparent !important;
    color: var(--w-color-text-label, #0f172a) !important;
    padding: 0 0 0.5rem !important;
    margin: 0 0 0.75rem !important;
    border-bottom: 1px solid var(--w-color-border-furniture, #e5e7eb) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
}

/* ---------- Page-explorer drawer ---------------------------- */
/* Match the dark sidebar-sub-menu-panel look so the Pages drawer
   stays visually consistent with every other submenu that opens off
   the sidebar (Syndication, Settings, etc.). Previously we pinned
   these to WHITE to block the teal-flood regression; we now fix that
   at the token layer (--w-color-primary is no longer bleeding through)
   so the drawer can inherit the same dark surface as its siblings. */
.c-page-explorer,
.c-page-explorer__drawer,
.c-page-explorer__list {
    background: var(--w-color-surface-menus, #1e293b) !important;
    color: var(--w-color-text-label-menus-default, #cbd5e1) !important;
}
/* Item rows: transparent so the container colour shows through, with
   a 1px separator and hover-lift consistent with submenu items. */
.c-page-explorer__item,
.c-page-explorer__drawer .c-page-explorer__item {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.c-page-explorer__item:last-child {
    border-bottom: none !important;
}
.c-page-explorer__item:hover,
.c-page-explorer__item:focus-within {
    background: rgba(255, 255, 255, 0.06) !important;
}
/* Title + metadata. Title was already being overridden; widen the
   selector list so subtitle / type labels also inherit. */
.c-page-explorer__item__title,
.c-page-explorer__item__link,
.c-page-explorer__item__link .title,
.c-page-explorer__item__action {
    color: var(--w-color-text-label-menus-default, #cbd5e1) !important;
}
.c-page-explorer__item:hover .c-page-explorer__item__title,
.c-page-explorer__item:hover .c-page-explorer__item__link,
.c-page-explorer__item:hover .c-page-explorer__item__action {
    color: var(--w-color-text-label-menus-active, #ffffff) !important;
}
/* Edit (pencil) + expand (chevron) action icons — use currentColor
   so they track the hover state. Without this they keep their default
   dark slate fill and disappear against the dark drawer. */
.c-page-explorer__item__action svg,
.c-page-explorer__item__action .icon,
.c-page-explorer__item__link .icon,
.c-page-explorer__item .icon {
    color: currentColor !important;
    fill: currentColor !important;
    opacity: 0.85;
}
.c-page-explorer__item:hover svg,
.c-page-explorer__item:hover .icon {
    opacity: 1;
}
/* Drawer header — the "← Root / Ministry of…" back-link bar at the
   top of the panel. Pin its surface + text to match. */
.c-page-explorer__header,
.c-page-explorer__drawer__header,
.c-page-explorer .c-page-explorer__see-more {
    background: var(--w-color-surface-menus, #1e293b) !important;
    color: var(--w-color-text-label-menus-default, #cbd5e1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.c-page-explorer__header a,
.c-page-explorer__header button,
.c-page-explorer__drawer__header a,
.c-page-explorer__drawer__header button,
.c-page-explorer__see-more a,
.c-page-explorer__see-more button {
    color: var(--w-color-text-label-menus-default, #cbd5e1) !important;
}
.c-page-explorer__header a:hover,
.c-page-explorer__header button:hover,
.c-page-explorer__drawer__header a:hover,
.c-page-explorer__drawer__header button:hover {
    color: var(--w-color-text-label-menus-active, #ffffff) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
/* Dividers between nested-folder rows. */
.c-page-explorer__item + .c-page-explorer__item::before {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ---------- Admin h1 contrast ------------------------------- */
/* Two separate surfaces, two separate text colors:
   * h1 inside the dark top chrome (slim-header / breadcrumb row) —
     must be light against dark slate.
   * h1 inside the white main content area — must be dark against
     white. Previously these were lumped together as dark text,
     which made the slim-header h1 invisible (1.00:1 contrast). */
.content h1,
.page-title:not(.w-slim-header .page-title) {
    color: var(--w-color-text-label, #0f172a) !important;
}
.w-slim-header h1,
.w-slim-header .page-title,
.header h1,
.header__title h1,
.breadcrumb h1 {
    color: var(--w-color-text-label-menus-active, #ffffff) !important;
}

/* ---------- Sidebar panel z-index + background -------------- */
/* Wagtail ships style="--z-index: -4" inline on the closed
   .sidebar-panel and relies on its own --open rule to lift it.
   Our overrides specificity-tie that rule, so the open panel sits
   behind the main content and bleeds through on scroll. Set
   z-index directly to bypass the custom property. */
.sidebar-panel--open {
    z-index: 100 !important;
}

/* Pin the sidebar panel surface so var(--w-color-primary) (teal)
   never bleeds through when the main sidebar collapses. The
   collapsed/slim variants stay transparent so they don't paint
   over the gutter. */
.sidebar-panel {
    background: var(--w-color-surface-menus, #1a2332) !important;
}
.sidebar-collapsed .sidebar-panel,
.sidebar--slim .sidebar-panel {
    background: transparent !important;
}

/* ---------- Top chrome + slim header contrast --------------- */
/* Wagtail's top bar / slim-header is transparent by default and
   inherits the dark sidebar background when rendered above the main
   content. Icons, breadcrumb chips, and the search box border fade
   to invisible against that. Pin the top surface to the same dark
   menu surface explicitly so tokens resolve consistently. */
.w-slim-header,
.header,
.breadcrumb {
    background-color: var(--w-color-surface-menus, #1e293b);
    color: var(--w-color-text-label-menus-default, #cbd5e1);
}
.w-slim-header a,
.header a,
.breadcrumb a,
.breadcrumb__link {
    color: var(--w-color-text-label-menus-default, #cbd5e1);
}
.w-slim-header a:hover,
.header a:hover,
.breadcrumb a:hover {
    color: var(--w-color-text-label-menus-active, #ffffff);
}

/* "New: {Title}" / status-label chips in the top bar — legible pill
   on the dark chrome instead of dark-on-dark. */
.header .status-tag,
.header .status-label,
.w-status {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--w-color-text-label-menus-active, #ffffff);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Search box in the top bar — visible border + dark-chrome-friendly
   focus ring. Wagtail ships it as a borderless field that disappears
   on dark surfaces. */
.header input[type="search"],
.w-slim-header input[type="search"] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--w-color-text-label-menus-active, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.header input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.55);
}
.header input[type="search"]:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--w-color-primary, #0d9488);
    outline: 2px solid var(--w-color-primary, #0d9488);
    outline-offset: -1px;
}

/* ---------- Main content area padding ---------------------- */
/* The audit probe reported `main padding: 0` — Wagtail's layout
   puts the header INSIDE main, and the post-header content is the
   first direct child of main. Give that content a consistent
   inner frame so dashboards + forms don't touch the chrome. */
main {
    /* Leave header as-is; apply breathing to downstream content via
       the sibling-based selector below. */
    padding: 0;
}
/* Content that follows the slim header — dashboards, list views,
   generic pages all use this pattern. */
.w-slim-header ~ *,
.header ~ *,
main > .nice-padding,
main > section.panel:first-of-type {
    padding: 1.25rem 1.5rem;
}
/* Dashboards render <section.panel> directly, no wrapper. Give
   the first panel a top margin so it doesn't collide with the
   slim header's bottom border. */
main > section.panel:first-of-type,
.content > section.panel:first-of-type {
    margin-top: 0.75rem;
}
/* Slim header itself: tighter vertical padding than default to
   match dashboard breathing space above. */
.w-slim-header {
    padding: 0.75rem 1.5rem;
}

/* ---------- Icon colour scoping on white surfaces ----------- */
/* admin.css pins the global icon tokens to light values so icons on
   the dark chrome (slim-header, breadcrumb, sidebar, top-bar action
   dropdowns) stay visible. On white content surfaces we have to swap
   them back to dark — otherwise row-level edit/delete icons, form
   field-help carets, chooser ⋯ menus disappear against white. */
.content,
.nice-padding,
main > section.panel,
.content > section.panel,
.w-slim-header ~ main,
.header ~ main,
.listing,
.listing-container,
.w-tabs__panel,
.w-panel,
.w-dropdown__content,
.tippy-content,
.w-action-menu,
.c-dropdown__menu {
    --w-color-icon-primary: var(--w-color-text-label, #0f172a);
    --w-color-icon-primary-hover: var(--w-color-primary, #0d9488);
    --w-color-icon-secondary: var(--w-color-text-meta, #475569);
    --w-color-icon-secondary-hover: var(--w-color-primary, #0d9488);
}

/* ---------- Dropdown toggle (Actions ⋯ menu) icons ---------- */
/* Wagtail's `.w-dropdown__toggle--icon` button (the three-dots
   "Actions" menu trigger) appears in two surfaces:
     * dark chrome: slim-header / breadcrumb / sidebar — needs LIGHT fill
     * white chrome: listing rows / panels / dropdowns — needs DARK fill
   Without an explicit rule the button inherits a `currentColor` that
   sometimes resolves to whatever the surrounding container's color is —
   often invisible. Force visible colours per surface, !important to
   beat Wagtail's own rules. */

/* Dark-chrome surfaces — light fill */
.w-slim-header .w-dropdown__toggle,
.w-slim-header .w-dropdown__toggle--icon,
.header .w-dropdown__toggle,
.header .w-dropdown__toggle--icon,
.breadcrumb .w-dropdown__toggle,
.breadcrumb .w-dropdown__toggle--icon,
.sidebar .w-dropdown__toggle,
.sidebar .w-dropdown__toggle--icon {
    color: var(--w-color-text-label-menus-default, #cbd5e1) !important;
    opacity: 1 !important;
}
.w-slim-header .w-dropdown__toggle:hover,
.w-slim-header .w-dropdown__toggle--icon:hover,
.w-slim-header .w-dropdown__toggle[aria-expanded="true"],
.w-slim-header .w-dropdown__toggle--icon[aria-expanded="true"],
.header .w-dropdown__toggle:hover,
.header .w-dropdown__toggle--icon:hover,
.breadcrumb .w-dropdown__toggle:hover,
.breadcrumb .w-dropdown__toggle--icon:hover {
    color: var(--w-color-text-label-menus-active, #ffffff) !important;
}

/* White-chrome surfaces — dark fill (rows, panels, modals) */
.content .w-dropdown__toggle,
.content .w-dropdown__toggle--icon,
.listing .w-dropdown__toggle,
.listing .w-dropdown__toggle--icon,
.w-panel .w-dropdown__toggle,
.w-panel .w-dropdown__toggle--icon,
.w-dropdown__content .w-dropdown__toggle,
.tippy-content .w-dropdown__toggle {
    color: var(--w-color-text-label, #0f172a) !important;
    opacity: 1 !important;
}
.content .w-dropdown__toggle:hover,
.content .w-dropdown__toggle--icon:hover,
.listing .w-dropdown__toggle:hover,
.listing .w-dropdown__toggle--icon:hover {
    color: var(--w-color-primary, #0d9488) !important;
}

/* SVG inside any toggle — inherit currentColor from the button so the
   above rules carry through. */
.w-dropdown__toggle .w-dropdown__toggle-icon,
.w-dropdown__toggle--icon .w-dropdown__toggle-icon,
.w-dropdown__toggle .icon,
.w-dropdown__toggle--icon .icon {
    fill: currentColor !important;
    color: inherit !important;
    opacity: 1 !important;
}

/* The slim-header Actions toggle has class `w-p-0` and Wagtail relies
   on the inner SVG's intrinsic size for click area. With our font/
   density overrides the SVG can collapse to 0×0 — making the whole
   button invisible while still sitting in the DOM. Force a sensible
   button + icon size so the dots-horizontal trigger always renders.
   The same applies to the matching toggle in `nav[aria-label='Actions']`
   anywhere in the chrome. */
.w-slim-header .w-dropdown__toggle--icon,
.header .w-dropdown__toggle--icon,
nav[aria-label="Actions"] > div > .w-dropdown__toggle--icon,
nav[aria-label="Actions"] .w-dropdown__toggle--icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
}
.w-slim-header .w-dropdown__toggle-icon,
.header .w-dropdown__toggle-icon,
nav[aria-label="Actions"] .w-dropdown__toggle-icon,
.w-dropdown__toggle--icon .icon-dots-horizontal {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

/* The slim-header lives inside `.content`, so the earlier `.content
   .w-dropdown__toggle` colour rule (dark slate, designed for white
   surfaces) overrides the slim-header chrome rule and renders the
   Actions ⋯ button as dark-on-dark = invisible. Re-assert the chrome
   colour last so it wins on equal specificity. */
.w-slim-header .w-dropdown__toggle,
.w-slim-header .w-dropdown__toggle--icon,
.header .w-dropdown__toggle,
.header .w-dropdown__toggle--icon {
    color: var(--w-color-text-label-menus-default, #cbd5e1) !important;
}
.w-slim-header .w-dropdown__toggle:hover,
.w-slim-header .w-dropdown__toggle--icon:hover,
.w-slim-header .w-dropdown__toggle[aria-expanded="true"],
.w-slim-header .w-dropdown__toggle--icon[aria-expanded="true"],
.header .w-dropdown__toggle:hover,
.header .w-dropdown__toggle--icon:hover {
    color: #ffffff !important;
}

/* ---------- Dropzones (bulk upload, image/doc choosers) ---- */
/* Wagtail ships `.drop-zone` with `background: var(--w-color-surface-header)`.
   That resolves to our dark slate chrome colour, which is wrong on a
   white content page — the whole zone reads as a dark slab with near-
   invisible "Or choose from your computer" text. Pin to a light tint
   so it reads as a form affordance, not admin chrome. */
.drop-zone {
    background-color: var(--w-color-secondary-75, #f1f5f9);
    color: var(--w-color-text-label, #1e293b);
    border: 2px dashed var(--w-color-border-field-default, #cbd5e1);
}
.drop-zone.hovered,
.drop-zone:focus-within {
    background-color: var(--w-color-secondary-100, #e2e8f0);
    border-color: var(--w-color-primary, #0d9488);
}
.drop-zone .drop-zone-help,
.drop-zone .help-block,
.drop-zone label,
.drop-zone p {
    color: var(--w-color-text-label, #1e293b);
}
.drop-zone .button,
.drop-zone button {
    background-color: var(--w-color-primary, #0d9488);
    color: #ffffff;
    border-color: var(--w-color-primary, #0d9488);
}