/*
 * ui-2026.css -- the premium layer (operator 2026-10-30: "make everything look
 * like a premium application"). Loads LAST, after ui-premium.css, and only
 * The theme rules apply only when <body> carries .ui-2026 (switch SEG_UI_2026,
 * app/rollout_registry.py: a browser opts in at /ui/look?v=2026). The x-*
 * layout components and their tokens work in both looks, so a page rebuilt
 * on them reads well either way.
 *
 * Direction: quiet surfaces, hairline borders, no coloured header bars; type
 * and spacing carry the hierarchy. Badges keep their colours (operator rule);
 * hovers change colour only, never position.
 */

body.ui-premium {
    --x-bg: #0a0d12;
    --x-surface: #10151c;
    --x-surface-2: #151b24;
    --x-raise: #1a212c;
    --x-line: #1f2631;
    --x-line-2: #2a3240;
    --x-text: #e6edf3;
    --x-text-2: #c3ccd7;
    --x-muted: #8a95a3;
    --x-accent: #3b82f6;
    --x-accent-2: #5b9bff;
    --x-ring: rgba(59, 130, 246, 0.28);
    --x-radius: 12px;
    --x-radius-sm: 8px;
}
body.ui-premium.ui-2026 {
    --ui-bg: var(--x-bg); --ui-bg-alt: var(--x-bg); --ui-surface: var(--x-surface);
    --ui-surface-raised: var(--x-surface-2); --ui-border: var(--x-line); --ui-border-strong: var(--x-line-2);
    --ui-text: var(--x-text); --ui-text-muted: var(--x-text-2); --ui-text-dim: var(--x-muted);
    --p-line: var(--x-line); --p-muted: var(--x-muted);
    background: var(--x-bg) !important;
    color: var(--x-text);
    -webkit-font-smoothing: antialiased;
}
body.ui-premium.ui-2026 main.page-shell, body.ui-premium.ui-2026 .page-shell { background: transparent !important; }
html:has(body.ui-premium.ui-2026) { background-color: #0a0d12 !important; }

/* ── Account / profile ───────────────────────────────────────────────── */
body.ui-premium .x-page { max-width: 880px; margin: 0 auto; padding-top: 0.75rem; }
body.ui-premium .x-profile { display: flex; align-items: center; gap: 1rem; }
body.ui-premium .x-avatar {
    width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
}
body.ui-premium .x-profile__name { font-size: 1.05rem; font-weight: 650; color: var(--x-text); margin: 0; }
body.ui-premium .x-profile__mail { color: var(--x-muted); font-size: 0.88rem; }
body.ui-premium .x-profile__tags { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
body.ui-premium .x-section-title { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-muted); margin: 1.6rem 0 0.6rem; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
body.ui-premium.ui-2026 .app-topnav {
    background: rgba(10, 13, 18, 0.82) !important; border-bottom: 1px solid var(--x-line) !important;
    backdrop-filter: saturate(140%) blur(10px);
}
body.ui-premium.ui-2026 .p-topbar-tenant { background: var(--x-surface) !important; border-color: var(--x-line-2) !important; }

/* ── Page header: one title, one quiet line ──────────────────────────── */
body.ui-premium.ui-2026 .page-header { margin: 0.4rem 0 1.25rem !important; }
/* Heading and its one-line description stay on one line (operator 2026-09-23). */

body.ui-premium.ui-2026 main .page-header :is(h1, h2, h3).page-title.page-title,
body.ui-premium.ui-2026 main :is(h1, h2).page-title.page-title.page-title {
    font-size: 1.35rem !important; font-weight: 650 !important; letter-spacing: -0.015em !important;
    color: var(--x-text) !important; margin: 0 !important; line-height: 1.25 !important;
}
body.ui-premium.ui-2026 .page-header .page-subtitle.page-subtitle { color: var(--x-muted) !important; font-size: 0.9rem !important; margin: 0 !important; }

/* ── Cards: no coloured bars; title + hairline ───────────────────────── */
body.ui-premium.ui-2026 .card {
    background: var(--x-surface) !important; border: 1px solid var(--x-line) !important;
    border-radius: var(--x-radius) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
}
body.ui-premium.ui-2026 .card:hover { border-color: var(--x-line) !important; }
body.ui-premium.ui-2026 .card > .card-header:not(.bg-danger):not(.bg-warning):not(.bg-success):not(.bg-dark),
body.ui-premium.ui-2026 .quarantine-detail-page .card-header:not(.bg-danger):not(.bg-warning):not(.bg-success):not(.bg-dark),
body.ui-premium.ui-2026 .card-header {
    background: transparent !important; color: var(--x-text) !important;
    border-bottom: 1px solid var(--x-line) !important; padding: 0.6rem 1rem !important; min-height: 0 !important;
}
body.ui-premium.ui-2026 .card > .card-header :is(h1, h2, h3, h4, h5, h6, .card-title, .gradient-text, .risk-header-title),
body.ui-premium.ui-2026 .card-header :is(h1, h2, h3, h4, h5, h6, .card-title, .gradient-text) {
    color: var(--x-text) !important; font-size: 0.95rem !important; font-weight: 650 !important;
    letter-spacing: -0.01em !important;
}
body.ui-premium.ui-2026 .card > .card-header :is(.text-muted, small, .ui2-desc, .section-meta-chip) { color: var(--x-muted) !important; }
body.ui-premium.ui-2026 .card-header a:not(.btn):not(.nav-link) { color: var(--x-accent-2) !important; }
body.ui-premium.ui-2026 .card-header .btn:not(.btn-primary):not(.btn-danger):not(.btn-outline-danger) {
    border-color: var(--x-line-2) !important; color: var(--x-text-2) !important;
}
body.ui-premium.ui-2026 .card-body { padding: 0.9rem 1rem !important; }
body.ui-premium.ui-2026 .card-body.p-0 { padding: 0 !important; }
body.ui-premium.ui-2026 .card-footer { background: var(--x-surface-2) !important; border-top: 1px solid var(--x-line) !important; padding: 0.6rem 1rem !important; }
body.ui-premium.ui-2026 .section-card + .section-card, body.ui-premium.ui-2026 .card.mb-3 { margin-bottom: 1rem !important; }

/* ── Forms ───────────────────────────────────────────────────────────── */
body.ui-premium.ui-2026 .form-label, body.ui-premium.ui-2026 label.form-label {
    color: var(--x-text-2) !important; font-size: 0.82rem !important; font-weight: 550 !important; margin-bottom: 0.35rem !important;
}
body.ui-premium.ui-2026 :is(.form-control, .form-select) {
    background-color: #0c1016 !important; border: 1px solid var(--x-line-2) !important; color: var(--x-text) !important;
    border-radius: var(--x-radius-sm) !important; min-height: 38px; font-size: 0.9rem !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}
body.ui-premium.ui-2026 :is(.form-control-sm, .form-select-sm) { min-height: 34px; font-size: 0.86rem !important; }
body.ui-premium.ui-2026 :is(.form-control, .form-select)::placeholder { color: #5d6875 !important; }
body.ui-premium.ui-2026 :is(.form-control, .form-select):hover { border-color: #384152 !important; }
body.ui-premium.ui-2026 :is(.form-control, .form-select):focus {
    border-color: var(--x-accent) !important; box-shadow: 0 0 0 3px var(--x-ring) !important; outline: 0 !important;
}
body.ui-premium.ui-2026 .form-text, body.ui-premium.ui-2026 .form-hint { color: var(--x-muted) !important; font-size: 0.8rem !important; }
body.ui-premium.ui-2026 .form-check-input { border-color: var(--x-line-2) !important; background-color: #0c1016 !important; }
body.ui-premium.ui-2026 .form-check-input:checked { background-color: var(--x-accent) !important; border-color: var(--x-accent) !important; }

/* ── Buttons: three kinds, one height ────────────────────────────────── */
body.ui-premium.ui-2026 .btn {
    border-radius: var(--x-radius-sm) !important; font-weight: 600 !important; font-size: 0.86rem !important;
    padding: 0.45rem 0.95rem !important; min-height: 36px; letter-spacing: -0.005em;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
body.ui-premium.ui-2026 .btn-sm { min-height: 32px; padding: 0.3rem 0.75rem !important; font-size: 0.82rem !important; }
body.ui-premium.ui-2026 .btn-primary {
    background: var(--x-accent) !important; border: 1px solid var(--x-accent) !important; color: #fff !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
body.ui-premium.ui-2026 .btn-primary:hover { background: var(--x-accent-2) !important; border-color: var(--x-accent-2) !important; }
body.ui-premium.ui-2026 :is(.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-light) {
    background: var(--x-surface-2) !important; border: 1px solid var(--x-line-2) !important; color: var(--x-text) !important;
}
body.ui-premium.ui-2026 :is(.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-light):hover {
    background: var(--x-raise) !important; border-color: #3a4352 !important;
}
body.ui-premium.ui-2026 .btn-outline-danger { background: transparent !important; border: 1px solid rgba(248, 81, 73, 0.45) !important; color: #ff7b72 !important; }
body.ui-premium.ui-2026 .btn-outline-danger:hover { background: rgba(248, 81, 73, 0.1) !important; }
body.ui-premium.ui-2026 .btn-danger { background: #da3633 !important; border-color: #da3633 !important; }

/* ── Tabs: one segmented control ─────────────────────────────────────── */
body.ui-premium.ui-2026 :is(.settings-tabs, .admin-subtabs, .nav-tabs:not(.tenant-tabs-list), .nav-pills) {
    background: var(--x-surface) !important; border: 1px solid var(--x-line) !important; border-radius: 10px !important;
    padding: 4px !important; gap: 2px; display: inline-flex !important; flex-wrap: wrap;
}
body.ui-premium.ui-2026 :is(.settings-tabs, .admin-subtabs, .nav-tabs:not(.tenant-tabs-list), .nav-pills) .nav-link {
    border: 0 !important; border-radius: 7px !important; color: var(--x-muted) !important; font-weight: 550 !important;
    font-size: 0.86rem !important; padding: 0.4rem 0.85rem !important; background: transparent !important;
}
body.ui-premium.ui-2026 :is(.settings-tabs, .admin-subtabs, .nav-tabs:not(.tenant-tabs-list), .nav-pills) .nav-link:hover { color: var(--x-text) !important; background: var(--x-surface-2) !important; }
body.ui-premium.ui-2026 :is(.settings-tabs, .admin-subtabs, .nav-tabs:not(.tenant-tabs-list), .nav-pills) .nav-link.active {
    color: var(--x-text) !important; background: var(--x-raise) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--x-line-2) inset !important;
}

/* ── Tables: new colours, classic row height and badges (operator 2026-10-31:
   "the threat and status labels of classic + the compact lines"). Padding is
   never overridden here: wider cells squeezed the fixed-width status badges
   until "Quarantined" was clipped. ── */
body.ui-premium.ui-2026 .table { --bs-table-bg: transparent; color: var(--x-text-2) !important; }
body.ui-premium.ui-2026 .table > thead > tr > th, body.ui-premium.ui-2026 .table thead th {
    background: var(--x-surface-2) !important; color: var(--x-muted) !important; border-bottom: 1px solid var(--x-line) !important;
}
body.ui-premium.ui-2026 .table > tbody > tr > td { border-color: var(--x-line) !important; }
body.ui-premium.ui-2026 .table-hover > tbody > tr:hover > * { background: rgba(255, 255, 255, 0.025) !important; }

/* ── Alerts ──────────────────────────────────────────────────────────── */
body.ui-premium.ui-2026 .alert { border-radius: var(--x-radius-sm) !important; border-width: 1px !important; font-size: 0.88rem; }
body.ui-premium.ui-2026 .alert-warning { background: rgba(210, 153, 34, 0.1) !important; border-color: rgba(210, 153, 34, 0.35) !important; color: #e3b341 !important; }
body.ui-premium.ui-2026 .alert-info { background: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: #9ec5ff !important; }
body.ui-premium.ui-2026 .alert-danger { background: rgba(248, 81, 73, 0.1) !important; border-color: rgba(248, 81, 73, 0.35) !important; color: #ffa198 !important; }
body.ui-premium.ui-2026 .alert-success { background: rgba(46, 160, 67, 0.12) !important; border-color: rgba(46, 160, 67, 0.35) !important; color: #7ee2a8 !important; }

/* ── Settings rows: label + help on the left, control on the right ───── */
/* Compact rows (operator 2026-10-31): padding, never a smaller font. */
body.ui-premium .x-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding: 0.55rem 1rem; align-items: center; }
body.ui-premium .x-set + .x-set { border-top: 1px solid var(--x-line); }
body.ui-premium .x-set__title { color: var(--x-text); font-weight: 600; font-size: 0.9rem; margin: 0 0 0.1rem; }
body.ui-premium .x-set__help { color: var(--x-muted); font-size: 0.82rem; margin: 0; line-height: 1.35; }
body.ui-premium .x-set__control { min-width: 0; }
body.ui-premium .x-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.55rem 1rem; border-top: 1px solid var(--x-line); background: var(--x-surface-2); }
body.ui-premium .x-dl { display: grid; grid-template-columns: 9rem 1fr; gap: 0.65rem 1rem; margin: 0; }
body.ui-premium .x-dl dt { color: var(--x-muted); font-weight: 500; font-size: 0.86rem; }
body.ui-premium .x-dl dd { margin: 0; color: var(--x-text); }
body.ui-premium .x-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
body.ui-premium .x-chip {
    border: 1px solid var(--x-line-2); background: var(--x-surface-2); color: var(--x-text-2); border-radius: 999px;
    font-size: 0.78rem; font-weight: 550; padding: 0.22rem 0.7rem; cursor: pointer;
}
body.ui-premium .x-chip:hover { color: var(--x-text); border-color: #3a4352; }
@media (max-width: 767.98px) {
    body.ui-premium .x-set { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Footer */
body.ui-premium.ui-2026 footer, body.ui-premium.ui-2026 .app-footer { border-top-color: var(--x-line) !important; color: #5d6875 !important; }

/* The workspace tab bar keeps its underline style (it is navigation, not a
   switch); only its colours follow the new palette. */
body.ui-premium.ui-2026 .tenant-tabs-list { border-bottom: 1px solid var(--x-line) !important; }
body.ui-premium.ui-2026 .tenant-tabs-list .nav-link { color: var(--x-muted) !important; }
body.ui-premium.ui-2026 .tenant-tabs-list .nav-link:hover { color: var(--x-text) !important; }
body.ui-premium.ui-2026 .tenant-tabs-list .nav-link.active { color: var(--x-text) !important; border-bottom-color: var(--x-accent) !important; }
/* Input-group addons (the "-" in front of penalties) match the inputs. */
body.ui-premium.ui-2026 .input-group-text { background: var(--x-surface-2) !important; border-color: var(--x-line-2) !important; color: var(--x-muted) !important; }