:root {
    --bg-light: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --accent: #1e40af;
    /* Navy blue for BOD look */
    --accent-glow: rgba(30, 64, 175, 0.1);

    --success: #059669;
    --amber: #d97706;
    --amber-glow: rgba(217, 119, 6, 0.1);
    --danger: #dc2626;
    --danger-bg: #fef2f2;

    --font-main: 'Outfit', sans-serif;
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --transition: all 0.2s ease-in-out;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-family: var(--font-main);
    min-height: 100vh;
    padding: 0 2rem 2rem;
    overflow-x: hidden;
    line-height: 1.5;
}

/* ===== Side Nav (active when body.has-side-nav) ===== */
body.has-side-nav {
    padding: 0 !important;
    margin: 0;
}

.side-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 14%;
    min-width: 220px;
    max-width: 280px;
    height: 100vh;
    /* Light palette — two shades deeper than the dashboard canvas so the
       rail reads as its own panel without going dark. Border-right kept
       a notch darker than the bg for a clean edge. The brand-logo,
       chatbot FAB, and Generate Report button (all `var(--accent)`)
       remain the dashboard's pop of color. */
    background: #e2e8f0;
    color: #475569;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
    border-right: 1px solid #94a3b8;
    z-index: 100;
    transition: width 0.22s ease, min-width 0.22s ease;
}

/* Collapsed state — icons only, narrow rail. Triggered by .is-collapsed
   on the .side-nav element; layout-wide adjustments hang off body.nav-collapsed
   so the main-content margin stays in sync. */
body.nav-collapsed .side-nav {
    width: 62px;
    min-width: 62px;
    max-width: 62px;
}

body.nav-collapsed .main-content {
    margin-left: 62px;
}

body.nav-collapsed .side-nav .brand-text,
body.nav-collapsed .side-nav-title,
body.nav-collapsed .side-nav-label,
body.nav-collapsed .side-nav-user,
body.nav-collapsed .side-nav-logout {
    display: none;
}

body.nav-collapsed .side-nav-brand {
    /* Stack: ID logo on top, hamburger below — won't fit side-by-side in a
       62px rail, but stacking keeps both reachable. */
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0 1rem;
}

body.nav-collapsed .side-nav-toggle {
    margin-left: 0;
}

body.nav-collapsed .side-nav-link {
    justify-content: center;
    padding: 0.7rem 0;
}

body.nav-collapsed .side-nav-footer {
    padding: 0.5rem;
    text-align: center;
}

/* Hamburger toggle — lives inside the brand row, next to the ID logo, so
   it doesn't intrude into the dashboard canvas. Slate icon on the light
   nav, brand-blue on hover. */
.side-nav-toggle {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.side-nav-toggle:hover {
    background: #cbd5e1;
    color: var(--accent);
}

.side-nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.side-nav-toggle-icon {
    display: inline-flex;
}

.side-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid #cbd5e1;
}

.side-nav .brand-logo {
    background: var(--accent);
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
}

.side-nav .brand-text {
    color: #0f172a;
    font-weight: 600;
    font-size: 0.95rem;
}

.side-nav-title {
    padding: 1rem 1.25rem 0.75rem;
}

.side-nav-title h1 {
    font-size: 0.95rem;
    line-height: 1.3;
    color: #0f172a;
    font-weight: 600;
    margin: 0;
}

.side-nav-menu {
    flex: 1;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.5rem;
}

/* ---- AD-source stub page ---- */
.source-stub-card {
    text-align: center;
    padding: 2.5rem 2rem;
    max-width: 640px;
    margin: 2rem auto;
}
.source-stub-card h2 { margin-top: 0.75rem; }
.source-stub-icon { color: var(--amber); }
.source-stub-body {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 1rem 0;
}
.source-stub-body a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.source-stub-body a:hover { text-decoration: underline; }

/* Section headers — IGA / AD / Admin. Small uppercase labels above their
   link groups. Hidden in the collapsed rail (icons-only mode). */
.side-nav-group-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0.85rem 0.25rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}
.side-nav-group-label:first-child { padding-top: 0.25rem; }

.side-nav-group-tag {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 3px;
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
}

body.nav-collapsed .side-nav-group-label { display: none; }

/* Sub-links — slightly indented so the group hierarchy reads at a glance. */
.side-nav-sub { padding-left: 1rem; }
body.nav-collapsed .side-nav-sub { padding-left: 0; }

.side-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    color: #475569;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    border-left: 3px solid transparent;       /* reserves space so active-state shift is zero */
    padding-left: calc(0.75rem - 3px);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.side-nav-link:hover {
    background: #cbd5e1;
    color: #0f172a;
}

.side-nav-link.active {
    background: #eff6ff;
    color: var(--accent);
    font-weight: 600;
    border-left-color: var(--accent);
}

.side-nav-icon {
    width: 18px;
    text-align: center;
    font-size: 1rem;
}

.side-nav-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #cbd5e1;
    /* Lift the admin / user / sign-out block off the very bottom edge so
       there's room for the copyright strip below. */
    margin-bottom: 0.5rem;
}

.side-nav-copyright {
    padding: 0.5rem 1.25rem 0.85rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

/* Collapsed rail: shrink the copyright into a tiny mark so it still hints
   at the credit without overflowing the 62px width. */
body.nav-collapsed .side-nav-copyright {
    padding: 0.5rem 0 0.6rem;
    font-size: 0.6rem;
}

.side-nav-user {
    margin-bottom: 0.6rem;
}

.side-nav-username {
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 600;
}

.side-nav-role {
    color: #64748b;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
}

.side-nav-logout {
    width: 100%;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 0.45rem;
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

.side-nav-logout:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.main-content {
    margin-left: 14%;
    padding: 1.5rem 2rem 2rem;
    min-height: 100vh;
}

@media (max-width: 1100px) {
    .side-nav { min-width: 200px; }
    .main-content { margin-left: 220px; }
}

/* ===== Auth page (login) ===== */
body.auth-page {
    background: linear-gradient(135deg, #1e293b 0%, #1e40af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

.auth-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.3);
    padding: 2.5rem;
    width: 100%;
    max-width: 380px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.auth-title {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-field { display: block; }

.auth-label {
    display: block;
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.auth-field input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 0.95rem;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.auth-error {
    background: #fef2f2;
    color: #991b1b;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--danger);
}

.auth-submit {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.7rem;
    font-size: 0.95rem;
}

/* ===== Admin page ===== */
.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.page-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.admin-card {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.admin-card h2 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--text-main);
}

.admin-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-field {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.admin-field span {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.admin-field input,
.admin-field select {
    padding: 0.55rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 0.9rem;
}

.admin-table { width: 100%; }

.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}

/* ===== Admin Console (admin landing page) ===== */
.admin-home-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-home-greet {
    color: var(--text-muted);
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-home-greet strong { color: var(--text-main); }

.admin-tile-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.admin-tile {
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 0.95rem 1.05rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.admin-tile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.admin-tile-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.admin-tile-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.45rem;
    line-height: 1.35;
}

.admin-tile-meta a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.admin-tile-meta a:hover { text-decoration: underline; }

.admin-card-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.admin-card-desc code {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--accent);
}

.admin-action-row {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.admin-action-row-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: rgba(247, 249, 252, 0.92);
    backdrop-filter: blur(6px);
    padding: 0.9rem 0;
    margin-top: 1.2rem;
    border-top: 1px solid #e2e8f0;
    justify-content: flex-end;
}

/* ---------- Widget Recipients & Templates — master/detail ---------- */
.widget-emails-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.widget-emails-nav {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md, 10px);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 1rem;
}

.widget-emails-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    background: transparent;
    text-align: left;
    border-radius: var(--radius-sm, 6px);
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text-main, #1f2937);
    cursor: pointer;
}

.widget-emails-nav-item:hover {
    background: #f8fafc;
}

.widget-emails-nav-item.is-active {
    background: var(--primary, #4f46e5);
    color: #ffffff;
}

.widget-emails-nav-item.is-active:hover {
    background: var(--primary, #4338ca);
}

.widget-emails-nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-emails-nav-dirty {
    color: #f59e0b;
    font-size: 0.85rem;
    line-height: 1;
}

.widget-emails-nav-item.is-active .widget-emails-nav-dirty {
    color: #fde68a;
}

.widget-emails-pane {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md, 10px);
    padding: 1.25rem 1.4rem;
}

.widget-emails-form {
    margin: 0;
    display: block;
}

/* `.admin-form` sets display:flex which would override the [hidden] attribute
   on inactive panes — force them invisible. */
.widget-emails-form[hidden] {
    display: none !important;
}

.widget-emails-pane-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #eef2f7;
}

.widget-emails-pane-head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.widget-emails-pane-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #eef2f7;
}

.widget-emails-pane-foot-row {
    align-self: stretch;
}

.widget-emails-pane-foot-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.widget-email-key {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: #f1f5f9;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
}

@media (max-width: 720px) {
    .widget-emails-layout {
        grid-template-columns: 1fr;
    }
    .widget-emails-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-x: auto;
    }
    .widget-emails-nav-item {
        flex: 0 0 auto;
    }
}

.admin-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.1rem;
    margin-bottom: 1rem;
}

@media (max-width: 720px) {
    .admin-field-grid {
        grid-template-columns: 1fr;
    }
}

.widget-email-body {
    padding: 0.65rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.83rem;
    line-height: 1.45;
    resize: vertical;
    min-height: 320px;
    background: #fbfcfe;
    width: 100%;
    box-sizing: border-box;
}

.widget-email-body:focus {
    outline: none;
    border-color: var(--primary, #4f46e5);
    background: #ffffff;
}

.widget-email-card-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid #eef2f7;
}

.widget-email-save {
    margin-left: auto;
}

.widget-email-form {
    margin-bottom: 0;
}

.widget-email-form + .widget-email-form {
    margin-top: 0;
}

.widget-email-body-hint {
    font-size: 0.78rem;
    color: var(--accent, #b45309);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
}

/* Ghost button (low-profile alt to .btn-primary / .btn-secondary). */
.btn-ghost {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: var(--text-main, #1f2937);
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.btn-ghost:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* ---------- Body-template editor dialog ---------- */
.body-editor-dialog {
    width: min(820px, 92vw);
    max-height: 90vh;
    padding: 1.4rem 1.5rem;
    border: none;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
    background: #ffffff;
}

.body-editor-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.body-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.body-editor-head h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.body-editor-help {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    line-height: 1.45;
}

.body-editor-help code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.76rem;
}

.body-editor-close {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}

.body-editor-close:hover {
    background: #f1f5f9;
    color: var(--text-main, #1f2937);
}

.body-editor-actions {
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.body-editor-actions-right {
    display: flex;
    gap: 0.5rem;
}

.admin-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.88rem;
    padding: 0.5rem 0;
}

.admin-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

.admin-config-block h3 {
    font-size: 0.95rem;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.admin-config-help {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0 0 0.65rem;
    line-height: 1.5;
}

.admin-config-help code {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.76rem;
    color: var(--accent);
}

.admin-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-chip {
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(30, 64, 175, 0.18);
    font-family: 'Menlo', 'Consolas', monospace;
}

.admin-quick-links { padding-bottom: 1.25rem; }

.admin-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
}

.admin-link-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-main);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.admin-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    border-color: var(--accent);
}

.admin-link-icon {
    font-size: 1.4rem;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--accent-glow);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-link-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 2px;
}

.admin-link-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.etl-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
}

.etl-status-row strong { color: var(--text-muted); font-weight: 600; }

.etl-status-pill {
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}

.etl-status-ok      { background: #ecfdf5; color: var(--success); }
.etl-status-running { background: var(--accent-glow); color: var(--accent); }
.etl-status-failed  { background: #fef2f2; color: var(--danger); }

.etl-status-err { color: var(--danger); font-style: italic; }

.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

.flash {
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.flash-ok {
    background: #ecfdf5;
    color: #065f46;
    border-left: 3px solid var(--success);
}

.flash-err {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid var(--danger);
}

/* flash-warn — used by the Phase 2 (AI Recommendation Actions) failure
   banner on /settings/. Amber tint so it reads as "something needs
   attention" without the catastrophic feel of flash-err. Carries a
   dismiss button and an optional <details> error drawer. */
.flash-warn {
    background: #fffbeb;
    color: #92400e;
    border-left: 3px solid var(--amber);
    position: relative;
    padding-right: 2.5rem;     /* room for the × button */
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.flash-warn strong {
    color: #78350f;
    font-weight: 700;
}
.flash-warn .flash-detail {
    margin-top: 0.25rem;
    font-size: 0.82rem;
}
.flash-warn .flash-detail summary {
    cursor: pointer;
    color: #b45309;
    font-weight: 600;
    user-select: none;
}
.flash-warn .flash-detail code {
    display: block;
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: 4px;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.78rem;
    word-break: break-word;
    white-space: pre-wrap;
}
.flash-dismiss {
    position: absolute;
    top: 0.45rem;
    right: 0.7rem;
    background: transparent;
    border: none;
    color: #92400e;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    transition: background 120ms ease;
}
.flash-dismiss:hover {
    background: rgba(217, 119, 6, 0.12);
}

/* ===== Top Navbar ===== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.75rem 2rem;
    margin: 0 -2rem 1.5rem;
    background: var(--card-bg);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.brand-text {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    letter-spacing: 0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    min-height: 24px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 24px;
    flex-shrink: 0;
}

/* Background aesthetic overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDUiLz4KPC9zdmc+') repeat;
    pointer-events: none;
    z-index: -1;
    opacity: 0.15;
}

.dashboard-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Widget Control Toolbar */
/* Widget Control Toolbar */
.widget-toolbar {
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.dashboard-header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.btn-report,
.btn-config,
#btn-copy-report {
    /* Shared brand-blue — matches the embedded AI widget's data-theme-color
       so the three top-level AI actions read as one accent across the app. */
    background: #1e40af !important;
    color: #fff !important;
    border-color: #1e3a8a !important;
}

.btn-report:hover,
.btn-config:hover,
#btn-copy-report:hover {
    background: #1e3a8a !important;
    color: #fff !important;
    border-color: #1e3a8a !important;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3) !important;
}

.modal-medium {
    max-width: 800px;
}

/* Orphan widget breakdown — sits under the headline number (the 558 grand
   total) and splits it into "X actionable · Y service · Z disabled". The
   actionable count is the C-level remediation target and is visually
   weighted so the eye lands on it second after the headline. */
.orphan-breakdown {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
}
.orphan-breakdown-actionable {
    color: var(--accent);
    font-weight: 600;
}
.orphan-breakdown-actionable strong {
    font-weight: 700;
    font-size: 0.92rem;
}
.orphan-breakdown-muted {
    color: var(--text-muted);
}
.orphan-breakdown-sep {
    color: #cbd5e1;
}
.orphan-breakdown-loading {
    font-style: italic;
    color: var(--text-muted);
}

/* Scope note that prefixes drill-down modals when the chart/table below
   only covers a subset of the headline population (e.g. orphan modal showing
   the 480 actionable cut of the 558 headline). Visually a soft callout —
   not an alert — so it reads as guidance, not a warning. */
.modal-scope-note {
    background: rgba(30, 64, 175, 0.06);
    border: 1px solid rgba(30, 64, 175, 0.18);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
}
.modal-scope-note-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4pt;
    color: var(--accent);
    margin-bottom: 0.3rem;
}
.modal-scope-note-body {
    font-size: 0.88rem;
    color: var(--text-main);
    line-height: 1.45;
}
.modal-scope-note-body strong {
    color: var(--accent);
}

.header-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.quick-actions {
    display: flex;
    gap: 0.5rem;
}

.btn {
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
    letter-spacing: 0.02em;
}

/* Unified button — single filled style across the app.
   .btn-outline is kept as an alias of .btn-primary so existing markup
   doesn't need to change; both render identically. */
.btn-primary,
.btn-outline {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-primary:hover,
.btn-outline:hover {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(30, 64, 175, 0.2);
}

.btn-primary:disabled,
.btn-outline:disabled {
    background: #94a3b8;
    border-color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

.modal-small {
    max-width: 500px;
}

.modal-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-weight: 400;
}

.config-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.config-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--bg-light);
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: var(--transition);
}

.config-item:hover {
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.config-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.config-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
}

.config-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.config-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.config-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:checked+.toggle-slider {
    background-color: var(--accent);
}

input:checked+.toggle-slider:before {
    transform: translateX(20px);
}

.modal-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.modal-footer-end {
    display: flex;
    justify-content: flex-end;
}

/* Report Modal Specifics */
.report-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    gap: 1.5rem;
}

.report-loading p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ---------- AI report setup (period / audience / length) ---------- */
.report-setup {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-setup-help {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.report-setup-group {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.65rem 0.9rem 0.85rem;
    margin: 0;
}

.report-setup-group legend {
    padding: 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-setup-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.report-setup-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.report-setup-options input[type="radio"] {
    accent-color: var(--accent, #1e3a8a);
}

.report-setup-options label.is-disabled {
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.6;
}

.report-setup-options label.is-disabled input {
    cursor: not-allowed;
}

.report-setup-help-sub {
    margin: 0.45rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ---------- AI report content (modal preview, mirrors PDF) ---------- */
.report-visuals { margin: 0 0 16px 0; }

.report-visuals .ai-disclaimer {
    background: #fff7ed;
    border-left: 3px solid #d97706;
    color: #92400e;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.report-visuals .ai-disclaimer strong {
    color: #7c2d12;
}

.report-body { color: #0f172a; line-height: 1.55; font-size: 14px; }
.report-body h1 { font-size: 20px; color: #0f172a; margin: 18px 0 8px; font-weight: 700; }
.report-body h2 {
    font-size: 16px;
    color: #1e3a8a;
    margin: 22px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
}
.report-body h3 {
    font-size: 15px;
    color: #1e3a8a;
    margin: 18px 0 6px;
    font-weight: 700;
}
.report-body h4 {
    font-size: 13px;
    color: #334155;
    margin: 14px 0 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.report-body p  { margin: 0 0 10px 0; }
.report-body ul, .report-body ol { margin: 0 0 12px 22px; padding: 0; }
.report-body li { margin-bottom: 4px; }
.report-body strong { color: #0f172a; }
.report-body code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12.5px;
}

.report-visuals .kpi-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
    margin: 0 0 14px 0;
    table-layout: fixed;
}
.report-visuals .kpi-card {
    padding: 12px 14px;
    border-radius: 6px;
    vertical-align: top;
    width: 25%;
}
.report-visuals .kpi-card-label {
    font-size: 10px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.report-visuals .kpi-card-value {
    font-size: 28px;
    font-weight: 700;
    margin-top: 4px;
    line-height: 1;
}
.report-visuals .kpi-card-hint {
    font-size: 10px;
    color: #64748b;
    margin-top: 6px;
}
.report-visuals .kpi-red    { background: #fef2f2; color: #991b1b; border-left: 3px solid #dc2626; }
.report-visuals .kpi-amber  { background: #fffbeb; color: #92400e; border-left: 3px solid #d97706; }
.report-visuals .kpi-green  { background: #ecfdf5; color: #065f46; border-left: 3px solid #059669; }
.report-visuals .kpi-navy   { background: #eff6ff; color: #1e3a8a; border-left: 3px solid #1e40af; }

.report-visuals .chart-block { margin: 8px 0 22px 0; }
.report-visuals .chart-title {
    font-size: 12px;
    color: #1e3a8a;
    font-weight: 700;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.report-visuals .chart-subtitle {
    font-size: 11px;
    color: #64748b;
    margin: -3px 0 8px 0;
}
.report-visuals .chart-image {
    display: block;
    max-width: 100%;
    height: auto;
}
.report-visuals .chart-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: 12px;
    padding: 4px 0;
}

.report-visuals .viz-split {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.report-visuals .viz-split td { vertical-align: top; }
.report-visuals .viz-split-left  { width: 55%; padding-right: 12px; }
.report-visuals .viz-split-right { width: 45%; padding-left: 12px; border-left: 1px solid #e2e8f0; }
.report-visuals .tier-row {
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
}
.report-visuals .tier-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

/* ---------- Email-recipient form inside the report modal footer ---------- */
.report-email-form {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.report-email-form:not(.hidden) {
    display: flex;
}

.report-email-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.report-email-form input[type="email"] {
    flex: 1 1 220px;
    padding: 0.5rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 0.9rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f1f5f9;
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.report-content {
    line-height: 1.7;
    color: var(--text-main);
    padding: 0.5rem;
}

.report-content h1,
.report-content h2,
.report-content h3 {
    color: var(--accent);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.report-content p {
    margin-bottom: 1rem;
}

.report-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.report-content li {
    margin-bottom: 0.5rem;
}

.full-width {
    width: 100%;
}

.dashboard-header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 400;
}

.header-snapshot {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 400;
    margin-top: 0.25rem;
}

.row {
    display: flex;
    gap: 1.5rem;
    width: 100%;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* ===== Widgets Grid ===== */
.widgets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    width: 100%;
}

.widget {
    min-height: 320px;
}

.widget-hidden {
    display: none !important;
}

/* "+N new" delta chip — appears next to the SLA bell when items were added
   since the previous snapshot. Distinct color from the bell (informational,
   not alarm). */
.delta-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 0.55rem;
    margin: 0 0.4rem;
    border-radius: 999px;
    background: var(--accent-glow);
    color: var(--accent);
    border: 1px solid var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    cursor: default;
    white-space: nowrap;
}

.delta-badge.hidden {
    display: none;
}

/* "View details" link injected at the top of every drill-down modal body.
   Navigates to /widget/<id> in the same tab for a full-page exploration. */
.view-details-row {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 12px 0;
}

.view-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.18);
}

.view-details-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.28);
}

.view-details-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.18);
}

.view-details-btn svg {
    transition: transform 0.18s ease;
}

.view-details-btn:hover svg {
    transform: translateX(2px);
}

/* Widget detail page — script.js's openModal() writes into the same #modal
   element here, but we re-style it inline (no backdrop, no overlay) so the
   page reads as a regular dedicated route. */
body.widget-detail-page, body.action-detail-page {
    background: var(--bg-light);
    padding: 0 2rem 2rem;
}

/* Scope ONLY the main drill-down modal (#modal). The other backdrops
   (#configModal, #reportModal) are kept as hidden placeholders so
   script.js's init lookups don't error — they must stay invisible. */
body.widget-detail-page, body.action-detail-page #modal {
    position: static !important;
    background: transparent !important;
    display: block !important;
    padding: 0 !important;
}

body.widget-detail-page, body.action-detail-page #modal.hidden { display: block !important; }

body.widget-detail-page, body.action-detail-page #modal > .modal {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

body.widget-detail-page, body.action-detail-page #modal .modal-header {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

body.widget-detail-page, body.action-detail-page #modal .modal-body {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

body.widget-detail-page, body.action-detail-page #modal .modal-close { display: none !important; }

/* Belt-and-braces: explicitly hide the auxiliary placeholders even if
   something else tries to un-hide them. */
body.widget-detail-page, body.action-detail-page #configModal,
body.widget-detail-page, body.action-detail-page #reportModal,
body.widget-detail-page, body.action-detail-page #chatFab,
body.widget-detail-page, body.action-detail-page #chatPanel { display: none !important; }

body.widget-detail-page, body.action-detail-page .detail-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

body.widget-detail-page, body.action-detail-page .detail-back-link,
.detail-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

body.widget-detail-page, body.action-detail-page .detail-back-link:hover,
.detail-back-link:hover { text-decoration: underline; }

/* ===== View Details page — neater header / overview / actions layout ===== */
body.widget-detail-page, body.action-detail-page .detail-header {
    margin: 0.5rem 0 1.25rem;
}

body.widget-detail-page, body.action-detail-page .detail-header h1 {
    font-size: 1.65rem;
    color: var(--accent);
    margin: 0.4rem 0 0;
    font-weight: 700;
}

body.widget-detail-page, body.action-detail-page .detail-overview {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 1100px) {
    body.widget-detail-page, body.action-detail-page .detail-overview { grid-template-columns: 1fr; }
}

body.widget-detail-page, body.action-detail-page .detail-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    border: 1px solid #e2e8f0;
}

body.widget-detail-page, body.action-detail-page .detail-card-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.6pt;
    color: var(--text-muted);
    margin: 0 0 0.6rem;
    font-weight: 600;
}

body.widget-detail-page, body.action-detail-page .detail-card-body {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-main);
    margin: 0;
}

body.widget-detail-page, body.action-detail-page .detail-data-source {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e2e8f0;
    line-height: 1.4;
}

body.widget-detail-page, body.action-detail-page .detail-card-actions {
    background: linear-gradient(160deg, #f8fafc 0%, var(--card-bg) 100%);
    border-left: 3px solid var(--accent);
}

body.widget-detail-page, body.action-detail-page .detail-action-list {
    margin: 0;
    padding-left: 1.2rem;
}

body.widget-detail-page, body.action-detail-page .detail-action-list li {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

body.widget-detail-page, body.action-detail-page .detail-action-list li::marker {
    color: var(--accent);
    font-weight: 700;
}

body.widget-detail-page, body.action-detail-page .detail-data {
    margin-top: 0.5rem;
}

/* ===== User Roadmap page ===== */
.roadmap-search-card {
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.roadmap-search-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.roadmap-search-row::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 50%;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
}

.roadmap-search-input {
    /* Shrunk from flex:1 so role + division dropdowns can sit next to it. */
    flex: 0 1 320px;
    min-width: 200px;
    padding: 0.7rem 0.9rem 0.7rem 2.4rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.roadmap-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.roadmap-filter-select {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 260px;
    padding: 0.7rem 2rem 0.7rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    background-color: var(--card-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 16px 16px;
    font-family: var(--font-main);
    font-size: 0.92rem;
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.roadmap-filter-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

@media (max-width: 720px) {
    /* Narrow screens: stack the search + dropdowns vertically. */
    .roadmap-search-row { flex-direction: column; align-items: stretch; }
    .roadmap-search-input,
    .roadmap-filter-select { max-width: none; }
    .roadmap-search-row::before { top: 1.55rem; }
}

/* ---- Active-filter chips + result count strip ---- */
.roadmap-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.roadmap-chips[hidden] { display: none; }

.roadmap-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--accent-glow);
    color: var(--accent);
    border: 1px solid rgba(30, 64, 175, 0.25);
    border-radius: 999px;
    padding: 0.25rem 0.55rem 0.25rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
}

.roadmap-chip-label { color: var(--text-muted); font-weight: 400; }

.roadmap-chip-x {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 0.1rem;
    margin-left: 0.15rem;
    border-radius: 50%;
}
.roadmap-chip-x:hover { background: rgba(30, 64, 175, 0.18); }

.roadmap-chip-clear {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78rem;
    text-decoration: underline;
    padding: 0.25rem 0.4rem;
}
.roadmap-chip-clear:hover { color: var(--danger); }

.roadmap-chip-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.roadmap-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 1.25rem;
    right: 1.25rem;
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    z-index: 10;
    max-height: 380px;
    overflow-y: auto;
}

.roadmap-results.hidden { display: none; }

.roadmap-result {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    font-family: var(--font-main);
}

.roadmap-result:hover { background: var(--accent-glow); }

.roadmap-result-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.9rem;
}

.roadmap-result-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.roadmap-result-empty {
    padding: 0.7rem 0.9rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.roadmap-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0;
    gap: 0.8rem;
    color: var(--text-muted);
}

.roadmap-loading.hidden { display: none; }

.roadmap-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.roadmap-empty.hidden { display: none; }

.roadmap-empty svg { opacity: 0.4; margin-bottom: 0.5rem; }

.roadmap-content.hidden { display: none; }

/* ---- Profile card ---- */
.roadmap-profile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.75rem;
    align-items: center;
    background: linear-gradient(180deg, var(--card-bg) 0%, #fbfdff 100%);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

@media (max-width: 900px) {
    .roadmap-profile {
        grid-template-columns: auto 1fr;
        gap: 1rem 1.5rem;
    }
    .profile-stats {
        grid-column: 1 / -1;
        justify-content: space-around;
        border-top: 1px solid #e2e8f0;
        padding-top: 1rem;
    }
}

.profile-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #2563eb 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(30, 64, 175, 0.28);
    border: 3px solid #fff;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.profile-name-row h2 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin: 0;
}

.profile-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.profile-tag-active   { background: #ecfdf5; color: var(--success); }
.profile-tag-inactive { background: #fef2f2; color: var(--danger); }
.profile-tag-warn     { background: #fffbeb; color: var(--amber); }
.profile-tag-info     { background: var(--accent-glow); color: var(--accent); }

.profile-warn { color: var(--amber); font-weight: 600; }

.profile-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem 1.5rem;
    font-size: 0.86rem;
    color: var(--text-main);
}

.profile-meta > span {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.profile-meta strong {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4pt;
    min-width: 4.5rem;
    flex-shrink: 0;
}

.profile-meta code {
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'Menlo', 'Consolas', monospace;
    color: var(--accent);
}

.profile-stats {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-left: 1.5rem;
    border-left: 1px solid #e2e8f0;
}

.profile-stat {
    text-align: center;
    padding: 0.4rem 0.85rem;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    min-width: 78px;
}

.profile-stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.profile-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    color: var(--text-muted);
    margin-top: 6px;
    font-weight: 600;
}

/* ---- Hub-and-spoke graph ---- */
.roadmap-graph-card {
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.roadmap-section-title {
    font-size: 1.05rem;
    color: var(--text-main);
    margin: 0 0 0.2rem;
}

.roadmap-section-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.roadmap-graph {
    position: relative;
    width: 100%;
    min-height: 480px;
    overflow: visible;
    background:
        radial-gradient(circle at center, rgba(30, 64, 175, 0.04) 0%, transparent 60%),
        repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(15, 23, 42, 0.025) 24px, rgba(15, 23, 42, 0.025) 25px),
        repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(15, 23, 42, 0.025) 24px, rgba(15, 23, 42, 0.025) 25px);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.roadmap-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.roadmap-spoke {
    stroke: #94a3b8;
    stroke-width: 1.5;
    opacity: 0.85;
}

.roadmap-arrow {
    /* Inherits via marker -> path fill. Slightly darker than the spoke so
       the arrowhead reads as the "business end" of the connection. */
    fill: #64748b;
}

.roadmap-node {
    position: absolute;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    /* Symmetric padding now — the bracket is a positioned ::before, so it
       doesn't need horizontal padding to "make room" for it. Symmetric
       padding lets `text-align: center` actually look centred. */
    padding: 0.6rem 0.9rem;
    font-family: var(--font-main);
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    cursor: grab;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    min-width: 160px;
    max-width: 200px;
    user-select: none;          /* prevent text-select flicker while dragging */
    touch-action: none;         /* let the JS handle touch instead of scroll */
}

.roadmap-node.is-dragging {
    cursor: grabbing;
    transition: none;           /* killing transitions makes drag feel direct */
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
    z-index: 20;
}

/* The visual "bracket": a chunky left bar that's hard to miss and color-codes state. */
.roadmap-node-app::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 5px;
    border-radius: 5px 0 0 5px;
    background: var(--accent);
}

.roadmap-node-active::before   { background: var(--success); }
.roadmap-node-dormant::before  { background: var(--amber); }
.roadmap-node-unknown::before  { background: #3b82f6; }
.roadmap-node-disabled::before { background: #94a3b8; }

/* Per-state card backgrounds — distinct enough to read at a glance, not so loud
   they fight the identity hub. */
.roadmap-node-active   { background: #f0fdf4; border-color: #bbf7d0; }
.roadmap-node-dormant  { background: #fffbeb; border-color: #fcd34d; }
.roadmap-node-unknown  { background: #eff6ff; border-color: #bfdbfe; }
.roadmap-node-disabled {
    background: #f1f5f9;
    border-color: #cbd5e1;
    opacity: 0.78;
}

/* Strikethrough on disabled app titles reinforces the state visually. */
.roadmap-node-disabled .node-title {
    text-decoration: line-through;
    color: #64748b;
}

.roadmap-node-app:hover {
    transform: translate(-50%, -50%) translateY(-2px) scale(1.03);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    border-color: var(--accent);
    z-index: 5;
}

.roadmap-node-disabled:hover { opacity: 1; }

/* While dragging, kill the hover "lift" so the node sticks to the cursor. */
.roadmap-node.is-dragging,
.roadmap-node.is-dragging:hover {
    transform: translate(-50%, -50%);
}

/* State pill inside each node — text + color so it works for color-blind users. */
.roadmap-node-state {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    margin-bottom: 4px;
    line-height: 1.4;
}

.roadmap-node-active   .roadmap-node-state { background: #dcfce7; color: #15803d; }
.roadmap-node-dormant  .roadmap-node-state { background: #fef3c7; color: #b45309; }
.roadmap-node-unknown  .roadmap-node-state { background: #dbeafe; color: #1d4ed8; }
.roadmap-node-disabled .roadmap-node-state { background: #e2e8f0; color: #475569; }

/* Trusted-source ("authoritative") app — HR / identity sources that feed
   attributes INTO IIQ. Distinct purple accent so it reads as a different
   kind of node at a glance, plus a small badge under the state pill. */
.roadmap-node-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-bottom: 4px;
}

.roadmap-node-pills .roadmap-node-state {
    margin-bottom: 0;
}

.roadmap-node-trusted {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
    background: #ede9fe;
    color: #6d28d9;
}

.roadmap-node-app.is-trusted {
    border-color: #c4b5fd;
}

.roadmap-node-app.is-trusted::before {
    background: #6d28d9;
}

.roadmap-node-identity {
    background: linear-gradient(135deg, var(--accent) 0%, #2563eb 100%);
    color: #fff;
    border: none;
    padding: 0.85rem 1.1rem;
    z-index: 3;
    box-shadow: 0 0 0 8px rgba(30, 64, 175, 0.10), 0 8px 22px rgba(30, 64, 175, 0.32);
    min-width: 170px;
}

.roadmap-node-identity::after { display: none; }

.roadmap-node-identity .node-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 auto 0.4rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.roadmap-node-identity .node-title { color: #fff; font-size: 0.92rem; }
.roadmap-node-identity .node-sub   { color: rgba(255, 255, 255, 0.85); font-size: 0.72rem; }

.node-title {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.86rem;
    line-height: 1.25;
    /* Keep long application names inside the card. Wraps on whitespace,
       falls back to breaking mid-word for single-word giants, and clamps
       to 2 lines so the card height stays predictable. */
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.node-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    word-break: break-all;
    line-height: 1.3;
    font-family: 'Menlo', 'Consolas', monospace;
}

.node-stat {
    font-size: 0.66rem;
    color: var(--text-muted);
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px dashed #e2e8f0;
    font-weight: 500;
}

.roadmap-node-active   .node-stat { color: var(--success); }
.roadmap-node-dormant  .node-stat { color: var(--amber); }
.roadmap-node-unknown  .node-stat { color: #1d4ed8; }
.roadmap-node-disabled .node-stat { color: #94a3b8; }

.roadmap-node-app          { color: var(--text-main); }

button.roadmap-node {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-main);
}

/* Small legend below the graph */
.roadmap-legend {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.roadmap-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.roadmap-legend-swatch {
    /* Tall, narrow bar that matches the on-card "bracket" visual. */
    width: 4px;
    height: 14px;
    border-radius: 2px;
}

.roadmap-empty-graph {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 0;
    font-style: italic;
}

/* ---- App detail panel (clicked node) ---- */
.roadmap-app-detail {
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    animation: detailSlideIn 0.22s ease;
}

@keyframes detailSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.roadmap-app-detail.hidden { display: none; }

.roadmap-app-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.roadmap-app-detail-header h2 {
    font-size: 1.3rem;
    color: var(--accent);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.roadmap-app-detail-header h2::before {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent) 0%, #2563eb 100%);
    flex-shrink: 0;
}

.roadmap-close-detail {
    background: #f1f5f9;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.roadmap-close-detail:hover {
    background: #fef2f2;
    color: var(--danger);
}

.roadmap-app-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.65rem 1.5rem;
    font-size: 0.88rem;
}

.app-detail-row {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.app-detail-row strong {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4pt;
    font-weight: 600;
    min-width: 7rem;
    flex-shrink: 0;
}

.app-detail-row code {
    background: #eff6ff;
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-family: 'Menlo', 'Consolas', monospace;
    word-break: break-all;
    border: 1px solid #dbeafe;
}

.app-detail-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem 0;
    text-align: center;
    background: #f8fafc;
    border-radius: var(--radius-sm);
}

/* Service-account exclusion section (orphan / dormant detail pages only).
   Header explains *why* the rows are excluded; the table below shows
   exactly which accounts were caught so a reviewer can verify the rule. */
.service-excluded-section {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 3px solid var(--amber);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.service-excluded-section.hidden { display: none; }

.service-excluded-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #78350f;
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}

.service-excluded-header svg {
    color: var(--amber);
    flex-shrink: 0;
    margin-top: 2px;
}

.service-excluded-section code {
    background: rgba(217, 119, 6, 0.12);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.78rem;
}

.service-excluded-section .dt-root {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    padding: 0.6rem;
}

/* Reason rows in the Role & Entitlement Risk drill-down — each flagged
   identity may have multiple reasons; stacked compactly with description
   text inline so reviewers can decide remediate vs whitelist at a glance. */
.reason-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 4px 0;
    border-bottom: 1px dashed #f1f5f9;
}

.reason-row:last-child { border-bottom: none; }

.reason-pill {
    flex-shrink: 0;
    margin: 1px 0;
}

.reason-text {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.35;
}

.reason-desc {
    color: var(--text-main);
}

.reason-params {
    color: var(--text-muted);
    margin-top: 2px;
}

.reason-params code {
    background: #f1f5f9;
    color: var(--text-main);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.72rem;
    word-break: break-all;
}

/* Inline tier-filter dropdown that lives inside a widget card body
   (used by the Risk Identities widget). */
.card-inline-filter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.2rem 0 0.4rem 0;
    font-size: 0.75rem;
}

.card-inline-filter-label {
    color: var(--text-muted);
    font-weight: 500;
}

.card-inline-filter-select {
    padding: 0.2rem 0.45rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: var(--font-main);
    font-size: 0.75rem;
    cursor: pointer;
}

/* ===== Findings section — refreshed UI =====
   Sits between the main widgets grid and the Priority Executive Actions row.
   Three permanent drill-down cards, each with its own visual identity:
   IGA (navy/blue), Inactive Mgrs (amber/warning), Top Entitlements (purple). */
.findings-section {
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.findings-header { margin-bottom: 1rem; }

.findings-header-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.findings-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.22);
}

.findings-header h2 {
    font-size: 1.45rem;
    color: var(--text-main);
    margin: 0;
    font-weight: 700;
}

.findings-header-pill {
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 0.3rem;
}

.findings-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0.4rem 0 0;
    padding-left: 46px;
    line-height: 1.45;
}

.findings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    width: 100%;
}

@media (max-width: 1100px) {
    .findings-grid { grid-template-columns: 1fr; }
    .findings-subtitle { padding-left: 0; }
}

/* ---- Finding card — shared visuals ---- */
.finding-card {
    min-height: 240px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.finding-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

/* Thin colored bar at the top — one per card type. */
.finding-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.finding-card-iga::before { background: linear-gradient(90deg, var(--accent), #2563eb); }
.finding-card-mgr::before { background: linear-gradient(90deg, var(--amber), #f59e0b); }
.finding-card-ent::before { background: linear-gradient(90deg, #7c3aed, #a855f7); }

.finding-card-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.finding-card-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.finding-card-title h2 {
    font-size: 0.98rem;
    margin: 0;
    line-height: 1.2;
}

.finding-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.finding-card-iga .finding-card-icon { background: var(--accent-glow); color: var(--accent); }
.finding-card-mgr .finding-card-icon { background: var(--amber-glow);  color: var(--amber);  }
.finding-card-ent .finding-card-icon { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }

.finding-card-hint {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    color: var(--text-muted);
    font-weight: 600;
}

.finding-metric { margin: 0.6rem 0; }
.finding-metric .huge-number { font-size: 2.7rem; line-height: 1; }
.finding-card-mgr .finding-metric .huge-number { color: var(--amber); }
.finding-card-ent .finding-metric .huge-number { color: #7c3aed; }

.finding-caption {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    margin-top: 0.4rem;
}

/* ---- IGA Findings: rows ---- */
.findings-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.findings-list-loading {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.4rem 0.55rem;
}

.findings-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 0.5rem 0.7rem;
    border-radius: 7px;
    background: #f8fafc;
    border: 1px solid transparent;
    font-size: 0.82rem;
    transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.findings-list-row:hover {
    background: var(--accent-glow);
    border-color: rgba(30, 64, 175, 0.18);
}

.findings-list-row .finding-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.findings-list-row .findings-label {
    color: var(--text-main);
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.find-dot-pending_approvals    { background: var(--amber); }
.find-dot-rejected             { background: var(--danger); }
.find-dot-cancelled            { background: #94a3b8; }
.find-dot-provisioning_failed  { background: var(--danger); }
.find-dot-no_birthright        { background: var(--amber); }
.find-dot-open_work_items      { background: var(--accent); }
.find-dot-default              { background: var(--accent); }

.findings-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem 0.25rem 0.7rem;
    font-size: 0.7rem;
    cursor: pointer;
    background: var(--card-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-main);
    transition: var(--transition);
    flex-shrink: 0;
}

.findings-review-btn:hover {
    background: var(--accent);
    color: #fff;
}

.findings-review-btn svg { transition: transform 0.18s ease; }
.findings-review-btn:hover svg { transform: translateX(2px); }

/* ---- Top Entitlements — ranked-bar list (Datawrapper / FT style) ----
   Rows of {rank, label, bar, value}. Each bar's width is proportional to
   the leader, so the eye reads magnitude at a glance and the exact value
   sits at the end without needing a tooltip. */
.top-ent-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.4rem;
}

.top-ent-loading {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.5rem 0;
}

.top-ent-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1.35fr) minmax(60px, 1fr) auto;
    align-items: center;
    column-gap: 0.6rem;
    padding: 3px 0;
    cursor: default;
}

.top-ent-rank {
    color: #c4b5fd;
    font-weight: 700;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.top-ent-row[data-rank="1"] .top-ent-rank { color: #7c3aed; }

.top-ent-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.top-ent-name {
    color: var(--text-main);
    font-size: 0.83rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-ent-app {
    color: var(--text-muted);
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.top-ent-bar-track {
    height: 9px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.top-ent-bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.top-ent-row[data-rank="1"] .top-ent-bar {
    background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.25);
}

.top-ent-value {
    color: #5b21b6;
    font-weight: 700;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 38px;
}

.top-ent-row:hover .top-ent-name  { color: #6d28d9; }
.top-ent-row:hover .top-ent-bar   { filter: brightness(1.05); }

.review-btn {
    background: var(--accent-glow);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}

.review-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* Reusable data table — sticky header, paging, filter, sort */
.dt-root {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dt-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.dt-search {
    flex: 1 1 200px;
    min-width: 160px;
    padding: 0.45rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: var(--font-main);
    background: #fff;
}

.dt-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.dt-col-filter {
    padding: 0.45rem 0.55rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-family: var(--font-main);
    background: #fff;
    cursor: pointer;
}

.dt-scroll {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
}

.dt-table {
    margin: 0 !important;
    border-radius: 0 !important;
}

.dt-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    box-shadow: inset 0 -1px 0 #e2e8f0;
}

.dt-table th.dt-sortable {
    cursor: pointer;
    user-select: none;
    padding-right: 1.6rem;
    position: sticky;  /* keep override */
}

.dt-table th.dt-sortable::after {
    content: '↕';
    position: absolute;
    right: 0.5rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    opacity: 0.5;
}

.dt-table th.dt-sort-asc::after  { content: '▲'; opacity: 1; color: var(--accent); }
.dt-table th.dt-sort-desc::after { content: '▼'; opacity: 1; color: var(--accent); }

.dt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0 0.2rem;
}

.dt-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dt-page-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: var(--text-main);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    cursor: pointer;
    font-family: var(--font-main);
}

.dt-page-btn:hover:not(:disabled) {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

.dt-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Drag-to-reorder visual states (SortableJS classes) */
.widget[data-card]:not([data-card="add-widget"]) {
    cursor: grab;
}

.widget[data-card]:not([data-card="add-widget"]):active {
    cursor: grabbing;
}

.widget-drag-ghost {
    opacity: 0.3;
    background: var(--accent-glow);
}

.widget-drag-chosen {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.widget-dragging {
    opacity: 0.9;
    transform: rotate(0.5deg);
}

/* ===== Add Widget Placeholder ===== */
.widget-add {
    background: transparent;
    border: 2px dashed #cbd5e1;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    animation: slideUp 0.6s ease-out forwards;
    opacity: 0;
}

.widget-add:hover,
.widget-add:focus-visible {
    border-color: var(--accent);
    background: var(--accent-glow);
    transform: translateY(-2px);
    outline: none;
}

.widget-add-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    padding: 1rem;
}

.widget-add-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1.5px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: var(--transition);
}

.widget-add:hover .widget-add-icon,
.widget-add:focus-visible .widget-add-icon {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: scale(1.05);
}

.widget-add-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
}

.widget-add-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Card Styling */
.card {
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Hover effects */
.hover-zoom:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    border-color: #cbd5e1;
}

.full-width {
    width: 100%;
}

.mt-md {
    margin-top: 1rem;
}

.mt-sm {
    margin-top: 0.5rem;
}

.mt-auto {
    margin-top: auto;
}

.gap-lg {
    gap: 2rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.card-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.line-bottom {
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 1rem;
}

.owner-badge {
    font-size: 0.7rem;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.owner-badge.inline {
    background: transparent;
    padding: 0;
}

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Typography and Colors */
.amber {
    color: var(--amber);
}

.amber-text {
    color: var(--amber);
}

.green-text {
    color: var(--success);
}

.danger-text {
    color: var(--danger);
}

.highlight {
    font-weight: 600;
    color: var(--text-main);
}

.huge-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-main);
}

.large-number {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-main);
}

.small-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.3;
    font-weight: 500;
}

/* Top Row Specifics */
.pulse-content {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.gauge-container {
    position: relative;
    width: 280px;
    height: 140px;
}

.gauge-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.gauge-score {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--amber);
}

.gauge-max {
    font-size: 1.25rem;
    color: var(--text-muted);
}

.pulse-details {
    flex: 1;
}

.pulse-details h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.pulse-details p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.sparkline-container {
    height: 60px;
    width: 100%;
}

/* Metrics general */
.metric-primary {
    margin-bottom: 1rem;
}

.row-align {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cols {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.metric-nums {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.metric-nums div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-nums .label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.metric-nums .value {
    font-size: 1.25rem;
    font-weight: 600;
}

.metric-context {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.chart-container {
    position: relative;
}

.small-chart {
    height: 100px;
    margin-bottom: 1rem;
}

/* ---- User Roadmap: matches sidebar (right rail on multi-hit Enter) ---- */
.roadmap-body {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.roadmap-body > #roadmapEmpty,
.roadmap-body > #roadmapLoading,
.roadmap-body > #roadmapContent {
    flex: 1 1 auto;
    min-width: 0;          /* allow the graph to shrink in a flex row */
}

.roadmap-matches[hidden] { display: none; }
.roadmap-matches {
    flex: 0 0 280px;
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.roadmap-matches-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.roadmap-matches-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-main);
}

.roadmap-matches-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: #f1f5f9;
    border-radius: 999px;
    padding: 1px 8px;
    font-weight: 600;
}

.roadmap-matches-hint {
    margin: 0 0 0.6rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.roadmap-matches-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.roadmap-match {
    appearance: none;
    text-align: left;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
    font-family: inherit;
}

.roadmap-match:hover {
    background: var(--accent-glow);
    border-color: rgba(30, 64, 175, 0.35);
}

.roadmap-match.is-active {
    background: var(--accent-glow);
    border-color: var(--accent);
}

.roadmap-match-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.roadmap-match-meta {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Bucket breakdown (replaces the misleading "single-color" stacked bar
   on the Dormant Accounts and Password Management cards). Each bucket is a
   compact tile with a colored top border (severity), big count, and a
   tight uppercase label. Works no matter how skewed the data is. ---- */
.bucket-breakdown {
    display: flex;
    gap: 6px;
    margin: 0.4rem 0 0.9rem;
}

.bucket-cell {
    flex: 1;
    min-width: 0;                 /* allow flex shrink past content width */
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--bucket-c, #94a3b8);
    border-radius: 6px;
    padding: 6px 4px 7px;
    text-align: center;
    line-height: 1.15;
}

.bucket-count {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}

.bucket-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Truncate long bucket labels gracefully on narrow widget widths. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donut-overlap {
    margin-top: -10px;
}

.metric-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 2px solid #f1f5f9;
    padding-top: 0.75rem;
    font-weight: 500;
}

.metric-footer.column {
    flex-direction: column;
    gap: 0.25rem;
}

.stat-val {
    font-weight: 700;
    color: var(--text-main);
}

.target {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Rogue Elevations Card */
.huge-alert {
    font-size: 3rem;
    font-weight: 700;
    color: var(--danger);
    line-height: 1;
}

.alert-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.incident-timeline {
    margin: 1.5rem 0;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    background: var(--danger-bg);
    border-radius: var(--radius-sm);
    color: var(--danger);
}

.dot {
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Validation Status Alerts */
.alert {
    color: var(--danger);
    font-weight: 500;
}

.alert-mild {
    color: var(--amber);
}

/* Third Row Specifics */
.row-flex {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.ring-chart {
    width: 120px;
    height: 120px;
}

.ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
}

.cert-details {
    flex: 1;
}

.overdue-list {
    margin-top: 0.75rem;
    list-style: none;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.overdue-list li {
    padding-left: 1rem;
    position: relative;
    margin-bottom: 0.25rem;
}

.overdue-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--danger);
}

.risk-flag {
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    color: var(--danger);
    background: #fee2e2;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.8rem;
}

.risk-flag.amber-bg {
    color: var(--amber);
    background: #fef3c7;
}

/* ===== Target line note (orphan / rogue trends) ===== */
.target-line-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--amber);
    background: var(--amber-glow);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.target-swatch {
    display: inline-block;
    width: 18px;
    height: 0;
    border-top: 2px dashed var(--amber);
    flex-shrink: 0;
}

.target-value {
    font-weight: 700;
}

.target-edit-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--amber);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 0.25rem;
    margin-left: auto;
    border-radius: 3px;
    line-height: 1;
}

.target-edit-btn:hover {
    border-color: var(--amber);
}

.target-input {
    width: 4rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--amber);
    border-radius: 3px;
    color: var(--amber);
    background: #fff;
}

/* ===== Cert content (simplified to ring + label) ===== */
.cert-content {
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.cert-caption {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.5rem;
}

.recommendation {
    font-size: 0.9rem;
    background: #f1f5f9;
    color: var(--text-main);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent);
}


.impact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.impact-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.status-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.status-icon.danger {
    background: #fee2e2;
    color: var(--danger);
}

.status-icon.success {
    background: #d1fae5;
    color: var(--success);
}

.status-icon.amber {
    background: #fef3c7;
    color: var(--amber);
}

.event-text strong {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
    color: var(--text-main);
}

.event-text span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ===== Recommendation Actions — bottom section ===== */
/* Breathing room above the Recommendation Actions block, separating it
   from the Findings section that sits directly above on the dashboard. */
.bottom-row { margin-top: 2.5rem; }

/* PDF export button in the Recommendation Actions header. Filled accent
   style matching the rest of the app (.btn-primary) so the call-to-action
   reads as the same affordance as Update Data / Generate Report. */
.priority-export-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease,
                box-shadow 0.14s ease, transform 0.14s ease;
}

.priority-export-btn:hover {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(30, 64, 175, 0.25);
    transform: translateY(-1px);
}

.priority-export-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.2);
}

.priority-export-btn:disabled {
    background: #94a3b8;
    border-color: #94a3b8;
    color: #ffffff;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.priority-export-btn svg {
    flex-shrink: 0;
}

.priority-actions-card {
    padding: 1.5rem 1.75rem;
    background: linear-gradient(180deg, var(--card-bg) 0%, #fbfdff 100%);
    border: 1px solid #e2e8f0;
}

.priority-header {
    margin-bottom: 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.priority-header-text { min-width: 0; }

/* "Analyzed by AI" pane-level note — plain text in the priority-subtitle
   style, not a pill/button. Sits in the top-right of the section header. */
.priority-ai-badge {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    white-space: nowrap;
    cursor: help;
}

.priority-header h2 {
    font-size: 1.35rem;
    color: var(--text-main);
    margin: 0 0 0.25rem;
    font-weight: 700;
}

.priority-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.45;
}

.priority-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.priority-loading {
    grid-column: 1 / -1;
    color: var(--text-muted);
    text-align: center;
    padding: 1.5rem 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    font-style: italic;
}

.priority-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--success);
    text-align: center;
    padding: 2rem 1rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-md);
}

.priority-empty strong { font-size: 1.05rem; }
.priority-empty span   { color: var(--text-muted); }

.priority-action {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.priority-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}

.priority-high   { border-left-color: var(--danger); }
.priority-medium { border-left-color: var(--amber);  }
.priority-low    { border-left-color: var(--accent); }

/* Title row puts the severity pill inline with the title so each card opens
   with the priority front and center — no rank number to count past. */
.priority-title-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

/* Severity summary chips above the cards — one chip per non-empty bucket,
   color-coded to match the card border + dropdown so a glance gives the
   user the shape of today's queue. */
.priority-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
}
.priority-summary:empty { display: none; }

.priority-summary-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid;
    background: var(--card-bg);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.priority-summary-count {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.priority-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.priority-summary-high {
    color: var(--danger);
    border-color: rgba(220, 38, 38, 0.4);
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}
.priority-summary-medium {
    color: var(--amber);
    border-color: rgba(217, 119, 6, 0.4);
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.priority-summary-low {
    color: var(--accent);
    border-color: rgba(30, 64, 175, 0.4);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.priority-summary-dismissed {
    color: #475569;
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.priority-sev-badge {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.priority-high   .priority-sev-badge { background: #fef2f2; color: var(--danger); }
.priority-medium .priority-sev-badge { background: #fffbeb; color: var(--amber);  }
.priority-low    .priority-sev-badge { background: var(--accent-glow); color: var(--accent); }

/* Wraps the severity dropdown + an inline edit-pencil icon to the right
   so users immediately recognize the badge is editable (the dropdown
   chevron alone reads as decoration to most people). */
.priority-sev-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.priority-sev-edit-hint {
    color: var(--text-muted);
    opacity: 0.7;
    transition: color 120ms ease, opacity 120ms ease, transform 120ms ease;
    cursor: pointer;
    pointer-events: none; /* pencil is a hint only — click flows through to the select */
}
.priority-sev-wrap:hover .priority-sev-edit-hint {
    color: var(--accent);
    opacity: 1;
    transform: translateY(-1px);
}

/* Severity dropdown replaces the static badge — same pill look, but editable.
   Color follows the *current* selection via .priority-sev-{tier} on the
   element itself (set in JS), so changing risk swaps the chip color too.
   Sized large + bold so it reads as the card's primary visual anchor now
   that the rank number is gone. */
.priority-sev-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    padding: 0.4rem 1.7rem 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1.5px solid;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: filter 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    flex-shrink: 0;
}
.priority-sev-select:hover {
    filter: brightness(0.96);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}
.priority-sev-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.25);
}

.priority-sev-select.priority-sev-high {
    background-color: #fef2f2;
    background-image:
        linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-position: right 8px center, right 8px center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 12px 12px;
    color: var(--danger);
    border-color: rgba(220, 38, 38, 0.5);
}
.priority-sev-select.priority-sev-medium {
    background-color: #fffbeb;
    background-image:
        linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-position: right 8px center, right 8px center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 12px 12px;
    color: var(--amber);
    border-color: rgba(217, 119, 6, 0.5);
}
.priority-sev-select.priority-sev-low {
    background-color: #eff6ff;
    background-image:
        linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-position: right 8px center, right 8px center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 12px 12px;
    color: var(--accent);
    border-color: rgba(30, 64, 175, 0.5);
}

/* Inline tags right under the title — "Rule-based" / "AI-judged" / "edited" */
.priority-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: -2px;
}

.priority-judged-by {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid;
}
.priority-judged-rule { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
.priority-judged-ai   { color: #6d28d9; background: #f5f3ff; border-color: #c4b5fd; }

.priority-overridden {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 4px;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(30, 64, 175, 0.3);
}

/* "AI suggests this is a X risk. You set it to Y." callout — only shown
   when the user has overridden the AI's recommended severity. */
.priority-ai-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    padding: 6px 10px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #c4b5fd;
    border-radius: 6px;
    color: #4c1d95;
    font-size: 0.78rem;
    line-height: 1.4;
    align-self: flex-start;
}
.priority-ai-note svg  { flex-shrink: 0; color: #6d28d9; margin-top: 2px; }
.priority-ai-note strong { color: #4c1d95; font-weight: 700; }

/* The "why this severity" line — smaller, italic, tucked under the action's why. */
.priority-sev-reason {
    margin: 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
    padding: 6px 10px;
    background: #fafbfc;
    border-left: 2px solid #e2e8f0;
    border-radius: 3px;
}

.priority-sev-reason strong {
    color: var(--text-main);
    font-weight: 600;
}

.priority-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    flex: 1;   /* fill the card so .priority-meta margin-top:auto pins to bottom */
}

.priority-title {
    font-size: 0.95rem;
    color: var(--text-main);
    margin: 0;
    line-height: 1.3;
    font-weight: 600;
}

.priority-why {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0;
}

.priority-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px dashed #f1f5f9;
}

.priority-owner {
    font-size: 0.82rem;
    color: var(--text-main);
}

.priority-meta-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    color: var(--text-muted);
    font-weight: 700;
    margin-right: 0.4rem;
}

.priority-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: var(--font-main);
    padding: 0;
    transition: color 0.15s ease;
}

.priority-source-btn svg { transition: transform 0.18s ease; }
.priority-source-btn:hover { color: #1e3a8a; }
.priority-source-btn:hover svg { transform: translateX(2px); }

/* Footer */
.dashboard-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 1rem 0;
    border-top: 2px solid #f1f5f9;
    margin-top: 1rem;
}

.highlight-date {
    color: var(--text-main);
    font-weight: 600;
}

/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: slideUp 0.6s ease-out forwards;
    opacity: 0;
}

.card:nth-child(1) {
    animation-delay: 0.1s;
}

.card:nth-child(2) {
    animation-delay: 0.2s;
}

.card:nth-child(3) {
    animation-delay: 0.3s;
}

.card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {

    .grid-4,
    .grid-3,
    .widgets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .grid-4,
    .grid-3,
    .widgets-grid {
        grid-template-columns: 1fr;
    }

    .pulse-content {
        flex-direction: column;
        gap: 1.5rem;
    }

    .row {
        flex-direction: column;
    }

    .navbar {
        padding: 0.75rem 1rem;
        margin: 0 -2rem 1rem;
    }
}

/* ===== PIC Footer (replaces stat metric-footer on cards 1–6) ===== */
.pic-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 2px solid #f1f5f9;
    padding-top: 0.75rem;
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.pic-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 700;
}

.pic-link {
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: var(--transition);
}

.pic-link:hover {
    color: var(--accent-dark, #1e3a8a);
    border-bottom-color: var(--accent);
}

/* ===== Notification bell + count badge ===== */
.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--amber-glow);
    cursor: help;
    transition: var(--transition);
}

.notif-bell:hover {
    background: rgba(217, 119, 6, 0.2);
}

.notif-bell .bell-icon {
    font-size: 0.9rem;
    line-height: 1;
}

/* Red dot indicator on the bell — replaces the old numeric badge */
.notif-bell::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    animation: pulse-danger 2s infinite;
}

/* Floating tooltip — appended to body so it can't be clipped by widget overflow.
   Positioned dynamically in JS on bell hover. */
.notif-tooltip {
    position: fixed;
    min-width: 220px;
    max-width: 280px;
    padding: 0.6rem 0.75rem;
    background: var(--card-bg, #fff);
    color: var(--text-main, #1e293b);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    z-index: 9999;
    pointer-events: none;
}

/* ===== Cert hint text ===== */
.cert-hint {
    font-size: 0.75rem;
    color: var(--accent);
    font-style: italic;
}

/* ===== Line chart container (taller than small-chart) ===== */
.line-chart {
    height: 110px;
    margin-bottom: 1rem;
}

/* ===== Modal overlay ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Above .ai-footer (9999) so the dim overlay actually covers the status
       bar instead of leaving it floating brightly on top of the modal. */
    z-index: 10000;
    padding: 2rem;
    backdrop-filter: blur(2px);
    animation: fadeIn 0.2s ease-out;
}

/* AI footer dims whenever ANY modal is open, since the dark overlay would
   otherwise leave the footer floating brightly above it. */
body.modal-open .ai-footer {
    opacity: 0.35 !important;
    pointer-events: none !important;
    filter: grayscale(0.4);
    transition: opacity 0.15s ease, filter 0.15s ease;
}

/* Embedded AI chat widget is injected outside our markup and sits in its
   own high-z-index iframe; we can't cover it with the backdrop. Dim it
   ONLY for the AI-report modal — drill-down modals (orphan, rogue, config,
   ...) leave the chat usable so a reviewer can ask questions about what
   they're investigating. body.report-modal-open is toggled in script.js. */
body.report-modal-open > iframe,
body.report-modal-open [id^="digital-lab"],
body.report-modal-open [id^="dl-widget"],
body.report-modal-open [class*="dl-widget"],
body.report-modal-open [class*="agents-widget"] {
    opacity: 0.35 !important;
    pointer-events: none !important;
    filter: grayscale(0.4);
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.modal-backdrop.hidden,
.hidden {
    display: none;
}

.modal {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
    animation: modalSlide 0.25s ease-out;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid #f1f5f9;
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.modal-close:hover {
    background: #f1f5f9;
    color: var(--text-main);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-section {
    margin-bottom: 1.5rem;
}

.modal-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.modal-line-chart {
    height: 280px;
    width: 100%;
    margin-bottom: 1rem;
}

.modal-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.modal-filter-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.modal-filter-select {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlide {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== Modal data table ===== */
.modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.modal-table thead th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.6rem 0.75rem;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.modal-table tbody td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-main);
}

.modal-table tbody tr:hover {
    background: #f8fafc;
}

.status-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-pill.aligned {
    background: #d1fae5;
    color: var(--success);
}

.status-pill.mismatch {
    background: #fee2e2;
    color: var(--danger);
}

.status-pill.pending {
    background: #fef3c7;
    color: var(--amber);
}

.status-pill.done {
    background: #d1fae5;
    color: var(--success);
}

/* Neutral pill — use for non-actionable status labels (default role 'user',
   email mode 'dummy', etc.) so they don't read as warnings. `.mismatch`
   is reserved for real warnings (alignment gap, send failure, ETL error). */
.status-pill.neutral {
    background: #f1f5f9;
    color: #475569;
}

/* ===== Modal coverage list (cert) ===== */
.coverage-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.coverage-row:last-child {
    border-bottom: none;
}

.coverage-name {
    flex: 0 0 180px;
    font-weight: 600;
}

.coverage-bar-wrap {
    flex: 1;
    height: 8px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
}

.coverage-bar {
    height: 100%;
    background: var(--success);
    transition: width 0.4s ease;
}

.coverage-bar.partial {
    background: var(--amber);
}

.coverage-bar.low {
    background: var(--danger);
}

.coverage-pct {
    flex: 0 0 50px;
    text-align: right;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ===== Division anomaly groups (role/entitlement) ===== */
.division-group {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.division-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.division-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
}

.division-avg {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.division-avg strong {
    color: var(--text-main);
}

/* ===== AI template modal body ===== */
.ai-template {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-main);
    white-space: pre-wrap;
}

.ai-template-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    font-style: italic;
}

.ai-email {
    font-style: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--accent);
}

.ai-template-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ai-template-actions-foot {
    margin: 0.85rem 0 0;
    justify-content: flex-end;
}

/* ---------- Transient toast (appToast) ---------- */
.app-toast-container {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.app-toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 360px;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.4;
    color: #ffffff;
    background: #16a34a;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-toast.is-shown {
    opacity: 1;
    transform: translateY(0);
}

.app-toast.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}

.app-toast-error {
    background: #dc2626;
}

.app-toast-info {
    background: #1e3a8a;
}

.ai-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ai-action-btn:hover:not(:disabled) {
    background: #f8fafc;
    border-color: var(--accent);
}

.ai-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-action-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.ai-action-btn-primary:hover:not(:disabled) {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #fff;
}

.ai-action-btn.is-success {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.ai-action-btn svg {
    flex-shrink: 0;
}

.ai-template-stub-note {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--amber-glow);
    border-left: 3px solid var(--amber);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--amber);
    font-weight: 500;
}

/* ===== Add-widget modal options ===== */
.widget-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    background: #f8fafc;
    transition: var(--transition);
}

.widget-option:hover {
    border-color: var(--accent);
    background: #fff;
    transform: translateX(2px);
}

.widget-option-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.widget-option-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.widget-option-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.widget-option-disabled:hover {
    transform: none;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.widget-add-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-main);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.widget-add-btn:hover {
    background: #1e3a8a;
    transform: translateY(-1px);
}

.widget-option-empty {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius-md);
}

/* ===== AI Chat — floating button + slide-in panel ===== */
.chat-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(30, 64, 175, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.chat-fab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 30px rgba(30, 64, 175, 0.5);
}

.chat-fab:active {
    transform: translateY(0) scale(1);
}

.chat-panel {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 380px;
    height: min(560px, calc(100vh - 140px));
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999;
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: transform 180ms ease, opacity 180ms ease;
}

.chat-panel-hidden {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    pointer-events: none;
}

.chat-panel-header {
    background: var(--accent);
    color: #fff;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-panel-title {
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-status-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: chat-pulse 2s infinite;
}

@keyframes chat-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

.chat-panel-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chat-text-btn {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.chat-text-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chat-icon-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.3rem;
}

.chat-icon-close:hover {
    opacity: 0.8;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bg-light);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.chat-msg {
    max-width: 85%;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-msg-user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.chat-msg-assistant {
    align-self: flex-start;
    background: #fff;
    color: var(--text-main);
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 2px;
}

.chat-msg-error {
    align-self: flex-start;
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
}

.chat-msg-thinking {
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
}

.chat-msg-thinking span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: chat-bounce 1.4s infinite ease-in-out both;
}

.chat-msg-thinking span:nth-child(1) {
    animation-delay: -0.32s;
}

.chat-msg-thinking span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes chat-bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

.chat-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}

.chat-input-row textarea {
    flex: 1;
    resize: none;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-main);
    max-height: 100px;
    outline: none;
}

.chat-input-row textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.chat-input-row button {
    width: 40px;
    flex-shrink: 0;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-input-row button:hover {
    background: #1e3a8a;
}

.chat-input-row button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .chat-panel {
        width: calc(100vw - 32px);
        right: 16px;
    }
}

/* ============================================================
   Skeleton shimmer — applied to placeholder elements until JS
   fills them with real data. Uses :empty so the shimmer auto-
   stops the instant a renderer sets textContent / innerHTML —
   no per-render JS bookkeeping needed.
   ============================================================ */
@keyframes skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.skel:empty {
    display: inline-block;
    color: transparent !important;
    background: linear-gradient(90deg, #eef2f7 0%, #dde4ed 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    user-select: none;
    pointer-events: none;
    vertical-align: middle;
}

.huge-number.skel:empty,
.huge-alert.skel:empty,
.large-number.skel:empty {
    min-width: 96px;
    min-height: 1em;
}

.ring-center.skel:empty {
    min-width: 60px;
    min-height: 1.4rem;
}

.metric-nums .value.skel:empty {
    min-width: 32px;
    min-height: 0.9em;
}

.skel-line {
    display: block;
    width: 70%;
    height: 0.8em;
    margin: 0.4em 0;
    background: linear-gradient(90deg, #eef2f7 0%, #dde4ed 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    user-select: none;
}

.skel-line-narrow { width: 45%; }
.skel-line-wide   { width: 90%; }

.skel-block {
    display: block;
    width: 100%;
    height: 36px;
    background: linear-gradient(90deg, #eef2f7 0%, #dde4ed 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    user-select: none;
}

/* ============================================================
   Priority action — lifecycle controls (dismiss / close / reopen)
   and dismissed tier styling. Open items keep their existing
   priority-{high|medium|low} colors; dismissed muted + at bottom.
   ============================================================ */
.priority-action.priority-dismissed {
    opacity: 0.72;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.priority-action.priority-dismissed .priority-title {
    color: #475569;
    text-decoration: line-through;
    text-decoration-color: #94a3b8;
    text-decoration-thickness: 1px;
}


.priority-dismissed-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    background: #e2e8f0;
    border-radius: 999px;
    margin-top: 4px;
}

.priority-first-seen {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-left: 0.5rem;
}

.priority-lifecycle-btn {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    margin-left: 6px;
}

.priority-lifecycle-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.priority-lifecycle-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.priority-lifecycle-close {
    border-color: #94a3b8;
    color: #334155;
}

.priority-lifecycle-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* ============================================================
   Settings — compact single-page layout
   ============================================================ */
.page-header-compact {
    padding: 1.25rem 0 0.75rem;
}

.page-header-compact h1 {
    margin: 0;
}

.admin-refresh-card {
    padding: 1.1rem 1.25rem;
}

.admin-refresh-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-refresh-head h2 {
    margin: 0;
}

.admin-refresh-desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    flex: 1;
    min-width: 280px;
}

/* Meta — two side-by-side stats (Last refresh · Next scheduled) */
.admin-refresh-meta {
    margin: 0.75rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.6rem 0;
}

.admin-refresh-meta > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-refresh-meta dt {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.admin-refresh-meta dd {
    margin: 0;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Actions row: inline schedule form + inline trigger form */
.admin-refresh-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.admin-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0;
}

.admin-inline-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-right: 0.15rem;
}

.admin-inline-colon {
    font-weight: 700;
    color: var(--text-muted);
}

.admin-inline-form input[type="number"] {
    width: 3.4rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: #fff;
}

.admin-inline-form input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.admin-inline-form .btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
}

/* Tighter Other-settings card to match the compact look */
.admin-quick-links {
    padding: 1rem 1.25rem;
}

.admin-quick-links h2 {
    margin: 0 0 0.6rem;
}

/* ============================================================
   In-page dialog — replaces native browser confirm() and alert()
   so we can theme it and avoid the browser-modal "leave site?"
   trap. Driven by dialog.js (window.appConfirm, window.appAlert).
   ============================================================ */
.app-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    animation: app-dialog-fade-in 0.12s ease-out;
}

@keyframes app-dialog-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.app-dialog {
    background: #fff;
    border-radius: var(--radius-lg);
    max-width: 440px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 1.5rem 1.5rem 1.25rem;
    animation: app-dialog-pop-in 0.16s ease-out;
}

@keyframes app-dialog-pop-in {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.app-dialog-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}

.app-dialog-message {
    margin: 0;
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.app-dialog-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.app-dialog-actions .btn {
    min-width: 84px;
}

/* Priority Actions — "AI analyzing" empty state spinner */
.priority-ai-loading {
    color: var(--text-main);
}

.priority-ai-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--accent);
    border-radius: 50%;
    margin-bottom: 0.75rem;
    animation: priority-ai-spin 0.9s linear infinite;
}

@keyframes priority-ai-spin {
    to { transform: rotate(360deg); }
}

/* Account management — disabled-user rows are visually muted but still
   selectable so admins can re-enable them. */
.user-row-disabled td {
    opacity: 0.55;
}
.user-row-disabled td:last-child {
    opacity: 1;  /* Keep the action buttons full-strength */
}

/* Icon-only action buttons in the users table. Native title= drives the
   tooltip — accessible + zero JS. */
.user-actions-cell {
    text-align: right;
    white-space: nowrap;
}

.user-actions-cell form {
    display: inline-block;
    margin: 0;
    margin-left: 4px;
}

/* Solid colored icon buttons — each variant carries its own meaning at
   a glance (navy=safe action, amber=lock, green=unlock, red=destructive,
   gray=protected). No borders; the color IS the affordance. */
.icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 4px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    transition: background 0.15s, transform 0.1s;
}

.icon-btn:hover {
    background: #1e3a8a;
}

.icon-btn:active {
    transform: translateY(1px);
}

.icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.icon-btn-warning {
    background: var(--amber);
}
.icon-btn-warning:hover {
    background: #b45309;
}

.icon-btn-success {
    background: var(--success);
}
.icon-btn-success:hover {
    background: #047857;
}

.icon-btn-danger {
    background: var(--danger);
}
.icon-btn-danger:hover {
    background: #b91c1c;
}

/* "Protected" indicator — looks like an icon button but isn't clickable. */
.icon-btn-protected {
    background: #94a3b8;
    color: #fff;
    cursor: not-allowed;
}
.icon-btn-protected:hover {
    background: #94a3b8;
}

/* ============================================================
   Email settings — tabbed provider picker (SMTP / ACS) inside a
   single card. One form, one save button.
   ============================================================ */
.email-settings-card {
    padding: 1.25rem 1.5rem 1.5rem;
}

.email-settings-card .admin-card-desc {
    margin: 0 0 1.25rem;
}

/* Segmented tab control — single chosen provider highlighted. */
.email-provider-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: #f1f5f9;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.email-provider-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.email-provider-tab:hover {
    color: var(--text-main);
}

.email-provider-tab.is-active {
    background: #fff;
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.email-provider-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Fieldset wrapping each provider's inputs. Stripped of native chrome so
   it behaves like a plain block — the `legend` becomes the section title. */
.email-panel {
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0;
    background: #fdfdfe;
}

.email-panel[hidden] {
    display: none;
}

.email-panel-legend {
    padding: 0 0.4rem;
    margin-left: -0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.email-panel-hint {
    margin: 0.25rem 0 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.email-panel-hint code {
    background: #eef2f7;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.82rem;
}

.email-panel-hint a {
    color: var(--accent);
    text-decoration: none;
}

.email-panel-hint a:hover {
    text-decoration: underline;
}

/* Two-column grid for the provider's input fields; the wide modifier spans
   both columns for free-form addresses / connection strings. */
.email-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 0.85rem 1rem;
}

.email-field-wide {
    grid-column: 1 / -1;
}

/* Save button sits in its own footer strip below the panel. */
.email-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

@media (max-width: 600px) {
    .email-panel-grid {
        grid-template-columns: 1fr;
    }
    .email-provider-tabs {
        display: flex;
        width: 100%;
    }
    .email-provider-tab {
        flex: 1;
        justify-content: center;
    }
}

/* "Send a test email" sub-section, sits at the bottom of the email
   settings card with its own separator. Posts independently — uses the
   already-saved provider config so admins can confirm delivery without
   re-typing the credentials. */
.email-test-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

.email-test-section h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
}

.email-test-hint {
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.email-test-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.email-test-form .admin-field {
    flex: 1;
    min-width: 240px;
    margin: 0;
}

@media (max-width: 600px) {
    .email-test-form .btn {
        width: 100%;
    }
}

/* ============================================================
   Recommendation Action — "View details" modal sections.
   Modal opens via openPriorityActionDetail() in script.js and
   gets: context block (severity-tinted), AI next-steps list,
   30-day trend chart, and a risk_key-filtered drill table.
   ============================================================ */
.action-detail-context {
    padding: 0.95rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--accent);
    background: #fafbfc;
    margin-bottom: 1rem;
}
.action-detail-context.action-detail-sev-high   { border-left-color: var(--danger); background: linear-gradient(180deg, #fef2f2 0%, #fafbfc 70%); }
.action-detail-context.action-detail-sev-medium { border-left-color: var(--amber);  background: linear-gradient(180deg, #fffbeb 0%, #fafbfc 70%); }
.action-detail-context.action-detail-sev-low    { border-left-color: var(--accent); background: linear-gradient(180deg, #eff6ff 0%, #fafbfc 70%); }
.action-detail-context.action-detail-sev-dismissed { border-left-color: #94a3b8; background: #f8fafc; }

.action-detail-context-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}

/* PDF export button on widget detail page header — same visual treatment
   as .priority-export-btn (list-level PDF button) for consistency across
   the dashboard. Sits to the right of the page title via flex layout in
   .detail-header-titlerow. */
.detail-header-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.detail-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.2);
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    white-space: nowrap;
}
.detail-pdf-btn:hover:not(:disabled) {
    background: #1e3a8a;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(30, 64, 175, 0.3);
}
.detail-pdf-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}
.detail-pdf-btn svg { display: inline-block; }
.action-detail-sev-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1.5px solid;
}
.action-detail-sev-badge.action-detail-sev-high {
    color: var(--danger); background: #fef2f2; border-color: rgba(220, 38, 38, 0.5);
}
.action-detail-sev-badge.action-detail-sev-medium {
    color: var(--amber); background: #fffbeb; border-color: rgba(217, 119, 6, 0.5);
}
.action-detail-sev-badge.action-detail-sev-low {
    color: var(--accent); background: #eff6ff; border-color: rgba(30, 64, 175, 0.5);
}
.action-detail-sev-badge.action-detail-sev-dismissed {
    color: #475569; background: #f1f5f9; border-color: #cbd5e1;
}
.action-detail-risk-key {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.04);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.action-detail-why,
.action-detail-severity-reason,
.action-detail-affected {
    margin: 0.4rem 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-main);
}
.action-detail-severity-reason strong,
.action-detail-affected strong {
    color: var(--text-main);
    font-weight: 600;
}
.action-detail-overridden {
    display: inline-block;
    margin: 0.3rem 0;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    color: #4c1d95;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #c4b5fd;
    border-radius: 6px;
}
.action-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.action-detail-meta strong {
    color: var(--text-main);
    font-weight: 600;
    margin-right: 0.25rem;
}

.action-detail-section {
    margin-top: 1.2rem;
}
.action-detail-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.55rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e2e8f0;
}
.action-detail-trend-delta,
.action-detail-drill-count {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--text-main);
    background: rgba(30, 64, 175, 0.08);
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
}

.action-detail-steps {
    margin: 0;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.action-detail-steps li {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-main);
}
.action-detail-steps li::marker {
    color: var(--accent);
    font-weight: 700;
}
.action-detail-empty {
    margin: 0.3rem 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

.action-detail-trend-wrap {
    height: 180px;
    position: relative;
}

.action-detail-drill-hint {
    margin: 0 0 0.55rem 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Subtle "generic" pill for fallback drills — the LLM invented a new
   risk_kind that has no exact filter mapped yet, so we're showing the
   source widget's top rows instead of an exact slice. */
.action-detail-drill-fallback {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    vertical-align: middle;
}