/* Premium visual system: loaded last so it can unify legacy template styles. */

:root {
    --ui-font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --ui-bg: #111315;
    --ui-bg-alt: #171a1f;
    --ui-surface: #1d2127;
    --ui-surface-raised: #242932;
    --ui-border: #353c47;
    --ui-border-strong: #475364;
    --ui-text: #ecf1f8;
    --ui-text-muted: #b4bfce;
    --ui-text-dim: #94a2b6;
    --ui-accent: #36a9f5;
    --ui-accent-strong: #1f89e0;
    --ui-accent-soft: rgba(54, 169, 245, 0.16);
    --ui-success: #27b071;
    --ui-warning: #cf8c1e;
    --ui-danger: #d64b4b;
    --ui-radius: 6px;
    --ui-radius-sm: 4px;
    --ui-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    --ui-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.28);
    --ui-text-size: 0.9rem;
    --ui-text-size-sm: 0.8125rem;
    --ui-text-size-xs: 0.75rem;
    --ui-control-height: 2.4rem;
    --ui-control-height-sm: 2rem;
}

html,
body {
    font-family: var(--ui-font-family) !important;
    color: var(--ui-text) !important;
    letter-spacing: 0;
}

body {
    background: linear-gradient(180deg, var(--ui-bg-alt) 0%, var(--ui-bg) 100%) !important;
    font-size: var(--ui-text-size);
    font-weight: 400;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    font-family: var(--ui-font-family) !important;
    letter-spacing: 0;
}

.gradient-text {
    color: #dce7f5 !important;
}

.text-muted,
.form-text {
    color: var(--ui-text-muted) !important;
}

.navbar {
    background: rgba(22, 25, 31, 0.9) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    backdrop-filter: blur(6px);
}

.navbar-brand {
    font-weight: 700 !important;
    color: #f4f8ff !important;
}

.app-brand {
    letter-spacing: 0;
}

.navbar .nav-link {
    margin-right: 0.28rem;
    border-radius: var(--ui-radius-sm) !important;
    padding: 0.5rem 0.8rem !important;
    color: var(--ui-text-muted) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
}

.navbar .nav-link:hover {
    background: var(--ui-accent-soft) !important;
    color: #e4f2ff !important;
}

.navbar .nav-link.active {
    background: rgba(54, 169, 245, 0.14) !important;
    border: 1px solid rgba(95, 186, 246, 0.32);
    color: #f4f9ff !important;
}

.user-chip {
    display: inline-flex !important;
    align-items: center;
}

.card {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
}
/* While a dropdown inside a card is open, let it escape the card's
   overflow clip (rounded-corner clipping restored on close). */
.card:has(.dropdown-menu.show) {
    overflow: visible;
}

.card:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-shadow-hover) !important;
}

.card-header {
    background: #232932 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    min-height: 40px;
}

.card-header h5,
.card-header h6 {
    font-weight: 700 !important;
}

.card-body {
    background: transparent !important;
}

.btn {
    border-radius: var(--ui-radius-sm) !important;
    border-width: 1px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    min-height: var(--ui-control-height);
    padding: 0.5rem 0.9rem !important;
    box-shadow: none !important;
    transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease, box-shadow 130ms ease !important;
}

.btn:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(54, 169, 245, 0.28) !important;
}

.btn-primary {
    background: var(--ui-accent-strong) !important;
    border-color: var(--ui-accent-strong) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background: #2c96ea !important;
    border-color: #2c96ea !important;
}

.btn-outline-primary {
    border-color: rgba(96, 188, 248, 0.6) !important;
    color: #a8dbff !important;
    background: rgba(54, 169, 245, 0.05) !important;
}

.btn-outline-primary:hover {
    background: rgba(54, 169, 245, 0.12) !important;
    border-color: #6ec8ff !important;
    color: #eff8ff !important;
}

.btn-outline-secondary,
.btn-secondary {
    border-color: #566274 !important;
    color: #d0d9e6 !important;
    background: rgba(91, 103, 120, 0.06) !important;
}

.btn-outline-secondary:hover,
.btn-secondary:hover {
    border-color: #70839b !important;
    background: rgba(112, 131, 155, 0.14) !important;
    color: #f2f7ff !important;
}

.btn-outline-success {
    border-color: rgba(39, 176, 113, 0.62) !important;
    color: #8fe3be !important;
    background: rgba(39, 176, 113, 0.04) !important;
}

.btn-outline-success:hover {
    background: rgba(39, 176, 113, 0.12) !important;
    border-color: #4dcd92 !important;
    color: #effff7 !important;
}

.btn-outline-warning {
    border-color: rgba(207, 140, 30, 0.7) !important;
    color: #f5d79f !important;
    background: rgba(207, 140, 30, 0.04) !important;
}

.btn-outline-warning:hover {
    background: rgba(207, 140, 30, 0.12) !important;
    border-color: #e8ab4f !important;
    color: #fff8eb !important;
}

.btn-outline-danger {
    border-color: rgba(214, 75, 75, 0.65) !important;
    color: #f4b4b4 !important;
    background: rgba(214, 75, 75, 0.04) !important;
}

.btn-outline-danger:hover {
    background: rgba(214, 75, 75, 0.12) !important;
    border-color: #e96f6f !important;
    color: #fff2f2 !important;
}

.form-control,
.form-select,
textarea.form-control {
    background: #141920 !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    border-radius: var(--ui-radius-sm) !important;
    min-height: var(--ui-control-height);
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: #69c4ff !important;
    box-shadow: 0 0 0 3px rgba(54, 169, 245, 0.22) !important;
    background: #171d26 !important;
}

.form-label {
    color: #d5dfee !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
}

.nav-tabs {
    border-bottom: 1px solid var(--ui-border) !important;
    gap: 0.24rem;
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
    color: var(--ui-text-dim);
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    transition: all 130ms ease;
}

.nav-tabs .nav-link:hover {
    color: #e9f2fe;
    background: rgba(74, 89, 109, 0.2);
    border-color: rgba(71, 83, 100, 0.5);
}

.nav-tabs .nav-link.active {
    color: #eff7ff !important;
    background: #2a313d !important;
    border-color: var(--ui-border) !important;
    border-bottom-color: #2a313d !important;
}

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.34rem 0.5rem !important;
    border-radius: 7px;
    background: rgba(71, 84, 102, 0.16);
    border: 1px solid rgba(71, 84, 102, 0.48);
    margin-bottom: 0.65rem !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #7f90a7;
    padding-right: 0.28rem !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #c9d8ea !important;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #f0f7ff !important;
}

.table {
    border-color: var(--ui-border) !important;
}

.table thead th {
    background: #2b3340 !important;
    color: #eaf2ff !important;
    border-bottom: 1px solid #4d5b70 !important;
    border-right: 1px solid rgba(77, 91, 112, 0.35);
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0;
}

.table thead th:last-child {
    border-right: none;
}

.table tbody td {
    color: #d6dfec !important;
    border-top: 1px solid rgba(67, 76, 91, 0.56) !important;
}

.table-hover tbody tr:hover {
    background: rgba(95, 143, 193, 0.14) !important;
}

.table-responsive {
    border-radius: 0 0 8px 8px;
}

.table-drag-handle {
    cursor: move;
}

.row-clickable {
    cursor: pointer;
}

/* Active sort-direction caret in a sortable column header. The header links
   used to render an empty conditional here, so which column was sorted — and
   in which direction — was invisible. */
.sort-caret {
    font-size: 0.7em;
    opacity: 0.85;
    margin-left: 0.15rem;
    vertical-align: baseline;
}

.badge {
    border-radius: var(--ui-radius-sm) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    padding: 0.3em 0.55em !important;
}

.badge.rounded-pill,
.rounded-pill.badge {
    border-radius: 999px !important;
}

/* Badge text is 0.72rem — small text, so every fill below must clear 4.5:1
   against the white it forces. Measured contrast on white in the comments;
   warning and info were 3.65:1 and 3.83:1 before and are darkened here. */
.badge.bg-success { background: #247c4f !important; color: #fff !important; }   /* 5.16:1 */
.badge.bg-warning { background: #9a6410 !important; color: #fff !important; }   /* 4.99:1 */
.badge.bg-danger { background: #b93f3f !important; color: #fff !important; }    /* 5.46:1 */
.badge.bg-info { background: #1a72b1 !important; color: #fff !important; }      /* 5.14:1 */
.badge.bg-secondary { background: #58657a !important; color: #fff !important; } /* 5.99:1 */

.dropdown-menu {
    background: #222932 !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34) !important;
}

.dropdown-item {
    color: #d3deee !important;
    border-radius: var(--ui-radius-sm);
    margin: 0.08rem 0.22rem;
    width: auto;
    font-size: 0.8125rem !important;
}

.dropdown-item:hover {
    background: rgba(65, 84, 108, 0.5) !important;
    color: #f3f8ff !important;
}

.alert-menu {
    min-width: 330px;
    max-width: 390px;
}

.alert-bell-icon {
    font-size: 1rem;
}

.alert-bell-badge {
    top: 0.15rem;
    right: 0;
    min-width: 1.1rem;
    padding: 0.2em 0.42em !important;
}

.modal-content {
    background: #1f252d !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(76, 89, 107, 0.62) !important;
}

.alert {
    border-radius: var(--ui-radius) !important;
    border-width: 1px !important;
    font-size: 0.875rem !important;
}

.pagination .page-link {
    background: #212731 !important;
    border-color: #3c4656 !important;
    color: #d3deee !important;
}

.pagination .page-link:hover {
    background: #2a3443 !important;
    color: #fff !important;
}

.pagination .page-item.active .page-link {
    background: #2f8fdf !important;
    border-color: #2f8fdf !important;
    color: #fff !important;
}

.page-shell {
    max-width: 1660px;
    margin: 0 auto;
    padding-bottom: 1rem;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.65rem;
}

.page-title {
    margin-bottom: 0.14rem !important;
    font-size: 1.24rem !important;
    font-weight: 700 !important;
    color: #f2f6fd !important;
}

.page-subtitle {
    margin-bottom: 0 !important;
    color: var(--ui-text-muted) !important;
    font-size: 0.84rem !important;
}

.tenant-workspace-hero,
.detail-page-header,
.tenant-tabs-shell {
    background: linear-gradient(180deg, rgba(39, 45, 56, 0.92) 0%, rgba(28, 33, 41, 0.96) 100%);
    border: 1px solid var(--ui-border);
    border-radius: calc(var(--ui-radius) + 2px);
    box-shadow: var(--ui-shadow);
}


.tenant-workspace-hero__eyebrow,
.detail-page-header__eyebrow,
.tenant-tabs-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ui-text-dim);
}


.workspace-stat {
    padding: 0.62rem 0.72rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(110, 129, 156, 0.22);
    border-radius: var(--ui-radius-sm);
    text-align: left;
}

.workspace-stat__label {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--ui-text-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.workspace-stat__value {
    display: block;
    color: #f3f8ff;
    font-size: 1.02rem;
    line-height: 1.1;
    font-weight: 700;
}

.dashboard-summary-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.tenant-ops-board {
    background: linear-gradient(180deg, rgba(34, 39, 48, 0.94) 0%, rgba(26, 31, 38, 0.98) 100%);
    border: 1px solid rgba(90, 105, 124, 0.22);
    border-radius: calc(var(--ui-radius) + 2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    padding: 0.6rem 0.7rem 0.65rem;
}

.tenant-ops-board__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.tenant-ops-board__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--ui-text-dim);
}

.tenant-ops-board__title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 0.15rem 0 0.25rem;
}

.tenant-ops-board__title {
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    font-size: 1.08rem !important;
    color: #f2f7ff !important;
    line-height: 1.15;
}

.tenant-ops-board__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--ui-text-muted);
    font-size: 0.8rem;
}

.tenant-ops-board__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(280px, 0.9fr);
    gap: 0.7rem;
}

/* Full-width overview: main content stacked, side panels moved to bottom row */
.overview-stack {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.overview-bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.overview-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.overview-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.overview-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.overview-trend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.overview-quick-card {
    display: block;
    position: relative;
    padding: 0.72rem 0.8rem;
    background: rgba(255, 255, 255, 0.024);
    border: 1px solid rgba(90, 105, 124, 0.18);
    border-radius: var(--ui-radius-sm);
    color: inherit;
    text-decoration: none;
}

.overview-quick-card:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(95, 186, 246, 0.32);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    color: inherit;
}

.overview-quick-card__chevron {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    font-size: 1.05rem;
    color: var(--ui-text-dim);
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.overview-quick-card:hover .overview-quick-card__chevron {
    opacity: 1;
    color: rgba(95, 186, 246, 0.9);
}

.overview-quick-card__label i {
    color: rgba(95, 186, 246, 0.75);
    font-size: 0.78rem;
}

.overview-quick-card__label,
.overview-quick-card__hint {
    display: block;
}

.overview-quick-card__label {
    color: var(--ui-text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.18rem;
}

.overview-quick-card__value {
    display: block;
    color: #f4f8ff;
    font-size: 1.08rem;
    line-height: 1.05;
    margin-bottom: 0.2rem;
}

.overview-quick-card__hint {
    color: var(--ui-text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.mini-trend-summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    color: var(--ui-text-muted);
    font-size: 0.77rem;
    margin-bottom: 0.55rem;
}

.mini-trend-summary strong {
    color: #eef5ff;
}

.mini-trend-bars {
    display: grid;
    grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 0.18rem;
    align-items: end;
    min-height: 64px;
}

.mini-trend-bar {
    height: 64px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
}

.mini-trend-bar__fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(54, 169, 245, 0.9) 0%, rgba(95, 186, 246, 0.96) 100%);
}

/* Quarantined share overlays the mail bar from the bottom (quarantine ⊆ mail) */
.mini-trend-bar__fill--quarantine {
    background: linear-gradient(180deg, rgba(232, 182, 70, 0.92) 0%, rgba(210, 153, 34, 0.96) 100%);
}

.mini-trend-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.72rem;
    color: var(--ui-text-dim);
}

.mini-trend-legend__chip {
    display: inline-block;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 3px;
}

.mini-trend-legend__chip--mail {
    background: rgba(95, 186, 246, 0.92);
}

.mini-trend-legend__chip--quarantine {
    background: rgba(232, 182, 70, 0.92);
    margin-left: 0.45rem;
}

.mini-trend-legend__chip--released {
    background: rgba(84, 200, 105, 0.92);
    margin-left: 0.45rem;
}

.mini-trend-bar__fill--released {
    background: linear-gradient(180deg, rgba(95, 214, 117, 0.92) 0%, rgba(63, 185, 80, 0.96) 100%);
}

/* AI verdict mix: single segmented distribution bar + legend */
.ai-verdict-bar {
    display: flex;
    height: 0.55rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    gap: 1px;
}

.ai-verdict-bar__seg {
    display: block;
    height: 100%;
}

.ai-verdict-bar__seg--tp           { background: rgba(228, 96, 96, 0.95); }
.ai-verdict-bar__seg--fp           { background: rgba(86, 184, 250, 0.95); }
.ai-verdict-bar__seg--benign       { background: rgba(84, 200, 105, 0.95); }
.ai-verdict-bar__seg--inconclusive { background: rgba(140, 154, 175, 0.85); }
.ai-verdict-bar__seg--error        { background: rgba(226, 174, 61, 0.95); }

.ai-verdict-legend {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--ui-text-muted);
    font-size: 0.78rem;
}

.ai-verdict-legend li {
    display: flex;
    align-items: center;
}

.ai-verdict-legend strong {
    margin-left: auto;
    color: #edf5ff;
    font-variant-numeric: tabular-nums;
}

/* Multi-select filter dropdown (seg-msel) */
.seg-msel__btn {
    min-height: var(--ui-control-height-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(90, 105, 124, 0.32);
    color: #c9d4e4;
    font-size: var(--ui-text-size-sm);
}

.seg-msel__btn:hover,
.seg-msel__btn:focus,
.seg-msel.show .seg-msel__btn {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(95, 186, 246, 0.4);
    color: #eef5ff;
}

.seg-msel__btn.is-active {
    border-color: rgba(95, 186, 246, 0.55);
    color: #eef5ff;
}

.seg-msel__count {
    display: inline-block;
    min-width: 1.15rem;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(95, 186, 246, 0.22);
    color: #9fd4ff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.seg-msel__menu {
    min-width: 13rem;
    max-height: 310px;
    overflow-y: auto;
    background: rgba(28, 33, 41, 0.99);
    border: 1px solid rgba(90, 105, 124, 0.35);
    border-radius: var(--ui-radius-sm);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    padding: 0.3rem;
}

.seg-msel__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.34rem 0.5rem;
    border-radius: 6px;
    color: #c9d4e4;
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
}

.seg-msel__item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #eef5ff;
}

.seg-msel__item .form-check-input {
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.seg-msel__clear {
    display: block;
    width: 100%;
    padding: 0.34rem 0.5rem;
    margin-bottom: 0.2rem;
    border: 0;
    border-bottom: 1px solid rgba(90, 105, 124, 0.25);
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--ui-text-dim);
    font-size: 0.74rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.seg-msel__clear:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #eef5ff;
}

.mini-trend-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    color: var(--ui-text-dim);
    font-size: 0.68rem;
    letter-spacing: 0.03em;
}

.line-chart {
    width: 100%;
    position: relative;   /* anchors the hover tooltip */
}

.line-chart__peak {
    position: absolute;
    top: 2px;
    left: 4px;
    color: var(--ui-text-dim);
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}

.line-chart__cursor {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}

.line-chart__hoverdot {
    pointer-events: none;
}

.line-chart__tip {
    position: absolute;
    top: 4px;
    z-index: 10;
    min-width: 8.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--ui-radius-sm);
    background: rgba(22, 26, 33, 0.97);
    border: 1px solid rgba(90, 105, 124, 0.4);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    font-size: 0.74rem;
    color: #c9d4e4;
    pointer-events: none;
    white-space: nowrap;
}

.line-chart__tip-day {
    color: var(--ui-text-dim);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.22rem;
}

.line-chart__tip-row {
    display: flex;
    align-items: center;
    gap: 0.38rem;
}

.line-chart__tip-row + .line-chart__tip-row {
    margin-top: 0.14rem;
}

.line-chart__tip-row strong {
    margin-left: auto;
    padding-left: 0.7rem;
    color: #eef5ff;
    font-variant-numeric: tabular-nums;
}

.line-chart__tip-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.line-chart__svg {
    display: block;
    width: 100%;
    height: 130px;
}

.line-chart__grid {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
}

.domain-scroll {
    max-height: 396px;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.domain-new-chip {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.02rem 0.3rem;
    border-radius: 999px;
    background: rgba(226, 174, 61, 0.18);
    color: #ecc56a;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    vertical-align: 0.1rem;
}

/* "This week" digest strip on the ops board */
.tenant-pulse {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(90, 105, 124, 0.18);
}

.tenant-pulse__title {
    color: var(--ui-text-dim);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-right: 0.2rem;
}

.tenant-pulse__item {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(90, 105, 124, 0.2);
    color: #c9d4e4;
    font-size: 0.74rem;
}

.tenant-pulse__item i {
    color: var(--ui-text-dim);
    font-size: 0.72rem;
}

.tenant-pulse__item--info {
    border-color: rgba(86, 184, 250, 0.35);
}

.tenant-pulse__item--info i {
    color: rgba(86, 184, 250, 0.85);
}

.tenant-pulse__item--warn {
    border-color: rgba(226, 174, 61, 0.4);
    background: rgba(226, 174, 61, 0.07);
}

.tenant-pulse__item--warn i {
    color: rgba(226, 174, 61, 0.9);
}

.tenant-pulse__item--ok {
    border-color: rgba(84, 200, 105, 0.4);
    background: rgba(84, 200, 105, 0.06);
}

.tenant-pulse__item--ok i {
    color: rgba(84, 200, 105, 0.9);
}

.tenant-pulse__item--muted {
    color: var(--ui-text-muted);
}

.ai-verdict-note {
    margin-top: 0.55rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--ui-radius-sm);
    font-size: 0.75rem;
    line-height: 1.35;
}

.ai-verdict-note--ok {
    background: rgba(84, 200, 105, 0.07);
    border: 1px solid rgba(84, 200, 105, 0.25);
    color: #a9dfb6;
}

.ai-verdict-note--warn {
    background: rgba(226, 174, 61, 0.08);
    border: 1px solid rgba(226, 174, 61, 0.32);
    color: #e7c987;
}

.ai-verdict-note--danger {
    background: rgba(228, 96, 96, 0.09);
    border: 1px solid rgba(228, 96, 96, 0.38);
    color: #f1a2a2;
}

.ai-verdict-note__coverage {
    color: var(--ui-text-muted);
    font-size: 0.72rem;
}

.ai-verdict-note__link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.ai-verdict-note__link:hover {
    color: #eef5ff;
}

a.tenant-pulse__item {
    text-decoration: none;
}

a.tenant-pulse__item:hover {
    border-color: rgba(226, 174, 61, 0.6);
    color: #eef5ff;
}

.fp-backlog-card {
    border-left: 3px solid rgba(226, 174, 61, 0.6);
}

.ai-verdict-remediation {
    margin-top: 0.55rem;
    color: var(--ui-text-muted);
    font-size: 0.76rem;
}

.ai-verdict-remediation strong {
    color: #edf5ff;
    font-variant-numeric: tabular-nums;
}

/* Overview chart-range selector (ops board header) */
.overview-range {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    flex-wrap: wrap;
}

.overview-range__btn {
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(90, 105, 124, 0.28);
    background: rgba(255, 255, 255, 0.02);
    color: var(--ui-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.overview-range__btn:hover {
    border-color: rgba(95, 186, 246, 0.4);
    color: #eef5ff;
}

.overview-range__btn.is-active {
    border-color: rgba(95, 186, 246, 0.55);
    background: rgba(95, 186, 246, 0.14);
    color: #9fd4ff;
}

.threat-mix-list,
.release-activity-list {
    list-style: none;
    padding: 0;
}

.threat-mix-list li + li,
.release-activity-list li + li {
    margin-top: 0.7rem;
}

.threat-mix-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.24rem;
}

.threat-mix-list__row strong,
.release-activity-list strong {
    color: #eef5ff;
    font-size: 0.8rem;
}

.threat-mix-list__row span,
.release-activity-list span {
    color: var(--ui-text-muted);
    font-size: 0.75rem;
}

.threat-mix-bar {
    height: 0.38rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.threat-mix-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: rgba(120, 134, 156, 0.85);
}

.threat-mix-bar .threat-mix-bar__fill--danger  { background: linear-gradient(90deg, rgba(214, 75, 75, 0.92) 0%, rgba(236, 109, 109, 0.95) 100%); }
.threat-mix-bar .threat-mix-bar__fill--warning { background: linear-gradient(90deg, rgba(210, 153, 34, 0.92) 0%, rgba(232, 182, 70, 0.95) 100%); }
.threat-mix-bar .threat-mix-bar__fill--info    { background: linear-gradient(90deg, rgba(54, 169, 245, 0.92) 0%, rgba(104, 198, 255, 0.95) 100%); }
.threat-mix-bar .threat-mix-bar__fill--success { background: linear-gradient(90deg, rgba(63, 185, 80, 0.92) 0%, rgba(95, 214, 117, 0.95) 100%); }
.threat-mix-bar .threat-mix-bar__fill--neutral { background: rgba(120, 134, 156, 0.85); }

.threat-mix-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: 0.02rem;
}

.threat-mix-dot--danger  { background: rgba(228, 96, 96, 0.95); }
.threat-mix-dot--warning { background: rgba(226, 174, 61, 0.95); }
.threat-mix-dot--info    { background: rgba(86, 184, 250, 0.95); }
.threat-mix-dot--success { background: rgba(84, 200, 105, 0.95); }
.threat-mix-dot--neutral { background: rgba(140, 154, 175, 0.9); }

.release-activity-list li {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

.ops-metric-card {
    padding: 0.55rem 0.68rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(90, 105, 124, 0.18);
    border-left-width: 3px;
    border-radius: var(--ui-radius-sm);
    min-width: 0;
}

.ops-metric-card--mail     { border-left-color: rgba(86, 184, 250, 0.7); }
.ops-metric-card--pressure { border-left-color: rgba(226, 174, 61, 0.7); }
.ops-metric-card--insights { border-left-color: rgba(104, 198, 255, 0.55); }
.ops-metric-card--policy   { border-left-color: rgba(140, 154, 175, 0.55); }

.ops-delta {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.05rem 0.34rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ui-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    vertical-align: 0.18rem;
    letter-spacing: 0.02em;
}

.ops-delta--up   { background: rgba(86, 184, 250, 0.14); color: #8fcdfb; }
.ops-delta--down { background: rgba(140, 154, 175, 0.14); color: #aab8cc; }
.ops-delta--bad  { background: rgba(228, 96, 96, 0.16);  color: #f1a2a2; }
.ops-delta--good { background: rgba(84, 200, 105, 0.16); color: #8fdda1; }

.ops-metric-card__label {
    color: var(--ui-text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.22rem;
}

.ops-metric-card__value {
    color: #f4f8ff;
    font-size: 1.14rem;
    line-height: 1.05;
    font-weight: 700;
    margin-bottom: 0.14rem;
}

.ops-metric-card__subtext {
    color: var(--ui-text-muted);
    font-size: 0.74rem;
    margin-bottom: 0.35rem;
}

.ops-meter,
.ops-meter-stack {
    height: 0.38rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.ops-meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(63, 185, 80, 0.92) 0%, rgba(95, 214, 117, 0.96) 100%);
}

.ops-meter--warning span {
    background: linear-gradient(90deg, rgba(210, 153, 34, 0.9) 0%, rgba(232, 182, 70, 0.95) 100%);
}

.ops-meter--info span {
    background: linear-gradient(90deg, rgba(54, 169, 245, 0.92) 0%, rgba(104, 198, 255, 0.96) 100%);
}

.ops-metric-card__triplet {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    color: var(--ui-text-muted);
    font-size: 0.76rem;
    margin-bottom: 0.45rem;
}

.ops-metric-card__triplet strong {
    color: #edf5ff;
    font-weight: 700;
}

.ops-footprint {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    color: var(--ui-text-muted);
    font-size: 0.78rem;
    margin-top: 0.1rem;
}

.ops-footprint li {
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.ops-footprint strong {
    margin-left: auto;
    color: #edf5ff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ops-footprint__dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ops-footprint__dot--rules      { background: rgba(54, 169, 245, 0.94); }
.ops-footprint__dot--users      { background: rgba(63, 185, 80, 0.94); }
.ops-footprint__dot--recipients { background: rgba(210, 153, 34, 0.94); }

.attention-list,
.setup-checklist,
.health-snapshot {
    list-style: none;
    padding: 0;
}

.attention-list li,
.setup-checklist li,
.health-snapshot li {
    display: flex;
    gap: 0.65rem;
}

.attention-list li + li,
.setup-checklist li + li,
.health-snapshot li + li {
    margin-top: 0.7rem;
}

.attention-list__icon {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
    margin-top: 0.05rem;
}

.attention-list li div,
.setup-checklist li div {
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
    min-width: 0;
}

.attention-list li strong,
.setup-checklist li strong,
.health-snapshot strong {
    color: #eef5ff;
    font-weight: 600;
}

.attention-list li span,
.setup-checklist li span {
    color: var(--ui-text-muted);
    font-size: 0.77rem;
    line-height: 1.35;
}

.overview-fact-list {
    display: grid;
    gap: 0.6rem;
}

.overview-fact-list div {
    display: grid;
    gap: 0.15rem;
}

.overview-fact-list dt {
    color: var(--ui-text-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.overview-fact-list dd {
    margin: 0;
    color: #eef5ff;
    font-size: 0.84rem;
    line-height: 1.35;
}

.overview-progress {
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.overview-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(54, 169, 245, 0.94) 0%, rgba(113, 206, 255, 0.96) 100%);
    border-radius: 999px;
}

.setup-complete {
    display: flex;
    align-items: center;
    color: #a9dfb6;
    font-size: 0.82rem;
}

.setup-complete i {
    color: var(--ui-success);
}

.threat-mix-list__clickable {
    cursor: pointer;
    border-radius: 6px;
    margin: 0 -0.3rem;
    padding: 0.15rem 0.3rem;
}

.threat-mix-list__clickable:hover {
    background: rgba(255, 255, 255, 0.04);
}

.setup-checklist li.is-done i {
    color: var(--ui-success);
}

.setup-checklist li.is-pending i {
    color: var(--ui-text-dim);
}

.setup-checklist i {
    flex: 0 0 auto;
    margin-top: 0.08rem;
}

.health-snapshot li {
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--ui-text-muted);
}

.health-snapshot li > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.health-snapshot strong {
    font-variant-numeric: tabular-nums;
}

.health-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.health-dot--ok      { background: rgba(84, 200, 105, 0.95); box-shadow: 0 0 6px rgba(84, 200, 105, 0.35); }
.health-dot--warn    { background: rgba(226, 174, 61, 0.95); box-shadow: 0 0 6px rgba(226, 174, 61, 0.35); }
.health-dot--bad     { background: rgba(228, 96, 96, 0.95); box-shadow: 0 0 6px rgba(228, 96, 96, 0.35); }
.health-dot--neutral { background: rgba(140, 154, 175, 0.75); }

/* Recent Activity facts: two-column grid reduces vertical raggedness */
.overview-fact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.9rem;
}

.overview-fact-list dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Long subjects in release feed truncate instead of wrapping the card */
.release-activity-list strong,
.release-activity-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-metric-card__value {
    font-variant-numeric: tabular-nums;
}

.overview-quick-card__value {
    font-variant-numeric: tabular-nums;
}

.health-snapshot li {
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(90, 105, 124, 0.16);
}

.health-snapshot li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

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

.page-actions {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.section-card .card-header {
    padding: 0.58rem 0.75rem !important;
}

.section-title {
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    font-size: 0.84rem !important;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.empty-state {
    text-align: center;
    padding: 2.25rem 1rem;
    color: var(--ui-text-muted);
}

.detail-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.65rem;
}

.detail-page-header h1 {
    margin: 0.15rem 0 0.2rem !important;
    padding: 0 !important;
    text-decoration: none !important;
    font-size: 1.28rem !important;
    color: #f4f8ff !important;
}

.detail-page-header__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.detail-page-header__stamp {
    color: var(--ui-text-dim);
    font-size: 0.78rem;
}

.empty-state h4,
.empty-state h5 {
    margin-top: 0.58rem;
    margin-bottom: 0.34rem;
}

.filter-toolbar {
    display: flex;
    /* wrap + visible (was nowrap + overflow:auto): the scroll container
       clipped Bootstrap dropdown menus, making multi-select filters
       unusable — menus opened inside the scrollable strip. */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.36rem;
    overflow: visible;
    padding: 0.14rem 0;
}

.filter-toolbar .form-control,
.filter-toolbar .form-select,
.filter-toolbar .btn {
    font-size: 0.8125rem !important;
}

.filter-w-110 { width: 110px; }
.filter-w-120 { width: 120px; }
.filter-w-140 { width: 140px; }
.filter-w-150 { width: 150px; }
.filter-w-180 { width: 180px; }
.filter-w-auto { width: auto; }

/* --- Filter toolbar polish + active-filter pills + new-mail pill (2026-07-03) --- */
.filter-toolbar .dropdown-toggle,
.filter-toolbar .form-select,
.filter-toolbar .form-control {
    border-radius: var(--ui-radius-sm) !important;
}
.filter-toolbar .dropdown-toggle .badge { font-size: 0.7rem; }

/* Active-filter chips: appear below the toolbar ONLY when filters are applied, so an
   operator can see + remove each filter at a glance instead of hunting the dropdowns.
   Related values are grouped under one label ("Threat  Phishing  Malware") rather than
   repeating the group name on every chip. Hover changes color only (no movement). */
.active-filter-pills {
    display: none;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ui-border);
    align-items: center;
}
.active-filter-pills.has-pills { display: flex; }

.filter-pills__lead {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ui-text-dim);
    margin-right: 0.1rem;
}

/* A group binds a label to the value chips that belong to it. */
.filter-chip-group {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.1rem 0.3rem 0.1rem 0.4rem;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
}
.filter-chip-group__label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ui-text-dim);
    padding-left: 0.12rem;
}
.filter-chip-group[data-group="threat"] { border-color: rgba(54, 169, 245, 0.3); }
.filter-chip-group[data-group="threat"] .filter-chip-group__label { color: var(--ui-accent); }

/* A single removable value chip. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.12rem 0.2rem 0.12rem 0.55rem;
    font-size: var(--ui-text-size-xs);
    line-height: 1.5;
    color: var(--ui-text);
    background: var(--ui-accent-soft);
    border: 1px solid rgba(54, 169, 245, 0.32);
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.filter-chip--solo {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--ui-border-strong);
    padding-left: 0.6rem;
}
.filter-chip__label { opacity: 0.96; }
.filter-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border: 0;
    background: transparent;
    color: var(--ui-text-dim);
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.12s ease, background-color 0.12s ease;
}
.filter-chip__x:hover { color: var(--ui-text); background: rgba(255, 255, 255, 0.12); }
.filter-chip:hover { border-color: rgba(54, 169, 245, 0.6); }
.filter-chip--solo:hover { border-color: var(--ui-text-dim); }

.filter-chip--clear-all {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ui-text-dim);
    padding: 0.14rem 0.55rem;
    font-size: var(--ui-text-size-xs);
    border-radius: 999px;
    cursor: pointer;
    margin-left: 0.15rem;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.filter-chip--clear-all:hover { color: var(--ui-text); border-color: var(--ui-border-strong); }

/* --- M365-style condition builder (2026-07-05) --- */
.filter-builder { margin-top: 0.5rem; }
/* One control row: range · [custom dates] · | · field · op · value · Add · (rows+clear pushed right).
   Wraps only when the viewport is genuinely too narrow. */
.filter-builder__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.filter-builder .form-select,
.filter-builder .form-control { font-size: 0.8125rem !important; }
.filter-builder__sep { color: var(--ui-text-dim); }
.filter-builder__custom-dates { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Thin vertical divider between the date window and the add-condition group. */
.filter-builder__divider {
    width: 1px;
    align-self: stretch;
    min-height: 1.6rem;
    background: var(--ui-border);
    margin: 0 0.15rem;
}
.filter-builder__range { width: 140px; }
.filter-builder__field { width: 175px; }
.filter-builder__op { width: 140px; }
.filter-builder__value { width: 200px; }
.filter-builder__value-select { width: 175px; }
.filter-builder__value-select[multiple] { padding: 0.15rem 0.35rem; }
.filter-builder__add-btn { flex: 0 0 auto; }
/* Rows-per-page + Clear ride at the far right of the row. */
.filter-builder__tail {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}
@media (max-width: 820px) {
    .filter-builder__divider { display: none; }
    .filter-builder__tail { margin-left: 0; }
    .filter-builder__range, .filter-builder__field, .filter-builder__op,
    .filter-builder__value, .filter-builder__value-select { width: 100%; }
}

/* New-mail pill: non-intrusive "N new — Refresh" button that REPLACES the old 60s
   full-page auto-reload. Sticky at the top of the pane; click = in-place refresh. */
.new-mail-pill {
    display: block;
    margin: 0.5rem auto;
    padding: 0.3rem 0.9rem;
    font-size: var(--ui-text-size-sm);
    font-weight: 600;
    color: #fff;
    background: var(--ui-accent-strong);
    border: 1px solid var(--ui-accent);
    border-radius: 999px;
    box-shadow: var(--ui-shadow);
    cursor: pointer;
    position: sticky;
    top: 0.4rem;
    z-index: 5;
}
.new-mail-pill:hover { background: var(--ui-accent); }
.new-mail-pill[hidden] { display: none; }

/* Briefly highlight rows that just flowed in via the live poller, then fade to normal.
   Background-color only (no movement) so it doesn't shift the operator's reading. */
.row-flash-new > td { animation: segRowFlash 2.2s ease-out; }
@keyframes segRowFlash {
    from { background-color: var(--ui-accent-soft); }
    to   { background-color: transparent; }
}

.tenant-detail-page .tab-content {
    background: transparent !important;
    padding-top: 0.15rem;
}

.tenant-detail-page #tenantTabContent > .tab-pane > .card,
.tenant-detail-page #tenantTabContent > .tab-pane > .row > div > .card,
.tenant-detail-page #tenantTabContent > .tab-pane > .card.shadow-sm,
.tenant-detail-page #tenantTabContent > .tab-pane > .row.g-2 > div > .card {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

.tenant-detail-page .card-header,
.tenant-detail-page .card-header.bg-primary,
.tenant-detail-page .card-header.text-white {
    background: linear-gradient(180deg, rgba(40, 46, 56, 0.96) 0%, rgba(30, 35, 43, 0.98) 100%) !important;
    color: #eef5ff !important;
    border-bottom: 1px solid rgba(90, 105, 124, 0.28) !important;
}

.tenant-detail-page .card-header h3,
.tenant-detail-page .card-header h5,
.tenant-detail-page .card-header h6,
.tenant-detail-page .card-header .gradient-text {
    color: #edf4ff !important;
    margin-bottom: 0 !important;
    text-decoration: none !important;
}

.tenant-detail-page .card-header h3 {
    font-size: 1rem !important;
}

.tenant-detail-page .card-header h6 {
    font-size: 0.84rem !important;
    letter-spacing: 0.01em;
}

.tenant-detail-page .filter-toolbar,
.tenant-detail-page .anomaly-toolbar {
    margin-top: 0.55rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid rgba(90, 105, 124, 0.22);
    border-radius: var(--ui-radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.tenant-detail-page .bulk-action-bar {
    border-top: 1px solid rgba(90, 105, 124, 0.18) !important;
    border-bottom: 0 !important;
    background: rgba(54, 169, 245, 0.08);
    margin-top: -0.1rem;
}

.tenant-detail-page .sticky-workbar {
    position: sticky;
    top: 0;
    z-index: 3;
    backdrop-filter: blur(6px);
}

.tenant-detail-page .work-table-wrap {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.tenant-detail-page .section-meta-chip {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #cfe1f7;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

.tenant-detail-page .work-empty-state {
    padding: 2rem 1rem;
}

.tenant-status-pill {
    font-size: 0.72rem !important;
}

.table-layout-fixed {
    table-layout: fixed;
    /* Size to the SUM of column widths (not a forced 100%) so a column resize
       grows the table + scrolls the wrapper instead of stealing width from its
       neighbours. min-width keeps it filling the wrapper when columns are narrow. */
    width: max-content;
    min-width: 100%;
}

.work-col-time {
    white-space: nowrap;
}

.work-col-ellipsis-200,
.work-col-ellipsis-280,
.work-col-ellipsis-300,
.work-col-ellipsis-350 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
}

.work-col-ellipsis-200 { max-width: 200px; }
.work-col-ellipsis-280 { max-width: 280px; }
.work-col-ellipsis-300 { max-width: 300px; }
.work-col-ellipsis-350 { max-width: 350px; }

.work-col-center {
    text-align: center;
    /* Lets a narrowed verdict column clip its badge instead of being propped
       open by it. Without this the cell takes its width from its content and
       the column has a floor the user cannot get under. */
    overflow: hidden;
}

.work-col-check { width: 30px; padding-left: 4px; padding-right: 4px; text-align: center; }
.work-col-time-head { width: 140px; }
.work-col-pill { width: 135px; }
.work-col-pill-wide { width: 149px; }
/* Ideal, non-resizable widths for the verdict columns (locked in initColumnResize).
   threat = one badge; status = up to two badges (e.g. Delivered + Learning);
   score = a short signed number. Sized to fit content, not user-adjustable. */
.work-col-threat { width: 88px; }
.work-col-status { width: 104px; }
.work-col-score { width: 62px; }
.work-col-score-tight { width: 55px; }
.work-col-good { width: 65px; }
/* Default widths for the freely-resizable text columns. Fixed table-layout needs a
   real `width` (not just max-width) on the header cell to seed the column; the td's
   ellipsis class then truncates to whatever the user drags it to. */
.work-col-from { width: 200px; }
.work-col-to { width: 200px; }
.work-col-subject { width: 300px; }
.work-col-subject-xl { width: 360px; }
.work-col-action { width: 80px; }
.work-col-action-wide { width: 110px; }
.work-col-source { width: 65px; }
.work-col-date { width: 100px; }
.work-col-date-wide { width: 120px; }
.work-col-date-xl { width: 140px; }
.work-col-flagged-by { width: 160px; }
.work-col-sender { width: 200px; }
.work-col-actions { width: 120px; }

.sort-handle {
    cursor: move;
}

.work-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 95px is the width that makes a column of these line up; it is NOT a floor
       the user has to live with. A flat `min-width: 95px` meant the Status
       column could not be dragged narrower than its badge — the header width
       shrank, the badge did not, and the column stopped at ~104px looking
       locked. `min()` keeps the 95px alignment whenever there is room and
       yields when there is not, so a narrowed column actually narrows. At
       normal widths this renders identically. */
    min-width: min(95px, 100%);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-weight: 700;
    vertical-align: middle;
}

.work-pill--released {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}

.work-pill--released-ai {
    background-color: #2563eb !important;
    color: #fff !important;
}

.work-pill--deferred {
    background-color: #6c757d !important;
    color: #fff !important;
}

.work-pill--muted {
    opacity: 0.35;
}

.work-pill--danger-soft {
    color: #ef5d6f;
}

.work-note-count {
    font-size: 0.8rem;
    font-weight: 500;
}

.work-select-compact {
    width: auto;
}

.work-alert-purple {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
    color: #d4baff;
}

.work-alert-info-soft {
    border-color: #0dcaf0;
    background: rgba(13, 202, 240, 0.08);
    color: #86e4f5;
}

.recipient-toolbar,
.recipient-bulk-actions,
.recipient-actions {
    display: flex;
    align-items: center;
}

.recipient-toolbar {
    gap: 0.5rem;
}

.recipient-bulk-actions {
    gap: 0.35rem;
}

.recipient-actions {
    flex-wrap: nowrap;
    gap: 2px;
    justify-content: center;
}

.recipient-checkbox-cell,
.recipient-action-cell {
    padding: 0.2rem 0.15rem !important;
}

.recipient-action-cell {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}

.recipient-checkbox,
.recipient-select-all {
    vertical-align: middle;
    cursor: pointer;
}

.recipient-email,
.recipient-bounce-reason {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipient-email {
    max-width: 280px;
    font-weight: normal;
}

.recipient-bounce-reason {
    max-width: 300px;
    font-size: 0.8rem;
}

.count-pill {
    font-size: 0.75rem;
}


.tenant-detail-page .nav-tabs-sub {
    border-bottom: 1px solid rgba(90, 105, 124, 0.24);
    gap: 0.35rem;
}

.tenant-detail-page .nav-tabs-sub .nav-link {
    border-radius: 999px !important;
    padding: 0.38rem 0.78rem !important;
    font-size: 0.8rem !important;
    color: #cdd8e8 !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.tenant-detail-page .nav-tabs-sub .nav-link.active {
    background: rgba(54, 169, 245, 0.14) !important;
    color: #f4f8ff !important;
    border-color: rgba(95, 186, 246, 0.28) !important;
}

.tenant-detail-page .nav-tabs-sub .nav-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #eef5ff !important;
}

.tenant-detail-page .tab-pane .table-responsive {
    border: 1px solid rgba(90, 105, 124, 0.16);
    border-radius: var(--ui-radius-sm);
}

.tenant-detail-page .tab-pane .table thead th {
    background: rgba(255, 255, 255, 0.03) !important;
}

.tenant-detail-page .tab-pane .table tbody tr:hover {
    background: rgba(54, 169, 245, 0.05) !important;
}

.dashboard-table-wrap {
    border: 1px solid rgba(90, 105, 124, 0.16);
    border-radius: var(--ui-radius-sm);
}

.dashboard-insights-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.7rem;
}

.dashboard-attention-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-attention-list li + li {
    margin-top: 0.65rem;
}

.dashboard-attention-list a {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    text-decoration: none;
    color: inherit;
    padding: 0.55rem 0.6rem;
    border: 1px solid rgba(90, 105, 124, 0.16);
    border-radius: var(--ui-radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.dashboard-attention-list a:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(95, 186, 246, 0.18);
}

.dashboard-attention-list strong,
.dashboard-snapshot-list strong {
    color: #eef5ff;
}

.dashboard-attention-list span,
.dashboard-snapshot-list span {
    color: var(--ui-text-muted);
    font-size: 0.76rem;
}

.dashboard-snapshot-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dashboard-snapshot-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.52rem 0;
    border-bottom: 1px solid rgba(90, 105, 124, 0.16);
}

.dashboard-snapshot-list li:last-child {
    border-bottom: 0;
}

.dashboard-table-wrap .table tbody tr:hover {
    background: rgba(54, 169, 245, 0.05) !important;
}

.quarantine-detail-page .detail-page-header {
    margin-bottom: 0.55rem;
}

.quarantine-detail-page .content-grid {
    --bs-gutter-x: 0.6rem;
    --bs-gutter-y: 0.55rem;
}

.quarantine-detail-page .quarantine-main-column > .card,
.quarantine-detail-page .quarantine-sidebar > .card {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
}

.quarantine-detail-page .card-header,
.quarantine-detail-page .card-header.bg-primary,
.quarantine-detail-page .card-header.text-white {
    background: linear-gradient(180deg, rgba(30, 63, 124, 0.92) 0%, rgba(22, 50, 103, 0.95) 100%) !important;
}

.quarantine-detail-page .card-body {
    background: rgba(255, 255, 255, 0.01);
}

.quarantine-detail-page .table-borderless td:first-child,
.quarantine-detail-page .details-table td:first-child {
    color: var(--ui-text-dim) !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quarantine-detail-page .details-table td:nth-child(2) {
    color: #eef5ff;
}

.quarantine-detail-page .badge {
    box-shadow: none !important;
}

.quarantine-detail-page .copy-value {
    color: #eaf3ff;
}

.quarantine-detail-page .detail-badge-sm {
    font-size: 0.68rem !important;
}

.quarantine-detail-page .detail-break-word {
    word-break: break-word;
}

.quarantine-detail-page .detail-break-all {
    word-break: break-all;
}

.quarantine-detail-page .copy-value.copy-fill {
    max-width: 100%;
    vertical-align: bottom;
}

.quarantine-detail-page .detail-click-row {
    cursor: pointer;
}

.quarantine-detail-page .detail-section-divider {
    border-top: 1px solid var(--ui-border); /* --color-border was never defined */
    padding: 0.4rem 0 0.15rem 0;
}

.quarantine-detail-page .detail-section-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quarantine-detail-page .detail-wrap-scroll {
    max-height: 340px;
    overflow-y: auto;
}

.quarantine-detail-page .detail-wrap-scroll-lg {
    max-height: 400px;
    overflow-y: auto;
}

.quarantine-detail-page .detail-sticky-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #1a1d21;
}

.quarantine-detail-page .detail-cell-wrap {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.quarantine-detail-page .detail-table-fixed {
    table-layout: fixed;
}

.quarantine-detail-page .detail-col-detected-by {
    width: 220px;
}

.quarantine-detail-page .detail-col-severity {
    width: 90px;
}

.quarantine-detail-page .detail-col-header-name {
    width: 25%;
}

.quarantine-detail-page .detail-col-header-value {
    width: 75%;
}

.quarantine-detail-page .detail-headers-shell th,
.quarantine-detail-page .detail-headers-shell td {
    vertical-align: top;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #30363d;
    word-break: break-word;
    font-size: 0.75rem;
}

.quarantine-detail-page .detail-cell-ellipsis-400 {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quarantine-detail-page .detail-cell-detected-by {
    max-width: 220px;
    text-align: center;
}

.quarantine-detail-page .detail-text-plain {
    color: #e2e8f0 !important;
}

.quarantine-detail-page .detail-badge-break {
    white-space: normal;
    word-break: break-all;
}

.quarantine-detail-page .detail-badge-nowrap {
    white-space: nowrap;
}

.quarantine-detail-page .detail-pre,
.quarantine-detail-page .detail-headers-shell {
    background-color: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
}

.quarantine-detail-page .detail-pre {
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.75rem;
}

.quarantine-detail-page .detail-pre--body {
    max-height: 400px;
}

.quarantine-detail-page .detail-pre--empty,
.quarantine-detail-page .detail-pre--headers-empty {
    max-height: 200px;
}

.quarantine-detail-page .detail-iframe {
    width: 100%;
    height: 400px;
    border: 1px solid #30363d;
    border-radius: 4px;
    background-color: #fff;
}

/* Plain-text-like HTML (no styling of its own): render on the dark theme
   canvas. The srcdoc also injects light text/link colors so it reads like
   the plain-text <pre> view. Designed HTML mail keeps the white bg above. */
.quarantine-detail-page .detail-iframe--dark {
    background-color: #0d1117;
}

.quarantine-detail-page .detail-label-fixed {
    min-width: 60px;
}

.quarantine-detail-page .detail-label-row {
    white-space: nowrap;
}

.quarantine-detail-page .detail-rule {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.quarantine-detail-page .detail-time-value {
    text-align: right;
    white-space: nowrap;
}

.quarantine-detail-page .detail-time-subnote {
    opacity: 0.5;
}

.quarantine-detail-page .detail-time-stamp {
    opacity: 0.6;
}

.quarantine-detail-page .quarantine-sidebar {
    top: 0.55rem;
}

.quarantine-detail-page .quarantine-reasons-actions .btn,
.quarantine-detail-page .quarantine-reasons-actions .alert {
    min-height: 2rem;
}

.quarantine-detail-page .risk-card .reasons-block,
.quarantine-detail-page .accordion-item,
.quarantine-detail-page .list-group-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(90, 105, 124, 0.18) !important;
}

.bulk-action-bar {
    border-bottom: 1px solid var(--ui-border) !important;
    background: rgba(61, 88, 118, 0.22);
    padding: 0.45rem 0.6rem !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.bulk-action-bar .count-label {
    color: var(--ui-text-muted);
    margin-right: 0.45rem;
}

.tenant-tabs-shell {
    padding: 0.7rem 0.8rem 0.6rem;
}

.tenant-tabs-list {
    gap: 0.38rem !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}

.tenant-tabs-list .nav-item {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .page-actions {
        justify-content: flex-start;
    }
    .tenant-workspace-hero,
    .detail-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .tenant-ops-board__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .overview-grid,
    .dashboard-insights-grid {
        grid-template-columns: 1fr;
    }
    .overview-detail-grid,
    .overview-trend-grid,
    .overview-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .overview-insight-grid,
    .overview-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .detail-page-header__meta {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .tenant-ops-board__grid {
        grid-template-columns: 1fr;
    }
    .overview-detail-grid,
    .overview-trend-grid,
    .overview-quick-grid,
    .overview-insight-grid,
    .overview-bottom-grid {
        grid-template-columns: 1fr;
    }
    .mini-trend-bars {
        grid-template-columns: repeat(15, minmax(0, 1fr));
    }
    .overview-fact-list {
        grid-template-columns: 1fr;
    }
}

#tenantTabs .nav-link,
.nav-tabs#tenantTabs .nav-link {
    display: inline-flex;
    align-items: center;
    border-radius: 999px !important;
    padding: 0.46rem 0.74rem !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: #c9d4e4 !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.btn-sm,
.btn-group-sm > .btn {
    min-height: var(--ui-control-height-sm);
    padding: 0.35rem 0.65rem !important;
    font-size: var(--ui-text-size-sm) !important;
}

.table td .btn,
.table td .btn-sm,
.table td .btn-group-sm > .btn,
.table td .dr-btn,
.table td .rule-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 1.7rem !important;
    min-height: 1.7rem !important;
    padding: 0.2rem 0.42rem !important;
    font-size: 0.75rem !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
}

.table td .btn i,
.table td .btn-sm i,
.table td .dr-btn i,
.table td .rule-action-btn i {
    display: block !important;
    line-height: 1 !important;
    font-size: 0.72rem !important;
    position: relative;
    top: 1px;
}

.table td .btn i::before,
.table td .btn-sm i::before,
.table td .dr-btn i::before,
.table td .rule-action-btn i::before {
    display: block;
}

.table td .btn-group,
.table td .btn-group-sm {
    gap: 0.12rem !important;
    align-items: center;
}

.btn-xs {
    min-height: 1.8rem;
    font-size: var(--ui-text-size-xs) !important;
}

.form-control-sm,
.form-select-sm {
    min-height: var(--ui-control-height-sm);
    font-size: var(--ui-text-size-sm) !important;
    padding: 0.35rem 0.6rem !important;
}

.badge-subtle {
    background: transparent !important;
    border: 1px solid #5b6777 !important;
    color: #c8d3e1 !important;
}

.text-formal-muted {
    color: var(--ui-text-muted) !important;
    font-size: 0.8125rem !important;
}

#tenantTabs .nav-link.active,
.nav-tabs#tenantTabs .nav-link.active {
    background: rgba(54, 169, 245, 0.16) !important;
    color: #f5f9ff !important;
    border-color: rgba(95, 186, 246, 0.34) !important;
    box-shadow: inset 0 0 0 1px rgba(95, 186, 246, 0.08);
}

#tenantTabs .nav-link:hover,
.nav-tabs#tenantTabs .nav-link:hover {
    color: #edf5ff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(110, 129, 156, 0.22) !important;
}

#tenantTabs .nav-link .badge.bg-info,
.nav-tabs#tenantTabs .nav-link .badge.bg-info {
    background: rgba(54, 169, 245, 0.16) !important;
    color: #8dd1ff !important;
    border: 1px solid rgba(95, 186, 246, 0.24);
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.14rem 0.42rem !important;
}

#global-quarantine-table th,
#tenant-quarantine-table th,
#tenant-email-log-table th,
#tenants-list-table th,
#dashboard-table th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* The tenant Quarantine and Email Log tables are .table-autofit now: their text
   columns wrap, so they are deliberately absent from these two nowrap groups. */
#global-quarantine-table td,
#tenants-list-table td,
#dashboard-table td {
    white-space: nowrap;
}

#global-quarantine-table td[data-column-id="subject"],
#global-quarantine-table td[data-column-id="sender"],
#tenants-list-table td[data-column-id="name"],
#dashboard-table td[data-column-id="name"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   Hover-stability rule (ported from frontend-20x 55f81d1):
   NO hover effect may move content. Hovers may change color,
   background, shadow, or border-COLOR only — never transform,
   size, weight, or spacing. Guard against any legacy/vendor
   rule reintroducing movement.
   ============================================================ */
.card:hover, .stat-card:hover, .info-card:hover, .glass-panel:hover,
.dashboard-stat-card:hover, tr:hover, .row-clickable:hover,
.btn:hover, .nav-link:hover, a:hover, .badge:hover,
.attachment-item:hover, .url-item:hover,
.ops-metric-card:hover, .tenant-pulse:hover, .threat-mix-row:hover {
    transform: none !important;
}

/* ============================================================
   Keyboard accessibility (ported from frontend-20x design-system):
   visible focus ring everywhere; clickable rows get the same ring.
   ============================================================ */
:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
tr[onclick]:focus-visible, tr[data-nav-url]:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: -2px;
}
.btn:focus-visible { box-shadow: 0 0 0 3px var(--ui-accent-soft); outline: none; }

/* ============================================================
   Quiet section headers (ported from frontend-20x 028b5df):
   loud solid-blue .card-header.bg-primary banners read as toy-like
   on the investigation page; replace with raised surface + accent
   left border. Text inherits normal foreground instead of white-on-blue.
   ============================================================ */
.card-header.bg-primary {
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
    border-left: 3px solid var(--ui-accent);
    border-bottom: 1px solid var(--ui-border);
}
.card-header.bg-primary h1, .card-header.bg-primary h2,
.card-header.bg-primary h3, .card-header.bg-primary h4,
.card-header.bg-primary h5, .card-header.bg-primary h6,
.card-header.bg-primary .text-white {
    color: var(--ui-text) !important;
}

/* ============================================================
   Overview tab — compact card density + richer trend charts
   (2026-07-14). Everything scoped to #overview so no other
   view is affected. Bump base.html ui-refresh.css ?v= on edit.
   ============================================================ */

/* --- Tenant Overview board: tighter frame + metric cards --- */
#overview .tenant-ops-board { padding: 0.45rem 0.6rem 0.5rem; }
#overview .tenant-ops-board__header { margin-bottom: 0.4rem; gap: 0.6rem; }
#overview .tenant-ops-board__grid { gap: 0.45rem; }
#overview .ops-metric-card { padding: 0.4rem 0.55rem; }
#overview .ops-metric-card__label { font-size: 0.62rem; margin-bottom: 0.12rem; }
#overview .ops-metric-card__value { font-size: 1.0rem; margin-bottom: 0.08rem; }
#overview .ops-metric-card__subtext { font-size: 0.68rem; margin-bottom: 0.26rem; }
#overview .ops-meter, #overview .ops-meter-stack { height: 0.3rem; }

/* --- Policy Footprint: horizontal, one compact strip --- */
#overview .ops-metric-card--policy .ops-footprint {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.2rem 0.7rem;
    font-size: 0.72rem;
    margin-top: 0.05rem;
}
#overview .ops-metric-card--policy .ops-footprint li { gap: 0.3rem; }
#overview .ops-metric-card--policy .ops-footprint strong { margin-left: 0.25rem; }

/* --- This-week pulse: tighter --- */
#overview .tenant-pulse { margin-top: 0.4rem; gap: 0.35rem 0.5rem; }
#overview .tenant-pulse__item { font-size: 0.73rem; padding: 0.16rem 0.45rem; }

/* --- Section cards (trend + insight + quick): tighter chrome --- */
#overview .section-card .card-header { padding: 0.4rem 0.7rem; }
#overview .section-card .card-header h6 { font-size: 0.86rem; }
#overview .section-card .card-body { padding: 0.55rem 0.7rem 0.6rem; }
#overview .overview-trend-grid,
#overview .overview-insight-grid { gap: 0.55rem; }
#overview .overview-quick-grid { gap: 0.45rem; }

/* --- Threat-mix / sender / verdict lists: denser rows --- */
#overview .mini-trend-summary { margin-bottom: 0.4rem; font-size: 0.73rem; gap: 0.6rem; }
#overview .threat-mix-list li + li { margin-top: 0.42rem; }
#overview .threat-mix-list__row { margin-bottom: 0.18rem; gap: 0.5rem; }
#overview .threat-mix-list__row strong { font-size: 0.76rem; }
#overview .threat-mix-list__row span { font-size: 0.72rem; }
#overview .threat-mix-bar { height: 0.3rem; }
#overview .ai-verdict-legend { gap: 0.3rem; font-size: 0.74rem; }
#overview .domain-scroll { max-height: 300px; }

/* --- Quick-nav cards: tighter --- */
#overview .overview-quick-card { padding: 0.55rem 0.65rem; }
#overview .overview-quick-card__value { font-size: 1.0rem; margin-bottom: 0.14rem; }
#overview .overview-quick-card__hint { font-size: 0.7rem; line-height: 1.3; }

/* --- Mail-trend charts: taller, crisper, scale labels --- */
#overview .line-chart__svg { height: 150px; }
.line-chart__axis { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.line-chart__ylabel {
    position: absolute;
    left: 3px;
    transform: translateY(-50%);
    padding: 0 0.15rem;
    font-size: 0.6rem;
    color: var(--ui-text-dim);
    background: rgba(22, 26, 33, 0.55);
    border-radius: 3px;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* --- read-only role ------------------------------------------------------
 * A table rendered for a role that cannot act carries no action buttons, so
 * the select column has nothing to select FOR. Hidden with a class rather
 * than removed: the column-preference code toggles d-none on th/td by
 * data-column-id and treats "checkbox" as required, so removing the cells
 * would leave it addressing markup that is not there.
 */
.table-readonly th[data-column-id="checkbox"],
.table-readonly td[data-column-id="checkbox"] { display: none; }

/* --- score legend (demo overview) ------------------------------------------ */
.score-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.score-legend li { display: flex; align-items: flex-start; gap: .7rem; }
.score-legend li > .badge { flex: 0 0 3.4rem; text-align: center; font-variant-numeric: tabular-nums; font-size: .78rem; padding: .3rem 0; }
.score-legend strong { display: block; font-size: .85rem; }
.score-legend span { display: block; font-size: .76rem; color: var(--color-text-muted); line-height: 1.4; }
.score-badge-good { background: rgba(63,185,80,.18); color: var(--color-success); }
.score-badge-warn { background: rgba(210,153,34,.18); color: var(--color-warning); }
.score-badge-bad  { background: rgba(248,81,73,.18); color: var(--color-danger); }
.score-legend-note { margin-top: .8rem; font-size: .76rem; color: var(--color-text-dim); line-height: 1.45; }

/* --- autofit message tables (tenant Quarantine + Email Log) ---------------
 * Columns size to their content and text wraps instead of truncating, so a
 * sender, recipient or subject is read in full without hovering for the
 * title. Badge and time columns keep their fixed widths; the text columns
 * give up theirs. Column resize still works — a dragged width becomes that
 * column's minimum, and the rest re-flow around it.
 */
.table-autofit { table-layout: auto; width: 100%; }
.table-autofit th.work-col-from,
.table-autofit th.work-col-to,
.table-autofit th.work-col-subject,
.table-autofit th.work-col-subject-xl { width: auto; }
.table-autofit td[class*="work-col-ellipsis-"] {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    /* break-word, not anywhere: a whole address is the unit. `anywhere` lets
       the layout shrink a column below its longest address and then splits
       "sablemere.exa|mple" to fit; break-word only splits a token that
       cannot fit the column at all. */
    overflow-wrap: break-word;
}
/* Addresses may break anywhere — the template marks the @ as the preferred
   spot with <wbr>, so the split is "local / @domain", not mid-word — which
   keeps a narrow screen from handing the To column a whole address's width
   and squeezing Subject to one word per line. */
.table-autofit td[data-column-id="to"] { overflow-wrap: anywhere; min-width: 11rem; }
/* Subject is what the reader scans; it must not be squeezed to one word per
   line by a From column that is sized to "Name <address>". */
.table-autofit td[data-column-id="subject"] { min-width: 14rem; }
.table-autofit td.work-col-time,
.table-autofit td.work-col-center { white-space: nowrap; }