/* =========================================================================
   PESO Dasmariñas — admin (PESO staff) polish layer.
   Deliberately minimal: self-hosted type, a consistent focus ring, and a
   light button finish. Nothing here changes layout, spacing, card
   structure, or icon geometry — those belong to each admin page's own
   design. Scoped to admin routes; additive only.
   ========================================================================= */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/webfonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/webfonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/webfonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/webfonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/webfonts/plus-jakarta-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/webfonts/plus-jakarta-sans-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/webfonts/plus-jakarta-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/webfonts/plus-jakarta-sans-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("vendor/webfonts/plus-jakarta-sans-latin-800.woff2") format("woff2"); }

:root {
    --adp-primary: var(--peso-primary, #087443);
}

/* Typography only — no size or layout changes. */
html body[data-peso-page^="admin"] {
    font-family: "Inter", "Segoe UI Variable", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html body[data-peso-page^="admin"] :is(h1, h2, h3, h4, h5, h6) {
    font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Roboto, system-ui, sans-serif !important;
    letter-spacing: -.02em;
}
html body[data-peso-page^="admin"] :is(input, select, textarea, button) { font-family: inherit !important; }

/* One consistent focus ring across the admin workspace.
   Excludes admin-login: that page's own auth-fields-unified.css already
   draws a single focus ring on the field WRAPPER and strips the input's own
   outline/box-shadow so the field never shows a box-inside-a-box; this rule
   loads after that file and would otherwise re-add a second ring on the
   bare input (same specificity, later source order wins the tie). */
html body[data-peso-page^="admin"]:not([data-peso-page="admin-login"]) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--adp-primary) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--adp-primary) 16%, transparent) !important;
}

/* =========================================================================
   SMALL-SCREEN SAFETY NET (admin workspace)
   Keeps the existing sidebar-drawer behaviour; this only stops sideways
   scroll, lets wide content scroll inside its own box, wraps the topbar,
   and stacks metric/queue grids on narrow screens.
   ========================================================================= */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    main, section, article, aside, header, footer, .admx-main, .admx-content,
    .main-content, .content, .admx-shell, .admx-panel, .card
) {
    min-width: 0 !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .admx-table-wrap, .table-wrapper, .table-responsive, .table-container,
    .peso-table-wrap, .applicants-table-wrap, .jobs-table-wrap
) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

@media (max-width: 900px) {
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.topbar, .admx-topbar, .admx-topbar__inner, .top-right) {
        flex-wrap: wrap !important;
        gap: 8px !important;
        row-gap: 8px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
        .admx-metrics, .admx-metric-grid, .admx-grid, .cards-grid, .stats-grid,
        .dashboard-grid, .summary-grid, .admx-queue, .admx-two-col, .two-col
    ) {
        grid-template-columns: 1fr !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.page-header, .content-header, .admx-page-header, .admx-hero) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.actions, .form-actions, .filter-actions, .admx-actions, .toolbar-actions) {
        flex-wrap: wrap !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.actions, .form-actions, .filter-actions, .admx-actions) > * {
        flex: 1 1 auto !important;
        min-height: 44px !important;
    }
}

@media (max-width: 560px) {
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admx-panel, .card, .admx-card, .content-card, .form-card) {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.filter-bar, .search-filter-bar, .filters-section) {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.filter-bar, .search-filter-bar, .filters-section) > * {
        width: 100% !important;
    }
}

/* =========================================================================
   CONTRAST / READABILITY NORMALISATION
   Several admin list pages (employers, announcements, archive, job-approvals)
   keep hard-coded light-theme colours and faint white-tint backgrounds that
   go low-contrast when the workspace is toggled to dark, plus a few "bare"
   badges that ship no colour at all. Give them theme-aware values.
   All scoped so the semantic status pills (published / rejected / …) keep
   their own colours.
   ========================================================================= */

/* Bare .status-badge (no variant, no inline style) — e.g. archive history. */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .status-badge:not([style]):not(.status-published):not(.status-draft):not(.status-active):not(.status-inactive):not(.status-pending):not(.status-approved):not(.status-closed):not(.status-rejected):not(.status-verified):not(.status-unverified) {
    background: var(--admx-surface-soft, #eef4f0) !important;
    color: var(--admx-ink, #16261d) !important;
    border: 1px solid var(--admx-line, #dbe6df) !important;
}

/* Bare .jobfair-badge (no status variant) — faint white tint, invisible on
   light; readable pill in both modes. */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .jobfair-badge:not(.upcoming):not(.ongoing):not(.completed):not(.cancelled) {
    background: var(--admx-surface-soft, #eef4f0) !important;
    color: var(--admx-muted, #5b7266) !important;
    border: 1px solid var(--admx-line, #dbe6df) !important;
}

/* .status-draft: the page defines it dark-only + a body.light override, but
   the count/label text can still fall through. Pin both. */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .status-badge.status-draft,
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .status-badge.status-closed {
    background: var(--admx-surface-soft, #eef4f0) !important;
    color: var(--admx-muted, #5b7266) !important;
    border: 1px solid var(--admx-line, #dbe6df) !important;
}

/* Dark mode: force the workspace text tokens onto elements that kept a
   light-theme colour (or none). */
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .empty-state, .empty-state h3, .empty-state p, .empty-state span,
    .entries-info, .result-count, .notif-empty, .breadcrumb, .breadcrumb span,
    thead th, table th, .table-header, .filter-label, .page-subtitle,
    .muted, .text-muted, .subtitle, .helper-text, .form-hint
) {
    color: var(--admx-muted, #a8beb0) !important;
    -webkit-text-fill-color: var(--admx-muted, #a8beb0) !important;
}
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .breadcrumb a, .entries-info strong, .result-count strong
) {
    color: var(--admx-ink, #eff8f1) !important;
    -webkit-text-fill-color: var(--admx-ink, #eff8f1) !important;
}
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    td, tbody td, .card td, .job-title, .item-title, .list-item strong,
    h1, h2, h3, h4, h5, h6
) {
    color: var(--admx-ink, #eff8f1) !important;
}

/* Light mode: faint white-tint backgrounds that vanish on the white cards. */
html body.light[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .btn-secondary, .filter-group, .meta-tag, .jobfair-badge, .notif-item:hover
) {
    background: var(--admx-surface-soft, #eef4f0) !important;
}

/* =========================================================================
   ACTIVE TAB / FILTER PILL — HARD FIX
   admin-command-center.css paints the active pill with var(--admx-green) +
   white text; when that variable is missing (older cached build) the pill
   renders transparent and the label disappears (white-on-white). Force a
   real green fill here with a doubled-class selector so it wins even though
   this file loads before the injected sheets.
   ========================================================================= */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .tab-btn.tab-btn.active,
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .filter-btn.filter-btn.active,
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .status-filter-btn.status-filter-btn.active,
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .tab.tab.active {
    background: #087443 !important;
    border: 1px solid #087443 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(8, 116, 67, .22) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .tab-btn.tab-btn.active :is(span, i, .tab-count, .count, .badge),
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .filter-btn.filter-btn.active :is(span, i),
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .tab.tab.active :is(span, i) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .tab-btn.tab-btn.active .tab-count,
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .tab.tab.active .tab-count {
    background: rgba(255, 255, 255, .2) !important;
}
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .tab-btn.tab-btn.active,
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .filter-btn.filter-btn.active,
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .tab.tab.active {
    /* #18a768 stood out well against the dark surface but only gave the
       white label text ~3.1:1 (fails the 4.5:1 text minimum). #0d834e keeps
       the same "real green fill, not the dark base tone" intent from the
       comment above while restoring text contrast to ~4.8:1. */
    background: #0d834e !important;
    border-color: #0d834e !important;
}

/* Empty states: production-ui.js appends a "Return to Dashboard" button.
   Centre it (and the message) within the grid empty-state box. */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.empty-state, .empty-tab, .peso-empty-state, .no-data, .no-results) {
    justify-items: center !important;
    text-align: center !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.empty-state, .empty-tab, .peso-empty-state, .no-data, .no-results) :is(.peso-empty-action, a.btn, button.btn, a.btn-primary, .btn-primary) {
    justify-self: center !important;
    align-self: center !important;
    margin: 8px auto 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* =========================================================================
   PAGINATION — consistent, readable pills
   The admin list pages style pagination only via faint var(--card-bg) /
   var(--card-border), and admin-colorlib-refinement.css turns the enabled
   links green-with-underline so they read as text, not buttons. Normalise.
   ========================================================================= */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 26px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--admx-line, #dbe6df) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .pagination :is(a, span).pagination-btn {
    min-height: 38px !important;
    padding: 8px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid var(--admx-line, #dbe6df) !important;
    background: var(--admx-surface, #fff) !important;
    color: var(--admx-green-700, #087443) !important;
    -webkit-text-fill-color: var(--admx-green-700, #087443) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .pagination a.pagination-btn:is(:hover, :focus-visible) {
    background: var(--admx-green-700, #087443) !important;
    border-color: var(--admx-green-700, #087443) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .pagination .pagination-btn.disabled {
    opacity: 1 !important;
    color: var(--admx-muted, #8b9d93) !important;
    -webkit-text-fill-color: var(--admx-muted, #8b9d93) !important;
    background: var(--admx-surface-soft, #f2f6f4) !important;
    border-color: var(--admx-line, #dbe6df) !important;
    cursor: not-allowed !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .pagination .page-info,
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .pagination .page-indicator {
    padding: 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--admx-muted, #5b7266) !important;
    -webkit-text-fill-color: var(--admx-muted, #5b7266) !important;
    font-weight: 700 !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .entries-info {
    text-align: center !important;
    color: var(--admx-muted, #5b7266) !important;
    -webkit-text-fill-color: var(--admx-muted, #5b7266) !important;
}

/* =========================================================================
   SEARCH BOXES — icon must never overlap the text (EVERY admin page)
   Two layouts exist: the topbar search (injected sheets make it a grid
   "icon | input", but the page keeps the <svg> position:absolute so it
   drops out of the grid onto the text) and the in-content table searches
   (page CSS = absolute icon + padded input). Handle both, and the case
   where the input is wrapped in a <form>.
   ========================================================================= */

/* The icon is always a real in-flow item, never an overlay. */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .search > :is(svg, i, .fa, .fas, .far, .fa-search),
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.search-wrapper, .search-box, .search-input-wrapper, .walkin-input-icon, .input-icon, [class*="input-icon"], [class*="-search-field"]) > :is(svg, i, .fa, .fas, .far) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    align-self: center !important;
    justify-self: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Make the search box a flex row. The injected sheets re-assert a grid on
   `.topbar .search` at higher specificity, so this only lands on the
   in-content table searches (which otherwise keep an absolute icon). */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.search, .search-wrapper, .search-box, .search-input-wrapper, .walkin-input-icon, .input-icon, [class*="input-icon"]) {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* The input fills the remaining space; the icon column / gap owns the inset. */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.search, .walkin-input-icon, .input-icon, [class*="input-icon"]) > form {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.search, .walkin-input-icon, .input-icon, [class*="input-icon"]) > input,
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.search, .walkin-input-icon, .input-icon, [class*="input-icon"]) > form > input:not([type="hidden"]),
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .topbar .search input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
}

/* =========================================================================
   SIDEBAR FOOTER — centre the Tutorial + Logout links
   ========================================================================= */
html body.peso-admin-workspace[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .admx-sidebar:not(.collapsed) .sidebar-footer > a,
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .sidebar:not(.collapsed) .sidebar-footer > a {
    grid-template-columns: auto auto !important;
    display: inline-flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 10px !important;
    text-align: center !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .sidebar:not(.collapsed) .sidebar-footer > a > span,
html body.peso-admin-workspace[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .admx-sidebar:not(.collapsed) .sidebar-footer > a > span {
    flex: 0 0 auto !important;
}

/* =========================================================================
   MODERN / FUTURISTIC ADMIN THEME  (shared, every admin route)
   Glass panels with a live accent edge + hover glow, gradient primary
   actions with a shine sweep, restrained danger buttons, glassy status
   pills, a light entrance, and monospace micro-labels. Presentation only.
   ========================================================================= */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) {
    --adp-a1: #0aa15e;
    --adp-a2: #48e0a6;
    --adp-cy: #35c8d6;
    --adp-glow: rgba(10, 161, 94, .24);
    --adp-surf: var(--admx-surface, #ffffff);
    --adp-line: var(--admx-line, #dbe6df);
    --adp-ink: var(--admx-ink, #10271b);
}
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) {
    --adp-glow: rgba(72, 224, 166, .32);
}

/* ---- Panels & cards: glass with a live top edge ------------------ */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .card, .stat-card, .metric-card, .chart-card, .table-card, .content-card,
    .section-card, .details-card, .health-card, .support-panel, .settings-section,
    .admx-panel, .admx-card, .form-card, .admx-metrics > article, .admx-metric,
    .kpi-card, .summary-card, .dashboard-card
) {
    position: relative !important;
    border: 1px solid color-mix(in srgb, var(--adp-a1) 16%, var(--adp-line)) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(90deg, transparent 0%, var(--adp-a1) 24%, var(--adp-a2) 50%, var(--adp-cy) 76%, transparent 100%) top left / 100% 2px no-repeat,
        linear-gradient(180deg, color-mix(in srgb, var(--adp-a1) 3.5%, var(--adp-surf)), var(--adp-surf) 62%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.5) inset,
        0 10px 26px -16px rgba(12,42,26,.28),
        0 34px 60px -46px rgba(12,42,26,.32) !important;
    transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .card, .stat-card, .metric-card, .chart-card, .table-card, .content-card,
    .section-card, .details-card, .health-card, .support-panel, .settings-section,
    .admx-panel, .admx-card, .form-card, .kpi-card, .summary-card, .dashboard-card
):hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--adp-a1) 46%, var(--adp-line)) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.55) inset,
        0 0 0 1px color-mix(in srgb, var(--adp-a1) 24%, transparent),
        0 22px 50px -22px var(--adp-glow),
        0 0 42px -12px var(--adp-glow) !important;
}

/* ---- Light entrance (top-level panels only, fast, capped stagger) - */
@keyframes adp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admx-panel, .table-card, .chart-card, .content-card, .settings-section) {
    animation: adp-rise .42s cubic-bezier(.2,.7,.2,1) both !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admx-panel, .table-card, .chart-card, .content-card, .settings-section):nth-child(2) { animation-delay: .05s !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admx-panel, .table-card, .chart-card, .content-card, .settings-section):nth-child(3) { animation-delay: .1s !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admx-panel, .table-card, .chart-card, .content-card, .settings-section):nth-child(n+4) { animation-delay: .15s !important; }

/* ---- Primary actions: gradient + rim light + shine sweep -------- */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .btn-primary, .primary-btn, .submit-btn, .save-btn, .create-btn, .add-btn,
    .btn-search, .btn-approve, .approve-btn, .admx-button.admx-button--primary,
    button.admx-button:not(.admx-button--ghost):not(.admx-button--soft)
) {
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--adp-a2) 0%, var(--adp-a1) 55%, color-mix(in srgb, var(--adp-a1) 82%, #063d2b) 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, #fff 38%, transparent) inset,
        0 10px 24px -10px var(--adp-glow),
        0 0 22px -8px var(--adp-glow) !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .btn-primary, .primary-btn, .submit-btn, .save-btn, .create-btn, .add-btn, .btn-search, .btn-approve, .approve-btn, .admx-button.admx-button--primary
)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.34) 48%, transparent 64%) !important;
    transform: translateX(-120%) !important;
    transition: transform .6s ease !important;
    pointer-events: none !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .btn-primary, .primary-btn, .submit-btn, .save-btn, .create-btn, .add-btn, .btn-search, .btn-approve, .approve-btn, .admx-button.admx-button--primary
):hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, #fff 52%, transparent) inset,
        0 16px 32px -10px var(--adp-glow),
        0 0 38px -6px var(--adp-glow) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .btn-primary, .primary-btn, .submit-btn, .save-btn, .create-btn, .add-btn, .btn-search, .btn-approve, .approve-btn, .admx-button.admx-button--primary
):hover::after { transform: translateX(120%) !important; }

/* ---- Danger actions: frosted outline, red glow on hover -------- */
html body.peso-admin-workspace[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .btn.btn-danger, .btn-danger, .danger-btn, .btn.btn-delete, .delete-btn, .btn-delete, .btn.btn-reject, .btn-reject, .reject-btn, .remove-btn
) {
    border: 1px solid color-mix(in srgb, #e2554f 46%, transparent) !important;
    background: color-mix(in srgb, #e2554f 7%, var(--adp-surf)) !important;
    color: #c0392b !important;
    -webkit-text-fill-color: #c0392b !important;
    backdrop-filter: blur(6px) !important;
    transition: transform .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}
html body.peso-admin-workspace[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .btn.btn-danger, .btn-danger, .danger-btn, .btn.btn-delete, .delete-btn, .btn-delete, .btn.btn-reject, .btn-reject, .reject-btn, .remove-btn
):hover {
    transform: translateY(-2px) !important;
    border-color: #e2554f !important;
    background: linear-gradient(135deg, #ef6a5f, #c0392b) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 14px 30px -10px rgba(226,85,79,.5), 0 0 30px -8px rgba(226,85,79,.4) !important;
}
html body.peso-admin-workspace:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(
    .btn.btn-danger, .btn-danger, .danger-btn, .btn.btn-delete, .delete-btn, .btn-delete, .btn.btn-reject, .btn-reject, .reject-btn, .remove-btn
) { color: #f6a8a3 !important; -webkit-text-fill-color: #f6a8a3 !important; }

/* ---- Status pills: a touch of glass ------------------------- */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.status-badge, .badge, .pill, .chip, .tag, .admx-count-pill) {
    backdrop-filter: blur(5px) !important;
}

/* ---- Metric readouts: faintly glowing value ---------------- */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.stat-card, .metric-card, .admx-metric) :is(.value, .stat-value, .count, strong) {
    text-shadow: 0 0 22px color-mix(in srgb, var(--adp-a1) 30%, transparent) !important;
}

/* ---- Panel section titles: leading accent bar ------------- */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admx-panel__head, .card-header, .panel-header) :is(h2, h3):first-child {
    position: relative !important;
    padding-left: 13px !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admx-panel__head, .card-header, .panel-header) :is(h2, h3):first-child::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 3px !important;
    height: 1em !important;
    transform: translateY(-50%) !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, var(--adp-a1), var(--adp-cy)) !important;
    box-shadow: 0 0 10px -1px var(--adp-glow) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.admx-panel, .table-card, .chart-card, .content-card, .settings-section) { animation: none !important; }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.btn-primary, .primary-btn, .submit-btn, .btn-search, .admx-button.admx-button--primary)::after { display: none !important; }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.card, .stat-card, .admx-panel):hover { transform: none !important; }
}

/* =====================================================================
   ADMIN SIDEBAR — align to the light PESO system
   admin-command-center.css themes the rail dark-green with a gold edge
   and gold active accent. This block (id-scoped via #sidebar, so it
   outranks that sheet's !important rules) restyles it as a calm light
   rail: off-white surface, hairline edge, PESO-green accent, muted
   stroke icons, restrained footer. Uses --admx-* tokens so light/dark
   follow. Presentation only — same markup, links, JS.
   ===================================================================== */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar.admx-sidebar {
    border: 0 !important;
    border-right: 1px solid var(--admx-line, #dbe6df) !important;
    background: var(--admx-surface-soft, #f5faf7) !important;
    color: var(--admx-ink, #10271b) !important;
    box-shadow: 12px 0 40px -32px rgba(16, 39, 27, .28) !important;
    padding: 16px 14px 14px !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar.admx-sidebar::before { display: none !important; content: none !important; }

/* brand */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-header {
    border-bottom: 1px solid var(--admx-line, #dbe6df) !important;
    padding-bottom: 14px !important;
    margin-bottom: 4px !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo-mark {
    border: 1px solid var(--admx-line, #dbe6df) !important;
    background: var(--admx-surface, #fff) !important;
    box-shadow: none !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo-copy strong {
    color: var(--admx-ink, #10271b) !important;
    font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo-copy { min-width: 0 !important; overflow: hidden !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo-copy strong,
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo-copy small {
    display: block !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo-copy small {
    color: var(--admx-muted, #61756a) !important;
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-inside-toggle {
    border: 1px solid var(--admx-line, #dbe6df) !important;
    background: var(--admx-surface, #fff) !important;
    color: var(--admx-muted, #61756a) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-inside-toggle:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--admx-green-700, #087443) 45%, var(--admx-line, #dbe6df)) !important;
    background: color-mix(in srgb, var(--admx-green-700, #087443) 8%, var(--admx-surface, #fff)) !important;
    color: var(--admx-green-700, #087443) !important;
}

/* service status strip */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-service-status {
    border: 1px solid var(--admx-line, #dbe6df) !important;
    background: var(--admx-surface, #fff) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-service-status__copy strong { color: var(--admx-ink, #10271b) !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-service-status__copy small { color: var(--admx-muted, #61756a) !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-service-status__live {
    background: color-mix(in srgb, var(--admx-green-700, #087443) 12%, transparent) !important;
    color: var(--admx-green-700, #087443) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-service-status__signal {
    background: var(--admx-green-700, #087443) !important;
    border-color: color-mix(in srgb, var(--admx-green-700, #087443) 30%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--admx-green-700, #087443) 10%, transparent) !important;
}

/* group labels */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-nav-group__label {
    color: var(--admx-muted, #61756a) !important;
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
}

/* nav links */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .nav-link {
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--admx-muted, #61756a) !important;
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .nav-link__icon {
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .nav-link:is(:hover, :focus-visible) {
    border-color: transparent !important;
    background: color-mix(in srgb, var(--admx-green-700, #087443) 6%, transparent) !important;
    color: var(--admx-ink, #10271b) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .nav-link.active {
    position: relative !important;
    border-color: transparent !important;
    background: color-mix(in srgb, var(--admx-green-700, #087443) 10%, transparent) !important;
    /* Text used --admx-green-700 — the SAME color the 10% tint above is
       mixed from, so in dark mode (where --admx-green-700 is a mid-bright
       #2fa26a) the label read at only ~3.6:1 against its own pill: light
       green text on a faint wash of that identical green. --admx-green-900
       is already the dark-mode-safe "text on a tinted admin surface" token
       (bright #52c489 in dark mode, nearly-black #063d2b in light mode —
       see admin-command-center.css) and gives ~5.3:1 here in both themes. */
    color: var(--admx-green-900, #087443) !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .nav-link.active::before {
    content: "" !important;
    position: absolute !important;
    left: -14px !important;
    top: 50% !important;
    width: 3px !important;
    height: 22px !important;
    transform: translateY(-50%) !important;
    border-radius: 0 3px 3px 0 !important;
    background: var(--admx-green-900, #087443) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .nav-link.active .nav-link__icon {
    border: 0 !important;
    background: transparent !important;
    color: var(--admx-green-900, #087443) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .nav-link__label { color: inherit !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .nav-link__arrow { display: none !important; }

/* footer: Tutorial + Logout */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer {
    border-top: 1px solid var(--admx-line, #dbe6df) !important;
    background: transparent !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a {
    min-height: 42px !important;
    border: 1px solid var(--admx-line, #dbe6df) !important;
    border-radius: 10px !important;
    background: var(--admx-surface, #fff) !important;
    color: var(--admx-ink, #10271b) !important;
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 700 !important;
    overflow: hidden !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a > span:not(.sidebar-footer__icon) {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--admx-green-700, #087443) 42%, var(--admx-line, #dbe6df)) !important;
    background: color-mix(in srgb, var(--admx-green-700, #087443) 6%, var(--admx-surface, #fff)) !important;
    color: var(--admx-green-700, #087443) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a[href$="logout.php"] {
    border-color: color-mix(in srgb, #c0392b 26%, var(--admx-line, #dbe6df)) !important;
    color: #c0392b !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a[href$="logout.php"]:is(:hover, :focus-visible) {
    border-color: #c0392b !important;
    background: color-mix(in srgb, #c0392b 8%, var(--admx-surface, #fff)) !important;
    color: #c0392b !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a[href$="logout.php"] :is(svg, i) {
    color: #c0392b !important;
    stroke: #c0392b !important;
}
/* #c0392b (a muted brick red) was picked for a LIGHT sidebar and never
   swapped for dark mode — on the dark sidebar background it measures only
   ~2.8:1, well under the 4.5:1 text minimum. admin-operations-shell.css
   already uses the correct #ffc1c1 for this exact link elsewhere, but its
   selector lacks the #sidebar id this rule has, so it always lost the
   specificity tie. Reuse that same light-pink-red here instead of adding a
   third variant. */
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a[href$="logout.php"] {
    border-color: color-mix(in srgb, #ffc1c1 30%, var(--admx-line, #dbe6df)) !important;
    color: #ffc1c1 !important;
}
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a[href$="logout.php"]:is(:hover, :focus-visible) {
    border-color: #ffc1c1 !important;
    background: color-mix(in srgb, #ffc1c1 10%, transparent) !important;
    color: #ffc1c1 !important;
}
html body:not(.light)[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a[href$="logout.php"] :is(svg, i) {
    color: #ffc1c1 !important;
    stroke: #ffc1c1 !important;
}

/* --- Sidebar on small screens: a proper scrolling drawer --------------
   The rail is a fixed-height column: brand pinned on top, nav scrolls,
   Tutorial + Logout pinned at the bottom. Keeps every label on one line. */
@media (max-width: 992px) {
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar.admx-sidebar {
        display: flex !important;
        flex-direction: column !important;
        width: min(86vw, 300px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        padding: 14px 12px 12px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-header,
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-service-status,
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer {
        flex: 0 0 auto !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar :is(.nav, .admx-sidebar-nav) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        margin: 0 !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer {
        margin-top: 8px !important;
        padding-top: 10px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-footer a {
        min-height: 44px !important;
        white-space: nowrap !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-header {
        grid-template-columns: minmax(0, 1fr) 36px !important;
        gap: 8px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo-mark {
        width: 40px !important; height: 40px !important; flex: 0 0 40px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo img {
        width: 34px !important; height: 34px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo-copy strong { font-size: 13.5px !important; }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .sidebar-logo-copy small { letter-spacing: .04em !important; }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .nav-link.active::before { left: -12px !important; }
}

/* =====================================================================
   DE-GOLD — the workspace sheets accent panels and page headers with
   gold; the rest of the admin redesign is pure PESO green. Realign.
   #main-scoped so it beats admin-command-center.css / admin-workspace-
   professional.css !important rules.
   ===================================================================== */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.admin-page-intro, .page-header, .content-header, .dashboard-header):not(.welcome-banner):not(.admx-hero) {
    border-left: 3px solid var(--admx-green-700, #087443) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.admin-page-intro, .page-header, .content-header, .dashboard-header):not(.welcome-banner):not(.admx-hero)::after {
    display: none !important;
    content: none !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.chart-card, .table-card, .content-card, .panel, .section-card, .settings-section, .details-card, .support-panel, .health-card) {
    border-top: 2px solid var(--admx-green-700, #087443) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.topbar, .admin-detail-topbar) {
    border-top-color: var(--admx-green-700, #087443) !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.quick-action-card.highlight, .stat-card.highlight) {
    border-top-color: var(--admx-green-700, #087443) !important;
    background: color-mix(in srgb, var(--admx-green-700, #087443) 5%, var(--admx-surface, #fff)) !important;
}

/* Users page: the stats row is forced to 4 columns by a workspace sheet.
   With four cards it now fills; keep it aligned and drop the min-height. */
html body[data-peso-page="admin-users"] #main .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}
@media (max-width: 1080px) {
    html body[data-peso-page="admin-users"] #main .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    html body[data-peso-page="admin-users"] #main .stats-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* =====================================================================
   MODALS — always centred on the admin workspace
   production-ui.js stamps role="dialog" on every .modal / .walkin-modal
   OVERLAY, which then matches admin-workspace-professional.css's
   [role='dialog'] { max-width: min(94vw,720px) } rule and gets pinned to
   a 720px column on the left; admin-workspace-modern.css also turns the
   overlay into a bottom sheet under 1024px. Force the overlay back to a
   full-viewport flex box that centres its card. Positioning only — each
   page's own JS still controls show/hide.
   ===================================================================== */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.modal, .walkin-modal) {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(12px, 4vw, 40px) !important;
    overflow-y: auto !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.modal, .walkin-modal) > :is(.modal-card, .modal-content, .modal-dialog, .walkin-modal-dialog, .job-details-modal) {
    margin: auto !important;
    max-height: min(90vh, calc(100dvh - 3rem)) !important;
    overflow-y: auto !important;
    transform: none !important;
    position: relative !important;
    inset: auto !important;
}
/* undo the workspace-sheet bottom-sheet treatment below 1024px */
@media (max-width: 1024px) {
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.modal, .walkin-modal) { align-items: center !important; padding: clamp(12px, 4vw, 32px) !important; }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(.modal, .walkin-modal) > :is(.modal-card, .modal-content, .modal-dialog, .walkin-modal-dialog, .job-details-modal) { width: min(560px, 100%) !important; border-radius: 18px !important; }
}

/* =====================================================================
   PAGE HEADER (.topbar + .admin-page-intro) — responsive, all admin pages
   The workspace sheets only stack the topbar at <=768px, so between the
   docked-sidebar range (769-1180px) the heading + search + icon cluster
   are crammed into ~540px and overflow. Stack earlier and let the icon
   row wrap instead of scroll. #main-scoped so it wins the cascade.
   ===================================================================== */
@media (max-width: 1024px) {
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.topbar, .admin-detail-topbar) {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.topbar .left-section, .admin-detail-topbar .left-section) {
        display: grid !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        gap: 10px !important;
        justify-items: center !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .admin-topbar-heading {
        max-width: none !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        justify-items: center !important;
        text-align: center !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .admin-topbar-heading span {
        justify-content: center !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .topbar .search {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .topbar .top-right {
        width: 100% !important;
        flex: 1 1 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-left: 0 !important;
        overflow: visible !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .topbar .top-right > div[style*="position: relative"],
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .topbar .top-right .peso-language-picker { flex: 0 0 auto !important; }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .topbar .peso-language-picker--inline select { min-width: 92px !important; }
}

/* Below 768px the sidebar becomes a drawer and a fixed hamburger sits at
   top:16 / left:16 (~44px). Everything at the top of #main — the injected
   breadcrumb and the topbar — must clear it. */
@media (max-width: 768px) {
    /* Whatever sits first inside #main (the injected breadcrumb on the
       dashboard, the topbar elsewhere) has to clear the fixed hamburger. */
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main > :is(.peso-breadcrumbs, .breadcrumb, nav.breadcrumb, .topbar, .admin-detail-topbar):first-child {
        padding-left: 62px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main > :is(.peso-breadcrumbs, .breadcrumb, nav.breadcrumb):first-child {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        min-height: 44px !important;
        margin-bottom: 12px !important;
    }
    /* a topbar sitting under the breadcrumb is already clear of the hamburger */
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main > :is(.peso-breadcrumbs, .breadcrumb) + :is(.topbar, .topbar.admx-commandbar, .admin-detail-topbar) {
        padding-left: 14px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .topbar .date-badge {
        order: 5 !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.admin-page-intro, .page-header, .content-header, .dashboard-header):not(.welcome-banner):not(.admx-hero) {
        padding: 22px 20px !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.admin-page-intro, .page-header, .content-header, .dashboard-header):not(.welcome-banner):not(.admx-hero) > :is(div, .page-header__copy, .admin-page-intro__copy) {
        min-width: 0 !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.admin-page-intro, .page-header, .content-header, .dashboard-header):not(.welcome-banner):not(.admx-hero) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: center !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.admin-page-intro, .page-header, .content-header, .dashboard-header):not(.welcome-banner):not(.admx-hero) > :is(div, .page-header__copy, .admin-page-intro__copy) {
        display: grid !important;
        justify-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.admin-page-intro, .page-header, .content-header) :is(.admin-page-intro__eyebrow, .page-header__eyebrow, .eyebrow) {
        justify-content: center !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.admin-page-intro, .page-header, .content-header) :is(.peso-btn, .btn, .btn-primary, a.btn, button) {
        width: 100% !important;
        justify-content: center !important;
    }
    /* dashboard hero */
    html body[data-peso-page="admin-dashboard"] #main .admx-hero { text-align: center !important; }
    html body[data-peso-page="admin-dashboard"] #main .admx-hero__copy {
        display: grid !important;
        justify-items: center !important;
        text-align: center !important;
    }
    html body[data-peso-page="admin-dashboard"] #main .admx-hero__copy .admx-hero__actions {
        justify-content: center !important;
        width: 100% !important;
    }
    html body[data-peso-page="admin-dashboard"] #main .admx-hero__copy .admx-eyebrow { justify-content: center !important; }

    /* Sidebar close (X) button — the visible toggle on mobile. The injected
       sheets only give it display:grid, so match it to the light rail. */
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .close-sidebar {
        display: grid !important;
        place-items: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border: 1px solid var(--admx-line, #dbe6df) !important;
        border-radius: 11px !important;
        background: var(--admx-surface, #fff) !important;
        color: var(--admx-ink, #10271b) !important;
        cursor: pointer !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .close-sidebar:is(:hover, :focus-visible) {
        border-color: color-mix(in srgb, var(--admx-green-700, #087443) 45%, var(--admx-line, #dbe6df)) !important;
        background: color-mix(in srgb, var(--admx-green-700, #087443) 8%, var(--admx-surface, #fff)) !important;
        color: var(--admx-green-700, #087443) !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #sidebar .close-sidebar svg {
        width: 18px !important;
        height: 18px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }
}

@media (max-width: 560px) {
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .topbar .date-badge { display: none !important; }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .topbar .top-right { justify-content: center !important; }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .admin-topbar-heading strong,
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main :is(.admin-page-intro h1, .page-header h1) {
        font-size: clamp(20px, 6.5vw, 26px) !important;
        line-height: 1.2 !important;
    }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) #main .admin-topbar-heading small { white-space: normal !important; }
}