/*
 * ui-premium.css — the calm layer (2026-10-13).
 *
 * Loads LAST (base.html). Every rule is scoped to body.ui-premium (always
 * set on <body> by base.html) for specificity.
 * ui-refresh.css styles most components through its --ui-* variables; the
 * first block re-points those, which does most of the work. The rest overrides
 * the !important rules ui-refresh / ui-v2 / page-local styles set directly.
 *
 * Operator rules for this layer (2026-10-13, second pass):
 *   - badges (labels) keep their original format and colours: NOT restyled here;
 *   - every workspace tab shows its count;
 *   - every sub-tab row, at any level, is the same segmented control;
 *   - Status columns are centred;
 *   - the tenant name sits in the top bar, not on a row of its own.
 */

body.ui-premium {
    --ui-bg: #0d1117;
    --ui-bg-alt: #0d1117;
    --ui-surface: #1a2029;
    --ui-surface-raised: #212833;
    --ui-border: #2b323d;
    --ui-border-strong: #30363d;
    --ui-text: #f0f6fc;
    --ui-text-muted: #b8c2cf;
    --ui-text-dim: #8b949e;
    --ui-accent: #58a6ff;
    --ui-accent-strong: #388bfd;
    --ui-accent-soft: rgba(88, 166, 255, 0.14);
    --ui-radius: 10px;
    --ui-radius-sm: 7px;
    --ui-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(1, 4, 9, 0.35);
    --ui-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 28px rgba(1, 4, 9, 0.45);
    --p-line: #2b323d;
    --p-muted: #8b949e;
    background: #0d1117 !important;
}

/* ── Top bar (also carries the tenant name: see topbar_context) ───────── */
body.ui-premium .app-topnav {
    background: rgba(13, 17, 23, 0.86) !important;
    border-bottom: 1px solid var(--p-line) !important;
    backdrop-filter: blur(8px);
    min-height: 52px; padding-top: 0.35rem !important; padding-bottom: 0.35rem !important;
}
body.ui-premium .app-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700 !important; font-size: 1rem !important; }
body.ui-premium .p-brand-logo { display: block; width: 22px; height: 26px; object-fit: contain; }
body.ui-premium .p-topbar-tenant {
    display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 1.5rem 0 1.25rem; position: relative;
    padding: 0.28rem 0.7rem; border: 1px solid #30363d; border-radius: 8px; background: #161b22;
    color: #f0f6fc; font-weight: 650; font-size: 0.88rem; white-space: nowrap; text-decoration: none;
}
body.ui-premium .app-topnav .nav-link { color: var(--p-muted) !important; font-weight: 500 !important; background: transparent !important; border: 0 !important; }
body.ui-premium .app-topnav .nav-link:hover,
body.ui-premium .app-topnav .nav-link.active,
body.ui-premium .app-topnav .nav-link.show { color: #f0f6fc !important; }
body.ui-premium .dropdown-menu {
    background: #161b22 !important; border: 1px solid #30363d !important; border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(1, 4, 9, 0.5) !important; padding: 0.35rem !important;
}
body.ui-premium .dropdown-item { border-radius: 6px; }
body.ui-premium .dropdown-item:hover, body.ui-premium .dropdown-item:focus { background: #1c2129 !important; }
body.ui-premium .dropdown-header { color: var(--p-muted) !important; font-size: 0.68rem !important; letter-spacing: 0.06em; text-transform: uppercase; }

/* Less air above the first row of the page. */
body.ui-premium main.page-shell { padding-top: 0.75rem !important; }
body.ui-premium .tenant-detail-page { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ── Breadcrumb (pages that still have one): plain text, not a box ────── */
body.ui-premium .breadcrumb {
    background: transparent !important; border: 0 !important; padding: 0 !important;
    margin: 0 0 0.6rem !important;
}
body.ui-premium .breadcrumb-item, body.ui-premium .breadcrumb-item a { color: var(--p-muted) !important; font-weight: 500; font-size: 0.82rem; }
body.ui-premium .breadcrumb-item a:hover { color: #f0f6fc !important; }
body.ui-premium .breadcrumb-item.active { color: #f0f6fc !important; font-weight: 700; font-size: 1.05rem; }

/* ── Workspace tabs: underline, icon + word + count ───────────────────── */
body.ui-premium .tenant-tabs-shell,
body.ui-premium .ui2-shell {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 0 !important; margin-bottom: 0.9rem !important;
}
body.ui-premium #tenantTabs.tenant-tabs-list {
    border-bottom: 1px solid var(--p-line) !important; gap: 0.15rem !important;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
body.ui-premium #tenantTabs.tenant-tabs-list .nav-link,
body.ui-premium #tenantTabs.tenant-tabs-list .nav-link.active,
body.ui-premium #tenantTabs.tenant-tabs-list .nav-link:focus {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    border-bottom: 2px solid transparent !important; margin-bottom: -1px; box-shadow: none !important;
    color: var(--p-muted) !important; font-weight: 500 !important; font-size: 0.875rem !important;
    padding: 0.65rem 0.75rem 0.6rem !important; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.15rem;
}
body.ui-premium #tenantTabs.tenant-tabs-list .nav-link:hover { color: #f0f6fc !important; }
body.ui-premium #tenantTabs.tenant-tabs-list .nav-link.active { color: #f0f6fc !important; border-bottom-color: #58a6ff !important; }
body.ui-premium #tenantTabs.tenant-tabs-list .nav-link.active .bi { color: #58a6ff; }
body.ui-premium #tenantTabs.tenant-tabs-list .ui2-divider { margin: 0.65rem 0.3rem !important; background: var(--p-line) !important; }
/* Phones / narrow windows: the bar scrolled sideways with its scrollbar hidden,
   so Tools and Settings sat off-screen with nothing saying they were there.
   Wrap onto a second row instead; every tab stays visible. */
@media (max-width: 767.98px) {
    body.ui-premium #tenantTabs.tenant-tabs-list { flex-wrap: wrap; overflow-x: visible; row-gap: 0 !important; }
    body.ui-premium #tenantTabs.tenant-tabs-list .ui2-divider { display: none; }
    body.ui-premium #tenantTabs.tenant-tabs-list .nav-link { padding: 0.55rem 0.55rem 0.5rem !important; }
}

/* ── Every sub-tab row, at every level, is one segmented control ──────── */
body.ui-premium :is(.nav-tabs:not(.tenant-tabs-list), .nav-pills):not(.navbar-nav) {
    display: inline-flex !important; flex-wrap: wrap; width: auto; max-width: 100%;
    gap: 2px !important; padding: 3px !important; row-gap: 2px !important;
    background: #161b22 !important; border: 1px solid var(--p-line) !important; border-radius: 9px !important;
    margin-top: 0 !important; margin-bottom: 0.9rem !important;
}
body.ui-premium ul.nav.ui2-pills.ui2-pills { margin-top: 0.75rem !important; }
body.ui-premium .ui2-pills[hidden] { display: none !important; }
body.ui-premium :is(.nav-tabs:not(.tenant-tabs-list), .nav-pills):not(.navbar-nav) .nav-link {
    background: transparent !important; border: 0 !important; border-radius: 6px !important;
    color: var(--p-muted) !important; font-size: 0.8rem !important; font-weight: 500 !important;
    padding: 0.36rem 0.85rem !important; line-height: 1.35 !important; box-shadow: none !important;
    margin: 0 !important; white-space: nowrap;
}
body.ui-premium :is(.nav-tabs:not(.tenant-tabs-list), .nav-pills):not(.navbar-nav) .nav-link:hover { color: #f0f6fc !important; }
body.ui-premium :is(.nav-tabs:not(.tenant-tabs-list), .nav-pills):not(.navbar-nav) .nav-link.active {
    background: #1c2129 !important; color: #f0f6fc !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px #30363d inset !important;
}
/* A row of two switchers (admin Settings) keeps them on one line. */
body.ui-premium .settings-tabs-row > .settings-tabs,
body.ui-premium .admin-subtabs-row > .admin-subtabs { margin-bottom: 0 !important; }
/* Tenant Settings: the switcher and Save sit on one row; keep the Save at its end. */
body.ui-premium .settings-subbar { margin-bottom: 0.9rem; }
body.ui-premium .settings-subbar > .nav { margin-bottom: 0 !important; }

/* ── Cards: soft surface, quiet white titles ──────────────────────────── */
body.ui-premium .card { border-color: var(--p-line) !important; }
body.ui-premium .card:hover { border-color: #30363d !important; }
body.ui-premium .card-header {
    background: transparent !important; border-bottom: 1px solid var(--p-line) !important;
    padding: 0.7rem 1rem !important; min-height: 0;
}
body.ui-premium .card-header :is(h1, h2, h3, h4, h5, h6, .card-title),
body.ui-premium .card-title {
    color: #f0f6fc !important; -webkit-text-fill-color: currentColor !important; background: none !important;
    font-weight: 650 !important; font-size: 0.92rem !important; letter-spacing: -0.005em;
    text-decoration: none !important; text-transform: none !important;
    border: 0 !important; box-shadow: none !important; padding-bottom: 0 !important;
}
/* Section titles: white, no gradient fill, no rule underneath (custom.css h6.gradient-text). */
body.ui-premium .gradient-text {
    background: none !important; -webkit-text-fill-color: currentColor !important; color: #f0f6fc !important;
    border-bottom: 0 !important; padding-bottom: 0 !important; letter-spacing: -0.005em !important;
}
body.ui-premium .card-body { padding: 1rem !important; }
body.ui-premium .card-body.p-0 { padding: 0 !important; }
body.ui-premium .card-footer { background: transparent !important; border-top: 1px solid var(--p-line) !important; }

/* ── Tables: quiet header, roomy rows, Status centred ─────────────────── */
body.ui-premium .table { --tblr-table-bg: transparent; }
body.ui-premium .table thead th {
    background: var(--ui-surface) !important; color: var(--p-muted) !important; text-transform: none !important;
    font-weight: 500 !important; font-size: 0.75rem !important; letter-spacing: 0.01em !important;
    border-right: 0 !important; border-bottom: 1px solid var(--p-line) !important;
}
body.ui-premium .table tbody td { border-top: 1px solid var(--p-line) !important; color: #e6edf3 !important; }
body.ui-premium .table tbody tr { transition: background-color 0.12s; }
body.ui-premium .table-hover tbody tr:hover > *,
body.ui-premium .table tbody tr:hover > td { background-color: rgba(88, 166, 255, 0.04) !important; }
/* Status: by column id where the table has one, otherwise marked by ui-premium.js. */
body.ui-premium :is(th, td):is([data-column-id="status"], [data-column-id="enabled"], .p-center) { text-align: center !important; }

/* ── Buttons + inputs: same corners everywhere ────────────────────────── */
body.ui-premium .btn { border-radius: 8px !important; font-weight: 600 !important; }
body.ui-premium .btn-sm { border-radius: 7px !important; }
body.ui-premium .form-control,
body.ui-premium .form-select {
    background-color: #0d1117 !important; border-color: #30363d !important; border-radius: 8px !important;
}
body.ui-premium .form-control:focus,
body.ui-premium .form-select:focus {
    border-color: #58a6ff !important; box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.18) !important;
}
body.ui-premium .alert { border-radius: 10px !important; }

/* ── Prose kept out of the way (ui-premium.js) ────────────────────────── */
body.ui-premium .p-more {
    background: none; border: 0; padding: 0 0.15rem; color: var(--p-muted); cursor: pointer;
    font-size: 0.85em; vertical-align: baseline; line-height: 1;
}
body.ui-premium .p-more:hover, body.ui-premium .p-more[aria-expanded="true"] { color: #58a6ff; }
body.ui-premium .p-folded { display: none !important; }
/* A long info banner shows its first two lines and a visible "More" button
   (ui-premium.js sets the exact max-height once the banner is visible; 5.4em is
   the stand-in until then). Wraps at words — never a mid-word cut. */
body.ui-premium .p-clamp { overflow: hidden !important; max-height: 5.4em; cursor: pointer; }
body.ui-premium .p-clamp br { display: none; }
body.ui-premium .p-clamp-more {
    float: right; margin: 0 0 0 0.75rem; padding: 0; border: 0; background: none;
    color: #58a6ff; font: inherit; font-size: 0.85em; font-weight: 600; line-height: inherit; cursor: pointer;
}
body.ui-premium .p-clamp-more.is-flex { float: none; flex: 0 0 auto; align-self: flex-start; margin-left: auto; }
body.ui-premium .p-clamp-more:hover { text-decoration: underline; }

body.ui-premium footer, body.ui-premium .app-footer { color: var(--p-muted) !important; background: transparent !important; border-top-color: var(--p-line) !important; }
body.ui-premium :focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { body.ui-premium * { transition: none !important; } }
/* The segmented rule above forces display; a row the page hides must stay hidden. */
body.ui-premium ul.nav.nav:is(.nav-tabs, .nav-pills):is(.d-none, [hidden]) { display: none !important; }

/* ══ Pass 3 (operator review 2026-10-13) ═══════════════════════════════ */

/* Nothing moves when a tab changes: a page that grows past the window no longer
   pulls a scrollbar in (which narrowed and shifted everything), and the
   slide-in animations that ran on every pane/page change are off. */
html:has(body.ui-premium) { scrollbar-gutter: stable; overflow-y: scroll; }
body.ui-premium .page-shell { animation: none !important; }
body.ui-premium [data-reveal] { transform: none !important; }
body.ui-premium .tab-pane.fade { transition: opacity 0.12s linear !important; transform: none !important; }

/* Overview: one type scale (was ~20 sizes from 9.6 to 17.3 px). Labels 10.5,
   text 12.5, card titles 14.5, headline numbers 20. */
body.ui-premium #overview { font-size: 12.5px; }
body.ui-premium #overview :is(p, li, dd, dt, span, strong, small, a, div, td, th, label):not(.badge):not(.bi):not(.btn):not(.ops-metric-card__value):not(.ops-metric-card__label):not(.tenant-ops-board__eyebrow):not(.tenant-pulse__title):not(.line-chart__ylabel):not(.tenant-ops-board__title):not([class*="p-ov-"]) {
    font-size: 12.5px !important; line-height: 1.45;
}
body.ui-premium #overview :is(.ops-metric-card__label, .tenant-ops-board__eyebrow, .tenant-pulse__title) {
    font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.06em !important;
}
body.ui-premium #overview .line-chart__ylabel { font-size: 10.5px !important; }
body.ui-premium #overview .ops-metric-card__value { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.01em; }
body.ui-premium #overview .tenant-ops-board__title { font-size: 17px !important; font-weight: 700 !important; }
body.ui-premium #overview :is(strong, b) { font-weight: 600 !important; }

/* ── Buttons: three kinds only ────────────────────────────────────────────
   main action = solid blue; destructive = red; everything else = one neutral
   outline. Same height everywhere. */
body.ui-premium .btn {
    font-size: 0.8125rem !important; font-weight: 600 !important; line-height: 1.3 !important;
    padding: 0.4rem 0.85rem !important; border-radius: 8px !important; letter-spacing: 0 !important;
}
body.ui-premium .btn-sm, body.ui-premium .btn-group-sm > .btn {
    font-size: 0.75rem !important; padding: 0.28rem 0.6rem !important; border-radius: 7px !important;
}
body.ui-premium :is(.btn-primary, .btn-success, .btn-info, .btn-add) {
    background: #2f81f7 !important; border: 1px solid #2f81f7 !important; color: #ffffff !important; box-shadow: none !important;
}
body.ui-premium :is(.btn-primary, .btn-success, .btn-info, .btn-add):hover { background: #388bfd !important; border-color: #388bfd !important; }
body.ui-premium :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info,
                    .btn-outline-warning, .btn-outline-light, .btn-outline-dark,
                    .btn-secondary, .btn-warning, .btn-light, .btn-dark) {
    background: transparent !important; border: 1px solid #30363d !important; color: #e6edf3 !important; box-shadow: none !important;
}
body.ui-premium :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info,
                    .btn-outline-warning, .btn-outline-light, .btn-outline-dark,
                    .btn-secondary, .btn-warning, .btn-light, .btn-dark):hover {
    background: #1c2129 !important; border-color: #484f58 !important; color: #ffffff !important;
}
body.ui-premium .btn-outline-danger { background: transparent !important; border: 1px solid rgba(248, 81, 73, 0.55) !important; color: #ff7b72 !important; }
body.ui-premium .btn-outline-danger:hover { background: rgba(248, 81, 73, 0.12) !important; }
body.ui-premium .btn-danger { background: #da3633 !important; border: 1px solid #da3633 !important; color: #ffffff !important; }
/* A pressed toggle (AI, quick filters, range pickers) shows as selected. */
body.ui-premium :is(.btn.active, .btn-check:checked + .btn, .btn[aria-pressed="true"]):not(.btn-primary):not(.btn-danger) {
    background: rgba(88, 166, 255, 0.14) !important; border-color: rgba(88, 166, 255, 0.6) !important; color: #79c0ff !important;
}
body.ui-premium .btn:disabled, body.ui-premium .btn.disabled { opacity: 0.45 !important; }

/* ── Labels: one shape and size; each keeps its own colour ──────────────── */
body.ui-premium .badge {
    font-size: 0.72rem !important; font-weight: 600 !important; line-height: 1.2 !important;
    padding: 0.3em 0.6em !important; border-radius: 6px !important; letter-spacing: 0 !important;
    vertical-align: middle;
}
/* Counts on every tab row (workspace bar and sub-tabs) look the same: the
   workspace-bar count. ui-premium.js tags numeric badges .p-count; a "not
   measured" dash keeps its own grey, so it can never pass for a number. */
body.ui-premium .nav .nav-link .badge {
    font-size: 0.68rem !important; padding: 0.14rem 0.42rem !important; margin-left: 0.35rem !important;
    font-variant-numeric: tabular-nums;
}
body.ui-premium .nav .nav-link .badge.p-count { background-color: var(--tblr-info, #79c0ff) !important; color: #0d1117 !important; }

/* Message detail page: the header is one compact line (title left, status +
   time right), not a hero block. */
body.ui-premium .detail-page-header {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 0 0.75rem !important; min-height: 0 !important;
    display: flex !important; align-items: center !important; justify-content: space-between; gap: 0.75rem;
    flex-direction: row !important;
}
body.ui-premium .detail-page-header h1 {
    font-size: 1.05rem !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.3 !important;
    color: #f0f6fc !important; -webkit-text-fill-color: currentColor !important; background: none !important;
}
body.ui-premium .detail-page-header__meta { display: flex; align-items: center; gap: 0.6rem; }
body.ui-premium .detail-page-header__stamp { color: var(--p-muted) !important; font-size: 0.8rem !important; }
body.ui-premium .detail-page-header__meta { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.6rem !important; }

/* Message detail cards: same quiet left-aligned title bar as every other card
   (was a centred blue gradient bar with a blue left edge). */
body.ui-premium .quarantine-detail-page .card { border: 1px solid var(--p-line) !important; border-radius: 10px !important; }
body.ui-premium .quarantine-detail-page .card-header,
body.ui-premium .quarantine-detail-page .card-header.bg-primary,
body.ui-premium .quarantine-detail-page .card-header.text-white {
    background: transparent !important; justify-content: flex-start !important; text-align: left !important;
    padding: 0.6rem 0.9rem !important; border-bottom: 1px solid var(--p-line) !important; min-height: 0 !important;
}
body.ui-premium .quarantine-detail-page .card-header :is(h6, .risk-header-title) {
    justify-content: flex-start !important; font-size: 0.88rem !important; font-weight: 650 !important; color: #f0f6fc !important;
}

/* ══ Pass 4 (operator review 2026-10-13) ═══════════════════════════════ */
body.ui-premium .card { background: var(--ui-surface) !important; }
body.ui-premium .p-topbar-tenant::before {
    content: ""; position: absolute; left: -0.75rem; top: 15%; bottom: 15%; width: 1px; background: #30363d;
}

/* Message detail: card titles in the theme blue. */
body.ui-premium .quarantine-detail-page .card-header :is(h6, .risk-header-title) { color: #58a6ff !important; }

/* Message detail sidebar (Risk Assessment, Message Details): the same type
   scale as the main column — text 12.5, section titles 13 semibold. */
body.ui-premium .quarantine-sidebar { font-size: 12.5px; }
body.ui-premium .quarantine-sidebar .card-body :is(p, li, dd, dt, span, strong, small, a, div, td, th, label, .small):not(.badge):not(.bi):not(.btn) {
    font-size: 12.5px !important; line-height: 1.45 !important;
}
body.ui-premium .quarantine-sidebar .card-body :is(h5, h6, .h6, .fw-bold, .risk-section-title) {
    font-size: 13px !important; font-weight: 650 !important; color: #f0f6fc !important;
}

/* Combined "Message Details" card: closed by default, two labelled sections. */
body.ui-premium .p-collapse-head { cursor: pointer; user-select: none; }
body.ui-premium .p-collapse-chevron { margin-left: auto; font-size: 0.8rem; transition: transform 0.15s; }
body.ui-premium .p-collapse-head h6 { width: 100%; display: flex !important; align-items: center; gap: 0.4rem; }
body.ui-premium .p-collapse-head[aria-expanded="true"] .p-collapse-chevron { transform: rotate(180deg); }
body.ui-premium .p-subsection + .p-subsection { border-top: 1px solid var(--p-line); }
body.ui-premium .p-subhead {
    padding: 0.6rem 0.9rem 0; color: var(--p-muted); font-size: 0.7rem !important; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
}

/* The top bar is one fixed height on every page and tab (it measured 52 px on
   most tabs and 60 px on Settings/Insights: its flex children were taller than
   its content box, and whether that overflowed or stretched the bar depended on
   the page below). */
body.ui-premium .app-topnav { height: 56px !important; min-height: 56px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
body.ui-premium .app-topnav > .container-fluid { height: 100%; flex-wrap: nowrap !important; }
body.ui-premium .app-topnav .navbar-collapse { height: 100%; }
body.ui-premium .app-topnav .navbar-nav { min-height: 0 !important; height: 100%; align-items: center; }
body.ui-premium .app-topnav .navbar-brand { height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; }
@media (max-width: 991.98px) {
    body.ui-premium .app-topnav { height: auto !important; }
    body.ui-premium .app-topnav .navbar-collapse,
    body.ui-premium .app-topnav .navbar-nav { height: auto; }
}
/* The tab bar starts at the same x on the tenant page and the message page. */
body.ui-premium .quarantine-detail-page { padding-left: 0 !important; padding-right: 0 !important; }

/* ══ Pass 5: message page density ════════════════════════════════════════ */
/* A card whose tab row sits on its title line (Threat Intelligence, Content Analysis). */
body.ui-premium .quarantine-detail-page .card-header.p-head-with-tabs {
    display: flex !important; align-items: center !important; justify-content: flex-start !important;
    flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.4rem 0.9rem !important;
}
body.ui-premium .p-head-with-tabs > h6 { flex: 0 0 auto; }
body.ui-premium .card-header.p-head-with-tabs ul.nav.nav { margin: 0 !important; }
body.ui-premium .p-head-with-tabs > .d-flex { flex: 1 1 auto; padding: 0 !important; gap: 0.5rem; }
/* Received / Size / Message ID on one line. */
/* The page styles every first cell as an uppercase dim label; this cell holds
   values, and a Message-ID is case-sensitive, so it must show as written. */
body.ui-premium .quarantine-detail-page td.p-facts-cell {
    padding: 0.35rem 0.5rem !important; text-transform: none !important; letter-spacing: 0 !important;
    color: #e6edf3 !important; font-size: inherit !important;
}
body.ui-premium .p-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.75rem; align-items: baseline; min-width: 0; }
body.ui-premium .p-facts > span { white-space: nowrap; }
body.ui-premium .p-facts .p-fact-grow { flex: 1 1 260px; min-width: 0; display: flex; align-items: baseline; }
body.ui-premium .p-fact-label {
    color: var(--ui-text-dim) !important; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.6rem;
}
body.ui-premium .p-fact-id { max-width: 100%; min-width: 0; }

/* ══ Pass 6 ═════════════════════════════════════════════════════════════ */
/* Message Summary: a fixed label column so every value starts at one x. */
body.ui-premium .quarantine-detail-page .quarantine-main-column > .card:first-child table td:first-child { width: 120px !important; white-space: nowrap; }

/* The tab row and Rescan button that sit on a blue bar. */
body.ui-premium .card-header ul.nav.nav {
    background: rgba(0, 0, 0, 0.2) !important; border-color: rgba(255, 255, 255, 0.14) !important; padding: 2px !important;
}
body.ui-premium .card-header ul.nav.nav .nav-link {
    color: rgba(255, 255, 255, 0.78) !important; padding: 0.22rem 0.7rem !important; font-size: 0.76rem !important;
}
body.ui-premium .card-header ul.nav.nav .nav-link:hover { color: #ffffff !important; }
body.ui-premium .card-header ul.nav.nav .nav-link.active {
    background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; box-shadow: none !important;
}
body.ui-premium .card-header .btn:not(.btn-primary):not(.btn-danger):not(.btn-outline-danger) {
    border-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; padding: 0.2rem 0.6rem !important;
}

/* ══ Pass 7/8: every card heading is one plain dark-blue bar (operator) ════
   The old gradient's colour, made even (solid); compact; white title. A header that carries its own
   meaning colour (danger / warning / success / dark) keeps it. */
body.ui-premium .card > .card-header:not(.bg-danger):not(.bg-warning):not(.bg-success):not(.bg-dark),
body.ui-premium .quarantine-detail-page .card-header:not(.bg-danger):not(.bg-warning):not(.bg-success):not(.bg-dark) {
    background: #1b3a75 !important; border-bottom: 0 !important;
    padding: 0.35rem 0.8rem !important; min-height: 0 !important; color: #ffffff !important;
}
body.ui-premium .card > .card-header :is(h1, h2, h3, h4, h5, h6, .card-title, .gradient-text, .risk-header-title),
body.ui-premium .quarantine-detail-page .card-header :is(h6, .risk-header-title) {
    color: #ffffff !important; -webkit-text-fill-color: currentColor !important;
    font-size: 0.85rem !important; font-weight: 650 !important;
}
body.ui-premium .card > .card-header :is(.text-muted, small, .ui2-desc, .section-meta-chip) { color: rgba(255, 255, 255, 0.82) !important; }
/* The main action on a blue bar is white, so it does not vanish into it. */
body.ui-premium .card-header .btn-primary { background: #2f81f7 !important; border-color: #2f81f7 !important; color: #ffffff !important; }
body.ui-premium .card-header .btn-primary:hover { background: #388bfd !important; }
body.ui-premium .card-header a:not(.btn):not(.nav-link) { color: #ffffff !important; }
body.ui-premium .quarantine-detail-page .card-header.p-head-with-tabs { padding: 0.25rem 0.8rem !important; }

/* Message Details card: the short summary under its heading, always shown. */
body.ui-premium .p-card-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; padding: 0.55rem 0.9rem; font-size: 12.5px; }
body.ui-premium .p-card-summary .p-score { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
body.ui-premium .p-card-summary .p-fact-label { margin-right: 0.35rem; }
body.ui-premium .p-combined-card .collapse.show, body.ui-premium .p-combined-card .collapsing { border-top: 1px solid var(--p-line); }

/* Pass 8: every heading in the page body is one size — the card-heading size
   (page titles, the Overview tenant title, sidebar section titles alike). */
/* The demo's own page titles (/try, /contact) are the page's one heading and
   are sized in demo.css; forcing them to 0.85rem made them smaller than the
   body text under them. */
body.ui-premium main :is(h1, h2, h3, h4, h5, h6):not(.modal-title):not(.demo-try-title):not(.demo-form-title),
body.ui-premium .quarantine-sidebar .card-body :is(h5, h6, .h6, .fw-bold, .risk-section-title),
body.ui-premium #overview .tenant-ops-board__title {
    font-size: 0.85rem !important; font-weight: 650 !important; line-height: 1.3 !important;
}

/* Pass 9: the "0 selected" action bar matches the table header row under it —
   same background, same line, same height (operator). */
body.ui-premium .bulk-action-bar,
body.ui-premium .tenant-detail-page .bulk-action-bar {
    /* the header row's own fill: a 3% white wash over the card surface */
    background: rgba(255, 255, 255, 0.03) !important; border-top: 0 !important; border-bottom: 1px solid var(--p-line) !important;
    padding: 0.15rem 0.5rem !important; margin-top: 0 !important; min-height: 0 !important; gap: 0.3rem !important;
    line-height: 1.3 !important;
}
body.ui-premium .bulk-action-bar .count-label { font-size: 0.75rem; font-weight: 500; color: var(--p-muted) !important; margin-right: 0.3rem; }
body.ui-premium .bulk-action-bar .btn {
    font-size: 0.72rem !important; padding: 0.1rem 0.55rem !important; line-height: 1.3 !important; margin: 0 !important;
    min-height: 0 !important; height: auto !important;
}

/* Pass 10: the "0 selected" bar and the table header row under it are one
   grey (operator: grey, matching each other). The filter row above stays blue. */
body.ui-premium .bulk-action-bar,
body.ui-premium .tenant-detail-page .bulk-action-bar { background: #20262f !important; }
body.ui-premium .card .table thead th,
body.ui-premium .card .table thead td { background: #20262f !important; }

/* Pass 10: Threat and Status columns more compact (operator). The pills hug
   their word at a slightly smaller size; the alignment width drops from 95 px
   to 78 px. Columns narrow to match. A pill never truncates its word: the
   longest live words (Impersonation, Quarantined) were measured to fit. */
/* Operator follow-up: labels taller (not slim) and all one width, so
   "Impersonation" no longer sticks out. One fixed width per column, sized to
   the widest word at this font. */
body.ui-premium .work-pill {
    width: 88px !important; min-width: 0 !important; max-width: 100% !important;
    padding: 0.28em 0.35em !important; font-size: 0.68rem !important; line-height: 1.25 !important;
    font-weight: 600 !important; border-radius: 6px !important;
}
body.ui-premium .work-pill + .work-pill { width: auto !important; }
body.ui-premium th.work-col-threat { width: 98px !important; }
body.ui-premium th.work-col-status { width: 98px !important; }
body.ui-premium :is(th, td):is([data-column-id="threat"], [data-column-id="status"], [data-column-id="threat_type"]) {
    padding-left: 0.25rem !important; padding-right: 0.25rem !important;
}

/* Pass 13/14: every FILTER / TOOLBAR row is grey on every page (operator) —
   a card header that holds a dropdown, a text box or an action button is a
   control row, not a heading; a pure title stays the blue heading bar. The
   message page's tab-row headers and the collapse header are headings. Same grey as the "0 selected" bar and the column headers below. */
body.ui-premium .card > .card-header:not(.bg-danger):not(.bg-warning):not(.bg-success):not(.bg-dark):not(.p-head-with-tabs):not(.p-collapse-head):has(.btn, select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])) {
    background: #20262f !important; border-bottom: 1px solid var(--p-line) !important;
}
body.ui-premium .card > .card-header:not(.p-head-with-tabs):not(.p-collapse-head):has(.btn, select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])) :is(h1, h2, h3, h4, h5, h6, .gradient-text) {
    color: #f0f6fc !important;
}

/* Pass 13: Email Authentication is wider and shows its six checks as three
   rows of two (SPF|DKIM, DMARC|ARC, DKIM d=|DMARC p=). Each check keeps its own
   click-through to the detail modal. */
body.ui-premium table.p-auth-grid thead { display: none; }
body.ui-premium table.p-auth-grid tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; }
body.ui-premium table.p-auth-grid tbody tr {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0;
    border-bottom: 1px solid var(--p-line);
}
body.ui-premium table.p-auth-grid tbody tr > td { border: 0 !important; padding: 0.35rem 0.25rem !important; min-width: 0; }
body.ui-premium table.p-auth-grid tbody tr > td:last-child { text-align: right !important; }
body.ui-premium table.p-auth-grid tbody tr:has(.detail-section-divider) { display: none; }
body.ui-premium table.p-auth-grid tbody tr > td:first-child { white-space: nowrap; }
/* A long signing domain wraps; it is never cut short. */
body.ui-premium table.p-auth-grid .detail-badge-break { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: right; }

/* Pass 14 (re-set operator 2026-10-13): Email Authentication in two columns --
   the protocol results on the left (SPF, DKIM, DMARC), Chain & Policy on the
   right (ARC, DKIM d=, DMARC p=). Rows keep their template order; only
   placement changes. Every check is ONE line: a long signing domain is cut
   with an ellipsis and its badge's title carries the whole name. */
body.ui-premium table.p-auth-grid tbody { grid-auto-flow: row; column-gap: 1rem; }
body.ui-premium table.p-auth-grid tbody > tr:nth-child(1) { grid-column: 1; grid-row: 1; }
body.ui-premium table.p-auth-grid tbody > tr:nth-child(2) { grid-column: 1; grid-row: 2; }
body.ui-premium table.p-auth-grid tbody > tr:nth-child(3) { grid-column: 1; grid-row: 3; }
body.ui-premium table.p-auth-grid tbody > tr:nth-child(5) { grid-column: 2; grid-row: 1; }
body.ui-premium table.p-auth-grid tbody > tr:nth-child(6) { grid-column: 2; grid-row: 2; }
body.ui-premium table.p-auth-grid tbody > tr:nth-child(7) { grid-column: 2; grid-row: 3; }
body.ui-premium table.p-auth-grid tbody tr > td { white-space: nowrap; }
body.ui-premium table.p-auth-grid tbody tr > td:first-child { flex: none; }
body.ui-premium table.p-auth-grid tbody tr > td:last-child { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: 0.25rem; min-width: 0; overflow: hidden; }
body.ui-premium table.p-auth-grid .detail-badge-break { display: block; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; min-width: 0; max-width: 100%; }
body.ui-premium table.p-auth-grid .p-auth-more { display: inline !important; flex: none; }

/* ══ Simple Overview (operator 2026-10-13; graphs and lists 2026-10-19, T-004) ══
   Three numbers, mail per day, what was flagged, top senders
   (_overview_simple.html). The rest of the pane is folded until "Show all
   details" (ui-premium.js toggles .p-ov-all).
   Chart colours are tokens, so the light theme is a token swap. Each series pair
   passed the dataviz palette check (lightness band, chroma, colour-blind and
   normal-vision separation, 3:1 on the card) on its own surface:
     dark  #1a2029: not held #4c8fe0 / held #c4861a; person #3a9f5c / AI #8b74e8
     light #ffffff: not held #2a78d6 / held #c98500; person #1f8a4c / AI #7457d6
   Threat bars are emphasis, not identity: red for threats, grey for the rest,
   and the group heading says which is which in words.
   Type follows the Overview scale above: titles 14.5, text 12.5, labels 10.5-11. */
body.ui-premium #overview {
    --ov-ink: #f0f6fc; --ov-muted: #8b949e; --ov-line: #2b323d;
    --ov-grid: #242b35; --ov-axis: #3d4550; --ov-track: #232a34;
    --ov-hover: rgba(139, 148, 158, 0.10); --ov-tip: #212833;
    --ov-passed: #4c8fe0; --ov-held: #c4861a; --ov-held-track: rgba(196, 134, 26, 0.18);
    --ov-person: #3a9f5c; --ov-ai: #8b74e8;
    --ov-hard: #e5534b; --ov-soft: #768390; --ov-volume: #4c8fe0;
    --ov-link: #58a6ff; --ov-warn: #e3b341;
}
/* Light: the console ships dark only today (base.html pins data-bs-theme="dark").
   The Overview is token-driven so it follows the day a light theme lands; the
   card surface tokens are re-pointed here so its cards never put dark ink on
   a dark card. */
html[data-bs-theme="light"] body.ui-premium #overview {
    --ui-surface: #ffffff; --ui-border: #d1d9e0; --p-line: #d1d9e0; --p-muted: #59636e;
    --ov-ink: #1f2328; --ov-muted: #59636e; --ov-line: #d1d9e0;
    --ov-grid: #eef1f4; --ov-axis: #c4ccd5; --ov-track: #eef1f4;
    --ov-hover: rgba(89, 99, 110, 0.08); --ov-tip: #ffffff;
    --ov-passed: #2a78d6; --ov-held: #c98500; --ov-held-track: rgba(201, 133, 0, 0.16);
    --ov-person: #1f8a4c; --ov-ai: #7457d6;
    --ov-hard: #cf222e; --ov-soft: #8c959f; --ov-volume: #2a78d6;
    --ov-link: #0969da; --ov-warn: #9a6700;
}
body.ui-premium .p-ov { display: grid; gap: 0.75rem; margin-bottom: 0.9rem; }
body.ui-premium .p-ov-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
body.ui-premium .p-ov-range-label { color: var(--ov-muted); font-size: 0.8rem; font-weight: 600; }
body.ui-premium .p-ov-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
body.ui-premium .p-ov-kpi { padding: 0.9rem 1rem; margin: 0 !important; text-decoration: none; color: inherit; display: block; }
body.ui-premium .p-ov-kpi--link:hover { border-color: #484f58 !important; }
body.ui-premium .p-ov-kpi__label { color: var(--ov-muted); font-size: 0.78rem; font-weight: 600; }
body.ui-premium .p-ov-kpi__value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ov-ink); margin: 0.15rem 0; }
body.ui-premium .p-ov-kpi__sub { color: var(--ov-muted); font-size: 0.78rem; }
body.ui-premium .p-ov-kpi--link .p-ov-kpi__sub { color: var(--ov-link); }
body.ui-premium .p-ov-meter { display: block; height: 4px; border-radius: 2px; background: var(--ov-held-track); overflow: hidden; margin: 0.3rem 0 0.4rem; }
body.ui-premium .p-ov-meter__fill { display: block; height: 100%; border-radius: 2px; background: var(--ov-held); }
body.ui-premium .p-ov-setup { justify-self: start; color: var(--ov-warn); font-size: 0.82rem; text-decoration: none; }
body.ui-premium .p-ov-empty { padding: 1.25rem 0 0.5rem; color: var(--ov-muted); }
body.ui-premium .p-ov-empty--warn { color: var(--ov-warn); }
body.ui-premium .p-ov-more { text-align: center; margin: 0.25rem 0 1rem; }

body.ui-premium .p-ov-card { margin: 0 !important; padding: 0.85rem 1rem 0.95rem; min-width: 0; }
body.ui-premium .p-ov-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
body.ui-premium .p-ov-card__title { margin: 0; color: var(--ov-ink); font-size: 14.5px; font-weight: 650; letter-spacing: -0.005em; line-height: 1.3; }
body.ui-premium #overview .p-ov-card__window { color: var(--ov-muted); font-size: 11px; margin-top: 0.1rem; }
body.ui-premium .p-ov-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0.15rem 0 0; padding: 0; list-style: none; color: var(--ov-muted); }
body.ui-premium .p-ov-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
body.ui-premium .p-ov-key { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
body.ui-premium .p-ov-key--passed { background: var(--ov-passed); }
body.ui-premium .p-ov-key--held { background: var(--ov-held); }
body.ui-premium .p-ov-key--person { background: var(--ov-person); }
body.ui-premium .p-ov-key--ai { background: var(--ov-ai); }

/* Charts (static/js/tenant/overview-charts.js draws at the box's pixel size). */
body.ui-premium .p-ov-chart { position: relative; height: 210px; border-radius: 6px; outline: none; }
body.ui-premium .p-ov-chart--short { height: 170px; }
body.ui-premium .p-ov-chart:focus-visible { box-shadow: 0 0 0 2px var(--ov-link); }
body.ui-premium .p-ov-chart__svg { display: block; overflow: visible; }
body.ui-premium .p-ov-grid { stroke: var(--ov-grid); stroke-width: 1; shape-rendering: crispEdges; }
body.ui-premium .p-ov-axis { stroke: var(--ov-axis); stroke-width: 1; shape-rendering: crispEdges; }
body.ui-premium .p-ov-tick { fill: var(--ov-muted); font-family: inherit; font-size: 10.5px; font-variant-numeric: tabular-nums; }
body.ui-premium .p-ov-hoverband { fill: var(--ov-hover); }
body.ui-premium .p-ov-fill--passed { fill: var(--ov-passed); }
body.ui-premium .p-ov-fill--held { fill: var(--ov-held); }
body.ui-premium .p-ov-fill--person { fill: var(--ov-person); }
body.ui-premium .p-ov-fill--ai { fill: var(--ov-ai); }
body.ui-premium .p-ov-cols > g { transition: opacity 0.12s linear; }
body.ui-premium .p-ov-cols.is-hovering > g:not(.is-on) { opacity: 0.5; }
body.ui-premium .p-ov-tip {
    position: absolute; top: 2px; z-index: 3; min-width: 150px; padding: 0.5rem 0.65rem;
    background: var(--ov-tip); border: 1px solid var(--ov-line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.35); color: var(--ov-ink); pointer-events: none;
}
body.ui-premium #overview .p-ov-tip__day { color: var(--ov-muted); font-weight: 600; margin-bottom: 0.25rem; }
body.ui-premium .p-ov-tip__row { display: flex; align-items: center; gap: 0.45rem; }
body.ui-premium .p-ov-tip__row strong { margin-left: auto; padding-left: 1rem; font-variant-numeric: tabular-nums; }
body.ui-premium .p-ov-tip__row--total { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--ov-line); }

/* Lists: one row = name, number, and a bar scaled to the list's largest. */
body.ui-premium .p-ov-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
body.ui-premium #overview .p-ov-group { color: var(--ov-muted); font-size: 11px; font-weight: 600; margin: 0.65rem 0 0.15rem; }
body.ui-premium #overview .p-ov-card__head + .p-ov-group { margin-top: 0; }
body.ui-premium .p-ov-bars { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
body.ui-premium .p-ov-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 0.75rem;
    margin: 0 -0.5rem; padding: 0.38rem 0.5rem; border-radius: 6px; color: var(--ov-ink); text-decoration: none;
}
body.ui-premium a.p-ov-bar:hover, body.ui-premium a.p-ov-bar:focus-visible { background: var(--ov-hover); color: var(--ov-ink); }
body.ui-premium .p-ov-bar__label { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
body.ui-premium .p-ov-bar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-premium .p-ov-bar__value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
body.ui-premium #overview .p-ov-bar__held { color: var(--ov-warn); font-weight: 500; margin-left: 0.6rem; }
body.ui-premium .p-ov-bar__track { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: var(--ov-track); overflow: hidden; }
body.ui-premium .p-ov-bar__fill { display: block; height: 100%; border-radius: 2px; }
body.ui-premium .p-ov-bar__fill--hard { background: var(--ov-hard); }
body.ui-premium .p-ov-bar__fill--soft { background: var(--ov-soft); }
body.ui-premium .p-ov-bar__fill--volume { background: var(--ov-volume); }
body.ui-premium #overview .p-ov-new { flex: none; padding: 0 0.3rem; border: 1px solid currentColor; border-radius: 4px; color: var(--ov-link); font-size: 10.5px; font-weight: 600; line-height: 1.4; }
body.ui-premium .p-ov-more-rows > summary { margin-top: 0.45rem; color: var(--ov-link); cursor: pointer; }
body.ui-premium .p-ov-more-rows[open] > summary { margin-bottom: 0.25rem; }

@media (max-width: 860px) {
    body.ui-premium .p-ov-kpis, body.ui-premium .p-ov-lists { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    body.ui-premium .p-ov-cols > g { transition: none; }
}

/* Folded until asked for: the old board, the breakdown cards, quick links
   and the lower panels. Unfolded, the release chart and the AI verdicts sit
   two-up (the mail chart and both lists live in the simple view above). */
body.ui-premium #overview:not(.p-ov-all) :is(.tenant-ops-board, .overview-trend-grid, .overview-insight-grid, .overview-quick-grid, .overview-detail-grid, .overview-bottom-grid) { display: none !important; }
body.ui-premium #overview .overview-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 575.98px) { body.ui-premium #overview .overview-insight-grid { grid-template-columns: 1fr; } }
body.ui-premium #overview .p-ov-kpi__value { font-size: 1.75rem !important; line-height: 1.15 !important; }
body.ui-premium #overview .p-ov-kpi__label, body.ui-premium #overview .p-ov-kpi__sub { font-size: 0.78rem !important; }

/* Message page: the ML model's three scores are the relabel buttons (operator
   2026-10-13). The model's top class is solid, the others dimmed; the human
   label carries a blue ring. */
body.ui-premium .p-ml-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
body.ui-premium .p-ml-choice { border: 0; cursor: default; font-size: 0.72rem !important; padding: 0.36em 0.6em !important; }
body.ui-premium button.p-ml-choice { cursor: pointer; }
body.ui-premium .p-ml-choice--other { opacity: 0.55; }
body.ui-premium button.p-ml-choice:hover, body.ui-premium .p-ml-choice.rq-current { opacity: 1; }
body.ui-premium .p-ml-choice.rq-current { box-shadow: 0 0 0 2px #58a6ff !important; }

/* Fixed label width only in the mail lists' Threat / Status / Recipient
   columns. Elsewhere (look-alikes "Hostile — not held", tags) a label sizes to
   its words: a fixed width cut them off. */
body.ui-premium .work-pill { width: auto !important; min-width: min(78px, 100%) !important; }
body.ui-premium :is(td[data-column-id="threat"], td[data-column-id="status"], td[data-column-id="recipient_status"]) .work-pill { width: 88px !important; min-width: 0 !important; }
/* Selection checkbox column: never clipped at the table's left edge. */
body.ui-premium table td:first-child > input[type="checkbox"]:only-child,
body.ui-premium table th:first-child > input[type="checkbox"]:only-child { margin: 0 0 0 0.15rem !important; position: static !important; }
body.ui-premium table :is(td, th):first-child:has(> input[type="checkbox"]:only-child) { min-width: 30px; padding-left: 0.5rem !important; }
/* Headings are never underlined (the rule editor's page-local CSS underlined
   every h1-h3, including its sidebar guide headings). */
body.ui-premium main :is(h1, h2, h3, h4, h5, h6) { text-decoration: none !important; }
/* The blue label had no contrast-checked shade (ui-refresh defines the others),
   so it fell back to the light theme blue under white text. */
body.ui-premium .badge.bg-primary { background: #1f6feb !important; color: #ffffff !important; }

/* Domain Ratings' own sub-tab row: ui-v2 styles it by id, so match by id to make
   it the same segmented control as every other sub-tab row. */
body.ui-premium #domainScoresTabs.nav { display: inline-flex !important; gap: 2px !important; padding: 3px !important; background: #161b22 !important; border: 1px solid var(--p-line) !important; border-radius: 9px !important; margin: 0.9rem 0 !important; }
body.ui-premium #domainScoresTabs .nav-link { background: transparent !important; border: 0 !important; border-radius: 6px !important; color: var(--p-muted) !important; font-size: 0.8rem !important; font-weight: 500 !important; padding: 0.36rem 0.85rem !important; box-shadow: none !important; }
body.ui-premium #domainScoresTabs .nav-link:hover { color: #f0f6fc !important; }
body.ui-premium #domainScoresTabs .nav-link.active { background: #1c2129 !important; color: #f0f6fc !important; box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px #30363d inset !important; }
body.ui-premium #domainScoresTabs .nav-link .badge { font-size: 0.68rem !important; padding: 0.14rem 0.42rem !important; }
body.ui-premium .dr-actions .dropdown-menu { min-width: 12rem; }

/* Message page: the URL "ML" badge is the link's classify menu (operator). */
body.ui-premium button.p-ml-url { cursor: pointer; }
body.ui-premium button.p-ml-url:hover { filter: brightness(1.15); }
/* Ruled = the ruling label is showing; CSS, so it updates the moment a ruling saves. */
body.ui-premium .seg-url-rule:has(.seg-url-rule-cur:not(.d-none)) button.p-ml-url { box-shadow: 0 0 0 2px #58a6ff !important; }
body.ui-premium .seg-url-rule .seg-url-rule-cur { margin-left: 0.25rem; }
body.ui-premium .seg-url-rule .dropdown-item.active { background: rgba(88, 166, 255, 0.18) !important; color: #f0f6fc !important; }

/* Users page: the count beside the heading (same chip as the tenant page's
   pane headings) and one label width for every role, sized to the longest
   ("Platform support"). */
body.ui-premium .users-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); font-size: 0.72rem; font-weight: 600; vertical-align: middle;
}
body.ui-premium .users-page td[data-column-id="role"] .work-pill { width: 112px !important; min-width: 0 !important; }