/* ============================================================
   Vakio Auditor Portal — page-level styles
   Loaded by index.html for /audit/* SPA routes.
   Re-implements the adm-* primitives that auditor pages share
   with the platform admin portal (which lives in admin.css and
   is not loaded inside the tenant shell).
   Palette: tenant theme tokens (see design-system.css).
   ============================================================ */

/* ── Page chrome ─────────────────────────────────────────── */
.adm-page-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-8);
    color: var(--text-primary);
}

.adm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--surface-border);
}

.adm-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.adm-page-subtitle,
.adm-page-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.5;
}

.adm-page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Cards / surfaces ────────────────────────────────────── */
.adm-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.adm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--surface-border);
}

.adm-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Tables ──────────────────────────────────────────────── */
.adm-table-wrap { overflow-x: auto; border-radius: 8px; }

table.adm-table,
.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.02);
}

.adm-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--surface-border-mid);
    background: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}

.adm-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-secondary);
    vertical-align: middle;
}

.adm-table tbody tr { transition: background 0.18s ease; }
.adm-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table tbody td:first-child { color: var(--text-primary); }

.adm-table--compact td,
.adm-table--compact th { padding: 7px 10px; font-size: 12px; }

/* ── Tabs (single-dash + BEM variants used by AP-6 pages) ── */
.adm-tabs,
.adm-tab-bar {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--surface-border);
    margin-bottom: var(--space-5);
}

.adm-tab {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.18s ease;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    outline: none;
    font-family: inherit;
}

.adm-tab:hover { color: var(--text-secondary); }

.adm-tab.active,
.adm-tab--active {
    color: var(--color-teal);
    border-bottom-color: var(--color-teal);
}

/* ── Empty / loading / error states ──────────────────────── */
.adm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.adm-empty,
.adm-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 13px;
    border: 1px dashed var(--surface-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.adm-empty-state--success {
    border-color: rgba(0, 196, 140, 0.35);
    color: var(--color-green);
    background: rgba(0, 196, 140, 0.08);
}

.adm-error-state {
    padding: 16px 20px;
    border-radius: 8px;
    background: rgba(229, 57, 53, 0.08);
    border: 1px solid rgba(229, 57, 53, 0.35);
    color: var(--color-red);
    font-size: 13px;
}

/* ── Info banner (audit confidentiality notices etc.) ─────── */
.adm-info-banner {
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(0, 180, 162, 0.08);
    border: 1px solid rgba(0, 180, 162, 0.30);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.adm-info-banner strong { color: var(--color-teal); }

.adm-info-banner--warning {
    background: rgba(196, 154, 60, 0.08);
    border-color: rgba(196, 154, 60, 0.35);
}

.adm-info-banner--warning strong { color: var(--color-amber); }

/* ── Filter bar ──────────────────────────────────────────── */
.adm-filter-bar,
.adm-filters {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    overflow: visible;          /* never clip native <select> popups */
    position: relative;
}

/* Labeled filter grid — replaces ad-hoc inline styles on auditor pages */
.adm-filter-bar--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 14px;
    align-items: end;
}

.adm-filter-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.adm-filter-cell__label,
.adm-filter-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
    white-space: nowrap;
}

.adm-filter-cell > .adm-input,
.adm-filter-cell > .adm-select,
.adm-filter-cell > select,
.adm-filter-cell > input {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    /* Root-cause fix (2026-09-06): components.css's ".adm-filter-bar .adm-input"
       sets `flex: 1 1 200px` for the OLD flat, flex-ROW .adm-filter-bar layout,
       where flex-basis:200px means a 200px-wide field that grows to fill the row.
       .adm-filter-cell is a flex-COLUMN wrapper (label stacked above the control),
       so that same shorthand is read on the vertical axis instead: flex-basis:200px
       became a 200px+ *height* basis and flex-grow:1 stretched the field to fill
       the grid row, ballooning every text/date <input> in the filter bar (selects
       were unaffected — .adm-filter-bar .adm-select uses flex:0 0 auto, which has
       no grow/basis to misinterpret). Neutralize it here since auditor.css loads
       last and wins the cascade at equal specificity (0,2,0) for descendants of
       .adm-filter-cell. Reproduced on /audit/events, /audit/consent, /stuck-items. */
    flex: none;
}

/* Secondary row inside a filter card (toggles + apply/reset) */
.adm-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--surface-border);
    grid-column: 1 / -1;
}

.adm-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.adm-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.adm-filter-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-teal);
    cursor: pointer;
}

/* Pill-style cluster for compact filters (frameworks, status quick picks) */
.adm-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.adm-filter-pill {
    border: 1px solid var(--surface-border-mid);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
    transition: all 0.18s ease;
}

.adm-filter-pill:hover {
    border-color: var(--color-teal);
    color: var(--text-primary);
}

.adm-filter-pill--active {
    background: rgba(0, 180, 162, 0.18);
    border-color: rgba(0, 180, 162, 0.55);
    color: var(--color-teal);
}

/* Search bar (used by Incidents) */
.adm-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 200px;
}

.adm-search input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--surface-border-mid);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    height: 34px;
    font-family: inherit;
    transition: border-color 0.18s ease;
}

.adm-search input:focus {
    outline: none;
    border-color: var(--color-teal);
}

.adm-search::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    border: 1.5px solid var(--text-muted);
    border-radius: 50%;
    pointer-events: none;
}

.adm-search::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 50%;
    width: 6px;
    height: 1.5px;
    background: var(--text-muted);
    transform: translateY(0) rotate(45deg);
    transform-origin: 0 0;
    pointer-events: none;
}

/* ── Stat strip (compact KPI band at top of audit pages) ── */
.adm-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.adm-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    border-left: 3px solid var(--surface-border-mid);
}

.adm-stat--info     { border-left-color: var(--color-teal); }
.adm-stat--warning  { border-left-color: var(--color-amber); }
.adm-stat--critical { border-left-color: var(--color-red); }
.adm-stat--success  { border-left-color: var(--color-green); }

.adm-stat__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

.adm-stat__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.adm-stat--warning  .adm-stat__value { color: var(--color-amber); }
.adm-stat--critical .adm-stat__value { color: var(--color-red); }
.adm-stat--success  .adm-stat__value { color: var(--color-green); }

.adm-stat__hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Legend strip (status colour key, used by DSR/Incidents) ── */
.adm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 8px 14px;
    margin-bottom: var(--space-4);
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed var(--surface-border);
    border-radius: 6px;
}

.adm-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.adm-legend__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
    display: inline-block;
}
.adm-legend__dot--ok       { background: var(--color-green); }
.adm-legend__dot--warning  { background: var(--color-amber); }
.adm-legend__dot--critical { background: var(--color-red); }
.adm-legend__dot--info     { background: var(--color-teal); }

/* ── Pagination ──────────────────────────────────────────── */
.adm-pagination,
.adm-pagination-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 0;
    font-size: 12px;
    color: var(--text-muted);
}

.adm-pagination__btn {
    background: transparent;
    border: 1px solid var(--surface-border-mid);
    border-radius: 6px;
    padding: 5px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.18s ease;
}

.adm-pagination__btn:hover {
    color: var(--text-primary);
    border-color: var(--color-teal);
}

.adm-pagination__info { color: var(--text-secondary); }

/* ── Form / detail grids ─────────────────────────────────── */
.adm-form-section {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
}

.adm-form-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.adm-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 20px;
}

.adm-detail-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-word;
}

.adm-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.adm-muted { color: var(--text-muted); font-style: italic; }

/* ── Tag chips (sub-badges) ──────────────────────────────── */
.adm-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    margin-right: 4px;
}

.adm-tag--muted { color: var(--text-muted); background: rgba(255, 255, 255, 0.03); }

/* ── Badge variants (extends tenant-shell.css palette) ───── */
.adm-badge--info     { background: rgba(0, 180, 162, 0.14); color: var(--color-teal); }
.adm-badge--critical { background: rgba(229, 57, 53, 0.14);  color: var(--color-red); }
.adm-badge--muted    { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }

/* ── Buttons (BEM-style aliases — extends tenant-shell adm-btn-*) ── */
.adm-btn--primary,
.adm-btn.adm-btn--primary {
    background: rgba(0, 180, 162, 0.18);
    border-color: rgba(0, 180, 162, 0.45);
    color: var(--color-teal);
}
.adm-btn--primary:hover,
.adm-btn.adm-btn--primary:hover {
    background: rgba(0, 180, 162, 0.30);
    color: var(--text-primary);
}

.adm-btn--secondary,
.adm-btn.adm-btn--secondary {
    background: rgba(196, 154, 60, 0.10);
    border-color: rgba(196, 154, 60, 0.35);
    color: var(--color-amber);
}
.adm-btn--secondary:hover,
.adm-btn.adm-btn--secondary:hover {
    background: rgba(196, 154, 60, 0.20);
    color: var(--text-primary);
}

.adm-btn--ghost,
.adm-btn.adm-btn--ghost {
    background: transparent;
    border-color: var(--surface-border-mid);
    color: var(--text-secondary);
}
.adm-btn--ghost:hover,
.adm-btn.adm-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.adm-btn--sm  { padding: 5px 10px; font-size: 12px; }
.adm-btn--xs  { padding: 3px 8px;  font-size: 11px; }

/* ── Input / select size variants (extend tenant-shell .adm-input) ── */
.adm-input--sm,
.adm-select--sm { padding: 6px 10px; font-size: 12px; height: 32px; }

/* ── Section body / code block ───────────────────────────── */
.adm-section-body { padding: var(--space-4) 0; }

.adm-code-block {
    display: block;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 12px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* ── KPI + widget grid (POSH summary, etc.) ──────────────── */
.adm-widget-grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.adm-widget-grid--2col { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.adm-widget-grid--4col { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.adm-widget {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: var(--space-4);
}

.adm-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--surface-border);
}

.adm-widget-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.adm-widget-body { color: var(--text-secondary); font-size: 13px; }

.adm-kpi-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.adm-kpi-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.adm-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.adm-kpi--warning .adm-kpi-value { color: var(--color-amber); }
.adm-kpi--critical .adm-kpi-value { color: var(--color-red); }

/* ── Countdown helper (DSR / SLA) ────────────────────────── */
.ap6-dsr-countdown,
.adm-countdown {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(0, 180, 162, 0.10);
    color: var(--color-teal);
}
.adm-countdown--warning  { background: rgba(196, 154, 60, 0.14); color: var(--color-amber); }
.adm-countdown--critical { background: rgba(229, 57, 53, 0.14);  color: var(--color-red); }

/* ── Modal backdrop + container (used by ComplianceCalendarPage and EngagementControlsPage) ── */
.adm-modal-backdrop,
.adm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.adm-modal {
    background: var(--surface-card, #161b2e);
    border: 1px solid var(--surface-border-mid, rgba(255,255,255,0.1));
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Modal BEM aliases (used by EngagementControlsPage) ──── */
.adm-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--surface-border);
}
.adm-modal__title  { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.adm-modal__body   { padding: 18px 22px; overflow-y: auto; flex: 1; }
.adm-modal__close {
    background: transparent;
    border: 1px solid var(--surface-border-mid);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.adm-modal__close:hover { color: var(--text-primary); border-color: var(--color-teal); }

/* Wide modal modifier used by AuditIncidentsPage */
.adm-modal--wide { max-width: 760px; }

/* ── AP-6 incident card list ─────────────────────────────── */
.ap6-incident-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--space-4);
}

.ap6-incident-card {
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.ap6-incident-card:hover {
    border-color: var(--color-teal);
    background: rgba(0, 180, 162, 0.04);
}

.ap6-incident-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ap6-incident-card__type {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}
.ap6-incident-card__ts {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}
.ap6-incident-card__desc {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.ap6-incident-card__sla {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.ap6-incident-card__notifs {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.ap6-sla-bar {
    display: grid;
    grid-template-columns: 110px 1fr 90px;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.ap6-sla-bar__label { color: var(--text-muted); }
.ap6-sla-bar__track {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.ap6-sla-bar__fill { height: 100%; transition: width 0.3s ease; }
.ap6-sla-bar__time { text-align: right; font-weight: 600; }

.ap6-incident-detail__slas { display: flex; flex-direction: column; gap: 10px; }

/* ── AP-6 consent timeline ───────────────────────────────── */
.ap6-consent-list { display: flex; flex-direction: column; gap: var(--space-4); }

.ap6-consent-card { padding: var(--space-4); }

.ap6-consent-card__header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--surface-border);
}

.ap6-consent-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-primary);
}

.ap6-consent-card__meta code {
    font-size: 11px;
    color: var(--text-muted);
}

.ap6-timeline { display: flex; flex-direction: column; gap: 8px; }

.ap6-timeline-entry {
    display: grid;
    grid-template-columns: 14px 1fr;
    align-items: center;
    gap: 10px;
}

.ap6-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
}
.ap6-timeline-dot--green { background: var(--color-green); box-shadow: 0 0 0 3px rgba(0,196,140,0.18); }
.ap6-timeline-dot--red   { background: var(--color-red);   box-shadow: 0 0 0 3px rgba(229,57,53,0.18); }

.ap6-timeline-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.ap6-timeline-ts { color: var(--text-muted); }

.ap6-mechanism-label {
    font-size: 11px;
    color: var(--text-muted);
    cursor: default;
    user-select: none;
}

.ap6-gap-panel { margin-top: var(--space-4); }
.ap6-gap-report { padding: var(--space-4); border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid var(--surface-border); }

/* ── AP-8 detail panels (Engagement* pages) ──────────────── */
.ap8-detail-section {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--surface-border);
}
.ap8-detail-section:last-child { border-bottom: none; }
.ap8-detail-heading {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

/* ── AP-8 Sampling Tool — form layout (must be present at initial render) ──── */
.ap8-sample-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.ap8-sample-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}

.ap8-sample-field--btn {
    flex: 0;
    min-width: unset;
    align-self: flex-end;
}

.ap8-manifest-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.ap8-manifest-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ap8-sample-table { width: 100%; }

/* ── Compliance Calendar — event list rows ───────────────────────────────── */
.cal-event-row {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--surface-border, rgba(196,154,60,0.12));
    transition: background 0.12s;
}

.cal-event-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.cal-event-row--active {
    background: rgba(0, 180, 162, 0.10);
    border-left: 3px solid var(--color-teal, #00B4A2);
}

/* MR-5: iOS auto-zoom prevention — all audit/filter inputs must be ≥16px on mobile/tablet */
@media (max-width: 768px) {
    .adm-input--sm,
    .adm-select--sm,
    .adm-filter-cell > input,
    .adm-filter-cell > select,
    .adm-filter-cell > textarea,
    .adm-search input {
        font-size: 16px;
    }
}

/* MR-5: .adm-tab — audit page tabs are 39px, 5px short of WCAG 2.5.5 44px minimum */
@media (max-width: 768px) {
    .adm-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* MR-5: adm-filter-pill (25px) and adm-pagination__btn (26px) — below 44px WCAG 2.5.5 */
@media (max-width: 768px) {
    .adm-filter-pill {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .adm-pagination__btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* MR-5: P8 minimum readable font — audit table headers, filter labels, status badges
   at 10-11px are below the 12px minimum on mobile (WCAG 1.4.4) */
@media (max-width: 768px) {
    .adm-table thead th,
    .adm-filter-cell__label,
    .adm-filter-label,
    .adm-btn--xs {
        font-size: 12px;
    }
}

/* MR-5: P8 remaining sub-12px elements — stat labels (10px), legend (11px),
   detail labels (10px), tags (11px), KPI labels (11px), incident timestamps (11px),
   SLA bar text (11px), consent code snippets (11px), mechanism labels (11px),
   aev-chevron-cell table cell (11.2px from mobile UA rem scaling),
   adm-label (10px) and adm-badge (11px) — must be in auditor.css since it loads last */
@media (max-width: 768px) {
    .adm-stat__label,
    .adm-stat__hint,
    .adm-legend,
    .adm-tag,
    .adm-kpi-label,
    .ap6-incident-card__ts,
    .ap6-incident-card__notifs,
    .ap6-sla-bar,
    .ap6-sla-bar__label,
    .ap6-consent-card__meta code,
    .ap6-mechanism-label,
    .aev-chevron-cell,
    .adm-label,
    .adm-badge {
        font-size: 12px;
    }
}

/* MR-047: adm-btn--xs and adm-btn--sm in auditor pages — 20px and 28px heights are below
   WCAG 2.5.5 minimum 44px tap target. These size variants are used in Audit Health (Dismiss,
   View buttons) and Audit Controls pages. Enforce 44px min-height on mobile. */
@media (max-width: 768px) {
    .adm-btn--xs,
    .adm-btn--sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* MR-169: adm-search input (34px) and adm-input--sm / adm-select--sm (32px) — heights
   below WCAG 2.5.5 44px minimum touch target. Enforce min-height on mobile so the
   search icon and filter inputs are tappable. The height property is preserved at
   desktop to maintain compact filter bar density; min-height overrides on mobile. */
@media (max-width: 768px) {
    .adm-search input {
        min-height: 44px;
        height: auto;
        font-size: 16px;
    }
    .adm-input--sm,
    .adm-select--sm {
        min-height: 44px;
        height: auto;
        font-size: 16px;
    }
}

/* MR-160: adm-tabs / adm-tab-bar — no overflow-x: auto. Audit pages render 4–7 tabs
   (AuditControlsPage: Controls / Frameworks / Evidence / Gaps — 4 tabs;
   EngagementHomePage, EngagementControlsPage, EngagementAttestationPage — 3-5 tabs;
   AuditEventsPage: Events / Consent / DSR / POSH — 4+ tabs). At 375px a 4-tab bar
   with 10px padding each side and 13px font = ~300px+ total, overflowing the viewport.
   Standing rule from MR-137/MR-139: tab containers with 4+ tabs must scroll horizontally.
   Fix: enable scroll-snap horizontal scrolling on the container; tabs stay on one row
   and are individually scrollable without wrapping (which would break the underline indicator). */
@media (max-width: 768px) {
    .adm-tabs,
    .adm-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .adm-tabs::-webkit-scrollbar,
    .adm-tab-bar::-webkit-scrollbar {
        display: none;
    }
    .adm-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* MR-161: adm-modal--wide — max-width 760px with no mobile override. At 375px viewport
   (with 20px backdrop padding each side = 335px available) the 760px max-width collapses
   to 335px via width:100%, which works correctly for the normal .adm-modal. BUT the
   .adm-modal--wide override makes max-width 760px — this works because width:100% still
   constrains it to the parent. However, the .adm-modal has padding:20px on the backdrop
   meaning effective inner width = viewport - 40px. At 375px that is 335px — fine.
   The real risk: AuditIncidentsPage detail content has wide SLA grids (ap6-sla-bar:
   grid-template-columns: 110px 1fr 90px). This grid is 300px+ and fits at 335px but
   the 110px + 90px fixed columns leave only 135px for the progress bar — acceptable.
   Add a safety clamp so wide modals never exceed 90vw on any viewport. */
@media (max-width: 768px) {
    .adm-modal--wide {
        max-width: min(760px, calc(100vw - 40px));
    }
}

/* MR-162: ap6-incident-cards — minmax(360px, 1fr) means a single card is always ≥360px.
   At 375px viewport the card spans 360px minimum, overflowing its container by 25px+
   (minus any margin). Force single-column layout with 100% width cards on mobile. */
@media (max-width: 768px) {
    .ap6-incident-cards {
        grid-template-columns: 1fr;
    }
}

/* MR-163: adm-page-wrap — var(--space-8) = 32px horizontal padding each side = 64px total.
   At 375px this leaves only 311px for content. Reduce to 16px at mobile. */
@media (max-width: 375px) {
    .adm-page-wrap {
        padding: var(--space-4) var(--space-4);
    }
}

/* ── Light theme overrides ──────────────────────────────────────── */
[data-theme="light"] .adm-filter-pill {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.18);
    color: #374151;
}
[data-theme="light"] .adm-filter-pill:hover {
    background: rgba(13,148,136,0.06);
    border-color: #0D9488;
    color: #0D9488;
}
[data-theme="light"] .adm-filter-pill--active {
    background: rgba(13,148,136,0.12);
    border-color: rgba(13,148,136,0.45);
    color: #0E7490;
}
[data-theme="light"] .adm-search input {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.15);
    color: #111827;
}

/* ── SPR — Summary strip ────────────────────────────────────── */
.spr-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--space-5, 20px);
}

.spr-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 24px;
    background: var(--surface-card, rgba(255,255,255,0.04));
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 120px;
    text-align: center;
    color: inherit;
}

.spr-summary-card:hover {
    border-color: var(--color-teal, #00B4A2);
    background: var(--surface-card-hover, rgba(255,255,255,0.07));
}

.spr-summary-card--active,
.spr-summary-card[aria-pressed="true"] {
    border-color: var(--color-teal, #00B4A2);
    background: rgba(0, 180, 162, 0.1);
}

.spr-summary-card__count {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.spr-summary-card__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── SPR — Filter bar BEM sub-elements ─────────────────────── */
.adm-filter-bar__fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.adm-filter-bar__legend {
    width: 100%;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0;
    margin-bottom: 6px;
    display: block;
}

.adm-filter-bar__check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.adm-filter-bar__check-label:hover { color: var(--text-primary); }

.adm-filter-bar__check-label input[type="checkbox"] {
    accent-color: var(--color-teal, #00B4A2);
    cursor: pointer;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.adm-filter-bar__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Same root-cause fix as .adm-filter-cell above — .adm-filter-bar__group is also a
   flex-COLUMN wrapper, so components.css's ".adm-filter-bar .adm-input { flex: 1 1 200px }"
   (written for the old flex-ROW .adm-filter-bar layout) misreads flex-basis as a height
   basis and stretches the field. Used by StuckItemsPage.js's status/age filters. */
.adm-filter-bar__group > .adm-input,
.adm-filter-bar__group > .adm-select,
.adm-filter-bar__group > select,
.adm-filter-bar__group > input {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.adm-filter-bar__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   AEM — Audit Engagements page (AuditEngagementsPage.js, #/audit/engagements)

   Same root-cause bug as `.adm-filter-bar__group` immediately above, but a
   DIFFERENT, hyphenated class name (`.adm-filter-bar-group`, single dash,
   no BEM double-underscore) used by a different page.
   AuditEngagementsPage._renderShell() wraps its status / scope-start-from /
   scope-start-to / per-page filters in `<div class="adm-filter-bar-group">`
   (~lines 104-131) inside an outer `.adm-filter-bar` (already flex-row via
   components.css's own unscoped rule, ~line 7629) — only the inner group's
   label+control stacking is missing. Do NOT merge this rule block with
   `.adm-filter-bar__group` above — they are two distinct classes used by
   two distinct pages (StuckItemsPage.js's own BEM convention vs this page's
   admin.css-borrowed hyphenated convention); collapsing them into one
   selector would be a coincidence, not a shared contract.

   This page's filter controls use only `.adm-select-sm` (no bare
   `.adm-input`/`.adm-select` class) — already self-sufficiently styled by
   tenant-shell.css (padding/background/border, no `flex` property set), so
   the ballooning-height bug that affects `.adm-input`/`.adm-select`
   elsewhere (see rpt-landing-page.css/rpt-detail-page.css/
   glpd-dashboard.css) does NOT apply here; only the flex-column stacking +
   label re-assertion are needed. `.adm-select-sm` already gets its own
   min-height:44px mobile touch-target fix globally (tenant-shell.css's
   MR-212 rule), so no page-local mobile override is needed either.

   Verified (not assumed): the 5th (actions) group already carries an
   inline `style="justify-content:flex-end;flex-direction:row;gap:8px;
   align-self:flex-end"` — inline styles always win over this external
   class-selector rule (no !important on either side), so the Reset/Apply
   buttons correctly stay side-by-side once the flex-column default below
   is added; no `--actions` modifier carve-out needed here (unlike
   rpt-detail-page.css's version of this same fix, whose actions group
   relies on a dedicated `--actions` class instead of an inline override).

   Scoped to `.aem-page`, the wrapper class this page's root element
   carries, so it cannot collide with any other page's use of the same
   admin.css-only class name. `.aem-page` is not used anywhere else in this
   codebase (grep-confirmed).
   ───────────────────────────────────────────────────────────────────────── */

.aem-page .adm-filter-bar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Re-assert the intended small-caps filter-label look at higher specificity
   than components.css's unscoped ".adm-filter-bar .adm-filter-label" (which
   was written for an inline checkbox-label use case and otherwise makes the
   label run straight into the control instead of stacking above it). */
.aem-page .adm-filter-bar .adm-filter-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
}

/* ── SPR — Badge modifiers missing from this sheet ─────────── */
.adm-badge--warning { background: rgba(196,154,60,0.15);  color: var(--color-amber, #C49A3C); border: 1px solid rgba(196,154,60,0.3); }
.adm-badge--success { background: rgba(16,185,129,0.14);  color: #10b981; }
.adm-badge--neutral { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--surface-border); }
.adm-badge--danger  { background: rgba(229,57,53,0.14);   color: var(--color-red, #e53935); border: 1px solid rgba(229,57,53,0.3); }

@media (max-width: 768px) {
    .spr-summary-strip { gap: 8px; }
    .spr-summary-card  { padding: 10px 16px; min-width: 90px; }
    .spr-summary-card__count { font-size: 1.4rem; }
}

/* ============================================================
   PLIB-FE-3-FIX T1 — Policy Library Admin + Analytics CSS port
   PolicyLibraryAdminPage.js / PolicyAnalyticsPage.js / PolicyLibraryReviewModal.js
   relocated here from admin.html (§27 of prd-039-plib-policy-library-architecture.md).
   All --adm-* custom properties referenced below (--adm-green, --adm-amber,
   --adm-red[-glow], --adm-teal[-glow], --adm-text-*, --adm-border[-mid],
   --adm-bg-card, --adm-bg-elevated, --adm-radius-sm, --adm-transition) are
   already defined for both themes in tenant-shell.css — no new tokens needed.
   Selector bodies below are ported verbatim from admin.css unless noted.
   ============================================================ */

/* ── Small adm-* gaps not already covered by tenant-shell.css ───────────── */
.adm-card-body { padding: 0; }

/* BEM double-dash alert modifier (admin.css convention) — tenant-shell.css
   only ships the single-dash .adm-alert-error; both relocated pages use the
   double-dash form. */
.adm-alert--error { background: var(--adm-red-glow); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; }
[data-theme="light"] .adm-alert--error { background: rgba(239,68,68,0.08); color: #991b1b; }

/* BEM double-dash danger button — documented in PolicyLibraryAdminPage.js's
   own header comment; not currently exercised by markup, ported for
   selector-contract completeness (mirrors tenant-shell.css's .adm-btn-danger). */
.adm-btn--danger { background: var(--adm-red-glow); color: var(--adm-red); border: 1px solid rgba(239,68,68,0.3); }
.adm-btn--danger:hover:not(:disabled) { background: rgba(239,68,68,0.2); }

/* ── PLIB-FE-3: Gate 2 Review Checklist (tri-state) — PolicyLibraryReviewModal.js ── */
.plib-cert-list {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.plib-cert-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--adm-radius-sm);
    border: 1px solid var(--adm-border-mid);
    background: var(--adm-bg-elevated);
    transition: border-color var(--adm-transition);
}
.plib-cert-item--touched-true  { border-color: var(--adm-green); background: var(--adm-green-glow); }
.plib-cert-item--touched-false { border-color: var(--adm-red);   background: var(--adm-red-glow); }
.plib-cert-controls {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 1px;
}
.plib-cert-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--adm-border-mid);
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--adm-transition);
    color: var(--adm-text-muted);
}
.plib-cert-btn:hover { border-color: var(--adm-teal); color: var(--adm-text-primary); }
.plib-cert-btn--yes.active { background: var(--adm-green); border-color: var(--adm-green); color: #fff; }
.plib-cert-btn--no.active  { background: var(--adm-red);   border-color: var(--adm-red);   color: #fff; }
.plib-cert-label {
    flex: 1;
    font-size: 13px;
    color: var(--adm-text-secondary);
    line-height: 1.4;
}
.plib-review-inline-error {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--adm-red-glow);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: var(--adm-radius-sm);
    color: var(--adm-red);
    font-size: 13px;
    line-height: 1.5;
}
[data-theme="light"] .plib-cert-item { background: #F9FAFB; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .plib-cert-item--touched-true  { background: rgba(16,185,129,0.07); border-color: #10b981; }
[data-theme="light"] .plib-cert-item--touched-false { background: rgba(239,68,68,0.07);  border-color: #ef4444; }
[data-theme="light"] .plib-review-inline-error { background: rgba(239,68,68,0.08); color: #991b1b; border-color: rgba(239,68,68,0.25); }

/* ── PLIB-FE-1-FIX / PLIB-FE-2-FIX (2026-08-30): CSS parity gap — same bug
   class as MR-138 (see components.css .adm-toggle-row comment). These
   selectors were defined ONLY in admin.css (admin portal), which index.html
   (tenant shell) never loads. Mirrored here, following the same auditor.css
   destination already established for .adm-btn--*/.adm-alert--error/
   .plib-cert-*/.plib-submit-success above, so RepositoryPage.js's
   eligibility toggle and PolicyLibrarySharingModal.js's date grid, tag
   pickers and approval-history timeline render correctly in the tenant
   portal instead of falling back to unstyled browser defaults. ── */

/* Eligibility toggle row — RepositoryPage.js document rows */
.plib-elig-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.plib-elig-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1.5px solid var(--adm-border-mid);
    border-radius: 3px;
    background: var(--adm-bg-elevated);
    accent-color: var(--adm-teal);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--adm-transition), background var(--adm-transition);
}
.plib-elig-row input[type="checkbox"]:checked {
    background: var(--adm-teal);
    border-color: var(--adm-teal);
}
.plib-elig-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset-inline-start: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid #0a0e1a;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.plib-elig-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--adm-teal);
    outline-offset: 2px;
}
.plib-elig-row label {
    font-size: 11px;
    color: var(--adm-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.plib-elig-error {
    font-size: 10px;
    color: var(--adm-red);
    margin-top: 2px;
}

/* Date grid — PolicyLibrarySharingModal.js effective/expiry/deadline fields */
.plib-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* MultiSelectTagPicker.js — shared multi-select tag-picker primitive (PDR-0044 D1).
   Used by PolicyLibrarySharingModal.js (groups / departments / users, shown when
   scope != ALL_USERS); a candidate future home for LpAssignmentScopePanel's
   Specific-Users picker (not migrated in this PDR — see architecture §30.0). */
.mstp-root { position: relative; }
.mstp-tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 36px;
    padding: 4px 8px;
    background: var(--adm-bg-elevated);
    border: 1px solid var(--adm-border-mid);
    border-radius: var(--adm-radius-sm);
    cursor: text;
}
.mstp-tag-picker:focus-within {
    border-color: var(--adm-teal);
    box-shadow: 0 0 0 2px var(--adm-teal-glow);
}
.mstp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--adm-teal-glow);
    color: var(--adm-teal);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.mstp-tag__remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    opacity: 0.7;
}
.mstp-tag__remove:hover { opacity: 1; }
.mstp-tag-picker-input {
    flex: 1;
    min-width: 80px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--adm-text-primary);
    padding: 2px 0;
}
/* Fixed-position dropdown — escapes any scrollable ancestor's overflow
   clipping (LpAssignmentScopePanel precedent; closes PDR-0044 §1.1 gap 2). */
.mstp-tag-picker-dropdown-fixed {
    position: fixed;
    z-index: 9999;
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border-mid);
    border-radius: var(--adm-radius-sm);
    box-shadow: var(--adm-shadow);
    max-height: 200px;
    overflow-y: auto;
}
.mstp-tag-picker-option {
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--adm-text-primary);
}
/* Keyboard-highlighted option gets the same visual treatment as
   :hover/[aria-selected] (closes PDR-0044 §1.1 gap 1 — no keyboard nav). */
.mstp-tag-picker-option:hover,
.mstp-tag-picker-option[aria-selected="true"],
.mstp-tag-picker-option--active {
    background: var(--adm-bg-elevated);
    color: var(--adm-teal);
}
/* Non-interactive "Showing N of M" footer row (closes gap 3 — silent 20-item cap). */
.mstp-tag-picker-count-hint {
    padding: 6px 12px;
    font-size: 11px;
    color: var(--adm-text-secondary);
    border-top: 1px solid var(--adm-border-mid);
}
[data-theme="light"] .mstp-tag-picker { background: #F9FAFB; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .mstp-tag-picker:focus-within { border-color: #0D9488; }
[data-theme="light"] .mstp-tag { background: rgba(13,148,136,0.10); color: #0D9488; }
[data-theme="light"] .mstp-tag-picker-input { color: #111827; }
[data-theme="light"] .mstp-tag-picker-dropdown-fixed { background: #FFFFFF; border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .mstp-tag-picker-option { color: #111827; }
[data-theme="light"] .mstp-tag-picker-option:hover { background: #F3F4F6; }

/* Approval History timeline — PolicyLibrarySharingModal.js (policy_library:audit) */
.plib-history-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--adm-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0 4px;
    width: 100%;
    text-align: start;
    border-top: 1px solid var(--adm-border);
    margin-top: 16px;
    transition: color var(--adm-transition);
}
.plib-history-toggle:hover { color: var(--adm-text-primary); }
.plib-history-toggle .plib-history-arrow {
    display: inline-block;
    transition: transform 0.18s ease;
    font-style: normal;
}
.plib-history-toggle[aria-expanded="true"] .plib-history-arrow { transform: rotate(90deg); }
.plib-history-body {
    margin-top: 8px;
    padding-inline-start: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.plib-history-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0 10px;
    position: relative;
}
.plib-history-item::before {
    content: '';
    display: block;
    width: 2px;
    background: var(--adm-border-mid);
    position: absolute;
    inset-inline-start: 9px;
    top: 20px;
    bottom: -10px;
}
.plib-history-item:last-child::before { display: none; }
.plib-history-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--adm-bg-elevated);
    border: 2px solid var(--adm-border-mid);
    flex-shrink: 0;
    margin-top: 2px;
}
.plib-history-dot--pass     { border-color: var(--adm-green); background: var(--adm-green-glow); }
.plib-history-dot--block    { border-color: var(--adm-red);   background: var(--adm-red-glow); }
.plib-history-dot--timeout  { border-color: var(--adm-amber); background: var(--adm-amber-glow); }
.plib-history-dot--override { border-color: var(--adm-purple); background: var(--adm-purple-glow); }
.plib-history-dot--approve  { border-color: var(--adm-green); background: var(--adm-green-glow); }
.plib-history-dot--reject   { border-color: var(--adm-red);   background: var(--adm-red-glow); }
.plib-history-dot--pending  { border-color: var(--adm-text-muted); background: transparent; }
.plib-history-content { min-width: 0; }
.plib-history-gate    { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--adm-text-muted); margin-bottom: 2px; }
.plib-history-status-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plib-history-ts    { font-size: 11px; color: var(--adm-text-muted); }
.plib-history-meta  { font-size: 12px; color: var(--adm-text-secondary); margin-top: 4px; font-style: italic; }
.plib-history-override-note {
    font-size: 12px;
    color: var(--adm-amber);
    margin-top: 4px;
    background: var(--adm-amber-glow);
    border-inline-start: 2px solid var(--adm-amber);
    padding: 4px 8px;
    border-radius: 0 var(--adm-radius-sm) var(--adm-radius-sm) 0;
}
[data-theme="light"] .plib-history-override-note { background: rgba(245,158,11,0.08); color: #92400e; }

/* Gate status chip micro-variants — used inside .plib-history-item rows */
.plib-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.plib-chip--pass     { background: var(--adm-green-glow);  color: var(--adm-green); }
.plib-chip--block    { background: var(--adm-red-glow);    color: var(--adm-red); }
.plib-chip--timeout  { background: var(--adm-amber-glow);  color: var(--adm-amber); }
.plib-chip--override { background: var(--adm-purple-glow); color: var(--adm-purple); }
.plib-chip--approve  { background: var(--adm-green-glow);  color: var(--adm-green); }
.plib-chip--reject   { background: var(--adm-red-glow);    color: var(--adm-red); }
.plib-chip--pending  { background: var(--adm-border);      color: var(--adm-text-muted); }

/* ── PLIB-FE-3: Admin Page — Compliance Gap tab — PolicyLibraryAdminPage.js ── */
.plib-submit-success {
    padding: 10px 14px;
    background: var(--adm-green-glow);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: var(--adm-radius-sm);
    color: #6ee7b7;
    font-size: 13px;
    margin-top: 12px;
}
[data-theme="light"] .plib-submit-success { background: rgba(16,185,129,0.08); color: #065f46; }

.plib-gap-stats { display: flex; flex-direction: column; gap: 10px; }
.plib-gap-stat  { display: flex; flex-direction: column; gap: 2px; }
.plib-gap-stat-label { font-size: 11px; color: var(--adm-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.plib-gap-stat-value { font-size: 20px; font-weight: 700; color: var(--adm-text-primary); }
.plib-gap-stat-value--warn { color: var(--adm-amber); }
.plib-gap-stat-value--overdue { color: var(--adm-red); }

.plib-admin-section { margin-top: 24px; }
.plib-admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.plib-admin-section-title { font-size: 15px; font-weight: 700; color: var(--adm-text-primary); }
.plib-admin-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.plib-bundle-status--draft     { background: var(--adm-border);       color: var(--adm-text-muted); }
.plib-bundle-status--published { background: var(--adm-green-glow);   color: var(--adm-green); }
.plib-bundle-status--archived  { background: var(--adm-red-glow);     color: var(--adm-red); }

/* ── PLIB-KPI-FE-1: Policy Analytics Page — PolicyAnalyticsPage.js ───────── */
.plib-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.plib-kpi-card {
    /* admin.css itself references the undefined --adm-card-bg (typo for
       --adm-bg-card) here — corrected on port rather than propagated. */
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.plib-kpi-card--primary {
    border-color: var(--adm-teal, #0D9488);
    background: var(--adm-teal-glow, rgba(13,148,136,.07));
}
.plib-kpi-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--adm-text-primary);
    line-height: 1.1;
    word-break: break-all;
}
.plib-kpi-card--primary .plib-kpi-card__value {
    color: var(--adm-teal, #0D9488);
    font-size: 34px;
}
.plib-kpi-card__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--adm-text-muted);
}
.plib-kpi-card__sub {
    font-size: 11px;
    color: var(--adm-text-muted);
    margin-top: 2px;
}

.plib-cov-row--red   { background: var(--adm-red-glow,   rgba(239,68,68,.07)); }
.plib-cov-row--amber { background: var(--adm-amber-glow, rgba(245,158,11,.07)); }
.plib-cov-row--green { background: var(--adm-green-glow, rgba(5,150,105,.07)); }

.plib-days-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.plib-breakdown-toggle {
    display: flex;
    gap: 4px;
    align-items: center;
}

[data-theme="light"] .plib-kpi-card {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .plib-kpi-card--primary {
    background: rgba(13,148,136,0.05);
    border-color: rgba(13,148,136,0.30);
}
[data-theme="light"] .plib-cov-row--red   { background: rgba(239,68,68,0.07);   }
[data-theme="light"] .plib-cov-row--amber { background: rgba(245,158,11,0.07);  }
[data-theme="light"] .plib-cov-row--green { background: rgba(16,185,129,0.07);  }

/* ── PLIB-ANALYTICS-LANDING-FE-1: Policy Analytics landing view (PDR-0050 D1) ── */

.plib-portfolio-summary {
    max-width: 480px;
}

.plib-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.plib-portfolio-card {
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.plib-portfolio-card--red {
    border-color: var(--adm-red, #ef4444);
    background: var(--adm-red-glow, rgba(239,68,68,.07));
}
.plib-portfolio-card--amber {
    border-color: var(--adm-amber, #d97706);
    background: var(--adm-amber-glow, rgba(245,158,11,.07));
}
.plib-portfolio-card--green {
    border-color: var(--adm-green, #059669);
    background: var(--adm-green-glow, rgba(5,150,105,.07));
}
.plib-portfolio-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--adm-text-primary);
}
.plib-portfolio-card__ack-rate {
    font-size: 20px;
    font-weight: 700;
    color: var(--adm-text-primary);
}
.plib-portfolio-card__overdue-rate {
    font-size: 12px;
    color: var(--adm-text-muted);
}
.plib-portfolio-card__counts {
    font-size: 12px;
    color: var(--adm-text-muted);
}
.plib-portfolio-card__views {
    font-size: 11px;
    color: var(--adm-text-muted);
    margin-top: 2px;
}

.plib-portfolio-toggle {
    display: flex;
    gap: 4px;
    align-items: center;
}

.plib-portfolio-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="light"] .plib-portfolio-card {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .plib-portfolio-card--red   { background: rgba(239,68,68,0.07);  }
[data-theme="light"] .plib-portfolio-card--amber { background: rgba(245,158,11,0.07); }
[data-theme="light"] .plib-portfolio-card--green { background: rgba(16,185,129,0.07); }