/* ═══════════════════════════════════════════════════════════════════════
   AegisFlow Design System v2.0
   Premium Enterprise Cybersecurity Platform
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────────────── */
:root {
    /* Brand */
    --af-primary:           #0D6EFD;
    --af-primary-hover:     #0B5ED7;
    --af-primary-dark:      #084298;
    --af-cyan:              #00D4FF;

    /* Sidebar */
    --af-sidebar-bg:        #07111F;
    --af-sidebar-text:      #94A3B8;
    --af-sidebar-text-act:  #FFFFFF;

    /* Surface */
    --af-bg:                #F5F7FA;
    --af-surface:           #FFFFFF;
    --af-surface-soft:      #F8FAFC;
    --af-border:            #E2E8F0;
    --af-border-md:         #CBD5E1;

    /* Text */
    --af-text-1:            #0F172A;
    --af-text-2:            #475569;
    --af-text-3:            #64748B;

    /* Severity */
    --af-critical:          #E11D48;
    --af-critical-soft:     #FFF1F2;
    --af-high:              #D97706;
    --af-high-soft:         #FFFBEB;
    --af-medium:            #0891B2;
    --af-medium-soft:       #ECFEFF;
    --af-low:               #475569;
    --af-low-soft:          #F1F5F9;
    --af-success:           #16A34A;
    --af-success-soft:      #F0FDF4;

    /* Layout */
    --af-topbar-h:          72px;
    --af-page-pad-x:        14px;
    --af-page-pad-y:        32px;
    --af-page-pad:          var(--af-page-pad-y);
    --af-card-pad:          24px;
    --af-radius-card:       16px;
    --af-radius-btn:        10px;
    --af-radius-tile:       14px;
    --af-gap:               20px;
    --af-gap-sm:            16px;

    /* Shadows */
    --af-shadow-sm:         0 1px 3px rgba(15,23,42,.06);
    --af-shadow-md:         0 4px 16px rgba(15,23,42,.08);
    --af-shadow-lg:         0 8px 32px rgba(15,23,42,.12);

    /* Legacy compatibility */
    --aegis-primary-dark: #07111F;
    --aegis-primary-teal: #00D4FF;
    --aegis-primary-blue: #0D6EFD;
    --aegis-bg: #F5F7FA;
    --aegis-surface: #FFFFFF;
    --aegis-text: #0F172A;
    --aegis-text-muted: #64748B;
    --aegis-border: #E2E8F0;
    --aegis-radius: 12px;
    --aegis-shadow: 0 1px 3px rgba(0,0,0,.08);
    --aegis-sidebar-start: #07111F;
    --aegis-sidebar-end: #0D1A2A;
}

/* ─── Global Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--af-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOPBAR / MUD-APPBAR OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */

.mud-appbar {
    background: var(--af-sidebar-bg) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.3) !important;
}

.mud-appbar .mud-toolbar {
    padding: 0 20px;
    gap: 6px;
    align-items: center;
}

/* ─── Topbar: Menu Toggle ─── */
.af-topbar-menu-btn.mud-icon-button {
    color: rgba(248,250,252,.65) !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
}
.af-topbar-menu-btn.mud-icon-button:hover {
    background: rgba(255,255,255,.08) !important;
    color: #F8FAFC !important;
}

/* ─── Topbar: Search ─── */
.af-topbar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    padding: 0 14px;
    height: 42px;
    width: clamp(240px, 28vw, 400px);
    margin-left: 4px;
    transition: border-color .15s ease, background .15s ease;
}
.af-topbar-search:focus-within {
    border-color: rgba(13,110,253,.55);
    background: rgba(255,255,255,.09);
}
.af-topbar-search-icon {
    color: rgba(248,250,252,.38);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.af-topbar-search-input {
    background: none;
    border: none;
    outline: none;
    color: #F8FAFC;
    font-family: inherit;
    font-size: .875rem;
    flex: 1;
    min-width: 0;
}
.af-topbar-search-input::placeholder { color: rgba(248,250,252,.30); }
.af-topbar-search-kbd {
    font-size: .6875rem;
    color: rgba(248,250,252,.35);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
}

/* ─── Topbar: Workspace Button ─── */
.af-workspace-btn.mud-button-root {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;
    color: rgba(248,250,252,.80) !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    height: 42px !important;
    padding: 0 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-width: unset !important;
}
.af-workspace-btn.mud-button-root:hover {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #F8FAFC !important;
}

/* ─── Topbar: Icon Buttons ─── */
.af-topbar-icon-btn.mud-icon-button {
    color: rgba(248,250,252,.58) !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    transition: background .15s, color .15s !important;
}
.af-topbar-icon-btn.mud-icon-button:hover {
    background: rgba(255,255,255,.08) !important;
    color: #F8FAFC !important;
}

/* ─── Topbar: Notification Badge ─── */
.af-notif-badge-wrap .mud-badge-content {
    font-size: .65rem;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    line-height: 17px;
}

/* ─── Topbar: User Menu Activator ─── */
.af-user-activator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
    margin-left: 2px;
    user-select: none;
}
.af-user-activator:hover { background: rgba(255,255,255,.08); }

.af-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D6EFD 0%, #00D4FF 100%);
    color: #FFF;
    font-size: .8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .03em;
}
.af-user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.af-user-name {
    color: #F8FAFC;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}
.af-user-role {
    color: rgba(248,250,252,.42);
    font-size: .75rem;
    line-height: 1.25;
    white-space: nowrap;
}
.af-user-chevron .mud-icon-root {
    color: rgba(248,250,252,.38) !important;
    font-size: 18px !important;
}

/* Form field normalization */
.mud-input-control .mud-input-label,
.mud-input-control .mud-input-label-outlined {
    background: var(--af-surface) !important;
    padding: 0 5px !important;
    border-radius: 4px;
    line-height: 1.15 !important;
}

.mud-paper .mud-input-control .mud-input-label,
.mud-card .mud-input-control .mud-input-label,
.mud-popover .mud-input-control .mud-input-label,
.mud-dialog .mud-input-control .mud-input-label {
    background: var(--af-surface) !important;
}

.mud-input-control .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--af-border-md) !important;
    border-radius: 8px !important;
}

.mud-input-control .mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.mud-input-control .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--af-primary) !important;
}

.mud-input-control .mud-input.mud-input-underline {
    min-height: 42px;
    padding: 0 12px !important;
    background: var(--af-surface) !important;
    border: 1px solid var(--af-border-md) !important;
    border-radius: 8px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.mud-input-control .mud-input.mud-input-underline:hover,
.mud-input-control .mud-input.mud-input-underline.mud-input-focused {
    border-color: var(--af-primary) !important;
    box-shadow: 0 0 0 2px rgba(13,110,253,.08);
}

.mud-input-control .mud-input.mud-input-underline::before,
.mud-input-control .mud-input.mud-input-underline::after {
    display: none !important;
}

.mud-input-control .mud-input.mud-input-underline input.mud-input-root,
.mud-input-control .mud-input.mud-input-underline textarea.mud-input-root,
.mud-input-control .mud-input.mud-input-underline .mud-select-input {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR / MUD-DRAWER OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */

.mud-drawer {
    border-right: 1px solid rgba(255,255,255,.05) !important;
    box-shadow: 2px 0 20px rgba(0,0,0,.20) !important;
}

/* ─── Sidebar: Brand Logo ─── */
.af-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px 16px;
    min-height: 72px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.06);
    text-decoration: none;
}
.af-sidebar-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #0D6EFD 0%, #00D4FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(13,110,253,.45);
}
.af-sidebar-brand-icon svg {
    width: 20px;
    height: 20px;
    fill: #FFF;
}
.af-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity .18s ease;
}
.af-sidebar-brand-name {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.af-brand-aegis { color: #FFFFFF; }
.af-brand-flow  { color: #00D4FF; }
.af-sidebar-brand-sub {
    font-size: .6875rem;
    color: rgba(255,255,255,.38);
    font-weight: 400;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Hide brand text when drawer is in mini/closed state */
.mud-drawer-close .af-sidebar-brand-text {
    opacity: 0;
    pointer-events: none;
}

/* ─── Nav Menu ─── */
.mud-nav-menu {
    padding: 8px 8px 16px !important;
}

/* Nav Links */
.mud-nav-link {
    color: var(--af-sidebar-text) !important;
    border-radius: 8px !important;
    margin-bottom: 2px !important;
    height: 40px !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background .14s, color .14s !important;
}
.mud-nav-link:focus,
.mud-nav-link:hover,
.mud-nav-link.active,
.mud-nav-link .mud-nav-link-text,
.mud-nav-link:hover .mud-nav-link-text,
.mud-nav-link.active .mud-nav-link-text {
    text-decoration: none !important;
}
.mud-nav-menu a,
.mud-nav-menu a:not(:hover),
.mud-nav-menu a:hover,
.mud-nav-menu a:focus,
.mud-nav-menu a:visited {
    text-decoration: none !important;
}
.mud-nav-link:hover {
    background: rgba(255,255,255,.065) !important;
    color: #CBD5E1 !important;
}
.mud-nav-link.active {
    background: linear-gradient(90deg, rgba(13,110,253,.28) 0%, rgba(13,110,253,.10) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: inset 3px 0 0 #0D6EFD !important;
}
.mud-nav-link .mud-nav-link-icon-default {
    color: #475569 !important;
    transition: color .14s !important;
}
.mud-nav-link:hover .mud-nav-link-icon-default { color: #94A3B8 !important; }
.mud-nav-link.active .mud-nav-link-icon-default { color: #00D4FF !important; }

/* Nav Group header */
.mud-nav-group .mud-nav-group-header .mud-nav-link {
    color: rgba(100,116,139,.85) !important;
    font-size: .6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    height: 34px !important;
}
.mud-nav-group .mud-nav-group-header .mud-nav-link:hover {
    background: transparent !important;
    color: rgba(100,116,139,.95) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════════════ */

.af-main-content-host {
    background: var(--af-bg) !important;
    min-height: 100vh;
}

.af-main-content-shell {
    min-height: 100vh;
    padding: calc(var(--af-topbar-h) + var(--af-page-pad-y)) var(--af-page-pad-x) var(--af-page-pad-y);
}

@media (max-width: 640px) {
    .af-main-content-shell {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD — PAGE HEADER
   ═══════════════════════════════════════════════════════════════════════ */

.af-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}
.af-page-title {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--af-text-1);
    margin: 0;
    letter-spacing: -.025em;
    line-height: 1.25;
}
.af-page-subtitle {
    font-size: .875rem;
    color: var(--af-text-3);
    margin: 4px 0 0;
}
.af-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ─── Buttons ─── */
.af-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--af-radius-btn);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all .15s ease;
    white-space: nowrap;
}
.af-btn-primary {
    background: var(--af-primary);
    color: #FFF;
    box-shadow: 0 2px 8px rgba(13,110,253,.28);
}
.af-btn-primary:hover {
    background: var(--af-primary-hover);
    box-shadow: 0 4px 14px rgba(13,110,253,.38);
    color: #FFF;
    transform: translateY(-1px);
    text-decoration: none;
}
.af-btn-outline {
    background: transparent;
    color: var(--af-text-2);
    border: 1px solid var(--af-border-md);
}
.af-btn-outline:hover {
    background: var(--af-surface-soft);
    border-color: var(--af-primary);
    color: var(--af-primary);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD — METRIC CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.af-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--af-gap);
    margin-bottom: 28px;
}
@media (max-width: 1200px) { .af-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .af-metrics-grid { grid-template-columns: 1fr; } }

.af-metric-card {
    background: var(--af-surface);
    border-radius: var(--af-radius-card);
    padding: var(--af-card-pad);
    box-shadow: var(--af-shadow-md);
    border: 1px solid var(--af-border);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    text-decoration: none;
    color: inherit;
}
.af-metric-card:hover {
    box-shadow: var(--af-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--af-border-md);
    text-decoration: none;
    color: inherit;
}
.af-metric-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.af-metric-icon-wrap svg { width: 26px; height: 26px; }
.af-metric-body { flex: 1; min-width: 0; }
.af-metric-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    margin-bottom: 4px;
}
.af-metric-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--af-text-3);
    line-height: 1.3;
}
.af-metric-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    margin-top: 8px;
}

/* Metric card colour variants */
.af-mc-targets  .af-metric-icon-wrap { background: #EFF6FF; }
.af-mc-targets  .af-metric-icon-wrap svg { color: #1D4ED8; }
.af-mc-targets  .af-metric-value { color: #1D4ED8; }
.af-mc-targets  .af-metric-badge { background: #EFF6FF; color: #1D4ED8; }

.af-mc-critical .af-metric-icon-wrap { background: var(--af-critical-soft); }
.af-mc-critical .af-metric-icon-wrap svg { color: var(--af-critical); }
.af-mc-critical .af-metric-value { color: var(--af-critical); }
.af-mc-critical .af-metric-badge { background: var(--af-critical-soft); color: var(--af-critical); }

.af-mc-high     .af-metric-icon-wrap { background: var(--af-high-soft); }
.af-mc-high     .af-metric-icon-wrap svg { color: var(--af-high); }
.af-mc-high     .af-metric-value { color: var(--af-high); }
.af-mc-high     .af-metric-badge { background: var(--af-high-soft); color: var(--af-high); }

.af-mc-scans    .af-metric-icon-wrap { background: var(--af-success-soft); }
.af-mc-scans    .af-metric-icon-wrap svg { color: var(--af-success); }
.af-mc-scans    .af-metric-value { color: var(--af-success); }
.af-mc-scans    .af-metric-badge { background: var(--af-success-soft); color: var(--af-success); }

.af-mc-medium   .af-metric-icon-wrap { background: var(--af-medium-soft); }
.af-mc-medium   .af-metric-icon-wrap svg { color: var(--af-medium); }
.af-mc-medium   .af-metric-value { color: var(--af-medium); }
.af-mc-medium   .af-metric-badge { background: var(--af-medium-soft); color: var(--af-medium); }

.af-mc-low      .af-metric-icon-wrap { background: var(--af-low-soft); }
.af-mc-low      .af-metric-icon-wrap svg { color: var(--af-low); }
.af-mc-low      .af-metric-value { color: var(--af-low); }
.af-mc-low      .af-metric-badge { background: var(--af-low-soft); color: var(--af-low); }

.af-mc-resolved .af-metric-icon-wrap { background: var(--af-success-soft); }
.af-mc-resolved .af-metric-icon-wrap svg { color: var(--af-success); }
.af-mc-resolved .af-metric-value { color: var(--af-success); }
.af-mc-resolved .af-metric-badge { background: var(--af-success-soft); color: var(--af-success); }

.af-mc-active   .af-metric-icon-wrap { background: #EEF2FF; }
.af-mc-active   .af-metric-icon-wrap svg { color: #4F46E5; }
.af-mc-active   .af-metric-value { color: #4F46E5; }
.af-mc-active   .af-metric-badge { background: #EEF2FF; color: #4F46E5; }

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD — SECTION HEADER
   ═══════════════════════════════════════════════════════════════════════ */

.af-section { margin-bottom: 28px; }
.af-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.af-section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--af-text-1);
    margin: 0;
    letter-spacing: -.015em;
}
.af-section-subtitle {
    font-size: .8125rem;
    color: var(--af-text-3);
    margin: 3px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD — FEATURE TILES
   ═══════════════════════════════════════════════════════════════════════ */

.af-tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--af-gap-sm);
}
@media (max-width: 1200px) { .af-tiles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .af-tiles-grid { grid-template-columns: 1fr; } }

.af-tile {
    background: var(--af-surface);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-tile);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--af-text-1);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    box-shadow: var(--af-shadow-sm);
}
.af-tile:hover {
    box-shadow: var(--af-shadow-md);
    transform: translateY(-2px);
    border-color: var(--af-border-md);
    text-decoration: none;
    color: var(--af-text-1);
}
.af-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.af-tile-icon svg { width: 22px; height: 22px; }
.af-tile-body { min-width: 0; }
.af-tile-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--af-text-1);
    line-height: 1.3;
}
.af-tile-desc {
    font-size: .75rem;
    color: var(--af-text-3);
    margin-top: 2px;
    line-height: 1.4;
}

/* Feature tile colour variants */
.af-tile-blue   .af-tile-icon { background: #EFF6FF; }
.af-tile-blue   .af-tile-icon svg { color: #1D4ED8; }
.af-tile-blue:hover { border-color: #BFDBFE; }

.af-tile-red    .af-tile-icon { background: var(--af-critical-soft); }
.af-tile-red    .af-tile-icon svg { color: var(--af-critical); }
.af-tile-red:hover { border-color: #FECDD3; }

.af-tile-purple .af-tile-icon { background: #F5F3FF; }
.af-tile-purple .af-tile-icon svg { color: #6D28D9; }
.af-tile-purple:hover { border-color: #DDD6FE; }

.af-tile-teal   .af-tile-icon { background: #F0FDFA; }
.af-tile-teal   .af-tile-icon svg { color: #0D9488; }
.af-tile-teal:hover { border-color: #99F6E4; }

.af-tile-amber  .af-tile-icon { background: var(--af-high-soft); }
.af-tile-amber  .af-tile-icon svg { color: #B45309; }
.af-tile-amber:hover { border-color: #FDE68A; }

.af-tile-sky    .af-tile-icon { background: #F0F9FF; }
.af-tile-sky    .af-tile-icon svg { color: #0284C7; }
.af-tile-sky:hover { border-color: #BAE6FD; }

.af-tile-indigo .af-tile-icon { background: #EEF2FF; }
.af-tile-indigo .af-tile-icon svg { color: #4338CA; }
.af-tile-indigo:hover { border-color: #C7D2FE; }

.af-tile-green  .af-tile-icon { background: var(--af-success-soft); }
.af-tile-green  .af-tile-icon svg { color: #15803D; }
.af-tile-green:hover { border-color: #BBF7D0; }

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD — BOTTOM WIDGETS
   ═══════════════════════════════════════════════════════════════════════ */

.af-widgets-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--af-gap);
}
@media (max-width: 1100px) { .af-widgets-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .af-widgets-row { grid-template-columns: 1fr; } }

.af-widget {
    background: var(--af-surface);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-card);
    padding: var(--af-card-pad);
    box-shadow: var(--af-shadow-sm);
}
.af-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.af-widget-title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--af-text-1);
    margin: 0;
    letter-spacing: -.01em;
}
.af-widget-link {
    font-size: .8125rem;
    color: var(--af-primary);
    text-decoration: none;
    font-weight: 500;
}
.af-widget-link:hover { text-decoration: underline; }
.af-widget-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--af-text-3);
}
.af-widget-empty-icon {
    width: 48px;
    height: 48px;
    background: var(--af-surface-soft);
    border: 1px solid var(--af-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.af-widget-empty-icon svg { width: 22px; height: 22px; color: var(--af-text-3); }
.af-widget-empty-text {
    font-size: .875rem;
    font-weight: 500;
    color: var(--af-text-2);
    margin-bottom: 4px;
}
.af-widget-empty-sub { font-size: .8125rem; color: var(--af-text-3); }

/* Severity bars */
.af-sev-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.af-sev-label { font-size: .8125rem; font-weight: 500; width: 66px; flex-shrink: 0; color: var(--af-text-2); }
.af-sev-bar-wrap { flex: 1; height: 8px; background: var(--af-border); border-radius: 4px; overflow: hidden; }
.af-sev-bar { height: 100%; border-radius: 4px; transition: width .5s ease; }
.af-sev-count { font-size: .8125rem; font-weight: 600; width: 32px; text-align: right; color: var(--af-text-1); flex-shrink: 0; }

/* Security posture */
.af-posture-display { text-align: center; padding: 8px 0 4px; }
.af-posture-score {
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    margin-bottom: 6px;
}
.af-posture-label { font-size: .9375rem; font-weight: 600; margin-bottom: 4px; }
.af-posture-sub { font-size: .8125rem; color: var(--af-text-3); }

/* ═══════════════════════════════════════════════════════════════════════
   LOADING SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.af-loading-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--af-gap);
    margin-bottom: 28px;
}
.af-skeleton {
    background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 50%, #E2E8F0 100%);
    background-size: 200% 100%;
    animation: af-shimmer 1.5s infinite;
    border-radius: var(--af-radius-card);
}
.af-skeleton-card { height: 108px; }
@keyframes af-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEGACY / COMPATIBILITY
   ═══════════════════════════════════════════════════════════════════════ */

.content-card {
    background: var(--af-surface);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-card);
    padding: var(--af-card-pad);
    box-shadow: var(--af-shadow-sm);
}
.brand-logo { width: 120px; height: auto; }
.aegis-main-content { padding-top: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   STEP DIAGNOSTICS MODAL  (UiStepDiagnosticsModal)
   ═══════════════════════════════════════════════════════════════════════ */

/* Overlay */
.af-diag-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

/* Modal container */
.af-diag-container {
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
    width: 100%;
    max-width: 680px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.af-diag-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.af-diag-header-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #FEF3C7;
    color: #D97706;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.af-diag-header-text {
    flex: 1;
    min-width: 0;
}

.af-diag-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 4px;
    letter-spacing: -.015em;
    line-height: 1.3;
}

.af-diag-subtitle {
    font-size: .875rem;
    color: #64748B;
    margin: 0;
    line-height: 1.5;
}

.af-diag-close-x {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .14s, color .14s;
    padding: 0;
    margin-top: -4px;
}
.af-diag-close-x:hover { background: #F1F5F9; color: #0F172A; }
.af-diag-close-x:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 2px;
}

/* ── Selector summary card ───────────────────────────────────────────── */
.af-diag-summary-card {
    display: flex;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}

.af-diag-sc-col {
    flex: 1;
    padding: 14px 18px;
    min-width: 0;
}

.af-diag-sc-divider {
    width: 1px;
    background: #E2E8F0;
    flex-shrink: 0;
    margin: 8px 0;
}

.af-diag-sc-label {
    font-size: .6875rem;
    font-weight: 600;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

.af-diag-sc-value {
    font-size: .875rem;
    color: #0F172A;
    font-weight: 500;
    min-height: 24px;
}

.af-diag-selector-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .8rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 5px;
    padding: 3px 7px;
    color: #0F172A;
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
}

.af-diag-empty {
    color: #94A3B8;
    font-weight: 400;
}

.af-diag-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ── Status chips ────────────────────────────────────────────────────── */
.af-chip {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.4;
}
.af-chip-ok       { background: #DCFCE7; color: #15803D; }
.af-chip-danger   { background: #DC2626; color: #FFFFFF; }
.af-chip-medium   { background: #F59E0B; color: #111827; }
.af-chip-fragile  { background: #FFE4E6; color: #BE123C; border: 1px solid #FDA4AF; }
.af-chip-blocked  { background: #1E293B; color: #F8FAFC; }
.af-chip-muted    { background: #64748B; color: #FFFFFF; }
.af-chip-repaired { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }

/* ── Warning callout ─────────────────────────────────────────────────── */
.af-diag-warning-callout {
    display: flex;
    gap: 12px;
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 12px;
    padding: 14px 18px;
    align-items: flex-start;
}

.af-diag-callout-icon {
    color: #D97706;
    flex-shrink: 0;
    margin-top: 1px;
}

.af-diag-callout-body { flex: 1; min-width: 0; }

.af-diag-callout-title {
    font-size: .875rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 4px;
}

.af-diag-callout-text {
    font-size: .875rem;
    color: #334155;
    line-height: 1.5;
}

/* ── Recommended Actions card ────────────────────────────────────────── */
.af-diag-rec-card {
    display: flex;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px;
    align-items: flex-start;
}

.af-diag-rec-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #0F2A5F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.af-diag-rec-body { flex: 1; min-width: 0; }

.af-diag-rec-title {
    font-size: .9375rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 6px;
}

.af-diag-rec-text {
    font-size: .875rem;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 16px;
}

.af-diag-rec-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Primary action button */
.af-diag-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 38px;
    border-radius: 8px;
    background: #0F2A5F;
    color: #FFFFFF;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .14s, box-shadow .14s, transform .14s;
    text-decoration: none;
    white-space: nowrap;
}
.af-diag-btn-primary:hover:not(:disabled) {
    background: #1E3A8A;
    box-shadow: 0 4px 14px rgba(15, 42, 95, 0.30);
    transform: translateY(-1px);
}
.af-diag-btn-primary:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 2px;
}
.af-diag-btn-primary:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Secondary action button */
.af-diag-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 38px;
    border-radius: 8px;
    background: #FFFFFF;
    color: #0F172A;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid #CBD5E1;
    cursor: pointer;
    transition: background .14s, border-color .14s;
    text-decoration: none;
    white-space: nowrap;
}
.af-diag-btn-secondary:hover:not(:disabled) {
    background: #F8FAFC;
    border-color: #94A3B8;
}
.af-diag-btn-secondary:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 2px;
}
.af-diag-btn-secondary:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Technical details (collapsible) ─────────────────────────────────── */
.af-diag-tech {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
}

.af-diag-tech-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size: .875rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    background: #F8FAFC;
    list-style: none;
    user-select: none;
    transition: background .13s;
}
.af-diag-tech-summary::-webkit-details-marker { display: none; }
.af-diag-tech-summary:hover { background: #F1F5F9; }

.af-diag-tech-chevron {
    transition: transform .18s ease;
    flex-shrink: 0;
}
.af-diag-tech[open] .af-diag-tech-chevron {
    transform: rotate(180deg);
}

.af-diag-tech-body {
    padding: 16px;
    border-top: 1px solid #E2E8F0;
}

.af-diag-tech-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: .8125rem;
    align-items: baseline;
}

.af-diag-tech-dl dt {
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

/* ─── Custom confirm dialog (aegis-overlay / aegis-confirm-dialog) ───── */

.aegis-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 17, 31, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: aegis-fade-in 120ms ease-out;
}

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

.aegis-confirm-dialog {
    background: var(--af-surface);
    border-radius: var(--af-radius-card);
    border: 1px solid var(--af-border);
    padding: 28px 32px 24px;
    min-width: 380px;
    max-width: 480px;
    width: 100%;
    box-shadow: var(--af-shadow-lg);
    animation: aegis-slide-up 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes aegis-slide-up {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.aegis-confirm-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.aegis-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.af-diag-tech-dl dd {
    margin: 0;
    color: #0F172A;
    min-width: 0;
    word-break: break-word;
}

.af-diag-tech-error-text {
    color: #DC2626;
    font-style: normal;
}

.af-diag-tech-pre {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .75rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 4px 0 0;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 240px;
    white-space: pre;
    word-break: normal;
    color: #334155;
    line-height: 1.5;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.af-diag-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid #E2E8F0;
    margin-top: 4px;
}

.af-diag-btn-footer-close {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    border-radius: 8px;
    background: #FFFFFF;
    color: #334155;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid #CBD5E1;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}
.af-diag-btn-footer-close:hover { background: #F8FAFC; border-color: #94A3B8; }
.af-diag-btn-footer-close:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .af-diag-container {
        padding: 20px 16px;
        max-width: calc(100vw - 24px);
        gap: 16px;
        max-height: calc(100vh - 32px);
    }

    .af-diag-summary-card {
        flex-direction: column;
    }

    .af-diag-sc-divider {
        width: auto;
        height: 1px;
        margin: 0 8px;
    }

    .af-diag-sc-col:not(:first-child) {
        padding-top: 10px;
    }

    .af-diag-rec-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .af-diag-btn-primary,
    .af-diag-btn-secondary {
        justify-content: center;
        width: 100%;
    }

    .af-diag-tech-dl {
        grid-template-columns: 1fr;
    }
}

/* ─── Blazor Error UI ─── */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}