/* ===== source: /css/site.css ===== */
/* ===========================
   HIVE Insurance Claims App
   Global Styles
   =========================== */

:root {
    /* Shared list-chip tokens. The lifecycle tabs on /Claims and the quick-filter chips on
       the contract list both paint with these, so they must resolve on EVERY page — a token
       scoped to one page's container is how the same markup rendered gold on one list and
       transparent on the other. */
    /* Brandbook palette (Insurance Bee guidelines 28-10-2025): ORANGE #F47421,
       YELLOW #F8A900, OFF-WHITE #EAE7D8, GREY #201B16, BLACK #000000.
       Derived shades come from scripts/qa/brand-palette-derive.py — re-run it
       rather than hand-picking if one is ever questioned.
       YELLOW IS A FILL COLOUR ONLY: #F8A900 as text on white is ~1.9:1. */
    --gold: #F8A900;
    --gold-soft: #FFECC2;
    --gold-dark: #C18400;

    --accent-orange: #F47421;
    --accent-orange-line: #EE7B25;
    --accent-orange-muted: #662910;
    --accent-orange-deep: #ED650B;
    --accent-brown-button: #fff;
    /* Orange AS TEXT — never the fill colour (2.85:1). 5.19:1 on the card. */
    --accent-orange-text: #B44C09;

    --sidebar-bg: #000000;
    --sidebar-hover: #1a1a1a;
    --sidebar-active: var(--accent-orange-muted);
    --sidebar-text: #ffffff;
    --sidebar-text-active: #ffffff;
    --sidebar-width: 280px;
    --sidebar-rail-width: 64px;

    /* ---- FAB stack safe area (V3 / P5) -----------------------------------
       The bottom-right cluster is fixed: the AI assistant FAB (52px tall at
       bottom:80px, so its top edge is 132px up) with the scroll chevrons
       (40px at bottom:24px) tucked underneath it. Anything that scrolls page
       content therefore has to reserve that band, or the last card/table row
       ends up underneath a floating button.
       ONE token, consumed by every `.main-content` padding declaration below
       (base + the 1024/768/576 tiers). Before this existed only the >1024
       declaration carried a bottom safe-area, which is exactly why the FAB
       overlapped content from 390px all the way to 1024px. */
    --fab-stack-height: 132px;
    --content-safe-bottom: 148px;

    --primary: var(--accent-orange);
    --primary-hover: var(--accent-orange-deep);
    --primary-text: var(--accent-orange-text);
    --primary-light: rgba(244, 116, 33, 0.12);
    /* Read by permission-matrix.css, claims-columns.css and email-tracking-v2.css, each of which
       carried its own pale-peach literal as a fallback because this token was never defined —
       a light-only colour that stayed light on a dark ground. Translucent like --primary-light,
       so it composites over whichever surface is behind it. */
    --primary-soft: rgba(244, 116, 33, 0.18);

    /* Neutrals on the brand off-white ground.

       --bg is a 40% tint of brandbook OFF-WHITE #EAE7D8 in white, NOT the
       off-white at full strength. Full strength measures 0.796 luminance against
       0.913 for the ground it replaced — a 12.8% drop applied to every page at
       once, which reads as a heavy product rather than a warm one, and is darker
       than the design reference. The 40% tint lands on 0.9131, i.e. the SAME
       weight as the ground before the palette arc, while staying brand-derived.
       Full-strength OFF-WHITE keeps a real job as --table-header-bg (theme.css).

       The secondary/muted greys stay solved against the DARKEST ground they can
       land on, which is now that header band (#EAE7D8), not the page: solving
       them against the lighter page would pass on the page and fail on the band.
       Measured 5.00:1 and 4.58:1 on #EAE7D8; more on the page and on cards. */
    --bg: #F7F5EF;
    --surface: #FFFDF8;
    --border: #DDD8C7;
    --text: #201B16;
    --text-secondary: #66605A;
    --text-muted: #6B6661;

    --danger: #C53030;
    --success: #38a169;
    --warning: #d69e2e;
    --info: #3182ce;

    --radius: 8px;
    --radius-sm: 4px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);

    --font-nav: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-support: 'Source Sans 3', 'Source Sans 3 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* HIVE-651 companion: partial SS3 (one of two faces missed its optional
   window) renders mixed glyphs — unify on the metric fallback instead. */
html.ss3-partial {
    --font-support: 'Source Sans 3 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font: var(--font-ui);
}

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

html,
body {
    font-family: var(--font-support);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    height: 100%;
    margin: 0 !important;
    overflow: hidden;
}

button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

/* Pointer affordance, app-wide (owner review 2026-09-03). Anything that behaves like a control shows
   the hand; anything that cannot be used says so. Element-level specificity on purpose — a component
   that needs `move` (a drag handle) or `text` (an editable cell) still overrides it. */
button,
summary,
label[for],
select,
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"],
[type="button"],
[type="submit"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]::file-selector-button {
    cursor: pointer;
}

button:disabled,
select:disabled,
[type="button"]:disabled,
[type="submit"]:disabled,
[type="reset"]:disabled,
[type="checkbox"]:disabled,
[type="radio"]:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

.sidebar {
    font-family: var(--font-nav);
}

.top-header .header-actions,
.top-header .header-actions a,
.top-header .header-actions button,
.top-header .header-user {
    font-family: var(--font-nav);
}

.tabs,
.tab-item,
.logo-text,
.btn-create-claim {
    font-family: var(--font-nav);
}

.page-header h1,
.delete-modal-title,
.status-modal-title,
.clients-wizard-header h1,
.clients-empty-state h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

[class^="btn-"],
[class*=" btn-"],
.data-table,
.pagination,
.pagination-info,
.pagination-info select,
.context-menu,
.context-menu a,
.context-menu button,
.form-group label,
.form-row label,
.wizard-inline-check,
.toolbar {
    font-family: var(--font-ui);
}

.data-table,
.pagination,
.pagination-info,
.header-icon-btn .badge,
.user-app-version,
.user-build-date {
    font-variant-numeric: tabular-nums lining-nums;
}

.wizard-helper-text,
.clients-empty-state,
.relation-search-empty,
.assign-selected-empty,
.business-info-empty-copy,
.business-info-empty-state {
    font-family: var(--font-support);
}

/* ===========================
   App Container
   =========================== */
.app-container {
    display: flex;
    height: 100vh;
}

/* ===========================
   Sidebar
   =========================== */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    padding: 20px 16px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-logo-lockup {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

.brand-separator {
    width: 2px;
    height: 36px;
    background: var(--gold, #F8A900);
    border: none;
}

.bee-logo-icon {
    height: 45px;
    width: auto;
    object-fit: contain;
}

.sidebar-logo {
    display: flex;
    align-items: center;
}

.logo-text {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: none;
    text-transform: none;
}

.sidebar-create {
    padding: 10px 20px 16px;
}

.btn-create-claim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: rgba(236, 123, 41, 0.18);
    color: var(--accent-orange-line);
    border: 1px solid var(--accent-orange-line);
    border-radius: 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: all 0.15s;
}

.btn-create-claim:hover {
    background: rgba(236, 123, 41, 0.24);
    color: var(--accent-orange-line);
}

.sidebar-create-split {
    position: relative;
    display: flex;
    width: 100%;
}

.sidebar-create-split.has-menu .sidebar-create-main {
    border-radius: 15px 0 0 15px;
    border-right: 0;
}

.sidebar-create-caret {
    flex: 0 0 38px;
    border: 1px solid var(--accent-orange-line);
    border-radius: 0 15px 15px 0;
    background: rgba(236, 123, 41, 0.18);
    color: var(--accent-orange-line);
    cursor: pointer;
}

.sidebar-create-caret:hover,
.sidebar-create-caret[aria-expanded="true"] {
    background: rgba(236, 123, 41, 0.28);
}

.sidebar-create-menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 6px;
    border: 1px solid rgba(236, 123, 41, 0.45);
    border-radius: 10px;
    background: var(--sidebar-bg, #20211f);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.sidebar-create-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 7px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.sidebar-create-menu a:hover,
.sidebar-create-menu a:focus-visible {
    background: rgba(236, 123, 41, 0.2);
    color: #fff;
}

.menu-icon {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.create-icon {
    width: 18px;
    font-size: 18px;
    text-align: center;
    color: var(--accent-orange-line);
}

.create-icon path {
    fill: var(--accent-orange-line);
}

/* Sidebar Nav */
.sidebar-nav {
    flex: 1;
    padding: 6px 16px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.claims-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.nav-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

.nav-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-text-active);
    font-weight: 600;
}

.nav-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    color: var(--accent-orange-line);
}

.nav-icon path {
    vector-effect: non-scaling-stroke;
}

.nav-icon .nav-icon-fill {
    fill: var(--accent-orange-line);
    stroke: none;
}

.nav-item.active .nav-icon {
    color: #ffffff;
}

.nav-item.active .nav-icon .nav-icon-fill {
    fill: #ffffff;
}

/* Roles nav icon specific styling - FontAwesome icons */
.nav-item .fa-user-shield {
    color: var(--accent-orange-line);
}

.nav-item.active .fa-user-shield {
    color: #ffffff;
}

.nav-item .fa-gears,
.nav-item .fa-gear {
    color: var(--accent-orange-line);
}

.nav-item.active .fa-gears,
.nav-item.active .fa-gear {
    color: #ffffff !important;
}

.nav-item .fa-inbox {
    color: var(--accent-orange-line);
}

.nav-item.active .fa-inbox {
    color: #ffffff !important;
}

.nav-arrow {
    margin-left: auto;
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 1.75;
    transition: transform 0.2s;
    flex-shrink: 0;
}

/* HIVE-535: the white submenu chevron is invisible on an ACTIVE nav-group's
   pale-yellow background. The active item renders DARK label text, so match the
   chevron to the label colour (currentColor) — dark/visible when active, light
   when the item sits on the dark sidebar. (--sidebar-text-active is #fff, which
   is why a plain white stroke disappeared on the active row.) */
.nav-item.active .nav-arrow,
.nav-group-toggle.active .nav-arrow {
    stroke: currentColor;
}

.nav-arrow-toggle {
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
}

.nav-arrow-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

a.nav-group-toggle {
    text-decoration: none;
    display: flex;
    width: 100%;
}

.nav-group.open .nav-arrow {
    transform: rotate(180deg);
}

.nav-group-items {
    display: none;
    padding-left: 50px;
}

.nav-group.open .nav-group-items {
    display: block;
}

.nav-item.sub-item {
    font-size: 13px;
    padding: 7px 12px 7px 0;
    color: rgba(255, 255, 255, 0.6);
    gap: 8px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.nav-item.sub-item:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}

.nav-item.sub-item.active {
    background: transparent;
    color: #F5C253;
}

.sub-icon {
    width: 14px;
    font-size: 12px;
    color: var(--accent-orange-line);
    text-align: center;
    flex-shrink: 0;
    opacity: 0.5;
    transition: color 0.2s, opacity 0.2s;
}

.nav-item.sub-item:hover .sub-icon {
    opacity: 0.75;
}

.nav-item.sub-item.active .sub-icon {
    color: #F5C253;
    opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 8px 12px 12px;
    border-top: none;
}

/* HIVE-242 — Kontaktai popover replacing the footer profile block. */
.sidebar-contacts {
    position: relative;
}

.sidebar-contacts-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sidebar-contacts-trigger:hover,
.sidebar-contacts-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.sidebar-contacts-trigger:focus-visible {
    box-shadow: 0 0 0 2px rgba(232, 120, 10, 0.6);
}

.sidebar-contacts-trigger .fa-address-book {
    color: #F8A900; /* #435 — sf brand yellow (was orange) */
}

.sidebar-contacts-chevron {
    margin-left: auto;
    font-size: 11px;
    transition: transform 0.18s ease;
}

.sidebar-contacts.open .sidebar-contacts-chevron {
    transform: rotate(180deg);
}

.sidebar-contacts-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    padding: 14px;
    background: #1b1b1d;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    z-index: 50;
    /* modern "lift from the footer" open/close */
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transform-origin: bottom left;
    pointer-events: none;
    transition: opacity 0.18s cubic-bezier(.2, .8, .2, 1), transform 0.18s cubic-bezier(.2, .8, .2, 1);
}

.sidebar-contacts.open .sidebar-contacts-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-contacts-panel,
    .sidebar-contacts-chevron {
        transition: none;
        transform: none;
    }
}

.sidebar-contacts-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.sidebar-contacts-company {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.sidebar-contacts-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 3px 0;
}

.sidebar-contacts-line i {
    color: #F8A900; /* #435 follow-up — match the main Kontaktai icon sf yellow */
    font-size: 12px;
    margin-top: 2px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

a.sidebar-contacts-line:hover span {
    color: #ffffff;
    text-decoration: underline;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0a898;
    font-size: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-build-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 8px 0;
}

.user-app-version,
.user-build-date {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    line-height: 1.2;
}

.user-app-version {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-build-date {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.user-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.user-email {
    color: #b0a898;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-logout {
    background: none;
    border: none;
    color: #b0a898;
    cursor: pointer;
    padding: 6px;
    font-size: 14px;
    transition: color 0.15s;
}

.btn-logout:hover {
    color: #fff;
}

/* ===========================
   Top Header
   =========================== */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    min-height: 56px;
}

.lang-menu button:hover {
    background: var(--bg) !important;
}

.header-spacer {
    flex: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-btn {
    position: relative;
    background: none;
    border: none;
    color: #101828;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-icon-btn:hover {
    color: var(--text);
}

.header-icon-svg {
    display: block;
    width: 24px;
    height: 24px;
}

.header-icon-btn .badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--primary);
    color: var(--on-primary, #201b16);
    font-size: 9px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius);
    transition: background 0.15s;
}

.header-user:hover {
    background: var(--bg);
}

.header-user i {
    font-size: 11px;
    color: var(--text-secondary);
}

.dashboard-view-button {
    border: 0;
    background: transparent;
}

.dashboard-view-button > .fa-table-columns {
    font-size: 14px;
    color: var(--primary);
}

.dashboard-view-menu a.active {
    background: var(--bg);
    font-weight: 600;
}

.dashboard-placeholder {
    max-width: 960px;
    margin: 0 auto;
}

.dashboard-placeholder-card {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 28px;
}

.dashboard-placeholder-card h1 {
    margin: 4px 0 8px;
    font-size: 28px;
}

.dashboard-placeholder-card p {
    margin: 0;
    color: var(--text-secondary);
}

.dashboard-placeholder-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: rgba(240, 138, 51, 0.12);
    font-size: 24px;
    flex: 0 0 auto;
}

.dashboard-placeholder-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: none;
}

/* ===========================
   Main Content
   =========================== */
.main-content {
    flex: 1;
    min-width: 0;
    /* item 13/34 — reserve a bottom safe-area so page content (esp. right-column
       cards) can scroll clear of the fixed scroll-chevron + AI-assistant FABs at the
       bottom-right instead of being covered/clipped ('270' on Geriausi klientai).
       V3/P5 (2026-08-08): the reserve is now the shared --content-safe-bottom
       token (was a bare 104px, which was already 28px short of the 132px stack)
       and every narrower tier below re-states it instead of dropping it. */
    padding: 32px 32px var(--content-safe-bottom) 32px;
    overflow-y: auto;
}

/* Sticky table layout: pages with data tables */
.main-content:has(> .data-table-wrapper),
.main-content:has(> .stats-page) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-content:has(> .data-table-wrapper) > *:not(.data-table-wrapper) {
    flex-shrink: 0;
}

.main-content > .data-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.main-content > .stats-page {
    flex: 1;
    min-height: 0;
}

/* ===========================
   Page Header
   =========================== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--accent-orange, #F47421);
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #D96E1F;
    color: #fff;
}

/* m7 — a DISABLED primary button kept the enabled fill and ink in both themes:
   light left white on the orange (2.99:1) and dark left the dark-ink token on the
   dimmed brown #4a3d30 (1.63:1 — the button was effectively invisible). Both now use
   the disabled token pair: 4.63:1 light, 6.8:1 dark, still visibly inert (muted fill,
   muted ink, not-allowed cursor).

   `:is(a, button)` is what raises specificity to (0,2,1) so the rule outranks the
   per-page `.intake-request-modal .btn-primary` fill (0,2,0) WITHOUT !important;
   the dark twin below must be !important because theme.css's
   `html[data-theme="dark"] .btn-primary { color: var(--on-primary) !important }`
   is itself important and outranks theme.css's own :where() disabled rule. */
:is(a, button, input).btn-primary:disabled,
:is(a, button, input).btn-primary[disabled],
:is(a, button, input).btn-primary[aria-disabled="true"] {
    background: var(--disabled-bg, #EFEBDD);
    border-color: var(--component-border, #c9c1b8);
    color: var(--disabled-text, #71675d);
    /* The token pair already reads as disabled; a second dimming pass (Bootstrap's
       .btn:disabled{opacity:.65}) would wash both halves toward the surface. */
    opacity: 1;
    cursor: not-allowed;
}

html[data-theme="dark"] .btn-primary:disabled,
html[data-theme="dark"] .btn-primary[disabled],
html[data-theme="dark"] .btn-primary[aria-disabled="true"] {
    background: var(--disabled-bg) !important;
    border-color: var(--component-border) !important;
    color: var(--disabled-text) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* The same treatment for .btn-secondary, and `span` is included: a value that is rendered
   as a chip but cannot be opened (a linked claim the viewer may not see) is a span, not a
   disabled button, and it still has to read as inert rather than as an unpressed control. */
:is(a, button, input, span).btn-secondary:disabled,
:is(a, button, input, span).btn-secondary[disabled],
:is(a, button, input, span).btn-secondary[aria-disabled="true"] {
    background: var(--disabled-bg, #EFEBDD);
    border-color: var(--component-border, #c9c1b8);
    color: var(--disabled-text, #71675d);
    opacity: 1;
    cursor: not-allowed;
}

html[data-theme="dark"] .btn-secondary:disabled,
html[data-theme="dark"] .btn-secondary[disabled],
html[data-theme="dark"] .btn-secondary[aria-disabled="true"] {
    background: var(--disabled-bg) !important;
    border-color: var(--component-border) !important;
    color: var(--disabled-text) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.btn-primary-outline {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    color: var(--accent-orange, #F47421);
    border: 1.5px solid var(--accent-orange, #F47421);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-primary-outline:hover {
    background: var(--accent-orange, #F47421);
    color: #fff;
}

/* ===========================
   Tabs
   =========================== */
.tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}

.tab-item {
    padding: 8px 4px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-item:hover {
    color: var(--text);
}

.tab-item.active {
    color: var(--primary-text);
    border-bottom-color: var(--primary-text);
}

.tab-count {
    background: var(--primary);
    color: var(--accent-brown-button);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.tab-item:not(.active) .tab-count {
    background: var(--bg);
    color: var(--text-secondary);
}

/* ===========================
   Dashboard typography (WP2, owner 2026-08-18 — plans/dashboard-unification-brand-fonts-plan)
   The four dashboards (My, Company, Admin, Monitoring) use TWO families inside main:
     body/UI  = Source Sans 3  (tables, buttons, inputs, badges, chart labels — already the majority)
     display  = Oswald         (page h1, widget titles, ALL-CAPS eyebrows, KPI numbers)
   Scoped by body.dashboard-brand .main-content so the global shell (sidebar DM Sans, topbar) is
   untouched until the app-wide unification round. Oswald is already in the core font bundle.
   =========================== */
body.dashboard-brand .main-content {
    --font-heading: 'Oswald', 'Source Sans 3', 'Source Sans 3 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui: var(--font-support);
    --font-nav: var(--font-support);
    --font-body: var(--font-support);
}
body.dashboard-brand .main-content h1,
body.dashboard-brand .main-content .page-title {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: .2px;
}
/* WP3 (owner 2026-08-18): the three header systems (Company/Admin .dashboard-kpi-header, My
   .dashboard-header, Monitoring .page-title) share one title/subtitle scale and colour. */
body.dashboard-brand .main-content .dashboard-kpi-header h1,
body.dashboard-brand .main-content .dashboard-header-copy h1,
body.dashboard-brand .main-content h1.page-title {
    font-size: 30px;
    line-height: 1.15;
    margin: 4px 0;
    color: var(--text);
}
body.dashboard-brand .main-content .dashboard-kpi-header p,
body.dashboard-brand .main-content .dashboard-header-copy p {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}
body.dashboard-brand .main-content .dashboard-widget-cell .dashboard-widget-eyebrow,
body.dashboard-brand .main-content .dashboard-widget-cell .dashboard-card-header .dashboard-widget-eyebrow {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}
body.dashboard-brand .main-content .dashboard-widget-cell .dashboard-stat-content > strong {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
body.dashboard-brand .main-content .dashboard-widget-cell .dashboard-card-header h2,
body.dashboard-brand .main-content .dashboard-widget-cell .dashboard-card-header h3,
body.dashboard-brand .main-content .dashboard-widget-cell .dashboard-stat-title,
body.dashboard-brand .main-content .mon-card h2,
body.dashboard-brand .main-content .mon-card h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: .2px;
}
/* everything else inside main = the body family (buttons, inputs, tables, badges, chart labels) */
body.dashboard-brand .main-content :is(button, input, select, textarea, .btn, .btn-primary, .btn-secondary, .tab-count, .badge, table, .apexcharts-text) {
    font-family: var(--font-support);
}
body.dashboard-brand .main-content .apexcharts-canvas text { font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif !important; }

/* ===========================
   Admin usage-count pill (D10, 2026-08-18) - the claim/usage count on admin reference pages
   (Circumstances, Pipelines, Stages, Claim classifiers, Damaged goods) is a link to the claims
   list pre-filtered on that row. Pill like the tab counts; hover/focus turns brand-orange and
   slides a small arrow in, so it READS as clickable without looking like raw blue text.
   =========================== */
.usage-count-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    min-width: 32px; padding: 2px 9px;
    border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
    color: var(--text-secondary); font-size: 12px; font-weight: 700; line-height: 1.5;
    text-decoration: none; white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s, gap .15s;
}
.usage-count-link .fa-arrow-right {
    font-size: 10px; max-width: 0; opacity: 0; overflow: hidden;
    transition: max-width .15s, opacity .15s;
}
.usage-count-link:hover,
.usage-count-link:focus-visible {
    gap: 5px; border-color: var(--primary); background: var(--surface);
    color: var(--accent-orange-text, var(--primary)); text-decoration: none; outline: none;
}
.usage-count-link:hover .fa-arrow-right,
.usage-count-link:focus-visible .fa-arrow-right { max-width: 12px; opacity: 1; }
.usage-count-link:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring, rgba(215, 117, 4, .35)); }

/* ===========================
   Toolbar (search + filters)
   =========================== */
.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    /* R2 (audit 2026-08-17): wrap-when-crowded. On tablet the Vehicles action
       cluster squeezed the search box to 115px and the inside-positioned
       submit icon covered the input's center — a tap SUBMITTED instead of
       focusing. wrap only engages on overflow; desktop is unchanged. */
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    /* pairs with .toolbar flex-wrap: below this the box wraps to its own
       row instead of collapsing under the absolute submit icon */
    min-width: 220px;
    /* item 74 — was 400px, truncating the claims placeholder ('Ieškoti pagal nume…');
       520px matches the other list pages' search width. */
    max-width: 520px;
    position: relative;
}

/* HIVE-321: pull the list filter controls to the LEFT — group them immediately after the
   search box instead of pushing them to the far-right toolbar edge. !important overrides the
   inline `margin-left:auto` on .filter-group across the ~20 list/admin filter partials, so it
   takes effect everywhere without editing each partial. (search-box caps at 400px, so the
   filters sit right beside it = Layout A.) */
.filter-group {
    margin-left: 0 !important;
}

/* HIVE-321 (claims toolbar): the claims list uses .filter-btn-outline (not .filter-group), and that
   class carries margin-left:auto — so the "Filters" button (the first one) was pushed to the far right,
   dragging Columns/Export/density with it and leaving a gap after the pipeline/status dropdowns. The
   "Filters" button is a FILTER control, so keep it on the LEFT beside the dropdowns; move the auto-push
   onto the first ACTION button (Columns) so Columns/Export/density stay right-aligned. */
.claims-filters .filter-btn-outline { margin-left: 0; }
.claims-filters .claims-columns-trigger { margin-left: auto; }

/* ===========================
   Shared scrollable chip / tab row
   ===========================
   P7 / V4: a single-line row of chips or tabs must never hard-clip its last
   item. It happens on `/Claims` at 402 (the tab strip ends mid-word on "Naujos
   žal…") and on `/EmailTracking` at 1920 (the thread filters run past the panel
   edge) — two pages, one missing behaviour, so this is the component rather
   than two page fixes.

   Wrapping was tried and rejected (M1, 2026-07-14): seven pills stacked into
   three rows at phone width. So the row scrolls, and the affordance is a
   right-edge fade plus a thin scrollbar that is always drawn rather than an
   overlay that appears only once you are already scrolling.

   CONSUMER CONTRACT: the fade is a mask over the last 28px of the row's own
   box, so the row must FILL its line. A shrink-to-fit row ends at its last
   chip and would fade that chip permanently — consumers that are flex items
   therefore also take `flex: 1 1 auto; min-width: 0` (a block-level row is
   full-width already). Left-aligned chips mean the faded 28px is empty space
   whenever everything fits, and a real fade only when something is clipped. */
.hive-scroll-row {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    /* keep the scrollbar off the chip outlines */
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.hive-scroll-row::-webkit-scrollbar { height: 6px; }
.hive-scroll-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.hive-scroll-row::-webkit-scrollbar-track { background: transparent; }
.hive-scroll-row > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

.search-box input {
    width: 100%;
    padding: 9px 76px 9px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--surface);
    transition: border-color 0.15s;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
}

.search-box .fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
}

.search-submit {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    display: block;
}

.search-submit:hover {
    color: var(--primary-text);
}

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    display: none;
}

.search-clear:hover {
    color: var(--text);
}

.search-box.has-value .search-clear {
    display: block;
}

@media (max-width: 768px) {
    /* Mobile header controls are primary navigation, not decorative icons.
       Keep every hit box at the 40px minimum even where its glyph is 17–24px. */
    .top-header :is(.header-icon-btn, .lang-btn, .header-user, .hamburger-btn) {
        min-width: 40px;
        min-height: 40px;
        justify-content: center;
    }
}

/* D12 (owner 2026-08-01) — the ONE chart entrance everywhere: ApexCharts'
   entrance/dynamic animations are disabled globally (see chart theme files);
   a finished chart then fades in briefly so it appears deliberate instead of
   snapping. Keyed on Apex's own canvas node so every surface inherits it. */
.apexcharts-canvas { animation: hive-chart-fade .15s ease; }
@keyframes hive-chart-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .apexcharts-canvas { animation: none; }
}

.search-submit:focus-visible,
.search-clear:focus-visible,
.search-clear-x:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-radius: 3px;
}

/* Hive supplies one predictable clear action. Suppress the browser-native
   cancel glyph if a managed box is accidentally rendered as type=search. */
.search-box input[type="search"]::-webkit-search-cancel-button,
.search-box input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Search clear-X for the no-refresh list controller (`[data-list-search-clear]`).
   Visibility is driven by the JS inline `display` toggle in list-fragment-controller.js
   (syncSearchClear), so this rule deliberately omits `display` — it only positions the
   button absolutely inside the search box (the input reserves 52px right padding). Without
   this, the in-flow button wraps below the full-width input and breaks the toolbar. */
.search-clear-x {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0 8px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
}

.search-clear-x:hover {
    color: var(--text);
}

/* Compact/dense flatpickr theme (opt-in via .flatpickr-compact on the calendar container,
   applied by window.HiveFlatpickr for the CLAIMS area only — see _Layout.cshtml). Keeps
   Reports/Assets/Dashboard calendars at their default size. */
.flatpickr-calendar.flatpickr-compact { font-size: 12px; }
/* HIVE-576: give each day cell an exact 1/7 (14.2857%) column with NO fixed px
   cap. Seven days then total 100% of the day container, leaving no slack for
   justify-content:space-around to spread — so days pack flush and sit directly
   under the weekday headers (also 1/7 each), and the grid fills the calendar's
   full 308px width (no left-aligned whitespace on the right). */
.flatpickr-calendar.flatpickr-compact .flatpickr-day { height: 30px; line-height: 30px; max-width: 14.2857%; flex-basis: 14.2857%; }
.flatpickr-calendar.flatpickr-compact .flatpickr-current-month { font-size: 104%; padding-top: 2px; padding-bottom: 2px; }
.flatpickr-calendar.flatpickr-compact .flatpickr-months .flatpickr-month { height: 30px; }
.flatpickr-calendar.flatpickr-compact span.flatpickr-weekday { font-size: 11px; }
.flatpickr-calendar.flatpickr-compact .flatpickr-time { height: 34px; }
.flatpickr-calendar.flatpickr-compact .flatpickr-time input { font-size: 13px; }

/* Collapsible main-information subsections (claim-subsection-collapse.js). The title
   becomes a clickable toggle with a right-aligned chevron; a filled-dot appears next to
   the title when the subsection is COLLAPSED and any field inside has a value. */
.claims-subsection-toggle { display: flex; align-items: center; }
.claims-subsection-toggle .claims-subsection-filled-dot {
    display: none; width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary, #d4730a); margin-left: 8px; flex: 0 0 auto;
}
.claims-subsection-toggle .claims-subsection-chevron {
    margin-left: auto; font-size: 11px; color: var(--text-secondary); flex: 0 0 auto;
    transition: color 0.15s;
}
.claims-subsection-toggle:hover .claims-subsection-chevron { color: var(--text); }
/* HIVE-460 — the toggles are keyboard-focusable divs (role=button); give them a concrete
   visible focus ring in both themes (var(--primary) resolves per theme). */
.claims-subsection-toggle:focus-visible {
    outline: 2px solid var(--primary, #d4730a);
    outline-offset: 2px;
}

/* HIVE-460 — nested cost-pool hierarchy (cargo/vehicle + damaged-(entrusted-)property pools
   own their Payment details accordion). The outer boundary title stays full-bleed; the pool
   BODY gets a modest indent + guide line so the nested Payment accordion visibly belongs to
   its pool. Indent is reduced at mobile widths so payout controls keep usable space. */
.claims-cost-pool-body {
    padding-left: 14px;
    border-left: 2px solid var(--border);
}
/* Nested subsection titles stay INSIDE the indented body: cancel the cargo-block -16px edge
   bleed that would otherwise pull the Payment band across the hierarchy guide line. */
.claims-wizard-cargo-block .claims-cost-pool-body .claims-wizard-subsection-title {
    margin-left: 0;
    margin-right: 0;
}
@media (max-width: 768px) {
    .claims-cost-pool-body { padding-left: 6px; }
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.filter-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.filter-btn i {
    font-size: 12px;
}

/* ===========================
   Data Table
   =========================== */
.data-table-wrapper {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* R4-C2 (held-38): scroll-cue affordance. (1) An always-visible, styled horizontal
       scrollbar so a clipped `.data-table` (min-width 1100px) reads as scrollable. (2) A soft
       edge shadow on whichever side has more table to scroll toward — the wrapper is the
       positioning context for the JS overlays (data-table-scroll-cue.js), which sit ON TOP of
       the opaque rows (a background-based shadow is occluded by them). */
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.data-table-wrapper::-webkit-scrollbar { height: 10px; }
.data-table-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.data-table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
.data-table-wrapper::-webkit-scrollbar-track { background: transparent; }

/* Edge-shadow overlays — absolutely positioned, pinned to the visible edges by JS (left =
   current scrollLeft). Shown only when there's more table to scroll toward. pointer-events:none
   so they never block clicks; z-index above the sticky thead. */
.data-table-wrapper > .dt-scroll-cue,
[data-table-scroll-cue] > .dt-scroll-cue {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    pointer-events: none;
    z-index: 11;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.data-table-wrapper > .dt-scroll-cue.is-on,
[data-table-scroll-cue] > .dt-scroll-cue.is-on { opacity: 1; }
.dt-scroll-cue--left { background: linear-gradient(to right, rgba(15, 23, 42, 0.13), rgba(0, 0, 0, 0)); }
.dt-scroll-cue--right { background: linear-gradient(to left, rgba(15, 23, 42, 0.13), rgba(0, 0, 0, 0)); }
html[data-theme="dark"] .dt-scroll-cue--left { background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
html[data-theme="dark"] .dt-scroll-cue--right { background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

/* ── Shared table-width primitives (V1/P2, 2026-08-08) ────────────────────────
   Two defects with one root cause: under `table-layout: auto` the browser sizes
   every column from its content, so the columns that are ALLOWED to wrap are the
   residual — the rigid `white-space: nowrap` columns take their content width
   first and whatever is left goes to the wrappable one. On a wide grid that
   residual collapses to the width of the longest single word, which is how
   "Alytaus regioninė televizija" ends up as seven stacked lines on
   /MtplStatistics and how the rule column stacks on Admin/AiGuidanceRules. The
   table then still overflows its container, so the right-hand columns are cut.

   `min-width` on a cell is the lever: unlike `width` (which auto layout treats
   as a suggestion), it raises the column's minimum, and the table simply grows
   past its container and scrolls. That makes the scroll shell mandatory, hence
   the pair below — a column measure and a container that scrolls with the same
   edge affordance `.data-table-wrapper` already gets. Opt in per column rather
   than per table so this is not a width table for one page. */
:root {
    --table-col-measure: 18ch;       /* names, codes — a readable few words per line */
    --table-col-measure-wide: 32ch;  /* prose — sentences, rule text, descriptions */
}
.col-measure { min-width: var(--table-col-measure); }
.col-measure-wide { min-width: var(--table-col-measure-wide); }

/* Any element marked `data-table-scroll-cue` is a horizontally scrolling table
   shell: it scrolls instead of clipping, and data-table-scroll-cue.js paints the
   same edge shadows it paints for .data-table-wrapper, so a half-visible column
   reads as "there is more" rather than "this page is broken". */
[data-table-scroll-cue] {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
[data-table-scroll-cue]::-webkit-scrollbar { height: 10px; }
[data-table-scroll-cue]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
[data-table-scroll-cue]::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
[data-table-scroll-cue]::-webkit-scrollbar-track { background: transparent; }

/* Full-value discovery is attached by data-table-scroll-cue.js only when a
   shared header/cell is measurably clipped. Plain cells become keyboard-focusable;
   sortable/link cells reuse their existing focus target. */
.data-table :is(th, td).dt-overflow-value { cursor: help; }
.data-table .dt-overflow-value:focus-visible {
    outline: 2px solid var(--primary-text);
    outline-offset: -2px;
}

.data-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.data-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: none; /* owner 2026-07-09 — no ALL-CAPS (app-wide table headers) */
    letter-spacing: 0.03em;
    /* NOT var(--bg): the list tables sit directly on the page with no card
       between them, so painting the header with the page ground makes the two
       byte-identical and the table appears to start at its first data row. */
    background: var(--table-header-bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: inset 0 -1px 0 var(--border);
}

.data-table thead th.sortable-th {
    cursor: pointer;
    user-select: none;
}

.data-table thead th.sortable-th a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table thead th.sortable-th a:hover {
    color: var(--text-primary);
}

.sort-icon-neutral {
    opacity: 0.3;
    font-size: 10px;
}

.sort-icon-active {
    opacity: 1;
    color: var(--primary-text);
    font-size: 10px;
}

.data-table thead th.sortable-th:hover .sort-icon-neutral {
    opacity: 0.6;
}

/* ===========================
   Column Resize Handles
   =========================== */
.col-resize-handle {
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 6px;
    cursor: col-resize;
    z-index: 11;
    border-left: 1px solid var(--border);
    border-right: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}

.col-resize-handle:hover {
    border-left-color: var(--primary-text);
    border-right-color: var(--primary-text);
    background: rgba(59, 130, 246, 0.08);
}

.col-resize-handle.active {
    border-left-color: var(--primary-text);
    border-right-color: var(--primary-text);
    background: rgba(59, 130, 246, 0.15);
    top: 0;
    bottom: 0;
}

/* ===========================
   Column Move Buttons
   =========================== */
.col-move-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 7px;
    cursor: pointer;
    z-index: 12;
    opacity: 0.7;
    transition: all 0.15s;
}

.col-move-btn:hover {
    opacity: 1;
    color: var(--primary-text);
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
}

.col-move-left { left: 2px; }
.col-move-right { right: 8px; }

.data-table thead th:hover .col-move-btn {
    display: flex;
}

.data-table tbody tr {
    transition: background 0.1s;
}

.data-table tbody td {
    border-bottom: 1px solid var(--border);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: #fafafa;
}

/* Group header rows in clients table */
.group-header-row {
    cursor: pointer;
}

.group-header-row td {
    background: var(--surface);
    padding: 10px 16px !important;
}

.group-header-row:hover td {
    background: var(--surface);
}

.group-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    padding: 0;
    width: 100%;
}

.group-toggle-btn:hover {
    color: var(--primary-text);
}

.group-toggle-icon {
    transition: transform 0.2s;
    font-size: 11px;
    width: 14px;
    text-align: center;
}

.group-header-row.expanded .group-toggle-icon {
    transform: rotate(90deg);
}

.group-member-count {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: normal;
}

.group-member-row.collapsed {
    display: none;
}

.data-table tr.group-member-row {
    background: #f8f9fb;
    border-left: 3px solid var(--primary);
}

.data-table tr.group-member-row:hover {
    background: #f0f2f6;
}

.data-table tr.group-member-row td:first-child {
    padding-left: 28px;
}

.data-table td {
    padding: 14px 16px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table td.text-muted {
    color: var(--text-muted);
}

.data-table td:has(.context-menu-wrapper) {
    overflow: visible;
}

/* Status pills are fixed-size and must never be clipped. The global td
   ellipsis above truncated the wider "Neaktyvūs" badge to "Neaktyvūs …"
   in squeezed columns (the shorter "Aktyvus" fit). Let the cell show the
   whole pill. */
.data-table td:has(.status-badge) {
    overflow: visible;
    text-overflow: clip;
}

/* HIVE-146 — row-actions column is the 3-dot menu, kept narrow + non-
   resizable. Pinning width keeps the menu cell from competing with
   data columns for horizontal space. */
.data-table th.row-actions,
.data-table td.row-actions {
    width: 36px;
    min-width: 36px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

.data-table .row-checkbox {
    width: 40px;
}

.data-table .row-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* The <label> that wraps a row checkbox is the hit target, not the box itself.
   A native checkbox is a replaced element: Chromium ignores padding/border on it
   and honours only min-width/min-height, which would REPAINT the box at 32px and
   wreck the row rhythm. The label forwards its clicks to the contained input, so
   the painted 16px stays 16px while the touch area grows. See the coarse-pointer
   block below for the actual sizing. */
.row-check-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ===========================
   m6 — coarse-pointer touch targets (>=32px)
   Only under (pointer: coarse) so the mouse/desktop layout is byte-identical.
   =========================== */
@media (pointer: coarse) {
    /* Row + select-all checkboxes: 16x16 -> 32x32 hit area, checkbox unchanged.
       The 40px cell minus 2x4px padding is exactly the 32px the label needs, and
       the reduced vertical padding keeps the row at the height the other cells
       already set — so the table rhythm does not move. `overflow: visible` because
       `.data-table td` clips, and a clipped label is a clipped hit area. */
    .data-table .row-checkbox {
        padding: 4px;
        overflow: visible;
    }
    .data-table .row-checkbox .row-check-hit {
        min-width: 32px;
        min-height: 32px;
    }

    /* Collapsible claim subsections: the title band is the toggle (333x27). */
    .claims-subsection-toggle {
        min-height: 32px;
    }

    /* Inline "open"/"edit" links inside definition lists and sidebar cards (57x18). */
    .btn-link-inline {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }
}

/* In the <=768px card layout (list-mobile.css) the check cell is pinned absolutely
   with padding:0, so the grown label would push the painted checkbox 8px in from the
   card corner. Pull it back: the cell keeps its 16px box and its position, the
   checkbox paints exactly where it did, and only the hit area extends outwards.
   Same breakpoint as list-mobile.css on purpose — outside it the cell is an ordinary
   table cell and must not be shifted. */
@media (pointer: coarse) and (max-width: 768px) {
    table.list-cards-mobile tbody td[data-cardcell="check"] .row-check-hit {
        margin: -8px;
    }
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
}

.status-badge::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* item 47 — the semantic status palette (amber/purple/green/red below) already
   carries meaning; only .status-open read neutral (indigo bg + slate dot). Align it
   to the header/rail 'open' blue (.cmb-chip-st-open #dbeafe/#1e40af) so the LIST 'open'
   pill matches the claim-header pill and its dot signals a real state. Dark variant
   is the item-30 tint. */
.status-open {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-open::before {
    background-color: #1e40af;
}

.status-inprogress {
    background-color: #fef0c7;
    color: #9A3C06;
}

.status-inprogress::before {
    background-color: #f79009;
}

.status-underreview {
    background-color: #fce7f6;
    color: #A3115F;
}

.status-underreview::before {
    background-color: #dd2590;
}

.status-approved {
    background-color: #d1fadf;
    color: #065F46;
}

.status-approved::before {
    background-color: #12b76a;
}

.status-denied {
    background-color: #fee4e2;
    color: #b42318;
}

.status-denied::before {
    background-color: #f04438;
}

.status-done {
    background-color: #eaecf0;
    color: #344054;
}

.status-done::before {
    background-color: #667085;
}

/* User page specific badges */
.status-active {
    background-color: #f8fafc;
    border: 1px solid #d0d5dd;
    color: #344054;
}

.status-active::before {
    background-color: #12b76a;
}

.status-inactive {
    background-color: #f8fafc;
    border: 1px solid #d0d5dd;
    color: #344054;
}

.status-inactive::before {
    background-color: #f04438;
}

/* m8 — the hardcoded slate #667085 was solved against a white page and lands on
   3.55:1 on the warm dark surface (#1c1813). The secondary-text TOKEN is solved per
   theme: 6.1:1 light, 8.1:1 dark, and keeps the same "quiet" weight. */
.unassigned-label {
    color: var(--text-secondary);
    font-style: italic;
}

/* item 71 — canonical top-level page header: breadcrumb + H1 + optional subtitle,
   mirroring the Reports landing (.report-breadcrumb / .report-header p) so sibling
   top-level pages (message center, email tracking) read as one family. */
.page-breadcrumb {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.page-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--primary); }
.page-breadcrumb .sep { margin: 0 6px; color: var(--border); }
.page-lead {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* Page Header Additional Buttons */
.page-header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #ffffff;
    color: #344054;
    border: 1px solid #d0d5dd;
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.btn-export:hover {
    background-color: #f9fafb;
    border-color: #d0d5dd;
    color: #344054;
}

.btn-export[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-export.is-loading {
    opacity: 0.8;
    cursor: wait;
}

.assets-import-modal-content {
    max-height: calc(100vh - 32px);
}

.assets-import-modal-content .modal-body {
    overflow-y: auto;
}

.assets-import-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.assets-import-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.assets-import-actions {
    margin-bottom: 12px;
}

.btn-template-download {
    background: #ecfdf3;
    border-color: #86efac;
    color: #166534;
}

.btn-template-download:hover {
    background: #dcfce7;
    border-color: #4ade80;
    color: #166534;
}

.btn-template-download.is-disabled {
    pointer-events: none;
    opacity: 0.7;
}

.assets-import-file-input {
    min-width: 260px;
    max-width: 420px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #ffffff;
    color: #344054;
    padding: 6px;
    font-size: 0.875rem;
    line-height: 1.2;
}

.assets-import-file-input::file-selector-button {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 10px;
    cursor: pointer;
}

.assets-import-file-input::file-selector-button:hover {
    background: #ffedd5;
    border-color: #fdba74;
}

.assets-import-issues-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

#btnConfirmAssetsImport.assets-import-confirm-ok {
    background: #15803d;
    border-color: #15803d;
}

#btnConfirmAssetsImport.assets-import-confirm-ok:hover {
    background: #166534;
    border-color: #166534;
}

#btnConfirmAssetsImport.assets-import-confirm-warn {
    background: #d97706;
    border-color: #d97706;
}

#btnConfirmAssetsImport.assets-import-confirm-warn:hover {
    background: var(--accent-orange-text, #B44C09);
    border-color: var(--accent-orange-text, #B44C09);
}

#btnConfirmAssetsImport:disabled,
#btnConfirmAssetsImport.assets-import-confirm-disabled {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

#assetsImportProgressBar {
    transition: width 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.processes-error {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    background: #fef2f2;
    font-size: 13px;
}


.process-mode-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}

.process-mode-auto {
    background: #e8f8ee;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.process-mode-manual {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.process-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.process-status-success {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.process-status-failed {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.process-status-warning {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fdba74;
}

.process-status-running {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.process-status-idle {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.process-modal-content {
    max-width: 860px;
    max-height: calc(100vh - 24px);
}

.process-modal-content .modal-body {
    overflow-y: auto;
}

.process-history-modal-content {
    max-width: 1220px;
    max-height: calc(100vh - 24px);
}

.process-history-modal-content .modal-body {
    overflow-y: auto;
}

.process-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text);
}

.process-inline-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.process-schedule-row.is-disabled {
    opacity: 0.58;
}

/* Severity Badges */
.severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
}

.severity-badge::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.severity-info {
    background-color: #dbeafe;
    color: #1e40af;
}
.severity-info::before {
    background-color: #3b82f6;
}

.severity-warning {
    background-color: #fef0c7;
    color: #9A3C06;
}
.severity-warning::before {
    background-color: #f79009;
}

.severity-error {
    background-color: #fee4e2;
    color: #b42318;
}
.severity-error::before {
    background-color: #f04438;
}

/* View detail button */
.btn-view-detail {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-view-detail:hover {
    border-color: var(--primary);
    color: var(--primary-text);
}

/* Detail modal field grid */
.detail-field-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
}
.detail-field-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
}
.detail-field-value {
    font-size: 13px;
    word-break: break-word;
}

/* Activity History landing cards */
.activity-landing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.activity-landing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 28px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* items 44/46/57 — the ONE accent idiom is a 3px brand-orange LEFT stripe (was a
   4px full-width amber #F8A900 TOP stripe). Same class backs the home module tiles
   (Pages/Index) and the ActivityHistory / Admin / Assets hub cards, so this unifies
   all of them at once. */
.activity-landing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
}

.activity-landing-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(232, 120, 10, 0.15);
}

.activity-landing-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #201B16;
    color: var(--primary);
    font-size: 22px;
    margin-bottom: 16px;
}

.activity-landing-card h2 {
    font-size: 17px;
    font-weight: 600;
    color: #201B16;
    margin: 0 0 8px 0;
}

.activity-landing-card p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Landing page hero banner */
.landing-hero {
    position: relative;
    /* JPG fallback for browsers without image-set() */
    background: url('/images/landing-hero.jpg') center / cover no-repeat;
    background-image: image-set(
        url('/images/landing-hero.webp') type('image/webp'),
        url('/images/landing-hero.jpg') type('image/jpeg')
    );
    background-image: -webkit-image-set(
        url('/images/landing-hero.webp') type('image/webp'),
        url('/images/landing-hero.jpg') type('image/jpeg')
    );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 12px;
    overflow: hidden;
    padding: 52px 36px;
}

.landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(32, 27, 22, 0.72);
}

.landing-hero h1,
.landing-hero p {
    position: relative;
    z-index: 1;
}

/* R5-C4 (#403): the brand striped-hero text is hidden by default (the "Current" photo hero shows
   the h1/p). The restyle layer flips this — see restyle-preview.css. */
.hero-brand-welcome,
.hero-brand-tagline { display: none; }

.landing-hero h1 {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    margin: 0 0 8px;
}

.landing-hero p {
    font-size: 15px;
    color: #EAE7D8;
    margin: 0;
}

@media (max-width: 768px) {
    .assets-import-modal-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 20px);
    }

    .assets-import-toolbar > * {
        width: 100%;
    }

    .assets-import-file-input {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .assets-import-actions .btn-primary {
        width: 100%;
    }

    .process-modal-content,
    .process-history-modal-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 20px);
    }

}

/* Filters */
.filter-btn-outline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-left: auto;
    background: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 0.5rem;
    color: #475467;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.filter-btn-outline:hover {
    border-color: #98A2B3;
    color: #344054;
}

.filter-btn-outline i {
    color: #475467;
}

/* #443 — cap trigger width so a long selected value (full client/broker name in
   the button) can't stretch the toolbar into wrapping; the label span ellipsizes
   (flex buttons can't ellipsize bare text nodes — partials wrap the dynamic text
   in .filter-btn-label). Icons keep their size. */
.filter-btn-outline {
    max-width: 260px;
}
.filter-btn-outline .filter-btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.filter-btn-outline i {
    flex-shrink: 0;
}

.filter-btn-outline.filter-active {
    background: #fff;
    color: var(--accent-orange, #F47421);
    border-color: var(--accent-orange, #F47421);
}

.filter-btn-outline.filter-active i {
    color: var(--accent-orange, #F47421);
}

/* Claims-list export SPLIT button (.claims-export-split): the main segment is a
   direct Excel-download link, the caret opens the CSV/Excel/legacy context menu.
   Both segments reuse .filter-btn-outline; the modifiers below merge them into
   one visual control — shared border (the divider comes from the caret's left
   border), outer-corner-only radius, no gap. */
.claims-export-split {
    display: flex;
    align-items: stretch;
}

.claims-export-split .split-btn-main {
    margin-left: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    text-decoration: none;
}

.claims-export-split .split-btn-caret {
    margin-left: 0;
    padding: 0.625rem 0.625rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.context-menu a.active {
    font-weight: 600;
    color: var(--primary-text);
}

/* Base table adjustments for Users */
.data-table th,
.data-table td {
    padding: 1rem 1.5rem;
    white-space: nowrap;
}

.data-table .row-action-icon {
    color: #6B7280;
    cursor: pointer;
    padding: 0.25rem;
}

.data-table .row-action-icon:hover {
    color: #344054;
}

.data-table tbody tr.is-new-user {
    background-color: #f5fbf7;
    box-shadow: inset 3px 0 0 #12b76a;
    animation: new-user-pulse 750ms ease-out 1;
}

.data-table tbody tr.is-new-user:hover {
    background-color: #eef9f2;
}

/* HIVE-357 → RETIRED by HIVE-408 (2026-07-08, owner): the risk-based red row tint + left stripe is
   removed — the row reddening is not used as a convention yet and will be re-decided later (possibly
   keyed on claim colour, not risk). The risk DATA + the #410 presence filter + the ColorMark dot stay;
   the .claim-row-risk class is no longer emitted (see _ClaimsResults.cshtml), these rules are inert. */

.new-user-cell {
    position: relative;
    display: inline-block;
}

.new-record-badge {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #abefc6;
    background: #ecfdf3;
    color: #065F46;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.new-record-badge i {
    font-size: 0.625rem;
}

@keyframes new-user-pulse {
    0% {
        background-color: #ecfdf3;
    }

    45% {
        background-color: #dcfae6;
    }

    100% {
        background-color: #f5fbf7;
    }
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--surface);
    font-size: 13px;
}

/* Impersonation Banner */
.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 32px;
    background: var(--primary);
    color: var(--accent-brown-button);
    font-size: 13px;
    font-weight: 500;
}

.impersonation-banner strong {
    font-weight: 700;
}

.impersonation-cancel-btn {
    padding: 3px 14px;
    border: 1.5px solid #fff;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s;
}

.impersonation-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Context Menu */
.context-menu-wrapper {
    position: relative;
}

.context-menu-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.context-menu-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.context-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 100;
    padding: 6px 0;
}

.context-menu.show {
    display: block;
}

.context-menu a,
.context-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    font-size: 13px;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;
}

.context-menu a:hover,
.context-menu button:hover {
    background: var(--bg);
}

.context-menu a.disabled {
    opacity: 0.55;
    pointer-events: none;
}

.context-menu .danger {
    color: var(--danger);
}

.context-menu i {
    width: 16px;
    text-align: center;
    font-size: 13px;
}

/* ===========================
   Pagination
   =========================== */
.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s;
}

.pagination a:hover {
    background: var(--bg);
    color: var(--text);
}

.pagination a.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.pagination .active {
    background: var(--primary);
    color: var(--accent-brown-button);
}

.pagination .dots {
    color: var(--text-muted);
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.pagination-info .total-records {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.pagination-info .total-records i {
    font-size: 11px;
    color: var(--primary-text);
}

.pagination-info .total-records strong {
    color: var(--text);
    font-weight: 600;
}

.pagination-info-divider {
    width: 1px;
    height: 16px;
    background: var(--border);
}

.pagination-info select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
}

/* ===========================
   Forms
   =========================== */
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 680px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--bg);
    color: var(--text);
}

/* The `hidden` attribute's UA-sheet display:none loses to ANY author display
   rule (the inline-flex above), so buttons toggled via el.hidden stayed
   visible (claim AI chat cancel, 2026-08-05). Attribute-qualified rule wins
   regardless of order; !important guards against later scoped display rules. */
.btn-primary[hidden],
.btn-secondary[hidden],
.btn-danger[hidden] {
    display: none !important;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-danger:hover {
    background: #c53030;
    color: #fff;
}

.btn-bulk-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #0e7490;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-bulk-group:hover {
    background: #0c5e75;
    color: #fff;
}

/* ===========================
   Delete Confirmation Modal
   =========================== */
.delete-modal {
    max-width: 440px;
    position: relative;
    padding: 24px;
}

.delete-modal-close {
    position: absolute;
    top: 22px;
    right: 22px;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.delete-modal-close:hover {
    color: var(--text-secondary);
}

.delete-modal-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.delete-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FEE4E2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.delete-modal-icon i {
    font-size: 20px;
    color: #D92D20;
}

.delete-modal-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.delete-modal-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.delete-modal-footer {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.delete-modal-footer .btn-cancel,
.delete-modal-footer .btn-danger {
    flex: 1;
    border-radius: 16px;
    justify-content: center;
}

/* Activate/Deactivate user modal */
.status-user-modal {
    width: min(420px, calc(100vw - 24px));
    border-radius: 12px;
    position: relative;
    padding: 24px 22px 20px;
}

.status-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    border: none;
    background: transparent;
    color: #2f3640;
    font-size: 21px;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
}

.status-modal-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.status-modal-icon-wrap {
    margin-bottom: 18px;
}

.status-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #1f2937;
    background: #f2dfd2;
}

.status-modal-icon.activate-mode {
    background: #f0dfd1;
}

.status-modal-icon.deactivate-mode {
    background: #f0dfd1;
}

.status-modal-title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    color: #1f2937;
}

.status-modal-subtitle {
    margin: 0;
    color: #5f6b7b;
    font-size: 14px;
    line-height: 1.45;
    max-width: 372px;
}

.status-modal-footer {
    margin-top: 30px;
    display: flex;
    width: 100%;
    gap: 12px;
}

.status-modal-footer .status-modal-cancel,
.status-modal-footer .status-modal-confirm {
    flex: 1;
    height: 50px;
    border-radius: 16px;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

.status-modal-footer .status-modal-cancel {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #c6ccd6;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.status-modal-footer .status-modal-confirm {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--accent-brown-button);
}

.status-modal-footer .status-modal-confirm:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.data-table tr {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.data-table tr.row-deleting {
    opacity: 0;
    transform: translateX(-20px);
}

.data-table tr.row-pending-delete {
    opacity: 0.4;
    background: rgba(239, 68, 68, 0.06);
    pointer-events: none;
}

/* ===========================
   Detail Card
   =========================== */
.detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 680px;
}

.detail-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

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

.detail-label {
    width: 180px;
    min-width: 180px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
}

.detail-value {
    flex: 1;
    font-size: 14px;
}

/* ===========================
   Stub Page
   =========================== */
.stub-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.stub-page i {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.stub-page h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.stub-page p {
    color: var(--text-muted);
    font-size: 14px;
}

/* ===========================
   Validation
   =========================== */
.field-validation-error {
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.input-validation-error {
    border-color: var(--danger) !important;
}

/* ===========================
   Hamburger & Backdrop (hidden by default)
   =========================== */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.hamburger-btn:hover {
    background: var(--bg);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

/* ===========================
   Sidebar Collapse Toggle
   =========================== */
.sidebar-collapse-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    font-size: 16px;
    transition: color 0.15s, background 0.15s;
    margin-left: auto;
}

.sidebar-collapse-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* ===========================
   Desktop Rail Mode
   =========================== */
@media (min-width: 769px) {
    .sidebar {
        transition: width 0.2s ease, min-width 0.2s ease;
    }

    [data-sidebar-mode="rail"] .sidebar {
        width: var(--sidebar-rail-width);
        min-width: var(--sidebar-rail-width);
        overflow: visible;
    }

    [data-sidebar-mode="rail"] .sidebar-nav .nav-item span,
    [data-sidebar-mode="rail"] .sidebar-create .btn-create-claim span,
    [data-sidebar-mode="rail"] .sidebar-footer .user-info,
    [data-sidebar-mode="rail"] .sidebar-footer .user-build-meta,
    [data-sidebar-mode="rail"] .sidebar .logo-text,
    [data-sidebar-mode="rail"] .sidebar .brand-separator,
    [data-sidebar-mode="rail"] .nav-arrow,
    [data-sidebar-mode="rail"] .nav-group-items {
        display: none;
    }

    [data-sidebar-mode="rail"] .nav-group.open .nav-group-items {
        display: none;
    }

    /* Flyout submenu on hover in rail mode */
    [data-sidebar-mode="rail"] .nav-group {
        position: relative;
    }
    [data-sidebar-mode="rail"] .nav-group:hover > .nav-group-items {
        display: block;
        position: absolute;
        left: 100%;
        top: auto;
        bottom: 0;
        min-width: 200px;
        max-height: 50vh;
        overflow-y: auto;
        padding: 6px 0;
        padding-left: 0;
        background: var(--sidebar-bg, #1a1a1a);
        border-radius: 0 8px 8px 0;
        box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }
    [data-sidebar-mode="rail"] .nav-group:hover > .nav-group-items .nav-item {
        padding: 8px 16px;
        justify-content: flex-start;
        gap: 10px;
    }
    [data-sidebar-mode="rail"] .nav-group:hover > .nav-group-items .nav-item span {
        display: inline;
    }

    [data-sidebar-mode="rail"] .sidebar-header {
        padding: 16px 8px 8px;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
    }

    [data-sidebar-mode="rail"] .sidebar .brand-logo-lockup {
        justify-content: center;
        gap: 0;
    }

    [data-sidebar-mode="rail"] .sidebar-create {
        padding: 4px 8px 8px;
    }

    [data-sidebar-mode="rail"] .btn-create-claim {
        justify-content: center;
        padding: 10px;
    }

    [data-sidebar-mode="rail"] .sidebar-create-caret {
        display: none;
    }

    [data-sidebar-mode="rail"] .sidebar-create-split.has-menu .sidebar-create-main {
        border-right: 1px solid var(--accent-orange-line);
        border-radius: 15px;
    }

    [data-sidebar-mode="rail"] .sidebar-nav {
        padding: 6px 8px;
        overflow: visible;
    }

    [data-sidebar-mode="rail"] .sidebar-nav .nav-item {
        justify-content: center;
        padding: 10px;
        gap: 0;
    }

    [data-sidebar-mode="rail"] .sidebar-nav .nav-item .nav-icon,
    [data-sidebar-mode="rail"] .sidebar-nav .nav-item .fas,
    [data-sidebar-mode="rail"] .sidebar-nav .nav-item .fa-solid {
        margin: 0;
    }

    [data-sidebar-mode="rail"] .sidebar-footer {
        padding: 8px;
    }

    [data-sidebar-mode="rail"] .user-profile {
        justify-content: center;
    }

    [data-sidebar-mode="rail"] .user-profile a {
        justify-content: center;
    }

    [data-sidebar-mode="rail"] .btn-logout {
        display: none;
    }

    /* Rail: contacts trigger collapses to its icon; the panel floats wider than
       the rail (the rail keeps overflow visible). */
    [data-sidebar-mode="rail"] .sidebar-contacts-label,
    [data-sidebar-mode="rail"] .sidebar-contacts-chevron {
        display: none;
    }

    [data-sidebar-mode="rail"] .sidebar-contacts-trigger {
        justify-content: center;
        padding: 10px 0;
    }

    [data-sidebar-mode="rail"] .sidebar-contacts-panel {
        left: 4px;
        right: auto;
        width: 240px;
    }

    /* Collapse button icon rotation (chevron flips to point right = expand). */
    [data-sidebar-mode="rail"] #sidebarCollapseBtn {
        transform: rotate(180deg);
    }

    /* HIVE-535 — keep the collapse/expand toggle clearly visible AND clickable in the
       collapsed rail. In the narrow 64px rail the 50%-opacity chevron with margin-left:auto
       reads as invisible (users couldn't find how to expand again). In rail: center both
       controls, drop the auto margin, give them a real button surface + hit area + higher
       contrast so the expand affordance is unmistakable, and lift z-index so nothing clips it. */
    [data-sidebar-mode="rail"] .sidebar-collapse-btn {
        margin: 0 auto;
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.08);
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
    }
    [data-sidebar-mode="rail"] .sidebar-collapse-btn:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.18);
    }

    /* Label chip for the collapsed rail. `.nav-item span { display: none }`
       takes the label off the screen AND out of the accessibility tree, so an
       icon-only link had no name and no tooltip — tolerable while the rail was
       an opt-in desktop preference, not tolerable now that it is the default
       layout for every iPad (tablet tier, 769-1024).

       site.js stamps `aria-label` (the accessible name, which survives the
       display:none) and `data-nav-label` (the visible chip below) onto each
       top-level nav link. Group toggles are excluded: they already reveal
       their own flyout on hover, and two overlays would fight. */
    [data-sidebar-mode="rail"] .sidebar-nav > .nav-item[data-nav-label] {
        position: relative;
    }

    [data-sidebar-mode="rail"] .sidebar-nav > .nav-item[data-nav-label]:not(.nav-group-toggle):hover::after,
    [data-sidebar-mode="rail"] .sidebar-nav > .nav-item[data-nav-label]:not(.nav-group-toggle):focus-visible::after {
        content: attr(data-nav-label);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 8px;
        padding: 6px 10px;
        border-radius: 6px;
        background: var(--sidebar-bg);
        color: var(--sidebar-text);
        font-family: var(--font-nav);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        box-shadow: var(--shadow-lg);
        /* Above the flyout menus (1100) so a chip is never half-hidden. */
        z-index: 1101;
        pointer-events: none;
    }
}

/* Mobile drawer: keep the contacts panel inside the viewport; scroll internally
   when vertical space runs out. */
@media (max-width: 768px) {
    .sidebar-contacts-panel {
        max-height: min(60vh, 320px);
        overflow-y: auto;
    }
}

/* ===========================
   Rail Flyout Menus
   =========================== */
.nav-group-flyout {
    display: none;
    position: fixed;
    left: var(--sidebar-rail-width);
    background: var(--sidebar-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 220px;
    max-width: 280px;
    z-index: 1100;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
}

.nav-group-flyout.open {
    display: block;
}

.nav-group-flyout-title {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
}

/* HIVE-552 — audience section labels inside the expanded Reports nav group
   (Vidinės / Klientų ataskaitos). Indented to sit above their family links. */
.nav-subsection-label {
    padding: 9px 16px 3px 44px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.4);
}
.nav-group-items .nav-subsection-label + .nav-subsection-label,
.nav-group-items .nav-item + .nav-subsection-label {
    margin-top: 6px;
}
/* Sub-audience label inside the collapsed-rail flyout. */
.nav-group-flyout .nav-flyout-subhead {
    padding: 6px 16px 2px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.32);
}

/* HIVE-552 (extended) — dynamic catalogue tree in the sidebar. Pipeline/common
   group labels (CMR / TPVCA / Bendros) sit between the audience label and the
   individual report page links, which render compactly since there are many. */
.nav-report-group-label {
    padding: 5px 16px 2px 44px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.5);
}
.nav-group-items.nav-report-tree .nav-report-link {
    font-size: 12.5px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.3;
}
.nav-group-items.nav-report-tree .nav-report-link .sub-icon {
    opacity: 0.72;
    font-size: 11px;
}
.nav-report-flyout .nav-report-group-label {
    padding: 4px 16px 1px;
    color: rgba(255, 255, 255, 0.42);
}

.nav-group-flyout a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}

.nav-group-flyout a:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.nav-group-flyout a.active {
    color: #F5C253;
}

.nav-group-flyout a i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
}

.nav-group-flyout a.active i {
    color: #F5C253;
    opacity: 1;
}

/* ===========================
   Desktop Hidden Mode
   =========================== */
[data-sidebar-mode="hidden"] .sidebar {
    display: none;
}

[data-sidebar-mode="hidden"] .sidebar-backdrop {
    display: none;
}

/* Header trigger chip — only visible in hidden mode */
.hidden-nav-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.hidden-nav-trigger:hover {
    background: var(--bg);
    border-color: var(--primary);
}

.hidden-nav-trigger.active {
    background: var(--bg);
    border-color: var(--primary);
}

.hidden-nav-trigger-icon {
    height: 20px;
    width: auto;
}

.hidden-nav-trigger-chevron {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.hidden-nav-trigger.active .hidden-nav-trigger-chevron {
    transform: rotate(180deg);
}

[data-sidebar-mode="hidden"] .hidden-nav-trigger {
    display: flex;
}

/* Hidden-mode chip menu (Figma-style) */
.chip-menu {
    display: none;
    position: fixed;
    top: 48px;
    left: 12px;
    min-width: 240px;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 0;
    z-index: 1200;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.chip-menu.open {
    display: block;
}

.chip-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    position: relative;
    white-space: nowrap;
}

.chip-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.chip-menu-item.active {
    color: #F5C253;
}

.chip-menu-item i:first-child {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
}

.chip-menu-item.active i:first-child {
    opacity: 1;
    color: #F5C253;
}

.chip-menu-arrow {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.4;
}

.chip-menu-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 6px 0;
}

.chip-menu-action i:first-child {
    opacity: 0.5;
}

/* Submenu */
.chip-menu-has-sub {
    position: relative;
}

.chip-menu-sub {
    display: none;
    position: absolute;
    left: 100%;
    top: -6px;
    min-width: 220px;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 1210;
}

.chip-menu-has-sub:hover > .chip-menu-sub,
.chip-menu-sub:hover {
    display: block;
}

.chip-menu-sub-scroll {
    max-height: 420px;
    overflow-y: auto;
}

/* Clamp submenu to viewport */
.chip-menu-sub.flip-up {
    top: auto;
    bottom: -6px;
}


/* ===========================
   Responsive: Tablet (≤1024px)
   — no longer auto-collapses; user controls via toggle
   =========================== */
@media (max-width: 1024px) {
    .main-content {
        /* V3/P5: the old `padding: 24px` shorthand silently threw away the
           bottom safe-area, so the FAB stack sat on top of the last rows at
           every width from 390 to 1024 — the whole phone + tablet matrix. */
        padding: 24px 24px var(--content-safe-bottom);
    }

    .header-user span {
        display: none;
    }
}

/* ===========================
   Responsive: Small Tablet (≤768px)
   =========================== */
@media (max-width: 768px) {

    /* Off-canvas sidebar */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        transform: translateX(-100%);
        z-index: 999;
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Restore sidebar text when open */
    .sidebar.open .sidebar-nav .nav-item span,
    .sidebar.open .sidebar-create,
    .sidebar.open .sidebar-footer .user-info,
    .sidebar.open .sidebar-footer .user-build-meta,
    .sidebar.open .logo-text,
    .sidebar.open .nav-arrow {
        display: initial;
    }

    .sidebar.open .btn-logout {
        display: block;
    }

    .sidebar.open .nav-group.open .nav-group-items {
        display: block;
    }

    .sidebar-backdrop.show {
        display: block;
    }

    /* Show hamburger, hide collapse */
    .hamburger-btn {
        display: block;
    }

    .sidebar-collapse-btn,
    .hidden-nav-trigger {
        display: none !important;
    }

    .main-content {
        padding: 20px 20px var(--content-safe-bottom);
    }

    /* Table horizontal scroll */
    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 800px;
    }

    /* Tabs scroll horizontally */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        flex-wrap: nowrap;
    }

    .tab-item {
        white-space: nowrap;
        font-size: 13px;
    }

    /* Toolbar wrapping */
    .toolbar {
        flex-wrap: wrap;
    }

    .search-box {
        max-width: 100%;
        flex: 1 1 100%;
    }

    /* Pagination stacking */
    .pagination-wrapper {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    /* Detail rows */
    .detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .detail-label {
        width: 100%;
        min-width: 0;
    }

    /* Form adjustments */
    .form-card,
    .detail-card {
        padding: 20px;
        max-width: 100%;
    }
}

/* ===========================
   Responsive: Smartphone (≤576px)
   =========================== */
@media (max-width: 576px) {
    /* Below 576 the FAB shrinks to 44px and tucks into the corner at
       bottom:16px (assistant.css), with the scroll chevrons beside it rather
       than under it — so the stack is only ~60px tall and reserving 148px
       would waste a fifth of a phone screen. Re-point the shared token. */
    :root {
        --fab-stack-height: 60px;
        --content-safe-bottom: 76px;
    }

    .main-content {
        padding: 16px 16px var(--content-safe-bottom);
    }

    /* Page header stacking */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header h1 {
        font-size: 20px;
    }

    /* Compact top header */
    .top-header {
        padding: 10px 16px;
    }

    .header-user {
        padding: 4px 8px;
    }

    /* Form adjustments */
    .form-card,
    .detail-card {
        padding: 16px;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn-primary,
    .form-actions .btn-secondary,
    .form-actions .btn-danger {
        width: 100%;
        justify-content: center;
    }

    /* Toolbar compact */
    .filter-btn {
        flex: 1;
        justify-content: center;
    }

    /* Smaller tab counts */
    .tab-count {
        font-size: 10px;
        padding: 1px 6px;
    }

    /* Stub pages */
    .stub-page {
        min-height: 250px;
    }

    .stub-page i {
        font-size: 36px;
    }

    .clients-wizard-steps {
        flex-direction: column;
        gap: 6px;
    }

    .clients-wizard-step {
        width: 100%;
        text-align: left;
    }

    #createClientModal .modal-content,
    #assignGroupModal .modal-content,
    #activateClientModal .modal-content,
    #deactivateClientModal .modal-content,
    #deleteClientModal .modal-content {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    #createClientModal .modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #createClientModal .footer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #createClientModal .footer-actions .btn-primary,
    #createClientModal .footer-actions .btn-cancel,
    #createClientModal .btn-clear {
        width: 100%;
    }

    #createClientModal .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .clients-inline-fields {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   Login Page
   =========================== */
.login-container {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    /* Above everything */
    background-color: #000000;
}

.login-form-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 60px;
    background-color: #000000;
    position: relative;
}

.login-image-side {
    flex: 1;
    background-image: url('/images/foto.jpg');
    background-image: image-set(url('/images/foto.webp') type('image/webp'), url('/images/foto.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-image-side::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/foto2.jpg');
    background-image: image-set(url('/images/foto2.webp') type('image/webp'), url('/images/foto2.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: login-blink 30s infinite;
}

@keyframes login-blink {
    0%, 85% { opacity: 0; }
    90% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity: 0; }
}

.login-logo {
    display: flex;
    align-items: center;
    margin-bottom: 120px;
}

.login-logo .logo-text {
    font-size: 42px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 3px;
}
.login-logo .bee-logo-icon {
    height: 65px;
}
.login-logo .brand-separator {
    height: 50px;
}
.login-logo .logo-text sup {
    font-size: 24px !important;
}

.login-form-wrapper {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

/* HIVE-(combined-plan-2026-05-28) — password complexity meter on
   /Account/SetPassword. Each .pwd-cmx-row carries a category dot
   that flips to filled-green when the JS evaluates the typed value
   as meeting that category. */
.pwd-cmx-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    font-size: 12.5px;
    color: #B0B0B0;
}
.pwd-cmx-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pwd-cmx-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid #6B7280;
    flex-shrink: 0;
    transition: background-color 120ms, border-color 120ms;
}
.pwd-cmx-row.is-met .pwd-cmx-dot {
    background: #22c55e;
    border-color: #22c55e;
}
.pwd-cmx-row.is-met .pwd-cmx-label {
    color: #E5E7EB;
}
.pwd-cmx-summary {
    margin-top: 4px;
    font-size: 11.5px;
    color: #9CA3AF;
}
.pwd-cmx-meter.is-valid .pwd-cmx-summary {
    color: #22c55e;
}

/* Help modal — shows the 5 categories + worked examples. Sits on
   top of the login-shell backdrop. */
.pwd-cmx-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6000;
}
.pwd-cmx-modal[hidden] { display: none; }
.pwd-cmx-modal-card {
    position: relative;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    color: #1f2937;
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.pwd-cmx-modal-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #111827;
}
.pwd-cmx-modal-card h4 {
    margin: 16px 0 8px;
    font-size: 14px;
    color: #111827;
}
.pwd-cmx-modal-card p {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: #374151;
    line-height: 1.5;
}
.pwd-cmx-modal-card .pwd-cmx-modal-note {
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12.5px;
}
.pwd-cmx-modal-list,
.pwd-cmx-modal-examples {
    margin: 0 0 12px 18px;
    padding: 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.6;
}
.pwd-cmx-modal-examples code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, 'IBM Plex Mono', Consolas, monospace;
    font-size: 12.5px;
}
.pwd-cmx-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #6B7280;
}
.pwd-cmx-modal-close:hover { color: #111827; }

.login-title {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

.form-group-login {
    margin-bottom: 24px;
}

.login-validation-alert.validation-summary-valid {
    display: none;
}

.login-validation-alert.validation-summary-errors {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid #5a2b2b;
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    background: #2a1a1a;
    color: #ffd6d6;
    font-size: 13px;
}

.mfa-magic-link-banner {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid rgba(232, 120, 10, 0.35);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    background: rgba(232, 120, 10, 0.08);
    color: #b87a3d;
    font-size: 13px;
    line-height: 1.5;
}

.login-validation-alert.validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

.login-validation-alert.validation-summary-errors li {
    margin: 0;
}

.login-label {
    display: block;
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.login-input {
    width: 100%;
    background-color: #242424;
    border: none;
    border-radius: 10px;
    padding: 14px 16px;
    color: #FFFFFF;
    font-size: 15px;
}

.login-input:focus {
    outline: 2px solid var(--primary);
    background-color: #2a2a2a;
}

.login-password-field {
    position: relative;
}

.login-password-input {
    padding-right: 56px;
}

.login-password-input::-ms-reveal,
.login-password-input::-ms-clear {
    display: none;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #C6CCD4;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.login-password-field:focus-within .password-toggle-btn,
.password-toggle-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.password-toggle-btn.is-visible,
.password-toggle-btn.is-visible:hover,
.password-toggle-btn.is-visible:focus-visible {
    color: var(--primary);
    background: rgba(236, 123, 41, 0.16);
}

/* WP2 (2026-08-26) — the Profile password tab reuses the SHARED control, but
   its inputs sit on the ordinary app surface, not the dark login glass. The
   generic colours above are tuned for the dark shell (#C6CCD4 ink, white
   hover) and would be invisible on white, which is the same defect this work
   package fixes on Login. Scope theme-token colours to the profile fields so
   both themes read correctly, and give the control a 40px pointer target
   without changing its 32px visual box. */
.profile-password-field {
    display: block;
}
.profile-password-field > input {
    width: 100%;
    padding-right: 48px;
}
.profile-password-field > input::-ms-reveal,
.profile-password-field > input::-ms-clear {
    display: none;
}
.profile-password-field .password-toggle-btn {
    color: var(--text-secondary);
    background: transparent;
}
.profile-password-field .password-toggle-btn::after {
    /* pointer target only — the icon keeps its 32px box */
    content: "";
    position: absolute;
    inset: -4px;
}
.profile-password-field:focus-within .password-toggle-btn,
.profile-password-field .password-toggle-btn:hover,
.profile-password-field .password-toggle-btn:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
/* 2026-08-26 (owner review) - the Bugtracker launcher keeps the recognisable bug
   glyph, but in HIVE orange: at 24px the brand bee was neither visible enough
   nor readable as "report a bug", while the bell/envelope neighbours stay
   neutral ink. Orange marks this as the one ACTION in that row. */
/* HIVE-728 concept 26. The bubble is fixed brand orange in both themes so the control
   reads as an action; the exclamation takes the header ink (currentColor) so it reverses
   on the dark header instead of going black-on-dark. */
.bug-tracker-wrapper .bug-tracker-icon { color: var(--text-primary, #201b16); }
.bug-tracker-wrapper .bug-tracker-icon .bug-tracker-bubble { stroke: var(--primary); }
.bug-tracker-wrapper .bug-tracker-icon .bug-tracker-mark { stroke: currentColor; }
.bug-tracker-wrapper .bug-tracker-icon .bug-tracker-mark-dot {
    stroke: currentColor;
    fill: currentColor;
}
.bug-tracker-wrapper .header-icon-btn:hover .bug-tracker-bubble,
.bug-tracker-wrapper .header-icon-btn:focus-visible .bug-tracker-bubble {
    stroke: var(--accent-orange-deep, var(--primary));
}

.bug-tracker-wrapper .header-icon-btn:hover .bug-tracker-icon,
.bug-tracker-wrapper .header-icon-btn:focus-visible .bug-tracker-icon {
    color: var(--accent-orange-deep, var(--primary));
}

}

.profile-password-field .password-toggle-btn.is-visible,
.profile-password-field .password-toggle-btn.is-visible:hover,
.profile-password-field .password-toggle-btn.is-visible:focus-visible {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.password-toggle-icon {
    width: 20px;
    height: 20px;
}

.password-toggle-icon-visible {
    display: none;
}

.password-toggle-btn.is-visible .password-toggle-icon-hidden {
    display: none;
}

.password-toggle-btn.is-visible .password-toggle-icon-visible {
    display: block;
}

.login-field-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.btn-login {
    width: 100%;
    background-color: var(--primary);
    color: var(--accent-brown-button);
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

.btn-login:hover {
    opacity: 0.9;
}

.login-link {
    color: #B0B0B0;
    font-size: 14px;
    text-decoration: none;
}

.login-link.small {
    font-size: 12px;
}

.login-link:hover {
    text-decoration: underline;
}

.forgot-success-card {
    margin: 8px 0 10px;
    text-align: center;
}

.forgot-success-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forgot-success-icon {
    color: #b0b0b0;
}

.forgot-success-title {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.forgot-success-text {
    margin: 0 0 10px;
    color: #b0b0b0;
    font-size: 15px;
    line-height: 1.6;
}

.forgot-success-sentto {
    margin: 0 0 26px;
    color: #8f9aa8;
    font-size: 15px;
    line-height: 1.6;
}

.forgot-success-sentto strong {
    color: #ffffff;
    font-weight: 600;
    margin-left: 4px;
}

.forgot-resend-form {
    margin: 0;
    color: #98a2b3;
    font-size: 15px;
}

.forgot-resend-btn {
    margin-left: 6px;
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.forgot-resend-btn:hover {
    text-decoration: underline;
}

.forgot-success-back {
    text-align: center;
    margin-top: 12px;
}

.forgot-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mfa-header-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mfa-header-icon {
    color: #b0b0b0;
}

.mfa-title {
    margin-bottom: 8px;
    text-align: center;
}

.mfa-subtitle {
    margin: 0 0 22px;
    color: #98a2b3;
    font-size: 15px;
    text-align: center;
    line-height: 1.6;
}

.mfa-subtitle strong {
    color: #ffffff;
    font-weight: 600;
    margin-left: 4px;
}

.mfa-code-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.mfa-code-input {
    width: 100%;
    height: 54px;
    border-radius: 10px;
    border: 1px solid var(--primary);
    background: #242424;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    padding: 0;
}

.mfa-code-input:focus {
    outline: 2px solid #f4a261;
    border-color: #f4a261;
    background: #2a2a2a;
}

.mfa-expiry-text {
    margin: 0 0 18px;
    text-align: center;
    color: #98a2b3;
    font-size: 13px;
}

.mfa-submit-btn {
    margin-top: 0;
    margin-bottom: 20px;
}

.mfa-resend-form {
    margin: 0;
    color: #98a2b3;
    text-align: center;
    font-size: 15px;
}

.mfa-resend-btn {
    margin-left: 6px;
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.mfa-resend-btn:hover {
    text-decoration: underline;
}

.mfa-back-wrap {
    margin-top: 16px;
    text-align: center;
}

.mfa-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.set-password-success-card {
    text-align: center;
    margin-top: 10px;
}

.set-password-success-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b0b0;
}

.set-password-success-title {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.6px;
}

.set-password-success-text {
    margin: 0 0 28px;
    color: #98a2b3;
    font-size: 16px;
    line-height: 1.4;
}

.set-password-login-btn {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    margin-top: 0;
}

@media (max-width: 992px) {
    .login-image-side {
        display: none;
    }

    .login-form-side {
        padding: 40px;
    }
}

/* Helper classes */
.main-wrapper.full-width {
    margin-left: 0;
    width: 100%;
}

.main-content.no-padding {
    padding: 0 !important;
}

/* ===========================
   Modals
   =========================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Temporary transfer stays inert until a colleague and required period are
   selected. This used to add grayscale(.35) + opacity(.5) on its own because the
   generic primary-button palette left a disabled action looking fully active in
   light. `.btn-primary:disabled` now carries the shared disabled token treatment
   (see below), and re-dimming it here only pushed white-ish ink onto a white-ish
   fill (~1.6:1); the button keeps its own cursor/transform contract only. */
#transferClaimModal #transferSubmitBtn:disabled,
#transferClaimModal #transferSubmitBtn:disabled:hover {
    cursor: not-allowed;
    transform: none;
}

.modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 64px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 16px;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px;
}

.btn-close-modal:hover {
    color: var(--text);
}

.modal-body {
    padding: 16px 32px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* m3 — draft "Invite participants" picker. It used to be a bare native <dialog>:
   in dark theme the UA painted its own canvas (rgb(18,18,18)) against the warm dark
   surface and its hairlines were hardcoded #e3e6ea. As plain .modal-overlay markup it
   now takes the shared surface/border/ink tokens (theme.css darkens .modal-content),
   so only its width and inner rhythm need saying here. The candidate list keeps its
   own scroll box from claim-merged-bar.css; the modal body already supplies padding. */
.draft-participants-modal .modal-content {
    max-width: 440px;
}

.draft-participants-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.draft-participants-modal .modal-body input[type="search"] {
    width: 100%;
}

.draft-participants-modal .draft-participants-candidates {
    padding: 0;
}

/* Radio Toggle for User Type */
.user-type-toggle {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.radio-label input[type="radio"] {
    display: none;
}

.custom-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    /* Slightly rounded square according to design */
    display: inline-block;
    position: relative;
    transition: all 0.2s;
}

.radio-label input[type="radio"]:checked+.custom-radio {
    background-color: var(--primary);
    border-color: var(--primary);
}

.radio-label input[type="radio"]:checked+.custom-radio::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Form Grid in Modal */
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.9fr) minmax(320px, 2.1fr);
    align-items: center;
    gap: 16px;
}

/* HIVE-524 — the label|input grid has a ~496px minimum (160 + 320 + gap), so on
   phones the input column overflows the viewport and the right side of every
   create/edit modal (driver, user, vehicle, insured person) is clipped / needs
   horizontal scroll. Stack label-over-input below the modal breakpoint so the
   whole form fits. Applies site-wide to every .form-row form. */
@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 6px;
    }
}

.form-row label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row input[type="time"],
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    border-color: var(--primary);
}

.form-row input::placeholder {
    color: var(--text-muted);
}

.form-row textarea {
    resize: vertical;
    min-height: 72px;
}

.field-required-marker {
    color: #ff3b30;
    font-weight: 700;
}

.wizard-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wizard-inline-fields-2 {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.wizard-helper-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 420px;
}

.phone-composite-row {
    grid-template-columns: 108px 1fr;
}

.broker-row {
    grid-template-columns: 1fr auto;
}

.btn-link-inline {
    text-decoration: none;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-link-inline:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Phone input group */
.phone-input-group {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: center;
}

.country-code-select {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    flex: 0 0 108px;
    background-color: #ffffff;
}

/* HIVE-326 — when the country-code <select> is enhanced into a searchable combobox, the .hive-combobox wrapper
   (not the now-hidden select) is the flex child, so it loses the fixed 108px. Re-apply the width to the wrapper. */
.phone-input-group .hive-combobox {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    flex: 0 0 108px;
}

.phone-input-group input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Select wrapper for custom arrow */
.select-wrapper {
    position: relative;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    position: relative;
    z-index: 1;
}

.toolbar .select-wrapper select {
    padding: 9px 36px 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--surface);
    min-width: 180px;
    cursor: pointer;
}

.select-wrapper select:invalid {
    color: var(--text-muted);
}

.select-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 12px;
    pointer-events: none;
    z-index: 0;
}

/* Readonly input styling */
.readonly-input {
    background-color: #f9fafb !important;
    color: var(--text-secondary) !important;
    cursor: not-allowed;
}

/* Modal Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 32px;
}

.btn-clear {
    background: none;
    border: none;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
}

.btn-clear:hover {
    color: var(--text-secondary);
}

.footer-actions {
    display: flex;
    gap: 12px;
}

.btn-cancel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    /* item 68 — .btn-cancel is used on <a> tags (e.g. QCI 'Atšaukti'); without this
       they render with the browser's underline, reading as a detached link vs a button. */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-cancel:hover {
    background: #f9fafb;
}

.permissions-summary-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
}

.permissions-summary-text {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}

.permissions-summary-actions {
    display: flex;
    align-items: center;
}

.permissions-config-btn {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
}

.permissions-picker-overlay {
    z-index: 1100;
}

.permissions-picker-modal {
    max-width: 760px;
    width: min(760px, 92vw);
    max-height: 86vh;
    border-radius: 14px;
}

.permissions-picker-header {
    padding-bottom: 12px;
}

.permissions-picker-toolbar {
    padding: 0 32px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.permissions-search-box {
    position: relative;
    flex: 1 1 auto;
}

.permissions-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 13px;
}

.permissions-search-box input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px 9px 34px;
    font-size: 14px;
}

.permissions-picker-selected {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.permissions-picker-body {
    padding: 14px 32px;
    overflow-y: auto;
    max-height: calc(86vh - 210px);
}

.permission-group-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 10px;
}

.permission-group-toggle {
    border: 0;
    background: #f8fafc;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text);
    cursor: pointer;
}

.permission-group-toggle i {
    transition: transform 0.18s ease;
    color: var(--text-secondary);
}

.permission-group-toggle.is-open i {
    transform: rotate(180deg);
}

.permission-group-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.permission-group-title {
    font-size: 14px;
    font-weight: 600;
}

.permission-group-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.permission-group-panel {
    padding: 10px 14px 12px;
    border-top: 1px solid var(--border);
}

.permission-group-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.group-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.permission-group-clear {
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.permission-items-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

/* HIVE-565 self-service — per-permission origin chips in the picker. */
.perm-origin {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 1px 7px;
    border-radius: 9px;
    text-transform: uppercase;
}
.perm-origin[data-kind="role"]    { color: #1d643b; background: #e5f5ec; }
.perm-origin[data-kind="extra"]   { color: #8a5a00; background: #fdf1d8; }
.perm-origin[data-kind="removed"] { color: #8f2f2f; background: #fde4e4; text-decoration: line-through; }

.permission-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.35;
}

.permission-item input[type="checkbox"] {
    margin: 0;
}

.permissions-picker-footer {
    border-top: 1px solid var(--border);
    padding: 14px 32px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fff;
    position: sticky;
    bottom: 0;
}

.clients-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.clients-empty-state i {
    font-size: 32px;
    margin-bottom: 10px;
    color: #6B7280;
}

.clients-empty-state h3 {
    margin-bottom: 6px;
    font-size: 18px;
    color: var(--text);
}

/* Page-based wizard should use full content width, not modal width. */
.clients-wizard-page-shell {
    width: 100%;
}

.clients-wizard-header-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.clients-wizard-header-card .page-header {
    margin-bottom: 0;
}

.clients-wizard-header {
    min-height: 52px;
}

.clients-wizard-header h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.clients-wizard-header .page-header-actions {
    gap: 10px;
}

.clients-wizard-header .btn-cancel,
.clients-wizard-header .btn-primary {
    min-height: 40px;
    padding: 8px 20px;
    border-radius: 12px;
}

.clients-wizard-page-shell .modal-content.clients-wizard-page {
    width: 100%;
    max-width: none;
    border: 1px solid var(--border);
    box-shadow: none;
    border-radius: 12px;
    overflow: visible;
}

.clients-wizard-page-shell .modal-content.clients-wizard-page .modal-body {
    padding: 22px 24px;
}

.clients-wizard-page-shell .modal-content.clients-wizard-page .modal-footer {
    padding: 18px 24px 22px;
    border-top: 1px solid var(--border);
}

.clients-wizard-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 26px;
    padding: 4px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #f9fafb;
}

.clients-wizard-step {
    border: 1px solid transparent;
    background: transparent;
    color: #667085;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.clients-wizard-step::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d5dd;
    flex: 0 0 auto;
}

.clients-wizard-step.active {
    border-color: transparent;
    color: var(--accent-orange, #F47421);
    background: rgba(251, 229, 212, 0.5);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
}

.clients-wizard-step.active::after {
    background: #d0d5dd;
}

.clients-wizard-step:hover:not(.active) {
    background: #ffffff;
    border-color: #eaecf0;
    color: #344054;
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.clients-wizard-step.has-errors::after {
    background: #ef4444;
}

.clients-wizard-pane {
    display: none;
}

.clients-wizard-pane.active {
    display: block;
}

/* Keep steps full-width, but center form fields in a narrower middle area (Figma-like). */
.clients-wizard-page .clients-wizard-pane .form-grid {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.clients-wizard-page .clients-wizard-pane>.btn-secondary {
    display: inline-flex;
    margin-top: 6px;
    margin-left: calc((100% - min(760px, 100%)) / 2);
}

.clients-wizard-page .clients-wizard-pane .form-row {
    grid-template-columns: minmax(170px, 0.85fr) minmax(340px, 2.15fr);
}

.clients-wizard-pane[data-step="3"] .form-grid {
    max-width: 700px;
}

.clients-wizard-pane[data-step="3"] .form-row {
    grid-template-columns: minmax(140px, 0.8fr) minmax(360px, 2.2fr);
    gap: 14px;
}

.clients-wizard-pane[data-step="3"] textarea {
    min-height: 96px;
}

/* Contract fees tab should occupy a wider middle area (roughly 3 middle columns in Figma). */
.clients-wizard-pane[data-step="4"] .form-grid {
    max-width: 980px;
}

.clients-wizard-pane[data-step="4"] .form-row {
    grid-template-columns: minmax(150px, 0.75fr) minmax(620px, 2.45fr);
    gap: 16px;
}

.clients-wizard-pane[data-step="4"] .contract-fees-row>label:empty {
    display: block;
    visibility: hidden;
}

.clients-wizard-pane[data-step="4"] .contract-fees-title {
    grid-column: 1 / -1;
}

/* Accordion in Figma spans the full middle content block, not only right field column. */
.clients-wizard-pane[data-step="4"] .contract-fees-row {
    grid-template-columns: 1fr;
}

.clients-wizard-pane[data-step="4"] .contract-fees-row>label {
    display: none;
}

.clients-wizard-pane[data-step="4"] .contract-fees-accordion {
    width: 100%;
    max-width: none;
}

@media (max-width: 980px) {
    .clients-wizard-page .clients-wizard-pane .form-grid {
        max-width: 100%;
    }

    .clients-wizard-pane[data-step="4"] .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .clients-wizard-page .clients-wizard-pane>.btn-secondary {
        margin-left: 0;
    }
}

@media (max-width: 1100px) {
    .clients-wizard-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .clients-wizard-header h1 {
        font-size: 24px;
    }

    .clients-wizard-page-shell .modal-content.clients-wizard-page .modal-body,
    .clients-wizard-page-shell .modal-content.clients-wizard-page .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .clients-wizard-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clients-wizard-page .clients-wizard-pane .form-row {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
    }

    .clients-wizard-page .clients-wizard-pane .form-row label:empty {
        display: none;
    }

    .wizard-inline-fields-2,
    .phone-composite-row {
        grid-template-columns: 1fr;
    }
}

.clients-inline-fields {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    width: 100%;
}

/* ── Tab 5: Company relations ── */
.company-relations-wrapper {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.relation-choice-row {
    display: block;
}

.relation-profile-option {
    display: grid;
    gap: 6px;
}

.relation-profile-option .wizard-inline-check {
    gap: 10px;
}

.relation-profile-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--primary);
}

.relation-profile-option .wizard-helper-text {
    margin-left: 30px;
}

.relation-group-search-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 16px;
}

.relation-group-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cfd6df;
    border-radius: 9px;
    background: #f9fbfd;
    color: #475467;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    padding: 10px 12px;
}

.relation-group-notice i {
    color: #475467;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-relation-search-clear {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
    z-index: 4;
    line-height: 1;
}

.btn-relation-search-clear:hover {
    color: #d92d20;
}

/* Search section */
.relation-search-section {
    display: grid;
    gap: 8px;
}

.relation-search-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.relation-search-wrapper {
    position: relative;
}

.relation-search-wrapper input {
    width: 100%;
    padding-left: 36px;
    padding-right: 38px;
    min-height: 42px;
    border: 1px solid #cfd6df;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
}

.relation-search-wrapper::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 3;
}

.relation-search-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #667085;
    font-size: 12px;
    pointer-events: none;
    z-index: 3;
}

.relation-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
    max-height: 300px;
    overflow-y: auto;
    z-index: 25;
}

.company-name-search-wrapper {
    position: relative;
    width: 100%;
}

.relation-search-option {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.relation-search-option:hover {
    background: #f8fafc;
}

.relation-search-option .search-profile-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.relation-search-option .search-profile-badge.badge-parent {
    background: #ffe8d5;
    color: #ad4f00;
}

.relation-search-option .search-profile-badge.badge-child {
    background: #e7ecf3;
    color: #344054;
}

.relation-search-more {
    padding: 8px 12px;
    font-size: 12px;
    color: #667085;
    border-top: 1px solid #e4e7ec;
    text-align: center;
}

.relation-search-option-create {
    color: var(--primary-text);
    font-weight: 500;
    justify-content: flex-start;
}

.relation-search-option-create i {
    color: var(--primary-text);
    font-size: 13px;
}

.relation-search-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #667085;
}

/* Group members display */
.group-members-container {
    margin-top: 15px;
    padding: 12px;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e6e8eb;
}

.group-members-container .relation-search-label {
    margin-bottom: 8px;
    color: #344054;
    font-weight: 500;
}

.group-members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-members-list .group-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
}

.group-member-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-member-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.group-member-badge.parent {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFE0B2;
}

.group-member-badge.child {
    background: #f0f4f8;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.group-member-actions {
    display: flex;
    gap: 6px;
}

.group-member-self {
    background: #f5f6f8;
    border-color: #d8dde5;
}

.group-member-self .group-member-name {
    font-weight: 600;
}

.group-member-badge-self {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    background: #f0f0f0;
    color: #667085;
    border: 1px solid #d0d5dd;
    margin-left: 4px;
}

.group-member-btn {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid #d0d5dd;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.group-member-btn:hover {
    background: #f8fafc;
}

.group-member-btn.make-parent {
    color: #065F46;
    border-color: #b7ebcf;
    background: #ecfdf3;
}

.group-member-btn.make-parent:hover {
    background: #d1fae5;
}

.group-member-btn.make-child {
    color: #1565C0;
    border-color: #BBDEFB;
    background: #E3F2FD;
}

.group-member-btn.make-child:hover {
    background: #BBDEFB;
}

.group-member-btn.remove {
    color: #d92d20;
    border-color: #fecaca;
    background: #fef2f2;
}

.group-member-btn.remove:hover {
    background: #fee2e2;
}

/* Company relation rows */
.company-relations-list {
    display: grid;
    gap: 10px;
}

.company-relation-row {
    border: 1px solid #e6dfd4;
    border-radius: 12px;
    background: #fcfaf8;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(200px, 2fr) auto auto;
    gap: 12px;
    align-items: center;
}

.company-relation-name-cell input {
    width: 100%;
    min-height: 40px;
}

.company-relation-row[data-is-self="true"] .company-relation-name-cell input {
    background: #f5f6f8;
    border-color: #d8dde5;
    font-weight: 600;
}

.company-relation-badges {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 30px;
}

.company-relation-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: #e7ecf3;
    color: #0f172a;
    white-space: nowrap;
}

.company-relation-badge.parent-badge {
    background: #ffe8d5;
    color: #ad4f00;
}

.company-relation-badge.parent-badge i {
    color: var(--primary-text);
    font-size: 11px;
}

.company-relation-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.company-relation-actions .btn-clear {
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.company-relation-actions .btn-clear i {
    color: #6B7280;
}

.btn-relation-remove {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #667085;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.btn-relation-remove:hover {
    background: #fef3f2;
    border-color: #fda29b;
    color: #d92d20;
}

/* Group name box */
.relation-group-name-box {
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: 16px;
    display: grid;
    gap: 8px;
}

.relation-group-name-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.relation-group-name-box input {
    min-height: 42px;
}

.relation-group-name-box .wizard-helper-text {
    margin-top: 2px;
}

@media (max-width: 760px) {
    .company-relations-wrapper {
        max-width: 100%;
    }

    .company-relation-row {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: 12px;
    }

    .company-relation-actions {
        justify-content: flex-start;
    }
}

#relationActionModal .delete-modal {
    max-width: 520px;
    padding: 24px 24px 20px;
}

#relationActionModal .delete-modal-subtitle {
    line-height: 1.45;
    max-width: 430px;
}

#relationActionModal .delete-modal-footer {
    margin-top: 24px;
}

.clients-contacts-stack {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.client-contact-card {
    border: 1px solid #e8ddcf;
    background: #f8f4ef;
    border-radius: 12px;
    padding: 16px 16px 18px;
    margin-bottom: 16px;
}

.client-contact-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid #d8dfe9;
}

.client-contact-card-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
}

.client-contact-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.client-contact-remove-action {
    color: #f04438;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 2px 0;
}

.client-contact-remove-action:hover {
    color: #d92d20;
}

.client-contact-toggle-action {
    color: #344054;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
}

.client-contact-card-body {
    padding-top: 14px;
}

.client-contact-card-body .client-contact-row {
    margin-bottom: 10px;
}

.client-contact-card-body .client-contact-row:last-child {
    margin-bottom: 0;
}

.client-contact-card .form-row {
    grid-template-columns: minmax(210px, 0.95fr) minmax(360px, 2.05fr);
    gap: 14px;
}

.client-contact-card .select-wrapper select {
    background-color: #ffffff;
}

.client-contact-row-checkbox {
    margin-top: -2px;
    margin-bottom: 12px;
}

.client-contact-row-claim-emails {
    margin-bottom: 14px;
}

.client-contact-row-comment textarea {
    min-height: 104px;
}

.clients-inline-fields-claim-info {
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.clients-inline-fields-claim-info .btn-primary {
    min-height: 42px;
    padding: 8px 18px;
    border-radius: 16px;
}

.client-claim-email-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 2;
}

.client-claim-email-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e9eaec;
    color: #1f2937;
    font-size: 12px;
}

.client-claim-email-remove {
    border: none;
    background: transparent;
    color: #475467;
    padding: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.client-contact-pipeline-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 2;
}

.client-contact-pipeline-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e9eaec;
    color: #1f2937;
    font-size: 12px;
}

.client-contact-pipeline-remove {
    border: none;
    background: transparent;
    color: #475467;
    padding: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* HIVE-228: pipeline picker is now orange toggle buttons (one per active pipeline). */
.client-contact-pipeline-toggles {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 2;
}

.client-contact-pipeline-toggle {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #475467;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

.client-contact-pipeline-toggle:hover {
    border-color: #f08a33;
    color: #f08a33;
}

.client-contact-pipeline-toggle.is-selected {
    background: #f08a33;
    border-color: #f08a33;
    color: #fff;
}

/* HIVE-227: contact name split into first + last side by side. */
.client-contact-name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* HIVE-225: company-tab custom claim-email — checkbox+label left-aligned, email input inline same row. */
.client-claim-email-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.client-claim-email-row .client-claim-email-inline-input {
    flex: 1;
    max-width: 360px;
}

.clients-add-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(780px, 100%);
    border: 1px solid #f08a33;
    border-radius: 14px;
    color: #f08a33;
    font-weight: 600;
    margin: 4px auto 0;
    padding: 11px 16px;
    text-decoration: none;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.clients-add-contact-btn:hover:not(:disabled) {
    background: #fff3e8;
    color: #db6f1c;
    border-color: #db6f1c;
}

.clients-add-contact-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 760px) {

    .client-contact-card {
        padding: 12px;
    }

    .client-contact-card-title {
        font-size: 26px;
    }

    .client-contact-card .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .clients-inline-fields-claim-info {
        grid-template-columns: 1fr;
    }

    .client-contact-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-contact-card-actions {
        width: 100%;
        justify-content: space-between;
    }
}

.btn-remove-row {
    padding: 10px 12px;
    white-space: nowrap;
}

.clients-inline-toggle {
    display: flex;
    gap: 18px;
    align-items: center;
}

.contract-fees-row {
    align-items: flex-start;
}

.contract-fees-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
}

.contract-fees-row>label:empty {
    visibility: hidden;
}

.contract-fees-accordion {
    width: 100%;
    border: 1px solid #d7dce4;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.contract-fees-section+.contract-fees-section {
    border-top: 1px solid #e4e7ec;
}

.contract-fees-section-header {
    width: 100%;
    border: 0;
    background: #f7f8fb;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    color: #667085;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.contract-fees-section-header:hover {
    background: #f2f4f7;
}

.contract-fees-section-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.contract-fees-section-body {
    padding: 10px 12px 12px;
}

.contract-fees-subtitle {
    margin-bottom: 7px;
    color: #475467;
    font-weight: 600;
    font-size: 14px;
}

.contract-fees-radio-group,
.contract-fees-radio-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.contract-fees-radio-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.contract-fees-inline-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contract-fees-inline-input {
    width: 68px;
    min-width: 68px;
    height: 34px;
    padding: 6px 8px;
}

.contract-fees-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.contract-fees-col-field label {
    display: block;
    margin-bottom: 4px;
    color: #475467;
    font-size: 14px;
}

@media (max-width: 980px) {
    .contract-fees-two-col {
        grid-template-columns: 1fr;
    }

    .contract-fees-inline-row {
        width: 100%;
    }

    .contract-fees-inline-input {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .contract-fees-title {
        font-size: 28px;
    }

    .contract-fees-radio-group {
        gap: 8px;
    }
}

.field-error {
    border-color: #f04438 !important;
    background: #fff5f5;
}

.field-error-text {
    color: #b42318;
    font-size: 12px;
    margin-top: 4px;
}

/* User create/edit modal — fixed height + scrollable body so toggling
   Internal/External (which hides/shows fields) doesn't reflow the
   modal's outer dimensions. Without this the modal grows past the
   viewport for users with long portfolios. */
.new-user-modal {
    max-height: calc(100vh - 32px);
}
.new-user-modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Create/edit modals (insured driver / vehicle / insured person, Users, etc.)
   already cap to the viewport and scroll their body with a pinned footer, so
   every field + the Create button stays reachable on short viewports. But
   Edge/Chromium use auto-hiding overlay scrollbars, so the scroll was
   undiscoverable — the lower fields looked cut off above the footer. Force an
   always-visible classic scrollbar on the modal body so the scroll is obvious. */
.new-user-modal .modal-body {
    scrollbar-width: thin;          /* Firefox */
    scrollbar-gutter: stable;
}
.new-user-modal .modal-body::-webkit-scrollbar {
    width: 10px;
}
.new-user-modal .modal-body::-webkit-scrollbar-thumb {
    background: #c4c4c8;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.new-user-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8ac;
    background-clip: padding-box;
}
.new-user-modal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

/* HIVE-524 — driver card Main / Additional information tabs (create/edit driver modal). */
.driver-modal-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.driver-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.driver-tab-btn:hover {
    color: var(--text);
}
.driver-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* HIVE-524 — keep the modal a stable height when switching tabs so the tab strip
   ("toggle line") and footer don't jump. Both panels reserve the same minimum
   height (sized to the taller Additional-info tab, measured ~421px); the shorter
   Main tab stretches to match. The body still scrolls if a viewport is short. */
.driver-tab-panel {
    min-height: 430px;
}
/* The "Training completed" checkbox is a single small control sitting in the
   input column of the 2-col label/input grid. Left-align it (to where the text
   inputs start) at its natural size instead of centering it in the column. */
#driverTabAdditional #modalTrainingCompleted {
    width: 18px;
    height: 18px;
    justify-self: start;
    align-self: center;
    margin: 0;
    margin-right: auto;
}

/* HIVE-526 — export "generating…" shimmer toast (bottom-center, brief). */
.claims-export-shimmer {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    z-index: 4000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.claims-export-shimmer.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.claims-export-shimmer-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
    padding: 14px 18px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e8ef);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.claims-export-shimmer-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #152033);
}
.claims-export-shimmer-bar {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        var(--border, #e3e8ef) 0%,
        var(--primary, #F47421) 50%,
        var(--border, #e3e8ef) 100%);
    background-size: 200% 100%;
    animation: claimsExportShimmer 1.1s linear infinite;
}
@keyframes claimsExportShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Compact size for bulk-action buttons in the Clients toolbar so they
   visually align with the right-aligned filter buttons. */
.bulk-action-btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
}

/* "Priskirti brokerį" — distinct lime green so the bulk-action row's
   four buttons read at a glance (teal Add to group, orange Activate,
   lime Assign broker, red Delete). */
.btn-assign-broker {
    background: #65a30d;          /* lime-600 */
    color: #ffffff;
    border: 1px solid #65a30d;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.btn-assign-broker:hover {
    background: #4d7c0f;          /* lime-700 */
    border-color: #4d7c0f;
}
.btn-assign-broker:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Broker multi-select option labels — each option must stay on a single
   row, otherwise typeahead results visually merge when the popover is
   narrow. */
.broker-filter-option { white-space: nowrap; }

/* Clients Status/Group/Broker searchable multiselects share one vertical
   option stack. Search filtering must never fall back to inline label flow. */
.filter-multiselect-options {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.filter-multiselect-options > label { width: 100%; }

/* "Mano portfelis" single toggle pill (broker-visibility plan §6.3).
   Gray when off ("Visi klientai"), orange-filled when on ("Mano
   portfelis"). Same height/padding as .filter-btn-outline so it lines
   up with other toolbar controls. */
.broker-portfolio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.broker-portfolio-toggle:hover { background: #e5e7eb; }
.broker-portfolio-toggle i { font-size: 10px; }
.broker-portfolio-toggle.is-on {
    background: var(--accent-orange, #F47421);
    border-color: var(--accent-orange, #F47421);
    color: #ffffff;
}
.broker-portfolio-toggle.is-on:hover {
    background: #d56b09;
    border-color: #d56b09;
}

.user-company-multiselect {
    position: relative;
}

/* HIVE-510 — compact autocomplete/multi-select used by the Users list. */
.users-client-filter-menu {
    width: min(360px, calc(100vw - 16px));
    padding: 10px;
}

.users-client-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.users-client-filter-search i {
    color: var(--text-secondary);
    font-size: 12px;
}

.users-client-filter-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.users-client-filter-options {
    max-height: 220px;
    margin-top: 8px;
    overflow-y: auto;
}

.users-client-filter-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.users-client-filter-option:hover,
.users-client-filter-option.is-active,
.users-client-filter-option:focus-visible {
    background: var(--bg);
}

.users-client-filter-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--accent-orange);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.users-client-filter-empty {
    padding: 14px 8px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.users-client-filter-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.users-client-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--text);
    font-size: 12px;
}

.users-client-filter-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-client-filter-chip button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.users-client-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.users-client-filter-actions > a {
    padding: 0;
    color: var(--text-secondary);
}

/* HIVE-719 — Users client-group facet reuses the claims multiselect interaction
   without loading the claims page stylesheet into the Users bundle. */
.users-client-filter-hint {
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.user-company-control {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 34px 0 12px;
    cursor: text;
}

.user-company-control input,
.form-row .user-company-control input[type="text"] {
    border: none;
    outline: none;
    width: 100%;
    padding: 0;
    font-size: 14px;
    /* HIVE-565 follow-up — explicit height/line-height so the text caret renders
       full-size (it was collapsing to the browser's minimal content box). */
    height: 24px;
    line-height: 24px;
    color: var(--text);
    background: transparent;
}

.user-company-dropdown {
    /* HIVE-150 — fixed positioning so the dropdown escapes the
       create/edit-user modal's overflow:auto clip. JS sets
       top/left/width when .is-open is added; here we just declare
       the visual style + the z-index that beats the modal-overlay
       (1000) and the permissions picker (1100). */
    position: fixed;
    z-index: 1500;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.18);
    display: none;
}

.user-company-dropdown.is-open {
    display: block;
}

.user-company-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--text);
}

.user-company-option:hover {
    background: #f8fafc;
}

.user-company-option-choice {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    gap: 10px;
    cursor: pointer;
}

.assign-broker-option {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.assign-broker-option:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.user-company-option input {
    width: 16px;
    height: 16px;
}

/* HIVE-561 — "select whole group" badge, right-aligned on a group's main-company row. */
.user-company-group-badge {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--primary-text);
    background: var(--surface);
    border: 1px solid var(--primary-text);
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.user-company-group-badge:hover,
.user-company-group-badge:focus-visible {
    background: var(--primary);
    color: var(--on-primary);
}

.user-company-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.user-company-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e9eaec;
    color: #1f2937;
    font-size: 13px;
}

.user-company-chip-overflow {
    background: #f2f4f7;
    color: #475467;
}

.user-company-chip-remove {
    border: none;
    background: #6b7280;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.assign-selected-list-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.assign-selected-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.assign-selected-empty {
    font-size: 13px;
    color: var(--text-secondary);
}

.assign-selected-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assign-selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
}

.assign-selected-name {
    font-size: 13px;
    color: var(--text);
}

.assign-selected-remove {
    padding: 4px 8px;
    font-size: 12px;
}

.clients-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 12px;
}

.clients-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.clients-draft-pill {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #fff7ed;
    border: 1px solid #fcd9bd;
    color: #9a4a12;
}

.assign-group-picker {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    width: 100%;
}

/* Roles page */
.roles-list {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.role-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.role-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
}

.role-card-header:hover {
    background: #fafafa;
}

.role-card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.role-card-chevron {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s;
    width: 14px;
    text-align: center;
}

.role-card.expanded .role-card-chevron {
    transform: rotate(90deg);
}

.role-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.role-card-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.role-type-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.role-type-internal {
    background: #e0f2fe;
    color: #0369a1;
}

.role-type-external {
    background: #fef3c7;
    color: #92400e;
}

.role-card-panel {
    padding: 0 20px 16px;
    border-top: 1px solid var(--border);
}

.role-card-actions {
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-save-status {
    font-size: 13px;
}

.permissions-summary-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.custom-permissions-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

/* Business info */
.business-info-list {
    gap: 14px;
}

.business-info-card {
    box-shadow: var(--shadow);
}

.business-info-card-header {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    gap: 16px;
}

.business-info-card-header-left {
    min-width: 0;
    flex: 1;
}

.business-info-card-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.business-info-card-name {
    font-size: 16px;
}

.business-info-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-info-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.business-info-badge-muted {
    background: #f8fafc;
    border-color: #d0d5dd;
    color: #475467;
}

.business-info-badge-accent {
    background: #ecfdf3;
    border-color: #b7ebcf;
    color: #065F46;
}

.business-info-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #d0d5dd;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.business-info-status-active {
    background: #ecfdf3;
    border-color: #b7ebcf;
    color: #065F46;
}

.business-info-status-inactive {
    background: #fef3f2;
    border-color: #fecdca;
    color: #b42318;
}

.business-info-status-draft {
    background: #fffaeb;
    border-color: #fedf89;
    color: #9A3C06;
}

.business-info-status-neutral {
    background: #f8fafc;
    color: #344054;
}

.business-info-card-panel {
    padding-top: 18px;
}

.business-info-card-panel.is-hidden {
    display: none;
}

.business-info-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.business-info-section {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fafafa;
    padding: 16px;
}

.business-info-section-full {
    grid-column: 1 / -1;
}

.business-info-section h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
}

.business-info-kv-list {
    display: grid;
    gap: 12px;
}

.business-info-kv-list-compact {
    gap: 10px;
}

.business-info-kv-item {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.5fr);
    gap: 12px;
    align-items: start;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e8eb;
}

.business-info-kv-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.business-info-kv-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.business-info-kv-value {
    font-size: 14px;
    color: var(--text);
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
}

.business-info-kv-value-prewrap {
    white-space: pre-line;
}

.business-info-contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.business-info-contact-card {
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 14px 16px;
}

.business-info-contact-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}

.business-info-empty-copy {
    font-size: 13px;
    color: var(--text-muted);
}

.business-info-empty-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

@media (max-width: 1024px) {
    .business-info-sections {
        grid-template-columns: 1fr;
    }

    .business-info-section-full {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .business-info-card-header {
        align-items: flex-start;
    }

    .business-info-status {
        margin-left: auto;
    }

    .business-info-kv-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .business-info-contact-list {
        grid-template-columns: 1fr;
    }
}

.custom-permissions-indicator i {
    color: var(--warning);
    font-size: 11px;
}

/* HIVE-698 — pipeline picker group headers + external zero-scope warning */
.pipeline-group-title { padding: .55rem .75rem .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.pipeline-group-title:not(:first-child) { border-top: 1px solid var(--border-color); margin-top: .35rem; }
.pipelines-zero-warning { color: var(--accent-orange-text, #B44C09); font-weight: 600; display: flex; align-items: center; gap: .45rem; }

.pipelines-summary-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
}

.pipelines-summary-text {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}

.pipelines-summary-actions {
    display: flex;
    align-items: center;
}

.custom-permissions-indicator span {
    color: var(--text-secondary);
}

#btnResetToRoleDefaults {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    font-size: 11px;
    color: var(--primary-text);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

#btnResetToRoleDefaults:hover {
    color: var(--primary-hover);
}

#btnResetToRoleDefaults:hover {
    background: #fde68a;
}

/* ═══════════════════════════════════════════════
   CLAIMS MODULE
   ═══════════════════════════════════════════════ */

/* Color dot in claims table. Border keeps a white/very-light claim colour
   visible against the white row (HIVE: claim-colour de-dup). */
.claims-color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Filter badge on Filters button */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--accent-brown-button);
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

/* Claims compact header — matches MTPL stats-header.
   NOTE: --gold/--gold-dark are declared at :root (search "shared list-chip tokens"), not
   here. They used to live on this container only, which meant the shared chip/tab styling
   below resolved var(--gold) to nothing on any page without a .claims-header — the chip
   silently fell back to transparent instead of gold. */
.claims-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.claims-header-tabs {
    display: flex;
    gap: 4px;
    /* P7: the strip is a `.hive-scroll-row` (see the component above), so it
       scrolls rather than wrapping — and it has to FILL its line for the
       component's right-edge fade to land on empty space when the seven tabs
       do fit, instead of permanently fading the last one. `flex: 1 1 auto`
       gives it the free space; `.claims-header-actions` keeps `flex-shrink: 0`
       and therefore still ends up hard against the right edge.
       Was `flex-shrink: 0; flex-wrap: wrap`: refusing to shrink is what laid
       all seven tabs out on one ~1155px line and clipped the strip wherever
       the pane was narrower than that. */
    flex: 1 1 auto;
    min-width: 0;
}
.claims-tab,
.list-filter-chip {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-transform: none; /* owner 2026-07-09 — no ALL-CAPS in the top category tabs */
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* #449 — inactive tabs get a slight pale-yellow pill (sf soft). Scoped under
   .claims-header-tabs so the unrelated .claims-tab reuse on the CmrInternal
   ClaimsReview report keeps its own look; :hover/.active below still win. */
.claims-header-tabs .claims-tab,
.list-filter-chip {
    background: #FEF2D9;
}
.claims-tab:hover,
.list-filter-chip:hover {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}
.claims-tab:focus-visible,
.list-filter-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.claims-tab.active,
.list-filter-chip.active {
    background: var(--gold);
    color: #000;
    border-color: transparent;
    font-weight: 600; /* #449 — red inset underline removed (owner 2026-07-09) */
}
.claims-tab-count,
.list-filter-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(0,0,0,0.1);
    font-size: 10px;
    font-weight: 700;
    /* m9 — #555 on the gold tab (#F8A900, and #d39000 once the pill's own 15% black
       is composited) was 3.79:1 / 2.75:1, under the 4.5:1 floor for a 10px count.
       The ink token matches the tab label's own black and reaches 6.3:1 on the active
       pill, 12.3:1 on the pale inactive one. Dark keeps its theme.css overrides. */
    color: var(--text);
    margin-left: 4px;
}
.claims-tab-count.has-items,
.claims-tab.active .claims-tab-count.has-items,
.list-filter-chip.active .list-filter-chip-count.has-items {
    background: #dc2626;
    color: #fff;
}
.claims-tab.active .claims-tab-count,
.list-filter-chip.active .list-filter-chip-count {
    background: rgba(0,0,0,0.15);
}
.claims-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}
.claims-header-btn {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.claims-header-btn:hover {
    background: var(--gold);
}
.claims-create-btn {
    /* item 20/69 — was var(--gold) (reads as a muted secondary); the busiest page's
       primary action should be the brand-orange filled CTA like every other list. */
    background: var(--primary);
    color: var(--on-primary, #201b16);
    border-color: var(--primary);
    font-weight: 600;
    border-radius: 22px; /* #442 — rounded pill Create-new CTA */
}
.btn-create-claim { border-radius: 22px; } /* #442 — sidebar Create-new pill */
.claims-create-btn:hover {
    background: var(--primary-hover);
    opacity: 1;
}
.claims-tab-divider {
    align-self: center;
    color: var(--border, #e5e5e5);
    margin: 0 6px;
    font-weight: 300;
    user-select: none;
}
.claims-tab-drafts {
    color: #8a5500;
}
.claims-tab-drafts.active {
    /* #449 — was #fff8e8, indistinguishable from the new pale-yellow inactive
       tabs; adopt the gold active look, amber border keeps the drafts identity. */
    background: var(--gold);
    color: #000;
    border-color: #f59f00;
}

.claims-quick-create-btn {
    background: #fff8e8;
    color: #8a5500;
    border-color: #f59f00;
    font-weight: 600;
    text-decoration: none;
}
.claims-quick-create-btn:hover {
    background: #f59f00;
    color: #1f1a16;
    text-decoration: none;
}
.claims-quick-create-btn .fa-bolt { color: inherit; }

.claims-quick-intake-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #fff8e8;
    border: 1px solid #f59f00;
    border-radius: 8px;
    margin: 12px 0 16px;
    color: #1f1a16;
    font-size: 13.5px;
    line-height: 1.45;
}
.claims-quick-intake-banner-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #1f1a16;
    color: #f59f00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.claims-quick-intake-banner-dismiss {
    margin-left: auto;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}
.claims-quick-intake-banner-dismiss:hover { opacity: 1; background: rgba(31, 26, 22, 0.08); }
.claims-quick-intake-banner-body strong { display: block; margin-bottom: 2px; }
.claims-quick-intake-banner-body em {
    font-style: normal;
    font-weight: 700;
    background: rgba(31, 26, 22, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
}
.claims-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gold);
    color: #000;
    font-size: 10px;
    font-weight: 700;
}
.claims-filters.claims-filters-hidden {
    display: none;
}

/* Filter chips row */
/* Stale claim duration (>30 days open) */
.claim-duration-stale {
    color: #ef4444;
    font-weight: 600;
}

.claims-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 12px;
}

/* #443 — chip body is inert (the old whole-chip <a> removed the filter on any
   click); only the inner ×-link (.claims-filter-chip-remove) removes. Hover is
   the brand orange, not the old red "remove" affordance. */
.claims-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: default;
    max-width: 280px; /* #443 — long value lists ellipsize via .claims-filter-chip-label */
    transition: background 0.15s, border-color 0.15s;
}

.claims-filter-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.claims-filter-chip:hover {
    background: #fdf0e6;
    border-color: var(--accent-orange, #F47421);
    color: var(--accent-orange, #F47421);
}

.claims-filter-chip i {
    font-size: 10px;
}

.claims-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin: -4px -6px -4px -2px;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}

.claims-filter-chip-remove:hover {
    background: rgba(236, 123, 41, 0.18);
    color: var(--accent-orange, #F47421);
}

/* Filter Sidebar */
.claims-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
}

.claims-filter-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.claims-filter-sidebar.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.claims-filter-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.claims-filter-sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.claims-filter-sidebar-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-secondary);
    padding: 4px;
}

.claims-filter-sidebar-close:hover {
    color: var(--text);
}

.claims-filter-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.claims-filter-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.claims-filter-field input[type="text"],
.claims-filter-field input[type="date"],
.claims-filter-field .claims-filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-sizing: border-box;
}

.claims-filter-field .claims-filter-select {
    margin-bottom: 8px;
    background: var(--surface, #fff);
    color: var(--text);
}

.claims-filter-field input:focus,
.claims-filter-field .claims-filter-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claims-filter-multiselect {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    font-size: 14px;
}

.claims-filter-multiselect option {
    padding: 6px 8px;
}

.claims-filter-date-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Toggle switch */
.claims-filter-toggle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.claims-filter-toggle-field > label:first-child {
    margin-bottom: 0;
}

.claims-filter-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

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

.claims-filter-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 22px;
    transition: 0.2s;
}

.claims-filter-toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
}

.claims-filter-toggle input:checked + .claims-filter-toggle-slider {
    background: var(--primary);
}

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

.claims-filter-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

.claims-filter-clear {
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.claims-filter-clear:hover {
    color: var(--text);
}

/* ═══════════════════════════════════════════════
   GLOBAL ALERT / CONFIRM MODAL
   ═══════════════════════════════════════════════ */

#hiveAlertModal { z-index: 10090; }
.hive-alert-modal { max-width: 480px; border-radius: 16px; }
.hive-alert-modal .modal-header { padding: 20px 24px 8px; border-bottom: 0; }
.hive-alert-modal .modal-header h2 { font-size: 18px; font-weight: 700; color: #202635; }
.hive-alert-modal .modal-body { padding: 8px 24px 16px; min-height: auto; }
.hive-alert-modal .modal-body p { font-size: 15px; line-height: 1.5; color: #3b4252; }
.hive-alert-modal .modal-footer { padding: 12px 24px 20px; border-top: 0; }
.hive-alert-modal .btn-cancel { min-width: 80px; min-height: 40px; border-radius: 12px; }
.hive-alert-modal #hiveAlertOk { min-width: 80px; min-height: 40px; border-radius: 12px; }

/* ═══════════════════════════════════════════════
   PIPELINE SELECTION MODAL
   ═══════════════════════════════════════════════ */

.pipeline-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* jQuery fadeIn sets display:block — override to flex for centering */
.pipeline-modal-overlay[style*="block"] {
    display: flex !important;
}

.pipeline-modal {
    background: var(--surface, #fff);
    border-radius: 12px;
    padding: 32px;
    max-width: 640px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.pipeline-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.pipeline-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0;
    font-family: var(--font-heading);
}

.pipeline-modal-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #667085);
    margin: 4px 0 0;
}

.pipeline-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary, #667085);
    padding: 0 0 0 16px;
    line-height: 1;
}

.pipeline-modal-close:hover {
    color: var(--text-primary, #1a1a1a);
}

.pipeline-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pipeline-card-grid .pipeline-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary, #1a1a1a);
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.pipeline-card-grid .pipeline-card:hover {
    border-color: var(--accent-orange-line, #F97316);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
}

.pipeline-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.pipeline-card-name {
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 480px) {
    .pipeline-card-grid {
        grid-template-columns: 1fr;
    }
    .pipeline-modal {
        padding: 20px;
    }
}

/* ═══════════════════════════════════════════════
   CLAIMS WIZARD
   ═══════════════════════════════════════════════ */

.claims-wizard-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
    min-height: calc(100vh - 180px);
}

.claims-wizard-main {
    display: flex;
    flex-direction: column;
}

.claims-wizard-header-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.claims-wizard-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 4px;
}

.claims-wizard-header-top h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.claims-wizard-header-meta {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-meta-link {
    color: inherit;
    text-decoration: underline;
    transition: color 0.15s;
}

.header-meta-link:hover {
    color: var(--primary);
}

.claims-wizard-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.claims-wizard-header-actions > .btn-primary,
.claims-wizard-header-actions > .btn-secondary {
    flex: 0 0 auto;
    white-space: nowrap;
}

.claims-wizard-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.claims-wizard-section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #EB7B28;
}

.claims-wizard-section-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.claims-wizard-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mtn-financial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.mtn-financial-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 1100px) {
    .mtn-financial-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* HIVE-92 — small status line under the financial grid that reports
   the preview state (which agreement matched, individual-mode, no
   agreement, network error). aria-live=polite on the host element so
   screen-readers announce changes. */
.mtn-calc-status {
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    background: transparent;
    display: inline-block;
    min-height: 24px;
}
.mtn-calc-status.is-ok        { background: #d1fae5; color: #065f46; }
.mtn-calc-status.is-warn      { background: #fef3c7; color: #92400e; }
.mtn-calc-status.is-individual{ background: #ede9fe; color: #5b21b6; }
.mtn-calc-status.is-error     { background: #fee2e2; color: #991b1b; }

#cmrTransportInfo,
#insurerRegistrationFields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.claims-wizard-form-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: start;
    gap: 12px;
}

/* Bugtracker #399: label-less full-width row (e.g. the CMR claim-type radios) —
   the control column starts at the section's left edge. */
.claims-wizard-form-row--full {
    grid-template-columns: 1fr;
}

.claims-wizard-form-row > label {
    padding-top: 9px;
}

/* C1 — the "Notes about outcome" / "Outcome for employees" (Bylos eiga) rows pair a
   short left label with a tall textarea. The compact form-density modes override the
   base align-items:start with center, which visually strands the label at the vertical
   middle of the textarea. Re-pin such rows (and the label + its inline lock/maximize
   actions) to the top in EVERY density. The [data-claim-form-density] scope raises
   specificity above the density center rule; the base start covers the no-density case. */
html[data-claim-form-density] .claims-wizard-form-row:has(> textarea),
html[data-claim-form-density] .claims-wizard-form-row:has(> .claims-wizard-form-label-row) {
    align-items: start;
}
.claims-wizard-form-row > .claims-wizard-form-label-row {
    align-items: flex-start;
    padding-top: 9px;
}

.claims-wizard-form-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.claims-wizard-form-row input,
.claims-wizard-form-row select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
}

.claims-wizard-form-row input:focus,
.claims-wizard-form-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claims-wizard-form-row .auto-filled {
    background: #eff6ff;
    border-color: #93c5fd;
    color: var(--text-secondary);
}

/* Client autocomplete (claim creation) */
.client-autocomplete {
    position: relative;
    width: 100%;
}

.client-autocomplete-input {
    width: 100%;
    padding-right: 38px !important;
}

.client-autocomplete-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6B7280;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-autocomplete-clear:hover {
    color: #344054;
}

.client-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
    display: none;
}

.client-autocomplete-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.client-autocomplete-item:hover,
.client-autocomplete-item.highlighted {
    background: var(--bg);
}

.client-autocomplete-item-name {
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.client-autocomplete-item-code {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 8px;
    flex-shrink: 0;
}

.client-autocomplete-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.claims-wizard-form-row-inline {
    display: flex;
    gap: 8px;
}

.claims-wizard-form-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.claims-wizard-checkbox-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.claims-wizard-inline-action {
    align-self: flex-start;
}

/* HIVE-592 — group the Unlock/Lock + Maximize buttons on the outcome label row. */
.claims-wizard-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* C7 — never let the Unlock + Maximize controls be squeezed out or clipped in a
       narrow column (e.g. the claims-list quick-edit panel's 160px label column). */
    flex-shrink: 0;
}
/* C7 — if the label + its actions can't share one line in a tight column, wrap the
   actions below the label rather than clipping them off the edge. */
.claims-wizard-form-label-row { flex-wrap: wrap; }
/* HIVE-592 — the read-view (Details / summary) maximize button sits inline after the <dt> label. */
.claim-outcome-maximize {
    padding: 0 2px;
    line-height: 1;
}
dt .claim-outcome-maximize {
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.65;
}
dt .claim-outcome-maximize:hover {
    opacity: 1;
}

.claims-wizard-form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.claims-wizard-form-label-row label {
    margin: 0;
}

.claims-wizard-contract-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #16a34a;
    padding: 6px 12px;
    background: #f0fdf4;
    border-radius: var(--radius-sm);
    border: 1px solid #bbf7d0;
}

.claims-wizard-contract-indicator i {
    color: #16a34a;
}

.claims-wizard-form-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    grid-column: 2;
}

/* Wizard right sidebar */
.claims-wizard-sidebar {
    position: sticky;
    top: -25px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100vh + 25px);
}

.claims-wizard-sidebar-scroll {
    --claims-wizard-sidebar-scrollbar-width: 0px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(39, 48, 65, 0.22) transparent;
    width: calc(100% + var(--claims-wizard-sidebar-scrollbar-width));
    margin-right: calc(-1 * var(--claims-wizard-sidebar-scrollbar-width));
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar {
    width: 8px;
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(39, 48, 65, 0.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.claims-wizard-sidebar-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(39, 48, 65, 0.28);
    background-clip: content-box;
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.claims-wizard-sidebar-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

/* Sidebar sticky action bar */
.claims-wizard-sidebar-actions-card {
    background: var(--surface);
    border: 1px solid #e8edf3;
    border-radius: 18px;
    padding: 16px 20px;
}

.claims-wizard-sidebar-actions-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}

.claims-wizard-sidebar-actions-top:has(.claims-wizard-sidebar-claim-number:not(:empty)) {
    margin-bottom: 12px;
}

.claims-wizard-sidebar-actions-top:not(:has(.claims-wizard-sidebar-claim-number:not(:empty))) {
    display: none;
}

.claims-wizard-sidebar-claim-number {
    font-size: 16px;
    font-weight: 700;
    color: #273041;
}

.claims-wizard-sidebar-actions-buttons {
    display: flex;
    gap: 8px;
}

.claims-wizard-sidebar-actions-buttons .btn-secondary,
.claims-wizard-sidebar-actions-buttons .btn-primary {
    flex: 1;
    justify-content: center;
}

.claims-wizard-sidebar-card {
    background: var(--surface);
    border: 1px solid #e8edf3;
    border-radius: 18px;
    padding: 18px 20px;
}

.claims-wizard-sidebar-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 18px;
    color: #273041;
    text-transform: none;
    letter-spacing: 0;
}

.claims-wizard-sidebar-subsection {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eef2f7;
}

.claims-wizard-sidebar-subsection h5 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #273041;
}

.claims-wizard-sidebar-static-field {
    background: #f8fafc;
    border: 2px solid #D0D5DD;
    color: #344054;
    cursor: default;
    padding-right: 18px !important;
}

.claims-wizard-sidebar-static-field:disabled {
    opacity: 1;
    -webkit-text-fill-color: #344054;
}

/* Vertical step indicators */
.claims-wizard-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claims-wizard-steps::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 27px;
    width: 2px;
    background: #cfd4dc;
}

.claims-wizard-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #0f1728;
    border: 1.5px solid #cfd4dc;
    border-radius: 18px;
    background: #f8f9fb;
    cursor: default;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    z-index: 1;
}

.claims-wizard-step.active {
    color: var(--accent-orange, #F47421);
    border-color: var(--accent-orange, #F47421);
    background: #fff8ee;
    box-shadow: 0 2px 6px rgba(236, 123, 41, 0.15);
}

.claims-wizard-step.completed {
    color: #16a34a;
    border-color: #BBF7D0;
    background: #F0FDF4;
}

.claims-wizard-step-label {
    flex: 1 1 auto;
    min-width: 0;
}

.claims-wizard-step.active .claims-wizard-step-alert {
    color: #ff0000;
}

.claims-wizard-steps .claims-wizard-step-alert {
    flex: 0 0 auto;
    font-size: 13px;
    color: #ff0000;
    display: none;
}

.claims-wizard-steps .claims-wizard-step.has-errors .claims-wizard-step-alert {
    display: inline;
}

.claims-wizard-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #cfd4dc;
    color: #0f1728;
    flex-shrink: 0;
}

.claims-wizard-step.active .claims-wizard-step-number {
    background: var(--accent-orange, #F47421);
    border-color: var(--accent-orange, #F47421);
    color: #fff;
}

.claims-wizard-step.completed .claims-wizard-step-number {
    background: #16a34a;
    color: #fff;
}

/* Quick actions placeholder */
.claims-wizard-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claims-wizard-quick-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Status & Priority in sidebar */
.claims-wizard-status-row {
    display: block;
    padding: 0;
}

.claims-wizard-status-row + .claims-wizard-status-row {
    margin-top: 18px;
}

.claims-wizard-status-row label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #273041;
}

/* Sections spacing */
.claims-wizard-section {
    margin-bottom: 16px;
}

.claims-wizard-section:last-child {
    margin-bottom: 0;
}

/* HIVE-277 — per-section validation error summary, injected at the top of a
   section body by validation-engine.js. Inline field errors remain below. */
.section-error-summary {
    margin: 0 0 16px 0;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    color: #991b1b;
    font-size: 13px;
}
.section-error-summary-title {
    font-weight: 700;
    margin-bottom: 4px;
}
.section-error-summary ul {
    margin: 0;
    padding-left: 18px;
}
.section-error-summary li {
    margin: 2px 0;
}

/* Section header with collapse toggle */
.claims-wizard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin: -24px -24px 16px -24px;
    padding: 16px 24px;
    background: #FFF8ED;
    border-bottom: 2px solid #EB7B28;
    border-radius: var(--radius) var(--radius) 0 0;
}

/* item 87 — when the section body is collapsed (hidden), zero the header's 16px bottom
   margin so it doesn't leave a ghost empty white strip below the header bar. */
.claims-wizard-section:has(> .claims-wizard-section-body[style*="display: none"]) > .claims-wizard-section-header,
.claims-wizard-section:has(> .claims-wizard-section-body[style*="display:none"]) > .claims-wizard-section-header {
    margin-bottom: 0;
}

.claims-wizard-section-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.claims-wizard-section-chevron {
    color: #EB7B28;
    font-size: 14px;
    transition: transform 0.2s;
}

.claims-wizard-required-note {
    font-size: 12px;
    color: #475466;
    font-weight: 500;
}

/* ===========================
   Fork-claim modal (Snieguolė #20)
   =========================== */
/* Fork-claim modal (plan #20) — overrides the narrower .bulk-action-panel
   width because the two-column carry/drop layout + tables need more room.
   Also re-asserts viewport-level positioning and sits above the claim-chat
   drawer (z-index 1050) so the modal doesn't get clipped on the right when
   the drawer is open (Snieguolė #25B v1.3 regression). */
#forkClaimModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1100 !important;
}

#forkClaimModal .modal-content.bulk-action-panel {
    width: min(860px, calc(100vw - 48px));
    max-width: none;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.fork-modal-intro {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

.fork-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 20px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.fork-summary-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fork-summary-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0.02em;
}

.fork-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.fork-field-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Stacked vertical carry/drop sections (revised 2026-04-18 — was side-by-side).
   Top section shows actual source-claim field values that carry to the fork;
   bottom section shows what stays on the original only. Rows are key/value
   pairs on a two-column <dl>. */
.fork-carry-drop {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.fork-carry-section,
.fork-drop-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface);
}

.fork-carry-section h4,
.fork-drop-section h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fork-carry-section h4 i { color: var(--success); }
.fork-drop-section h4 i { color: var(--warning); }

.fork-field-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 12px;
    row-gap: 4px;
    margin: 0;
    font-size: 13px;
    color: var(--text);
}
.fork-field-list dt {
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}
.fork-field-list dd {
    margin: 0;
    word-break: break-word;
}
.fork-field-list-empty {
    font-style: italic;
    color: var(--text-secondary, #9ca3af);
}

/* Legacy bullet-list classes kept for any other carry/drop consumers. */
.fork-carry-column,
.fork-drop-column {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface);
}

.fork-carry-column h4,
.fork-drop-column h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fork-carry-column h4 i { color: var(--success); }
.fork-drop-column h4 i { color: var(--warning); }

.fork-carry-column ul,
.fork-drop-column ul {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    color: var(--text);
}

.fork-carry-column li,
.fork-drop-column li {
    margin-bottom: 4px;
}

.fork-subsection {
    margin-top: 16px;
}

.fork-subsection h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--text);
}

.fork-back-link-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    color: #1e40af;
    font-size: 13px;
    margin: 16px 0 12px;
}

.fork-back-link-note i {
    font-size: 16px;
    flex-shrink: 0;
}

.fork-confirm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--primary-light);
    border: 1px solid var(--accent-orange);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.fork-auto-invoice-row {
    color: var(--text-secondary);
    font-style: italic;
}

/* ===========================
   Duplicate-check banner (VIN + plate — Snieguolė #7 / #21)
   =========================== */
.claim-duplicate-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(214, 158, 46, 0.12);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    color: #8a6500;
    font-size: 12px;
}

.claim-duplicate-banner i {
    color: var(--warning);
    flex-shrink: 0;
}

.claim-duplicate-banner a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Section number badge (orange circle) */
.claims-wizard-section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    background: #EB7B28;
    color: #fff;
    flex-shrink: 0;
}

/* Multiclaim copy-field panel + chips. The dark override deliberately uses a dark
   warm surface instead of pairing dark-theme secondary text with the light cream
   panel (the old combination was ~1.95:1). */
.mc-copy-fields-panel {
    margin: 12px 0;
    padding: 10px 14px;
    border: 1px solid rgba(248, 169, 0, 0.30);
    border-radius: 6px;
    background: #FEF2D9;
    color: var(--text-secondary);
    font-size: 12px;
}

.mc-copy-fields-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

html[data-theme="dark"] .mc-copy-fields-panel {
    background: #2d271f;
    border-color: #7a5b22;
    color: #f6eadb;
}

html[data-theme="dark"] .mc-copy-fields-panel .mc-copy-chip:not(.mc-copy-chip--active) {
    border-color: #766653;
    color: #f6eadb;
    opacity: 1;
}

.mc-copy-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    opacity: 0.5;
    text-decoration: line-through;
}

.mc-copy-chip.mc-copy-chip--active {
    opacity: 1;
    text-decoration: none;
    background: rgba(236, 123, 41, 0.15);
    border-color: #EB7B28;
    color: var(--text);
}

.mc-copy-chip:hover {
    border-color: #EB7B28;
}

/* Copy-to-clipboard icon button (used next to claim number in form header) */
.claim-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-secondary, #6b6b6b);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.claim-copy-btn:hover {
    background: rgba(232, 120, 10, 0.08);
    color: var(--primary, #F47421);
    border-color: rgba(232, 120, 10, 0.25);
}

.claim-copy-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(232, 120, 10, 0.25);
}

.claim-copy-btn .copy-icon-rest,
.claim-copy-btn .copy-icon-done {
    font-size: 13px;
    line-height: 1;
}

.claim-copy-btn .copy-icon-done {
    color: #16a34a;
}

/* Pipeline badge in header */
.claims-wizard-pipeline-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--accent-brown-button);
    vertical-align: middle;
    margin-left: 8px;
}

.claim-email-tracking-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
    text-decoration: none;
    color: #344054;
    background: #f2f4f7;
    border: 1px solid #d0d5dd;
}

.claim-email-tracking-badge:hover {
    text-decoration: none;
    color: #101828;
    border-color: #98a2b3;
}

.claim-email-tracking-badge.is-active {
    color: #854a0e;
    background: #fff7ed;
    border-color: #fed7aa;
}

.claim-email-tracking-badge.is-overdue {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.claim-email-tracking-badge.is-replied {
    color: #065f46;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

/* Claim email compose modal */
.claim-email-modal .form-group {
    margin-bottom: 18px;
}

.claim-email-modal .form-group[hidden] { display: none; }
.claim-email-modal .claim-email-to-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.claim-email-modal .claim-email-to-row > input { flex: 1; min-width: 0; }
.claim-email-modal .claim-email-cc-toggle {
    background: var(--bg);
    border: 1px solid #dedede;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 12px;
    white-space: nowrap;
}
.claim-email-modal .claim-email-cc-toggle:hover {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--primary-text);
}
.claim-email-modal .claim-email-cc-toggle[hidden] { display: none; }

/* HIVE-18 — chip-input recipient component */
.claim-email-modal .claim-email-chip-field {
    flex: 1;
    min-width: 0;
    position: relative;
}
.claim-email-modal .cef-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: var(--radius);
    padding: 4px 6px;
    min-height: 36px;
    cursor: text;
}
.claim-email-modal .cef-row:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(232, 120, 10, 0.15);
}
.claim-email-modal .cef-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px 6px 2px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text);
    white-space: nowrap;
    max-width: 100%;
}
.claim-email-modal .cef-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
}
.claim-email-modal .cef-chip-remove {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 2px;
}
.claim-email-modal .cef-chip-remove:hover { color: #dc2626; }
.claim-email-modal .cef-input {
    flex: 1;
    min-width: 120px;
    border: 0;
    outline: 0;
    padding: 4px 2px;
    font-size: 13px;
    background: transparent;
}
.claim-email-modal .cef-input-invalid {
    background: #fef2f2;
    border-radius: 3px;
}
.claim-email-modal .cef-clear-all {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    align-self: center;
}
.claim-email-modal .cef-clear-all:hover { color: #dc2626; }
.claim-email-modal .cef-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
}
.claim-email-modal .cef-dropdown-group {
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    color: var(--text-secondary);
    padding: 6px 10px 2px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.claim-email-modal .cef-dropdown-group:first-child { border-top: 0; }
.claim-email-modal .cef-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}
/* Hover/active matches the template combobox options — one highlight language
   across the modal's dropdowns (owner request 2026-08-05). */
.claim-email-modal .cef-dropdown-item.cef-active,
.claim-email-modal .cef-dropdown-item:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 4px;
}
.claim-email-modal .cef-suggest-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.claim-email-modal .cef-suggest-badge {
    font-size: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1px 6px;
    color: var(--text-secondary);
}

/* HIVE-75 — inline section edit (Edit button + edit-mode chrome) */
.cse-edit-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 12px;
    margin-left: auto;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cse-edit-btn:hover {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--primary);
}
.cse-edit-btn i { margin-right: 4px; }
/* HIVE-201 — pencil for the headerless sidebar status card floats top-right. */
.cse-has-floating-edit { position: relative; }
.cse-edit-btn--floating {
    position: absolute;
    bottom: 10px;
    right: 12px;
    margin-left: 0;
    padding: 2px 8px;
    z-index: 2;
}
/* The headerless sidebar status card hosts the floating pencil — anchor it. */
.cse-sidebar-section { position: relative; }
.cdv-section-header, .claims-wizard-section-header {
    position: relative;
}
.cse-loading {
    padding: 16px;
    color: var(--text-secondary);
    font-style: italic;
}
.cse-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 0 4px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}
.cse-actions .cse-status { color: var(--text-secondary); font-size: 12px; }
.cse-actions .cse-status.cse-error { color: #dc2626; }
.cse-error { color: #dc2626; padding: 8px; }

/* Inline-editor dirty marker — appears in the .cse-actions bar when the
   user edits any field. The orange dot mirrors the one shown in the
   merged-bar / claim-header so the unsaved-state cue is consistent. */
.cse-actions .cse-dirty-indicator {
    color: var(--primary);
    font-size: 18px;
    line-height: 1;
    margin-right: auto; /* push it to the left so Cancel/Save stay right-aligned */
    display: none;
    align-items: center;
}
.claims-wizard-section.cse-is-dirty,
.cdv-section.cse-is-dirty {
    box-shadow: inset 3px 0 0 var(--primary);
}

.claim-email-modal .form-group > label:not(.email-modal-check),
.claim-email-modal .email-modal-timer-label {
    font-size: 12px;
    font-weight: 700;
    color: #2f2f2f;
}

/* HIVE-586: drag-and-drop attachment overlay for the email modal. Shown while
   files are dragged over the modal; routes drops through the same attach path. */
.claim-email-modal { position: relative; }
.email-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(249, 115, 22, 0.10);
    border: 2px dashed var(--accent-orange, #f97316);
    border-radius: 10px;
    pointer-events: none;
}
.claim-email-modal.is-dragging-files .email-drop-overlay { display: flex; }
.email-drop-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--accent-orange, #c2410c);
    font-weight: 600;
    font-size: 15px;
}
.email-drop-overlay-inner i { font-size: 34px; }

.claim-email-modal .form-control,
.claim-email-modal .email-modal-rich-text {
    width: 100%;
    border: 1px solid #dedede;
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.claim-email-modal .form-control {
    min-height: 40px;
    padding: 9px 13px;
}

.claim-email-modal .form-control:hover,
.claim-email-modal .email-modal-rich-text:hover {
    border-color: #d1d1d1;
}

/* HIVE-620 — natural presentation preview inside the composer canvas ONLY
   (never grouped with generic modal controls: a stray comma here once put
   the whole modal's hover state in Times New Roman). */
.claim-email-modal .email-modal-rich-text.email-natural {
    font-family: 'Times New Roman', Times, serif;
    font-size: 12pt;
    line-height: 1.35;
}

.claim-email-modal .form-control:focus,
.claim-email-modal .email-modal-rich-text:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claim-email-modal .select-wrapper .form-control {
    padding-right: 42px;
}

.claim-email-modal .select-icon {
    color: #7a7a7a;
}

.claim-email-modal .email-modal-rich-text {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 12px 12px 12px 16px;
    line-height: 1.6;
}

/* The global reset zeroes list padding, which pushes outside-position bullet
   markers into (and past) the field edge — template bullet lists clipped. */
.claim-email-modal .email-modal-rich-text ul,
.claim-email-modal .email-modal-rich-text ol {
    padding-left: 24px;
    margin: 6px 0;
}

.claim-email-modal .email-modal-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    user-select: none;
}

.claim-email-modal .email-modal-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.claim-email-modal .email-modal-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid #d8d8d8;
    background: #fff;
    color: transparent;
    font-size: 10px;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.claim-email-modal .email-modal-check input:checked + .email-modal-checkmark {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.claim-email-modal .email-modal-check input:focus-visible + .email-modal-checkmark {
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claim-email-modal .email-modal-track-options {
    margin-top: 10px;
}

.claim-email-modal .email-modal-track-options.is-hidden {
    display: none !important;
}

.claim-email-modal .email-modal-timer-block {
    padding: 12px;
    border: 1px solid #fed7aa;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
}

.claim-email-modal .email-modal-timer-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.claim-email-modal .email-modal-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid #f3d3b5;
    border-radius: 999px;
    background: #fff;
}

.claim-email-modal .email-modal-mode-btn,
.claim-email-modal .email-modal-preset {
    border: 0;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.claim-email-modal .email-modal-mode-btn {
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    background: transparent;
    color: #7c4a1c;
}

.claim-email-modal .email-modal-mode-btn.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(232, 120, 10, 0.2);
}

.claim-email-modal .email-modal-mode-btn:disabled,
.claim-email-modal .email-modal-preset:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.claim-email-modal .email-modal-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.claim-email-modal .email-modal-number {
    flex: 0 0 86px;
}

.claim-email-modal .email-modal-select {
    flex: 1;
}

.claim-email-modal .email-modal-timer-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.claim-email-modal .email-modal-preset {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #f5c894;
    border-radius: 999px;
    background: #fff;
    color: #8a4b12;
}

.claim-email-modal .email-modal-preset:hover,
.claim-email-modal .email-modal-mode-btn:not(.is-active):hover {
    background: #fff3e6;
    color: #6f3807;
}

.claim-email-modal .email-modal-help {
    margin: 5px 0 0;
    font-size: 11px;
    color: var(--text-muted);
}

.claim-email-modal .email-modal-timer-preview {
    min-height: 18px;
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #8a4b12;
}

.claim-email-modal .btn-cancel,
.claim-email-modal .btn-secondary,
.claim-email-modal .btn-primary {
    min-height: 40px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 14px;
}

.claim-email-modal .btn-secondary,
.claim-email-modal .btn-cancel {
    border: 1px solid #dedede;
    background: #fff;
    color: var(--text);
}

.claim-email-modal .btn-secondary:hover,
.claim-email-modal .btn-cancel:hover {
    border-color: #cfcfcf;
    background: #fafafa;
}

.claim-email-modal .btn-primary {
    border: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    box-shadow: 0 8px 18px rgba(232, 120, 10, 0.24);
}

.claim-email-modal .btn-primary:hover {
    background: linear-gradient(135deg, #f08416 0%, var(--primary-hover) 100%);
}

/* m7 — the shared `.btn-primary:disabled` token fill already reads as inert; the
   extra 0.65 opacity washed both ink and fill toward the modal's white surface and
   dropped the pair back under 3:1. */
.claim-email-modal .btn-primary:disabled {
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 640px) {
    .claim-email-modal .email-modal-timer-mode-row,
    .claim-email-modal .email-modal-input-row {
        align-items: stretch;
        flex-direction: column;
    }

    .claim-email-modal .email-modal-number,
    .claim-email-modal .email-modal-select {
        flex: 1 1 auto;
    }
}

/* Auto-filled badge */
.auto-filled-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    /* item 99 — was Tailwind blue (#eff6ff/#93c5fd/#2563eb): off-brand + read as a
       fake button. A quiet neutral, theme-tokenised tag (works in dark, no blue island). */
    border: 1px solid var(--border);
    background: var(--surface-2, #f5f5f4);
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.item-total-display {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* Subsection title */
.claims-wizard-subsection-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    margin: 4px -24px 0;
    background: #fffcf8;
}

/* Radio groups */
.claims-wizard-radio-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.claims-wizard-radio-group {
    display: flex;
    gap: 16px;
}

.claims-wizard-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 400;
    color: var(--text);
}

.claims-wizard-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    margin: 0;
}

.claims-wizard-radio input[type="radio"]:disabled {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 6px 6px;
    opacity: 0.78;
}

.claims-wizard-radio input[type="radio"]:disabled:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: radial-gradient(circle, #000 0 45%, transparent 50%);
}

.claims-wizard-radio input[type="radio"]:disabled:not(:checked) {
    background-color: var(--bg);
    border-color: var(--border);
}

/* Checkbox */
.claims-wizard-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 400;
    color: var(--text);
}

.claims-wizard-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.claims-wizard-checkbox input[type="checkbox"]:disabled {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 9px 9px;
    opacity: 0.78;
}

.claims-wizard-checkbox input[type="checkbox"]:disabled:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 5.5'/%3E%3C/svg%3E");
}

.claims-wizard-checkbox input[type="checkbox"]:disabled:not(:checked) {
    background-color: var(--bg);
    border-color: var(--border);
}

/* Currency input */
.claims-wizard-currency-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
}

.claims-wizard-currency-symbol {
    display: none;
}

/* HIVE-339 (E) — the standalone cargo-cost / payout "compose amount" inputs (in _CargoItemBlock) have NO labeled
   .claims-wizard-form-row to carry the ", Eur" suffix, so commit 0b72b50f left them with no currency indicator at
   all. enhanceCurrencyLabels() (claim-form-ticket-ui.js) tags exactly those wrappers (closest('.claims-wizard-form-row')
   == null) with .show-currency-symbol; re-show € only for them. NOTE: must be class-scoped, NOT a blanket
   `.claims-wizard-form-row-inline` rule — labeled inline rows (e.g. "Net claim amount", the Additional-cost block)
   already get ", Eur" on their label, so a broad rule produced a DOUBLE indicator (€ + ", Eur"). */
.claims-wizard-currency-input.show-currency-symbol .claims-wizard-currency-symbol {
    display: flex;
    align-items: center;
    padding: 8px 0 8px 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

.claims-wizard-currency-input input {
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
    /* HIVE-274 — remove the native number-spinner up/down arrows on € fields. */
    appearance: textfield;
    -moz-appearance: textfield;
}

/* HIVE-274 — WebKit/Blink spinner removal for € number inputs. */
.claims-wizard-currency-input input::-webkit-outer-spin-button,
.claims-wizard-currency-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.claims-wizard-currency-input input:focus {
    outline: none;
    box-shadow: none !important;
}

.claims-wizard-currency-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claims-wizard-form-row > label[data-eur-label-enhanced="1"]::after,
.cdv-dl dt[data-eur-label-enhanced="1"]::after {
    content: ", Eur";
}

/* Shared searchable combobox for claim-form select fields. The real select
   remains in the form for validation/submission; this wraps it with a
   searchable presentation layer. */
.hive-combobox-host {
    position: relative;
}

.hive-combobox-host > .select-icon {
    display: none;
}

.hive-combobox {
    position: relative;
    width: 100%;
}

.hive-combobox-native {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
    left: 0;
    bottom: 0;
}

.hive-combobox-input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    padding: 8px 36px 8px 12px;
    appearance: none;
}

/* HIVE-326 — inside the create-vehicle/person modals there is no .claims-wizard-form-row rule to force a white
   input background (claim forms have one), so the enhanced combobox fell back to grey var(--bg) while sibling
   text inputs stayed white. Match them inside the modal scope. */
.hive-combobox-scope .hive-combobox-input {
    background: var(--surface);
}

/* HIVE-326 — the input is type=search, so the browser draws its own clear "✕" which overlapped the dropdown
   chevron (.hive-combobox::after). Suppress the native search widgets on every combobox field; the chevron is
   the sole right-edge affordance (the field behaves like a select, not a clearable free-text search). */
.hive-combobox-input::-webkit-search-cancel-button,
.hive-combobox-input::-webkit-search-decoration,
.hive-combobox-input::-webkit-search-results-button,
.hive-combobox-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Non-interactive section header rows in the menu (rendered from the native
   select's disabled divider options, e.g. the email-template groups). */
.hive-combobox-group {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    pointer-events: none;
}

/* Once hive-combobox enhances a select inside a .select-wrapper, the wrapper's
   static chevron would double up with the combobox's own — hide it. */
.select-wrapper.hive-combobox-host > .select-icon {
    display: none;
}

.hive-combobox::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 12px;
    pointer-events: none;
}

/* HIVE-326 — styled quick-clear button, sits LEFT of the chevron (no overlap), shown only when a value is set. */
.hive-combobox-clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
}

.hive-combobox-clear::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
}

.hive-combobox-clear:hover {
    color: var(--text);
}

.hive-combobox.has-value .hive-combobox-clear {
    display: flex;
}

.hive-combobox.has-value .hive-combobox-input {
    padding-right: 52px;
}

.hive-combobox-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.hive-combobox-menu {
    display: none;
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.hive-combobox.is-open .hive-combobox-menu {
    display: block;
}

.hive-combobox-option {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 8px 10px;
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.hive-combobox-option:hover,
.hive-combobox-option.is-active {
    background: var(--primary-light);
    color: var(--primary);
}

.hive-combobox-option.is-selected {
    font-weight: 600;
}

.hive-combobox-empty {
    padding: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Date/time input wrappers — same pattern as currency */
.claims-wizard-date-input,
.claims-wizard-time-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
}

.claims-wizard-date-icon,
.claims-wizard-time-icon {
    padding: 8px 10px;
    background: #f9fafb;
    border-right: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.claims-wizard-date-input input,
.claims-wizard-time-input input {
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
}

.claims-wizard-date-input input:focus,
.claims-wizard-time-input input:focus {
    outline: none;
    box-shadow: none !important;
}

.claims-wizard-date-input:focus-within,
.claims-wizard-time-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.time-of-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    /* R4-C4 (held-96): a NORMAL control — solid 1px var(--border), like the date/time inputs
       beside it in the "Įvykio data ir laikas" row. The old dashed pale-orange styling falsely
       signalled an action/drop-target. */
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    min-height: 36px;
    flex: 0 0 200px;
    text-align: center;
}

.time-of-day-badge:empty {
    display: none;
}

/* HIVE-382 — click-editable daypart */
.time-of-day-badge.tod-editable {
    cursor: pointer;
    user-select: none;
}

.time-of-day-badge.tod-editable:hover {
    background: var(--bg);
    border-color: var(--text-secondary);
}

.time-of-day-badge.tod-empty {
    color: var(--text-secondary);
    background: var(--surface);
    font-weight: 400;
}

/* Multi-select dropdown (damaged property types) */
.multiselect-wrapper {
    position: relative;
    width: 100%;
}

.multiselect-trigger {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 38px;
    padding: 4px 32px 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    position: relative;
}

.multiselect-trigger .select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-secondary);
    font-size: 12px;
}

.multiselect-placeholder {
    color: var(--text-secondary);
    font-size: 14px;
}

.multiselect-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.multiselect-chip-remove {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

.multiselect-chip-remove:hover {
    color: var(--danger);
}

.multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

.multiselect-option:hover {
    background: #f3f4f6;
}

.multiselect-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Unit label (kg, etc.) */
.claims-wizard-unit-label {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Field info text */
.claims-wizard-field-info {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
    line-height: 1.4;
}

/* "Not visible for client" label */
.claims-wizard-not-visible {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #dc2626;
    font-style: italic;
    margin-top: 2px;
}

.claims-wizard-form-row:has(.location-field) > label,
.claims-wizard-form-row:has(.location-map) > label {
    align-self: flex-start;
    padding-top: 10px;
}

/* Coordinates display */
.claims-wizard-coords {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.btn-get-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-get-location:hover {
    background: var(--primary);
    color: #fff;
}

.btn-get-location:disabled {
    opacity: 0.6;
    cursor: wait;
}

.location-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    /* HIVE-578: the validation engine appends the inline error span INTO this
       flex row (target.parentElement), so without wrapping it laid out to the
       right of the input, painting the red "…privaloma" text over the input's
       right edge / clear button. flex-wrap lets the error drop to its own line
       below; the clear/plain-text buttons are position:absolute so wrapping
       does not disturb them. Mirrors the mobile rule already in
       claim-merged-bar.css / claim-responsive-components.css. */
    flex-wrap: wrap;
}

.location-input-wrapper .location-input {
    flex: 1;
    padding-right: 140px;
}

.location-input-wrapper > .field-validation-error {
    flex: 1 0 100%;
}

.location-clear-btn {
    position: absolute;
    right: 112px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    font-size: 14px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
    line-height: 1;
}

.location-clear-btn:hover {
    color: var(--danger, #dc3545);
}

.location-plain-text-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 10px;
    font-size: 12px;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    z-index: 1;
}

.location-plain-text-btn:hover {
    background: var(--primary);
    color: #fff;
}

.location-map {
    margin-top: 10px;
    height: 300px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.btn-toggle-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--primary);
    background: none;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-toggle-map:hover {
    background: var(--primary);
    color: #fff;
}

.coord-recognized-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
}

.coord-recognized-badge i {
    font-size: 11px;
}

/* Character counter */
.claims-wizard-char-counter {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Textareas */
.claims-wizard-form-row textarea {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

.claims-wizard-form-row textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Pill tabs (Outcome section) */
.claims-wizard-pill-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

/* 2026-07-13 batch item 3: when the chip row directly follows a subsection
   title (Bylos eiga → outcome chips) give it breathing room. Scoped to the
   title-adjacent case so other pill-tab uses don't shift. */
.claims-wizard-form .claims-wizard-subsection-title + .claims-wizard-pill-tabs {
    margin-top: 10px;
}

.claims-wizard-pill-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.claims-wizard-pill-tab:hover {
    border-color: var(--primary);
    color: var(--primary-text);
}

.claims-wizard-pill-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--accent-brown-button);
}

/* Action input row (Outcome) */
.claims-wizard-action-input {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.claims-wizard-action-input input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.claims-wizard-action-input input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Upload grid */
.claims-wizard-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
    align-items: start;
}
/* Reflow to a single column when the FORM COLUMN (not the viewport) is narrow — the viewport
   @media fallback (max-width:768px) never fires when a wide window has a squeezed claims-wizard
   column (e.g. split-screen ~1097px), so the 2-col grid overflowed its panel. The shared
   .claims-wizard-main container avoids per-section stacking contexts; 668px preserves the
   former 620px body threshold plus the section's 24px horizontal padding. */
@container claim-form-column (max-width: 668px) {
    .claims-wizard-upload-grid { grid-template-columns: 1fr; }
}

.claims-wizard-upload-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: default;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.claims-wizard-upload-box:hover {
    border-color: #d4d0ca;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.claims-wizard-upload-box i {
    font-size: 24px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.claims-wizard-upload-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-text);
    margin-bottom: 4px;
}

.claims-wizard-upload-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* Missing docs / info sections */
.claims-wizard-missing-docs,
.claims-wizard-missing-info {
    margin-top: 20px;
}

.claims-wizard-missing-docs h4,
.claims-wizard-missing-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
}

.claims-wizard-missing-info-textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

.claims-wizard-missing-info-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.claims-wizard-missing-info-textarea:disabled {
    background: var(--bg);
    color: var(--text-primary);
    cursor: default;
    opacity: 1;
    border-color: var(--border);
}

.claims-wizard-info-bar {
    padding: 10px 16px;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

/* DOCS-B — "all clear" empty state for the full-form Missing Documents section.
   Mirrors the quick-preview summary panel: a compact green-check row on a subtle
   success tint instead of a flat, alarming-looking gray bar. */
.claims-wizard-missing-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm);
}
.claims-wizard-missing-ok i { font-size: 14px; color: #16a34a; flex-shrink: 0; }
html[data-theme="dark"] .claims-wizard-missing-ok {
    background: rgba(22,163,74,0.10);
    border-color: rgba(22,163,74,0.35);
    color: var(--text-secondary, #9aa4b2);
}
html[data-theme="dark"] .claims-wizard-missing-ok i { color: #4ade80; }

/* Pill tags (Missing Information) */
.claims-wizard-pill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.claims-wizard-pill-toggle {
    display: inline-flex;
}

.claims-wizard-pill-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.claims-wizard-pill-tag {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.claims-wizard-pill-tag:hover,
.claims-wizard-pill-tag.active {
    border-color: var(--primary);
    background: rgba(240, 138, 51, 0.08);
    color: var(--primary-text);
}

.claims-wizard-pill-toggle .claims-wizard-pill-tag {
    cursor: pointer;
}

.claims-wizard-pill-input:checked + .claims-wizard-pill-tag {
    border-color: var(--primary);
    background: rgba(240, 138, 51, 0.08);
    color: var(--primary-text);
}

.claims-wizard-pill-tag:disabled {
    cursor: default;
    opacity: 0.7;
}

.claims-wizard-pill-tag:disabled:hover {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-secondary);
}

.claims-wizard-pill-tag:disabled.active,
.claims-wizard-pill-tag:disabled.active:hover {
    border-color: var(--primary);
    background: rgba(240, 138, 51, 0.08);
    color: var(--primary-text);
}

.claims-wizard-pill-tag-readonly {
    cursor: default;
    user-select: none;
}

/* Missing document pill on attachment cards.
   When NOT marked: outline "Mark as missing" button, revealed only on card
   hover so the header stays clean.
   When marked:     solid orange "Missing" pill, always visible so operators
   immediately see which types are flagged.
   The underlying input[type=checkbox] stays in the DOM (hidden) so the
   existing click handler + state.missingDocIds flow continues to work
   unchanged. */
.missing-doc-pill {
    position: static;
    /* #458 item 2 — no own auto margin; the pill rides inside .attachment-card-header-actions,
       the single right-aligned header cluster (see _Section_Documents inline block). */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    border: 1px solid rgba(128, 138, 156, 0.5);
    background: rgba(255, 255, 255, 0.94);
    color: rgba(107, 114, 128, 0.95);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.missing-doc-pill input {
    display: none;
}

.missing-doc-pill-icon {
    font-size: 10px;
    color: inherit;
}

.missing-doc-pill-label[data-missing-doc-label-on] { display: none; }
.missing-doc-pill-label[data-missing-doc-label-off] { display: inline; }

.missing-doc-pill.is-missing,
.missing-doc-pill.is-readonly {
    opacity: 1;
    border-color: #f58220;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #c2410c;
    box-shadow: 0 1px 2px rgba(242, 106, 27, 0.1);
}

.missing-doc-pill.is-missing .missing-doc-pill-label[data-missing-doc-label-off],
.missing-doc-pill.is-readonly .missing-doc-pill-label[data-missing-doc-label-off] { display: none; }
.missing-doc-pill.is-missing .missing-doc-pill-label[data-missing-doc-label-on],
.missing-doc-pill.is-readonly .missing-doc-pill-label[data-missing-doc-label-on] { display: inline; }

.missing-doc-pill.is-readonly { cursor: default; }

/* Reveal the "Mark as missing" state on card hover only — keeps the header
   uncluttered when nothing is flagged. */
.attachment-type-card:hover .missing-doc-pill {
    opacity: 1;
}
.missing-doc-pill:hover:not(.is-missing):not(.is-readonly) {
    border-color: rgba(245, 130, 32, 0.7);
    color: #c2410c;
    background: rgba(255, 241, 232, 0.92);
}

/* Per-card "select all" checkbox. Only shown on cards that actually have
   files, and reused by both list and thumbnail views. Tri-state handling:
   the input's `indeterminate` property is toggled via JS; the indicator's
   ::after pseudo draws either a checkmark or a dash depending on which
   state is active. */
.attachment-card-select-all {
    position: static;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-left: 6px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.attachment-type-card.has-files .attachment-card-select-all {
    display: inline-flex;
}

.attachment-card-select-all input { display: none; }

.attachment-card-select-all-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(128, 138, 156, 0.55);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.attachment-card-select-all:hover .attachment-card-select-all-indicator {
    border-color: var(--primary, #f97316);
}

/* Checked state: solid primary background + white checkmark. */
.attachment-card-select-all input:checked + .attachment-card-select-all-indicator {
    border-color: var(--primary, #f97316);
    background: var(--primary, #f97316);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.25);
}
.attachment-card-select-all input:checked + .attachment-card-select-all-indicator::after {
    content: "";
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* Indeterminate state: solid primary background + dash. */
.attachment-card-select-all input:indeterminate + .attachment-card-select-all-indicator {
    border-color: var(--primary, #f97316);
    background: var(--primary, #f97316);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.25);
}
.attachment-card-select-all input:indeterminate + .attachment-card-select-all-indicator::after {
    content: "";
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

/* Missing document badge chips */
.missing-docs-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.missing-doc-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

/* X inside a missing-doc badge — both custom free-text chips and (in edit
   mode) the attachment-type badges, so a flagged type can be unmarked
   directly from the summary without scrolling back to its card. */
.missing-doc-badge-x {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
    color: inherit;
    opacity: 0.7;
}

.missing-doc-badge-x:hover {
    opacity: 1;
}

/* HIVE-109: free-text "other missing document" chip entry. */
.missing-doc-freetext {
    margin-top: 10px;
}

.missing-doc-freetext-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.missing-doc-freetext-add {
    display: flex;
    gap: 6px;
    align-items: center;
    max-width: 360px;
}

.missing-doc-freetext-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 5px 10px;
    font-size: 13px;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
}

.missing-doc-freetext-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.missing-doc-freetext-btn {
    white-space: nowrap;
    height: 32px;
    padding: 5px 12px;
    font-size: 13px;
    box-sizing: border-box;
}

/* HIVE-33: free-text "Missing information" chips — orange, like an ACTIVE
   classifier pill (.claims-wizard-pill-tag.active). The chips wrapper lives
   INSIDE .claims-wizard-pill-tags between the selected (orange) and
   unselected (grey) pills; display:contents makes each chip a direct flex
   item of the pill cloud so wrapping/gap match the pills. */
.missing-info-freetext-chips {
    display: contents;
}

.missing-info-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: rgba(240, 138, 51, 0.08);
    font-size: 12px;
    color: var(--primary-text);
    /* Long single-line notes must wrap inside the chip, not overflow. */
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.missing-info-chip-x {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin-left: 6px;
    color: inherit;
    opacity: 0.7;
    flex-shrink: 0;
}

.missing-info-chip-x:hover {
    opacity: 1;
}

/* Cargo block */
.cargo-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claims-wizard-cargo-block {
    background: #fffbf6;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: 16px;
}

.claims-wizard-cargo-block .claims-wizard-subsection-title {
    margin: 16px -16px 12px;
    padding: 8px 16px 10px;
    background: transparent;
    border-top: none;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}

.claims-wizard-cargo-block .cargo-payment-details {
    border-top: none;
}

.claims-wizard-cargo-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 600;
}

.claims-wizard-cargo-block-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-remove-cargo-block {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-remove-cargo-block:hover {
    color: #b02a37;
}

.btn-collapse-cargo-block {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #EB7B28;
    font-size: 12px;
    transition: transform 0.2s;
}

.btn-collapse-cargo-block:hover {
    color: #d46a1a;
}

.claims-wizard-cargo-block .claims-wizard-form-row {
    grid-template-columns: 144px 1fr;
    margin-bottom: 12px;
}

.claims-wizard-cargo-block .claims-wizard-payout-row .claims-wizard-form-row-inline,
.claims-wizard-cargo-block .payout-input-row .claims-wizard-form-row-inline,
.claims-wizard-cargo-block .dp-payout-input-row .claims-wizard-form-row-inline {
    grid-template-columns: 144px minmax(0, 1fr);
}

/* Cost table */
.claims-wizard-cost-table {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
}

.claims-wizard-cost-table-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: #f9fafb;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
}

.claims-wizard-cost-table-header span {
    padding: 8px 10px;
    border-right: 1px solid var(--border);
}

.claims-wizard-cost-table-header span:last-child {
    border-right: none;
}

.claims-wizard-cost-table-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.claims-wizard-cost-table-row input {
    padding: 8px 10px;
    border: none;
    border-right: 1px solid var(--border);
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.claims-wizard-cost-table-row input:last-child {
    border-right: none;
}

.claims-wizard-cost-table-row input:focus {
    outline: none;
    background: rgba(240, 138, 51, 0.05);
}

.claims-wizard-cost-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: #f9fafb;
    font-size: 13px;
    font-weight: 500;
}

.claims-wizard-cost-table-footer .claims-wizard-currency-input {
    width: 160px;
}

/* Total row */
.claims-wizard-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0;
}

/* Message input */
.claims-wizard-message-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.claims-wizard-message-input textarea {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

.claims-wizard-message-input textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Disabled inputs (view mode) */
.claims-wizard-form-row input:disabled,
.claims-wizard-form-row select:disabled,
.claims-wizard-form-row textarea:disabled,
.claims-wizard-currency-input input:disabled,
.claims-wizard-payout-fields > input:disabled {
    background: var(--bg);
    color: var(--text-primary);
    cursor: default;
    opacity: 1;
    border-color: var(--border);
}

.claims-wizard-radio input:disabled,
.claims-wizard-checkbox input:disabled {
    cursor: default;
    opacity: 1;
    accent-color: var(--primary);
}

.claims-wizard-color-dot:disabled {
    cursor: default;
    opacity: 0.4;
}

/* Messages list (view page) */
.claims-wizard-messages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claims-wizard-message-item {
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.claims-wizard-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}

.claims-wizard-message-time {
    color: var(--text-secondary);
    font-size: 12px;
}

.claims-wizard-message-body {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Sidebar quick-action buttons — feature #8 redesign. Retired the 5-colour ALL-CAPS
   outline rainbow (amber/black/green/violet/red) for the app button hierarchy, kept
   SCOPED to this stack so global .btn-* is untouched: a NEUTRAL-OUTLINE secondary by
   default, ONE brand PRIMARY (Create document), ONE DANGER (Transfer claim). Sentence
   case (labels are already sentence-case in source), theme-tokenised so dark mode works. */
.claims-wizard-quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 18px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.claims-wizard-quick-action-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary);
    color: var(--primary);
}
.claims-wizard-quick-action-btn:hover i { color: var(--primary); }

/* item-83 (owner 2026-07-06): NO orange primary in the claim sidebar — the rail
   has no single dominant action, so every quick action is a neutral outline
   (Create document included). The former .claims-wizard-quick-action-primary
   modifier was deleted as dead code (it was used by exactly one button). The
   My-dashboard reminder cards keep their primary — they DO have one dominant
   action — see the ledger's OWNER DECISION note. */

/* Destructive — Transfer claim. Danger outline that fills on hover. */
.claims-wizard-quick-action-btn.claims-wizard-quick-action-danger {
    border-color: var(--danger);
    color: var(--danger);
    background: transparent;
}
.claims-wizard-quick-action-btn.claims-wizard-quick-action-danger i { color: var(--danger); }
.claims-wizard-quick-action-btn.claims-wizard-quick-action-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.claims-wizard-quick-action-btn.claims-wizard-quick-action-danger:hover i { color: #fff; }

/* Color dots */
.claims-wizard-color-dots {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

.claims-wizard-color-dot {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    appearance: none;
    background: var(--claim-color);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.claims-wizard-color-dot:hover {
    transform: scale(1.25);
}

.claims-wizard-color-dot.active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--claim-color);
    transform: scale(1.25);
    pointer-events: none;
}

.claims-wizard-color-dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f2994a;
}

/* Status/Priority select small */
.select-wrapper-sm {
    width: 100%;
    min-width: 0;
}

.select-sm {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 48px 10px 18px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    font-weight: 500;
    background-image: none !important;
}

.select-wrapper-sm .select-icon {
    right: 18px;
    z-index: 2;
}

.claims-wizard-status-select {
    background: #fff;
    border: 2px solid #D0D5DD;
    color: #344054;
}

.select-sm.claims-wizard-status-select:hover,
.select-sm.claims-wizard-priority-select:hover {
    border-color: var(--accent-orange, #F47421);
}

.select-sm.claims-wizard-status-select:focus,
.select-sm.claims-wizard-priority-select:focus {
    border-color: var(--accent-orange, #F47421);
    box-shadow: 0 0 0 3px rgba(236, 123, 41, 0.35);
    outline: none;
}

.claims-wizard-priority-select {
    background: #fff;
    border: 2px solid #D0D5DD;
    color: #344054;
}

/* btn-link / btn-outline-primary utilities */
.btn-link {
    background: none;
    border: none;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.btn-link:hover {
    text-decoration: underline;
}

/* #442 — inline "+ Create new" pill next to asset pickers (vehicle/trailer/
   driver/insured person; full form + QuickNew). Rest: surface bg, orange
   border + amber text; hover/focus: orange fill, white text. align-self
   keeps it compact inside the stretch-aligned .claims-wizard-form-row-inline.
   Tokens flip in dark theme — no separate dark rule needed. */
.btn-create-pill {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--primary-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn-create-pill:hover,
.btn-create-pill:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    text-decoration: none;
}
.btn-create-pill:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* #446 — CMR subtype / cargo-type badge as an outcome-style pill: solid brand
   orange, 999px radius (the selected Bylos eiga chip look). Used on the claim
   details "Claim type" row, the quick-view summary and the claims-list
   pipeline-column subtype line. Orange reads fine on dark — no dark rule. */
.claim-subtype-pill {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    max-width: 100%;
}
.claim-subtype-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.btn-danger-link {
    color: #dc2626;
}

.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-outline-primary:hover {
    background: rgba(240, 138, 51, 0.08);
}

/* Sidebar step links */
.claims-wizard-step[href] {
    text-decoration: none;
    cursor: pointer;
}

.claims-wizard-step[href]:hover:not(.active) {
    color: #eb7b28;
    border-color: #eb7b28;
    background: #fff8ed;
}

@media (max-width: 1024px) {
    .claims-wizard-layout {
        grid-template-columns: 1fr;
    }

    .claims-wizard-sidebar {
        order: -1;
        position: static;
    }

    .claims-wizard-sidebar-scroll {
        max-height: none;
        overflow: visible;
        width: auto;
        margin-right: 0;
        scrollbar-gutter: auto;
    }

    .claims-wizard-upload-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Pipeline Admin ── */
.pipeline-color-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pipeline-prefix-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    background: #f0f0f0;
    color: var(--text-secondary);
    font-family: monospace;
}

.pipeline-sequence-info {
    font-family: monospace;
}

.pipeline-form {
    padding-top: 16px;
}

.pipeline-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 20px;
}

.pipeline-form-grid .form-group {
    margin-bottom: 16px;
}

.pipeline-sequence-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipeline-sequence-row .form-control {
    flex: 1;
}

.pipeline-sequence-row .btn-icon {
    padding: 8px 10px;
    flex-shrink: 0;
}

.pipeline-form-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.pipeline-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.pipeline-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipeline-color-input {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px;
    cursor: pointer;
    background: none;
}

.pipeline-form-preview {
    margin-top: 14px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 13px;
}

.pipeline-preview-label {
    color: var(--text-secondary);
    margin-right: 6px;
}

.pipeline-preview-value {
    font-weight: 600;
    font-family: monospace;
    font-size: 15px;
    color: var(--text);
}

.pipeline-form-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pipeline-translation-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    margin-bottom: 16px;
    gap: 12px;
}

.pipeline-notice-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1e40af;
    flex-wrap: wrap;
}

.pipeline-notice-content i {
    font-size: 16px;
    flex-shrink: 0;
}

.translation-notice-link {
    font-weight: 600;
    color: #1e40af;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .pipeline-form-grid {
        grid-template-columns: 1fr;
    }
}

/* jQuery Timepicker theme */
.ui-timepicker-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    font-family: var(--font-ui);
    z-index: 10052;
}

.ui-timepicker-list li {
    padding: 8px 16px;
    color: var(--text);
    font-size: 14px;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
    background: var(--primary);
    color: #fff;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
    background: var(--surface);
    color: var(--text);
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    color: var(--text-muted);
    background: var(--bg);
}

/* Asset autocomplete (vehicle/driver in claims wizard) */
.asset-autocomplete {
    position: relative;
    width: 100%;
}

.asset-autocomplete .ac-input {
    width: 100%;
    padding-right: 38px !important;
}

.asset-autocomplete .ac-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6B7280;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-autocomplete .ac-clear:hover {
    color: #344054;
}

/* HIVE-296 — inline EDIT pencil on a selected existing asset (sits left of the clear X). */
.asset-autocomplete .ac-edit {
    position: absolute;
    top: 50%;
    right: 34px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6B7280;
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-autocomplete .ac-edit:hover {
    color: var(--primary, #344054);
}

/* When the pencil is shown, reserve room so the display text clears both buttons. */
.asset-autocomplete.ac-has-edit .ac-input {
    padding-right: 62px !important;
}

.asset-autocomplete .ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
}

.asset-autocomplete .ac-dropdown-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
}

.asset-autocomplete .ac-dropdown-item:hover,
.asset-autocomplete .ac-dropdown-item.highlighted {
    background: var(--bg);
}

.asset-autocomplete .ac-dropdown-item-primary {
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.asset-autocomplete .ac-dropdown-item-secondary {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 6px;
}

.asset-autocomplete .ac-dropdown-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

/* Quick-create modal for vehicle/driver/insured-person */
.quick-create-modal .modal-dialog {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.quick-create-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--border);
}

.quick-create-modal .modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.quick-create-modal .modal-close {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.quick-create-modal .modal-close:hover {
    color: var(--text);
}

.quick-create-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
}

.quick-create-modal .modal-body {
    padding: 20px 24px;
    overflow-y: auto;
}

.quick-create-modal .qc-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.quick-create-modal .qc-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.quick-create-modal .qc-row input,
.quick-create-modal .qc-row select {
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
}

.quick-create-modal .qc-row-inline {
    display: flex;
    gap: 12px;
}

.quick-create-modal .qc-row-inline > div {
    flex: 1;
}

.quick-create-modal .qc-error {
    color: #ef4444;
    font-size: 13px;
    margin-bottom: 12px;
    display: none;
}

/* Additional cost rows + add button */
.btn-add-cost-link {
    background: none;
    border: none;
    color: #e67e22;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 2px 0;
}

.btn-add-cost-link:hover {
    color: #d35400;
    text-decoration: underline;
}

/* Additional cost rows */
.additional-costs-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.additional-costs-container .btn-add-additional-cost {
    font-size: 13px;
    padding: 5px 12px;
}

.btn-remove-cost {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-remove-cost:hover {
    color: #ef4444;
}

.btn-remove-cargo-cost {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-remove-cargo-cost:hover {
    color: #ef4444;
}

.btn-cancel-cost {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-cancel-cost:hover {
    color: #dc3545;
}

.claims-wizard-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}

.claims-wizard-badge-list .cargo-cost-type-badge {
    width: auto;
}

.cargo-cost-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    min-width: 160px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    background: rgba(234, 88, 12, 0.08);
    border: 1px solid var(--primary);
    font-size: 12px;
    font-weight: 500;
    color: var(--primary);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.btn-cost-type-chip,
.btn-additional-cost-chip,
.btn-dp-cost-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.btn-cost-type-chip:hover,
.btn-additional-cost-chip:hover,
.btn-dp-cost-chip:hover {
    background: #fff;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-cost-type-chip.active,
.btn-additional-cost-chip.active,
.btn-dp-cost-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.cargo-cost-row + .cargo-cost-row {
    margin-top: 10px;
}

.cost-input-row {
    margin-top: 10px;
}

/* Payout rows (multi-payout per cargo item) */
.claims-wizard-payout-container { margin-top: 8px; }
.claims-wizard-payout-row {
    margin-bottom: 8px;
}
.claims-wizard-payout-row .claims-wizard-form-row-inline,
.payout-input-row .claims-wizard-form-row-inline,
.dp-payout-input-row .claims-wizard-form-row-inline,
.entrusted-payout-input-row .claims-wizard-form-row-inline,
.warehouse-payout-input-row .claims-wizard-form-row-inline,
.mtl-payout-input-row .claims-wizard-form-row-inline {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.claims-wizard-payout-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.claims-wizard-payout-fields > input[type="text"],
.claims-wizard-payout-fields > input[type="number"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-sizing: border-box;
    min-width: 0;
}

.claims-wizard-payout-label {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    line-height: 1.35;
}

.claims-wizard-payout-spacer {
    display: block;
    min-height: 1px;
}

@media (max-width: 900px) {
    .claims-wizard-payout-row .claims-wizard-form-row-inline,
    .payout-input-row .claims-wizard-form-row-inline,
    .dp-payout-input-row .claims-wizard-form-row-inline,
    .entrusted-payout-input-row .claims-wizard-form-row-inline,
    .warehouse-payout-input-row .claims-wizard-form-row-inline,
    .mtl-payout-input-row .claims-wizard-form-row-inline {
        grid-template-columns: 1fr;
    }

    .claims-wizard-payout-spacer {
        display: none;
    }
}
.warehouse-payment-details,
.entrusted-payment-details,
.mtl-payment-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-remove-payout,
.btn-remove-dp-payout,
.btn-remove-warehouse-payout,
.btn-remove-mtl-payout {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}
.btn-remove-payout:hover,
.btn-remove-dp-payout:hover,
.btn-remove-warehouse-payout:hover,
.btn-remove-mtl-payout:hover { color: #dc3545; }
.claims-wizard-payout-date-wrap {
    flex: 0 0 170px;
    width: 170px;
    min-width: 170px;
}

.claims-wizard-payout-date,
.payout-input-date {
    font-family: var(--font-ui);
    color: var(--text);
    background: #fff;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    flex: 0 0 170px;
    width: 170px;
    min-width: 170px;
}

.claims-wizard-payout-date:disabled {
    background: var(--bg);
    color: var(--text-primary);
    cursor: default;
    opacity: 1;
    border-color: var(--border);
}

/* Payout input row (commit pattern) */
.payout-input-row,
.dp-payout-input-row,
.entrusted-payout-input-row,
.warehouse-payout-input-row,
.mtl-payout-input-row {
    margin-bottom: 8px;
}
.payout-input-row select,
.dp-payout-input-row select,
.entrusted-payout-input-row select,
.warehouse-payout-input-row select,
.mtl-payout-input-row select {
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: #fff;
    color: var(--text);
    min-width: 180px;
    flex: 1;
}
.payout-input-row select:focus,
.dp-payout-input-row select:focus,
.entrusted-payout-input-row select:focus,
.warehouse-payout-input-row select:focus,
.mtl-payout-input-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
}
.payout-input-row input[type="text"],
.dp-payout-input-row input[type="text"],
.entrusted-payout-input-row input[type="text"],
.warehouse-payout-input-row input[type="text"],
.mtl-payout-input-row input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.btn-save-payout,
.btn-save-dp-payout,
.btn-save-entrusted-payout,
.btn-save-warehouse-payout,
.btn-save-mtl-payout {
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-cancel-payout,
.btn-cancel-dp-payout,
.btn-cancel-entrusted-payout,
.btn-cancel-warehouse-payout,
.btn-cancel-mtl-payout {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0;
}
.btn-cancel-payout:hover,
.btn-cancel-dp-payout:hover,
.btn-cancel-entrusted-payout:hover,
.btn-cancel-warehouse-payout:hover,
.btn-cancel-mtl-payout:hover {
    color: #dc3545;
}

/* Cargo payment details block */
.cargo-payment-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.cargo-cost-row input[type="text"],
#crgCostInputRow input[type="text"],
#additionalCostInputRow input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-sizing: border-box;
}

.cargo-cost-row input[type="text"]:focus,
#crgCostInputRow input[type="text"]:focus,
#additionalCostInputRow input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Multi-select dropdown */
.multiselect-wrapper { position: relative; min-width: 0; }
.multiselect-display {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    min-height: 38px;
    cursor: pointer;
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.multiselect-display:focus { border-color: var(--primary); outline: none; }
.multiselect-placeholder { color: var(--text-secondary); font-size: 14px; }
.multiselect-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.multiselect-chevron { margin-left: auto; flex: 0 0 auto; }
.multiselect-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.multiselect-badges:empty { display: none; }
.multiselect-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
}
.multiselect-badge-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}
.multiselect-badge-remove:hover { color: #ef4444; }
.multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-top: 4px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.multiselect-search-wrapper { padding: 8px; border-bottom: 1px solid var(--border); }
.multiselect-search {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 14px;
    box-sizing: border-box;
}
.multiselect-search:focus { outline: none; border-color: var(--primary); }
.multiselect-options { overflow-y: auto; max-height: 250px; }
.multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    white-space: nowrap;
}
.multiselect-option:last-child { border-bottom: none; }
.multiselect-option:hover { background: rgba(0,0,0,0.03); }
.multiselect-option.selected {
    background: #fff;
    color: var(--primary);
}
.multiselect-option input[type="checkbox"] { accent-color: var(--primary); flex-shrink: 0; width: 16px; height: 16px; }
.multiselect-option span { overflow: hidden; text-overflow: ellipsis; }

/* Flatpickr theme */
.flatpickr-calendar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-family: inherit;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.flatpickr-day.inRange { background: rgba(var(--primary-rgb, 59,130,246), 0.12); border-color: transparent; }
.flatpickr-day:hover { background: var(--bg); }

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--surface);
    color: var(--text);
}

.flatpickr-day { color: var(--text); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--text-secondary); }

/* Session management */
.session-current {
    background: var(--bg-hover);
}

/* Scroll FABs */
.scroll-fab {
    position: fixed;
    right: 24px;
    z-index: 900;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s ease, background 0.15s ease;
    opacity: 0.7;
}
.scroll-fab:hover {
    opacity: 1;
    background: var(--bg-hover);
}
.scroll-fab-down {
    bottom: 24px;
}
.scroll-fab-up {
    /* item 13 — dock the up-chevron BESIDE the down one (was stacked at 144px, a tall
       3-FAB column that reached into card content); now a compact bottom-right cluster. */
    bottom: 24px;
    right: 72px;
}

@media (max-width: 576px) {
    /* Keep both scroll controls clear of the 44px assistant FAB docked at
       right:16px/bottom:16px. The previous overlap left only a 4px target. */
    .scroll-fab-down {
        right: 68px;
        bottom: 18px;
    }

    .scroll-fab-up {
        right: 116px;
        bottom: 18px;
    }
}

/* Vehicle Registration Field */
.vehicle-reg-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vehicle-registration-flag {
    flex: 0 0 28px;
    text-align: center;
    line-height: 1;
}
.vehicle-registration-structured {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.vehicle-registration-free {
    flex: 1 1 auto;
    min-width: 0;
}
.vehicle-registration-slot-input {
    width: 28px !important;
    min-width: 28px;
    height: 32px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    padding: 0 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex: 0 0 28px;
}
.vehicle-registration-slot-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
    background: #fff;
}
.vehicle-registration-slot-separator {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0;
    min-width: 6px;
    text-align: center;
    user-select: none;
}
.vehicle-registration-free-input {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 160px;
    flex: 1;
    text-transform: none;
}
.vehicle-registration-free-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}
.vehicle-registration-mode-toggle {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
}
.vehicle-registration-mode-toggle.is-freetext {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
}

/* Background scroll lock while a modal is open (wwwroot/js/hive-modal.js).
   `body` is already overflow:hidden sitewide and the real page scroller is
   `.main-content`, which the controller freezes in JS so it can compensate the
   reclaimed scrollbar width against that element's per-breakpoint padding. This
   class is the marker + the belt-and-braces rule; anything else that needs to
   react to "a modal is open" can hang off it. */
body.hive-modal-open { overflow: hidden; }

/* Linked-claim cascade stage badge (claim-multiclaim.js). Previously inline
   Bootstrap hex, which meant it did not respond to the theme. */
.mc-stage-badge {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: 6px;
    color: #fff;
    background: var(--success);
}
.mc-stage-badge--final { background: var(--danger); }
.mc-stage-badge--suspended { background: var(--warning); color: var(--text); }

/* ===========================
   Toast Notifications (global)
   =========================== */
/* The shared toast stack. It is fixed to the viewport, and `top: 16px` put it straight over the
   header's own top-right controls (notifications, messages, the profile menu), which are exactly the
   things a user reaches for after an action. It now clears the header band — `.top-header` is
   `min-height: 56px` in every breakpoint — so the same anchoring is right on every page. */
.toast-container {
    position: fixed;
    top: calc(var(--hive-toast-top, 56px) + 12px);
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border-left: 4px solid var(--success, #22c55e);
    font-size: 13px;
    color: var(--text);
    pointer-events: all;
    animation: toastSlideIn 0.3s ease;
    max-width: 360px;
}
.toast-icon { color: var(--success, #22c55e); font-size: 16px; flex-shrink: 0; }
/* Kind variants. The shared helper has always emitted `toast-error` /
   `toast-warning` / `toast-info`, but only the success styling existed
   sitewide — so an error toast rendered with a green rail. These are the
   themed counterparts; every colour is a token, so dark mode follows. */
.toast.toast-error, .toast.toast-danger { border-left-color: var(--danger); }
.toast.toast-error .toast-icon, .toast.toast-danger .toast-icon { color: var(--danger); }
.toast.toast-warning { border-left-color: var(--warning); }
.toast.toast-warning .toast-icon { color: var(--warning); }
.toast.toast-info { border-left-color: var(--info); }
.toast.toast-info .toast-icon { color: var(--info); }
.toast-message { flex: 1; }
.toast-message strong { display: block; margin-bottom: 2px; }
.toast-message small { color: var(--text-secondary); }
.toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 2px; }
.toast-close:hover { color: var(--text); }
/* HIVE-629 — the action lives inside .toast-message on its own row below the
   text (a long LT message beside the button made a cramped two-column toast). */
.toast-undo { display: block; background: none; border: none; color: var(--primary-text, #F47421); font-weight: 600; cursor: pointer; font-size: 13px; white-space: nowrap; padding: 0; margin-top: 6px; text-align: left; }
.toast-undo:hover { text-decoration: underline; }
.toast-fade-out { animation: toastFadeOut 0.3s ease forwards; }
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastFadeOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

/* ── Perceived-load skeleton shimmer (shared, UX feature #2) ────────────────
   Used by /Dashboard/My (calendar + claims feed) and /Monitoring, which don't
   load the widget-canvas widgets.css skeletons. Mirrors that shimmer so all
   dashboards feel consistent. Containers using these have their innerHTML
   replaced (calendar/claims feed) or are hidden (Monitoring shell) when the
   real content mounts, so no explicit teardown is needed. */
.hive-skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.10) 37%, rgba(0, 0, 0, 0.05) 63%);
    background-size: 400% 100%;
    animation: hive-skel-shimmer 1.4s ease infinite;
}
.hive-skel-stack { display: flex; flex-direction: column; gap: 10px; }
.hive-skel-line { height: 12px; }
.hive-skel-line.sk-w40 { width: 40%; }
.hive-skel-line.sk-w60 { width: 60%; }
.hive-skel-line.sk-w80 { width: 80%; }
.hive-skel-block { width: 100%; min-height: 48px; border-radius: 10px; }
.hive-skel-cal { width: 100%; min-height: 240px; border-radius: 10px; }
/* Instant-dashboards D2 (2026-08-16): on /Dashboard/My the default WEEK view
   renders 160 px tall, but this generic 240 px skeleton made the viewport
   SHRINK 262→160 on data mount — the page's only layout shift (CLS 0.268).
   Inside the calendar viewport the skeleton matches the week view's height;
   month view growing TALLER later is user-initiated and CLS-exempt. */
.calendar-viewport .hive-skel-cal { min-height: 96px; height: 96px; }
.hive-skel-row { width: 100%; height: 56px; border-radius: 8px; }
@keyframes hive-skel-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
html[data-theme="dark"] .hive-skel {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.06) 63%);
    background-size: 400% 100%;
}
@media (prefers-reduced-motion: reduce) {
    .hive-skel { animation: none; }
}

/* Bulk Action Bar */
.claims-bulk-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid var(--danger, #ef4444);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500;
}
.claims-bulk-bar.active { display: flex; }
/* Neutral variant for non-destructive selection bars (e.g. the initial-request
   list): the red base above is the delete-warning styling. */
.claims-bulk-bar--neutral {
    background: var(--surface-2, var(--surface));
    border-color: var(--border);
    color: var(--text);
}

/* ===========================
   Claim Transfer Modal
   =========================== */
.transfer-kind-field {
    margin-bottom: 16px;
}
.transfer-kind-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}
.transfer-kind-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 320px);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--component-border, var(--border));
    border-radius: 10px;
    background: var(--surface-2, #f9fafb);
}
.transfer-kind-option {
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: 600 13px/1.25 var(--font-ui);
    cursor: pointer;
}
.transfer-kind-option:hover {
    color: var(--text);
    background: var(--hover-bg);
}
.transfer-kind-option.is-active {
    border-color: var(--primary);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px var(--shadow-color, rgba(0, 0, 0, .08));
}
.transfer-kind-option:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}
.transfer-end-date-field[hidden] {
    display: none;
}
.transfer-claim-card {
    background: var(--surface-2, #f9fafb);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.transfer-claim-number {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.transfer-claim-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.transfer-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--surface-2, #f9fafb);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    user-select: none;
}
.transfer-accordion-header i {
    margin-right: 6px;
    transition: transform 0.2s;
}
.transfer-accordion-body {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
}
.transfer-reminder-pill {
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.transfer-claim-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.transfer-claim-row:last-child { border-bottom: none; }
.transfer-claim-row strong { font-weight: 600; }
.transfer-claim-row-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 1px;
}
.transfer-reminder-count {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.transfer-field-row {
    margin-top: 16px;
}
.transfer-field-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.transfer-field-row select,
.transfer-field-row input,
.transfer-field-row textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: var(--font-ui);
    background: var(--surface);
    color: var(--text);
}
.transfer-field-row textarea {
    resize: vertical;
    min-height: 72px;
}
.claim-transfer-colleague-picker {
    position: relative;
}
.claim-transfer-colleague-input {
    min-height: 42px;
    padding-right: 42px !important;
}
.claim-transfer-colleague-input[aria-expanded="true"] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.claim-transfer-colleague-clear {
    position: absolute;
    top: 21px;
    right: 8px;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.claim-transfer-colleague-clear:hover,
.claim-transfer-colleague-clear:focus-visible {
    background: var(--bg);
    color: var(--text);
}
/* HIVE-560 review fix — "Neaktyvus" chip on Inactive follower candidates in the
   admin bulk follower-change picker. */
.fc-inactive-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    vertical-align: middle;
}
.follower-eligibility-badge {
    display: inline-flex;
    max-width: 100%;
    margin-left: 8px;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    vertical-align: middle;
    white-space: normal;
}

.claim-transfer-colleague-options {
    /* F2 (2026-07-15): portalled to document.body and positioned from the input
       rect in JS so the list overlays the modal footer instead of being clipped
       by .modal-body's overflow-y:auto. z-index must beat .modal-overlay (1000). */
    position: fixed;
    z-index: 1100;
    max-height: min(240px, 42vh);
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}
.claim-transfer-colleague-option {
    display: flex;
    width: 100%;
    min-height: 44px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.claim-transfer-colleague-option:hover,
.claim-transfer-colleague-option.is-active {
    background: var(--bg);
}
.claim-transfer-colleague-option:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}
.claim-transfer-colleague-option:disabled:hover {
    background: transparent;
}
.claim-transfer-colleague-option-name {
    font-size: 13px;
    font-weight: 600;
}
.claim-transfer-colleague-option-meta,
.claim-transfer-colleague-empty {
    color: var(--text-secondary);
    font-size: 12px;
}
.claim-transfer-colleague-empty {
    padding: 10px 12px;
}
.transfer-selected-count {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: auto;
}
.modal-footer-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ===========================
   Agreement Edit Modal
   =========================== */
.agr-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.agr-section-title:first-child { margin-top: 0; }
.agr-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.agr-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.agr-field input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-ui);
    background: var(--surface);
    box-sizing: border-box;
}
.agr-field input:focus {
    border-color: var(--primary);
    outline: none;
}
.agr-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.agr-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.agr-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Agreement accordion cards (Client fees tab) */
.agr-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.agr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
}
.agr-card-header:hover { background: #fafafa; }
.agr-card-header i.fa-caret-right,
.agr-card-header i.fa-caret-down { margin-right: 8px; color: var(--text-secondary); }
.agr-card-header .agr-card-actions { display: flex; gap: 8px; align-items: center; }
.agr-card-body {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}
.agr-card-body .agr-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px 16px;
}
.agr-card-body .agr-detail-item {
    display: flex;
    justify-content: space-between;
}
.agr-card-body .agr-detail-item span:first-child { color: var(--text-secondary); }
.agr-card-body .agr-detail-item span:last-child { font-weight: 600; color: var(--text); }
.agr-card.inactive .agr-card-header { color: var(--text-muted); }

/* ── Fee profile sections inside agreement cards ── */
.agr-fee-section {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.agr-fee-section:last-child { border-bottom: none; margin-bottom: 0; }
.agr-fee-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.agr-fee-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin: 8px 0 4px;
}
.agr-fee-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.agr-fee-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.agr-fee-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.agr-fee-field label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}
.agr-fee-field input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.agr-fee-field input:hover:not(:disabled) {
    border-color: var(--primary);
}
.agr-fee-field input:focus:not(:disabled) {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(229, 122, 0, 0.15);
}
.agr-fee-field input:disabled {
    background: var(--surface);
    color: var(--text-muted);
    cursor: not-allowed;
}
.agr-fee-radio-group,
.agr-fee-radio-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    margin-bottom: 4px;
}
.agr-fee-stages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 4px 12px;
    font-size: 12px;
    margin-bottom: 4px;
}
.agr-fee-stage-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.agr-fee-stages-loading {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 11px;
}
.agr-fee-radio-stack {
    flex-direction: column;
    gap: 4px;
}
.agr-fee-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.agr-fee-inline-input {
    width: 70px;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.agr-fee-inline-input:hover:not(:disabled) {
    border-color: var(--primary);
}
.agr-fee-inline-input:focus:not(:disabled) {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(229, 122, 0, 0.15);
}
.agr-fee-inline-input:disabled {
    background: var(--surface);
    color: var(--text-muted);
}
.agr-fee-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0;
}
.agr-fee-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    cursor: pointer;
}
.agr-fee-checkbox input[type="checkbox"] { margin: 0; }
.agr-fee-notes-row {
    margin-top: 6px;
}
.agr-fee-notes-row label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}
.agr-fee-notes-row textarea {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    resize: vertical;
    min-height: 36px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.agr-fee-notes-row textarea:hover:not(:disabled) {
    border-color: var(--primary);
}
.agr-fee-notes-row textarea:focus:not(:disabled) {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(229, 122, 0, 0.15);
}
.agr-fee-notes-row textarea:disabled {
    background: var(--surface);
    color: var(--text-muted);
}
.btn-success-flash {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
    transition: background 0.3s ease;
}
@media (max-width: 768px) {
    .agr-fee-grid-3 { grid-template-columns: 1fr; }
    .agr-fee-grid-2 { grid-template-columns: 1fr; }
}

/* ── HIVE-194: compact the guided MTPL-not-liable wizard (.qaw-root /
   .quick-intake-*) inside the dense client-fees edit surfaces only — the
   client-edit fee cards (.agr-fee-section) and the standalone agreement
   modal (#agrMtnWizardHost). The quick NEW form keeps its roomier sizing. */
.agr-fee-section .qaw-root .quick-intake-radio-group,
#agrMtnWizardHost .qaw-root .quick-intake-radio-group {
    margin-bottom: 10px;
}
.agr-fee-section .qaw-root .quick-intake-group-label,
#agrMtnWizardHost .qaw-root .quick-intake-group-label {
    font-size: 12px;
    margin-bottom: 5px;
}
.agr-fee-section .qaw-root .quick-intake-radio-option,
#agrMtnWizardHost .qaw-root .quick-intake-radio-option {
    padding: 6px 10px;
    margin-bottom: 0;
    font-size: 12px;
}
.agr-fee-section .qaw-root .quick-intake-preset-row,
#agrMtnWizardHost .qaw-root .quick-intake-preset-row {
    gap: 6px;
}
.agr-fee-section .qaw-root .quick-intake-preset-chip,
#agrMtnWizardHost .qaw-root .quick-intake-preset-chip {
    min-height: 30px;
    padding: 5px 12px;
    font-size: 12px;
}
/* Two-up radio rows where the labels are short enough to fit side-by-side. */
.agr-fee-section .qaw-root .quick-intake-radio-group,
#agrMtnWizardHost .qaw-root .quick-intake-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
}
.agr-fee-section .qaw-root .quick-intake-radio-option,
#agrMtnWizardHost .qaw-root .quick-intake-radio-option {
    flex: 1 1 calc(50% - 8px);
}
.agr-fee-section .qaw-root .quick-intake-group-label,
#agrMtnWizardHost .qaw-root .quick-intake-group-label {
    flex: 1 1 100%;
}

/* ── Agreement search autocomplete dropdown ── */
.agr-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.agr-search-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}
.agr-search-option:hover {
    background: var(--bg);
}
.agr-search-option span {
    font-weight: 500;
    color: var(--text);
}
.agr-search-option small {
    color: var(--text-secondary);
    font-size: 11px;
}

/* Pending transfer label (Claims list + MTPL Statistics) */
.transfer-pending-label {
    font-size: 11px;
    color: var(--primary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quick-edit pencil in Users grid first-name column */
.user-row-edit-btn {
    background: none;
    border: none;
    padding: 0 6px 0 0;
    margin: 0;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1;
    transition: color 120ms ease;
    vertical-align: baseline;
    /* When the pencil is rendered as an <a> (Clients list), the default
       link underline shows on trailing whitespace after the icon. Suppress. */
    text-decoration: none;
}
.user-row-edit-btn:hover,
.user-row-edit-btn:focus {
    color: var(--accent-orange);
    outline: none;
}

/* ===========================
   HIVE-169.7 — Smooth zoom for the claim attachment preview
   =========================== */
/* Image gets a short ease transition while NOT being actively dragged.
   The .is-dragging class is added during the mousedown→up cycle and
   removes the transition so panning is 1:1 with the cursor. */
#claimAttachmentPreviewBody img {
    transform-origin: center center;
    transition: transform 100ms ease-out;
    will-change: transform;
}
#claimAttachmentPreviewBody img.is-dragging {
    transition: none;
}
#claimAttachmentPreviewBody img.is-zoomed {
    cursor: grab;
}
#claimAttachmentPreviewBody img.is-zoomed.is-dragging {
    cursor: grabbing;
}

/* HIVE-592 — enlarged, polished "Maximize outcome" modal. Overrides the default .modal-content
   size (which is tuned for small dialogs) so the long Bylos eiga narrative gets room to breathe. */
.outcome-maximize-content {
    max-width: 1100px;
    width: 95vw;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}
.outcome-maximize-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 28px 14px;   /* C6 — consistent inset with body + footer */
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.outcome-maximize-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.outcome-maximize-heading h2 {
    margin: 0;
    font-size: 18px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.outcome-maximize-badge {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
}
.outcome-maximize-badge.is-view { background: #eef2f7; color: #475569; }
.outcome-maximize-badge.is-edit { background: rgba(249,115,22,.12); color: #c2410c; }
.outcome-maximize-body {
    min-height: 0;
    display: flex;
    padding: 16px 28px 8px;   /* C6 — horizontal breathing room so the field isn't edge-to-edge */
}
.outcome-maximize-body > .tox-tinymce {
    width: 100%;
    min-height: 320px;
    max-height: 62vh;
    border-radius: 10px;
}
.outcome-maximize-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;        /* C4 — small floor; JS grows it to content up to a viewport cap */
    max-height: 62vh;
    overflow-y: auto;
    resize: vertical;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    padding: 14px 16px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: #fcfcfd;
    color: var(--text, #1f2937);
}
/* The read-only formatted preview must fill the modal body exactly like the
   textarea does — without these rules it collapsed to its intrinsic content size
   (a ~150x140 box in the corner) when the field was locked. */
.outcome-maximize-rich {
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    max-height: 62vh;
    overflow-y: auto;
    font-size: 13.5px;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 14px 16px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--text, #1f2937);
}
.outcome-maximize-text[readonly] { background: #f8fafc; cursor: default; }
.outcome-maximize-text.is-editable { background: #fff; }
.outcome-maximize-text.is-editable:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,.15);
    background: #fff;
}
.outcome-maximize-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 14px 28px 20px;   /* C6 — match body inset + real bottom breathing room */
    border-top: 1px solid var(--border, #e5e7eb);
}
.outcome-maximize-footer-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.outcome-maximize-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}
.outcome-maximize-btn { white-space: nowrap; }
.outcome-maximize-note {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}
.outcome-maximize-lock { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* C6 — a modern, comfortably-sized close control instead of the tiny default glyph. */
.outcome-maximize-header .btn-close-modal {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1;
    border-radius: 8px;
    color: var(--text-secondary, #64748b);
    transition: background .15s ease, color .15s ease;
}
.outcome-maximize-header .btn-close-modal:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text, #1f2937);
}
html[data-theme="dark"] .outcome-maximize-header .btn-close-modal:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* Filter-chip band: one horizontally scrollable line at narrow widths instead of wrapping
   into extra vertical rows (owner 2026-08-11). The label that introduces each chip run
   shares the row and never shrinks below its text. */
.list-filter-chip-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.list-filter-chip-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.list-filter-chip-label i { margin-right: 4px; }
.list-filter-chip { flex: 0 0 auto; }

/* HIVE-738 — recovery status chrome. Token-based so both themes follow the product. */
/* Tertiary action in the shared dialog's left footer slot. It sits opposite the
   primary pair and is deliberately quieter than .btn-cancel beside it: deleting is the
   one irreversible choice on the dialog, so it should be reachable but never the button
   the eye lands on first.

   It keeps .btn-cancel's symmetric padding. An earlier `padding-left: 0` lined the label
   up with the body text above it, at the cost of an outline with 24px on one side and
   none on the other — visible the moment the button was hovered or focused. */
.hive-alert-extra {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.hive-alert-extra:hover,
.hive-alert-extra:focus-visible {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* _ClaimFormScripts is included LAST by every claim form, so in normal flow this strip
   lands below the entire form and is never seen - it reported hidden=false while sitting
   off screen. The adapter moves it to the top of the form when it is shown; these are
   the styles for that in-flow banner. */
.claim-recovery-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    font-size: 13px;
    animation: claim-recovery-appear .22s ease-out;
}

/* Surfaces with no <form> to anchor to (the Details inline section editors) get a
   floating pill instead. Below .modal-overlay (1000) so a dialog covers it, clear of
   .toast-container which owns the top-right, and click-through so it can never block
   the field it happens to sit over. */
.claim-recovery-strip.is-floating {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    margin: 0;
    max-width: min(560px, calc(100vw - 32px));
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    pointer-events: none;
}

@keyframes claim-recovery-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .claim-recovery-strip { animation: none; }
}
.claim-recovery-strip[hidden] { display: none; }

.claim-recovery-badge {
    background: var(--primary);
    color: #fff;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.claim-recovery-status {
    margin: 6px 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.claim-recovery-status[hidden] { display: none; }


/* ── Split button (shared) ───────────────────────────────────────────────────────────
   A primary action plus a caret that opens alternatives. The BEHAVIOUR lives once, in
   _Layout's [data-split-toggle] handler, which the sidebar's create-claim caret uses
   too; these are the neutral styles for the ones that are not that orange sidebar pill.

   Introduced for HIVE-746, where the primary transfer is disabled and the alternative
   ("transfer without validation") has to stay reachable. */
.hive-split-button {
    display: inline-flex;
    align-items: stretch;
    position: relative;
}
.hive-split-button > .btn-primary,
.hive-split-button > .btn-secondary {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* The caret is ACCENT-TINTED, not neutral, and that is the whole point of this block.
   It previously used `--surface`, which measured LIGHTER than the disabled main segment
   beside it (rgb(255,253,248) against rgb(239,235,221)) — so the control read as a white
   box glued to a beige box rather than as one thing with two parts.

   The reference is the sidebar's „Sukurti naują žalą" split, which relates its halves the
   same way: a filled main and an accent-tinted caret carrying an accent border and glyph.

   It matters most in exactly the case this was built for. When the primary transfer is
   disabled, the caret is the ONLY live control, so it has to look live — a greyed main next
   to a live accent segment says "the thing you can still do is here", which is precisely
   the message. The caret is therefore never given the disabled treatment. */
.hive-split-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 38px matches the sidebar caret, so the two split buttons feel like one family. */
    flex: 0 0 38px;
    margin-left: -1px;
    border: 1px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
    cursor: pointer;
    transition: background 150ms ease;
}
.hive-split-caret:hover,
.hive-split-caret[aria-expanded="true"] {
    background: color-mix(in srgb, var(--primary) 30%, transparent);
}
.hive-split-caret:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.hive-split-caret:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The menu is anchored to the caret and opens UPWARD: these sit in a modal footer, where
   downward would leave the dialog. */
/* Opens UPWARD, and the caret glyph points up to match. This one lives in a modal footer,
   where a downward menu would be clipped — unlike the Export and sidebar splits, which sit
   near the top of the page and correctly point down. The glyph follows the direction the
   menu actually opens; it is not an inconsistency to tidy away. */
.hive-split-button .hive-split-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 260px;
    z-index: 5;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.hive-split-button .hive-split-menu[hidden] { display: none; }
.hive-split-button .hive-split-menu [role="menuitem"] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hive-split-button .hive-split-menu [role="menuitem"]:hover,
.hive-split-button .hive-split-menu [role="menuitem"]:focus-visible {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
    outline: none;
}

/* The alternative here bypasses validation, so it reads as a warning, not an accent. */
.hive-split-menu .hive-split-danger i { color: var(--danger); }


/* HIVE-745 — a one-line claims-list cell. The table paints with table-layout: fixed and
   cookie-persisted widths, so the cell must never widen to fit its content; it clips and
   the title attribute carries the longer slice. */
.claims-cell-oneline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;   /* fixed layout distributes the column; this stops content winning */
}


/* ── Shared hover tooltip (hive-tooltip.js) ──────────────────────────────────────────
   Replaces the browser's `title` where the content is long or formatted: the native one
   renders a single unwrapped line that runs off the right edge and cannot be themed.
   Appended to <body> and position:fixed so no scroll container can clip it; JS sets
   left/top and clamps it into the viewport. */
.hive-tooltip {
    position: fixed;
    z-index: 100002;
    max-width: min(520px, calc(100vw - 24px));
    max-height: min(420px, 60vh);
    overflow: hidden;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    white-space: pre-line;
    /* Preview only: it must never eat a click or need dismissing. */
    pointer-events: none;
}
.hive-tooltip[hidden] { display: none; }

/* Formatted content brings its own block elements, so the pre-line default is dropped. */
.hive-tooltip--rich { white-space: normal; }
.hive-tooltip--rich p { margin: 0 0 .5em; }
.hive-tooltip--rich p:last-child { margin-bottom: 0; }
.hive-tooltip--rich ul,
.hive-tooltip--rich ol { margin: 0 0 .5em; padding-left: 1.2em; }
.hive-tooltip--rich li { margin: 0 0 .15em; }
.hive-tooltip--rich strong { font-weight: 600; }

/* The box has a max-height, so long content can be cut by the CLIP rather than by the
   server's character budget -- and then the marker below sits out of sight and the text
   just stops mid-sentence. The JS measures the rendered box and sets this class when that
   happens; the fade is the only honest signal available to a popup that cannot scroll. */
.hive-tooltip--clipped::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 2.4em;
    border-radius: 0 0 7px 7px;
    background: linear-gradient(to bottom, transparent, var(--surface) 78%);
}

/* The server says when it cut the text; this is what that looks like. */
.hive-tooltip .claim-outcome-more {
    display: block;
    margin-top: .4em;
    color: var(--text-secondary);
}

/* ===== source: /css/draggable-modal.css ===== */
/* ===== Draggable-modal cursors (HIVE-256) =====
   Unify the drag affordance (move) and the close/interactive affordance
   (pointer) across all opt-in draggable modals + the common close buttons.
   The shared helper also sets cursor:move inline on the handle; these rules
   are the CSS backstop and, crucially, keep interactive controls inside the
   handle (the close ×, selects, links) from inheriting the move cursor. */

/* Drag handle shows the move cursor. */
.modal-overlay[data-draggable] .modal-header,
.modal-overlay[data-draggable] [data-drag-handle] {
    cursor: move;
}

/* Controls inside the drag handle must NOT inherit `move`. */
.modal-overlay[data-draggable] .modal-header button,
.modal-overlay[data-draggable] .modal-header a,
.modal-overlay[data-draggable] .modal-header input,
.modal-overlay[data-draggable] .modal-header select,
.modal-overlay[data-draggable] .modal-header label,
.modal-overlay[data-draggable] [data-drag-handle] button,
.modal-overlay[data-draggable] [data-drag-handle] a,
.modal-overlay[data-draggable] [data-drag-handle] input,
.modal-overlay[data-draggable] [data-drag-handle] select,
.modal-overlay[data-draggable] [data-drag-handle] label {
    cursor: pointer;
}

/* Every modal close affordance is a pointer hand — unifies the set and fixes
   the bare `.modal-close` (claim-multiclaim.js) which had no explicit cursor. */
.btn-close-modal,
.modal-close,
.message-modal-close,
.claim-admin-modal .ca-close-btn,
.bug-tracker-close {
    cursor: pointer;
}

/* ===== source: /css/list-mobile.css ===== */
/* ===========================================================================
   list-mobile.css — Claims list "table -> card" transform (mobile only)

   Scope guards (DO NOT relax):
   - Every rule lives inside @media (max-width: 768px). Desktop (>=768px) is
     completely untouched, so the >=1024px / 1440 / 1920 light render stays
     byte-identical.
   - The transform is scoped to `table.list-cards-mobile` (the Claims list
     only). Never a bare `.data-table` rule — matrix/admin/report tables keep
     their normal horizontal-scroll behaviour.
   - Colours come from theme tokens (var(--surface) etc.), so dark mode is
     inherited automatically — no separate html[data-theme="dark"] block needed.

   This is a pure CSS restyle of the SAME table markup (same rows, links,
   checkboxes, badges, context menu). No behaviour changes.
   =========================================================================== */

/* The mobile-only Claims sort control is hidden on desktop; the @media block
   below flips it to flex. (Declared before the @media so the cascade resolves
   to flex at <=768 and none above.) */
.list-mobile-sort { display: none; }

/* M2 (2026-07-14): the mobile-only "⋯" toolbar overflow menu (Columns/Export/
   Clear) — hidden on desktop, shown inside the compact one-row toolbar ≤768px. */
.claims-toolbar-overflow { display: none; }

@media (max-width: 768px) {

    /* All interactive controls on the claims list meet the mobile touch floor.
       Text links outside the claims list retain their normal inline metrics. */
    body:has(table.list-cards-mobile) :is(
        button,
        a.btn,
        .filter-btn-outline,
        .claims-tab,
        .report-cta-btn
    ) {
        min-width: 40px;
        min-height: 40px;
    }

    /* The Claims list owns its scroll wrapper; in card mode there is no wide
       table, so kill the horizontal scroll / forced min-width that the generic
       .data-table rules impose. This is what removes the ~781px overflow. */
    .data-table-wrapper:has(> table.list-cards-mobile) {
        overflow-x: hidden;
        border: none;
        background: transparent;
    }

    table.data-table.list-cards-mobile {
        min-width: 0;
        width: 100%;
        display: block;
        border-collapse: separate;
        background: transparent;
        font-size: 13px;
    }

    /* Neutralize stale desktop column resize/reorder inline styles
       (table-interactions.js). That script restores per-page saved column WIDTHS
       as INLINE styles on the table + cells (`table.style.width = ~1600px` +
       table-layout:fixed + inline th/td widths). Inline styles beat the stylesheet,
       so on the card layout the table is forced to its ~desktop width and every
       value — the right-hand side of each `justify-content:space-between` cell —
       is pushed off the right edge, where `.data-table-wrapper{overflow-x:hidden}`
       clips it. Result: labels render, values look blank ("appears then disappears"
       as the script runs just after the server paint). Persists across "clear
       cache" because colWidths/colOrder live in localStorage, not the HTTP cache;
       absent in a fresh/private profile that never customised columns. A stylesheet
       `!important` beats the JS inline width, so the card always lays out at the
       viewport width regardless of any saved state. Mobile-gated (<=768px) →
       desktop (>768px) 1:1 render is untouched. The JS also stays inert on cards
       (see inMobileCardMode in table-interactions.js); this is the belt-and-braces
       net that also covers a desktop->narrow window resize. */
    table.data-table.list-cards-mobile {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }
    table.list-cards-mobile tbody td,
    table.list-cards-mobile tbody th,
    table.list-cards-mobile thead th {
        width: auto !important;
    }

    /* Hide the column-header row entirely — labels move to per-cell ::before. */
    table.list-cards-mobile thead {
        display: none;
    }

    table.list-cards-mobile tbody {
        display: block;
        /* The fixed general-chat FAB occupies the bottom-right corner. Leave a
           final scroll runway so the last claim card can move fully above it. */
        padding-bottom: 72px;
    }

    /* Each row becomes a self-contained card. position:relative anchors the
       absolutely-positioned checkbox + action menu in the card "header". */
    table.list-cards-mobile tbody tr {
        position: relative;
        display: block;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: var(--shadow);
        margin-bottom: 10px;
        padding: 10px 12px;
        /* Card padding stays symmetric — only the TITLE row clears the absolutely
           positioned ⋮ action (below). The old card-wide padding-right:48px inset
           every value row, leaving a dead gap down the whole right edge. */
    }

    /* Generic data cell -> label / value row. */
    table.list-cards-mobile tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: auto;
        padding: 4px 0;
        border: none;
        white-space: normal;
        text-align: right;
        font-size: 13px;
        color: var(--text);
    }

    table.list-cards-mobile tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 12px;
        text-transform: none;
        letter-spacing: .03em;
        white-space: nowrap;
    }

    /* The value side wraps / aligns right; lets long client names break. */
    table.list-cards-mobile tbody td > * {
        text-align: right;
    }

    /* ---- Card header: checkbox (top-left) + actions (top-right) ---------- */

    /* Card-contract clearances — single source for how far a flow row must
       inset to clear the pinned top-left checkbox (left) and the pinned
       top-right ⋮ kebab (right). Consumed by the title row and the leading
       flow-cell rule below; page CSS may re-use them for bespoke cells. */
    table.list-cards-mobile {
        --card-check-clearance: 30px;
        --card-actions-clearance: 40px;
    }

    /* Checkbox cell: pulled out of the flex flow, pinned top-left. No label. */
    table.list-cards-mobile tbody td[data-cardcell="check"] {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        width: auto;
    }
    table.list-cards-mobile tbody td[data-cardcell="check"]::before {
        content: none;
    }

    /* Action ⋮ cell: pinned top-right. No label. */
    table.list-cards-mobile tbody td[data-cardcell="actions"] {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
    }
    table.list-cards-mobile tbody td[data-cardcell="actions"]::before {
        content: none;
    }

    /* Round 2 (2026-08-08): the pinned check (top-left) and kebab (top-right)
       overlay whatever flow cell renders FIRST in the card. The title cell
       already clears them, but when a non-title cell leads the card — the
       Notifications Date row, the intake-requests list — both its label and
       its value sat under the pinned controls ("□ta" for "Data", "22⋮58"
       under the kebab). Give the leading flow cell the same clearance the
       title gets instead of hiding anything.
       :not([data-cardcell="actions"]) — on /Users the row order is check →
       actions → title: the pinned kebab cell is itself the check cell's
       next sibling, and this rule's specificity beats the actions rule's
       padding:0, shoving the kebab ~48px in from the card corner. Pinned
       cells never need the clearance — they ARE what is being cleared. */
    table.list-cards-mobile tbody td[data-cardcell="check"] + td:not([data-cardcell="title"]):not([data-cardcell="actions"]) {
        padding-left: var(--card-check-clearance);
        padding-right: var(--card-actions-clearance);
    }

    /* Round 2 (2026-08-08) — shared single-line truncation opt-in. Every card
       value cell is a label/value FLEX row (above), where text-overflow is
       INERT: a long value hard-clips at the card edge with no "…". A cell
       that wants one ellipsized line opts in with .card-ellipsis in markup:
       the cell becomes a block line, label inline, value truncated with a
       visible ellipsis. This is the card contract's canonical answer to the
       clamp-vs-card conflict; releasing the clamp to wrap (Claims client
       cell, claims-columns.css) remains a deliberate per-page choice.
       First consumer: /Notifications message cell (notifications.css keeps
       only its page-local desktop max-width lift). */
    table.list-cards-mobile tbody td.card-ellipsis {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
    }
    table.list-cards-mobile tbody td.card-ellipsis::before {
        display: inline;
        margin-right: 8px;
    }

    /* ---- Title cell: claim number reads as the card title --------------- */
    table.list-cards-mobile tbody td[data-cardcell="title"] {
        display: block;
        /* Indent past the top-left checkbox (left) and clear the top-right ⋮ (right)
           so the title row never collides with the pinned card-header controls. */
        padding: 0 var(--card-actions-clearance) 6px var(--card-check-clearance);
        margin-bottom: 6px;
        border-bottom: 1px solid var(--border);
        text-align: left;
    }
    table.list-cards-mobile tbody td[data-cardcell="title"]::before {
        content: none;
    }
    table.list-cards-mobile tbody td[data-cardcell="title"] > * {
        text-align: left;
    }
    /* Card title type-scale + keep badges/icons visible and laid out. */
    table.list-cards-mobile tbody td[data-cardcell="title"] .claim-number-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    table.list-cards-mobile tbody td[data-cardcell="title"] .claim-number-link {
        font-size: 16px;
        font-weight: 700;
    }
    table.list-cards-mobile tbody td[data-cardcell="title"] .claim-badges-row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-start;
    }

    /* ---- Per-cell value alignment touch-ups ----------------------------- */

    /* Pipeline / type cell: align the dot + name + type label to the right. */
    table.list-cards-mobile tbody td .claim-pipeline-cell {
        align-items: flex-end;
        text-align: right;
    }
    table.list-cards-mobile tbody td .claim-pipeline-cell .claims-color-dot {
        margin-right: 4px;
    }

    /* Status pill keeps its inline-block sizing on the value side. */
    table.list-cards-mobile tbody td .status-badge {
        white-space: nowrap;
    }

    /* ---- Claims-list header tabs strip (page shell, [data-list-filters]) --
       Desktop keeps `flex-shrink: 0` on .claims-header-tabs, so on a narrow
       viewport that single flex item refuses to shrink and lays all 7 tabs out
       on one ~1155px line — the real driver of .main-content horizontal
       overflow at 390px (the table itself is clipped by its own wrapper).
       M1 (2026-07-14): the previous flex-wrap:wrap stacked the 7 pills into 3+
       rows at phone widths. Replace with a SINGLE horizontally scrollable row —
       a clone of the proven .claim-summary-tabs pattern (claim-summary.css):
       nowrap + touch scroll + thin scrollbar + right-edge fade that is only
       visible when a chip is actually clipped. Chips keep their pale-yellow
       pills + count badges; nothing is hidden — just scrollable.

       P7 (2026-08-08): that pattern is now the shared `.hive-scroll-row`
       component in site.css, which the strip carries in markup — so the scroll
       behaviour, the always-drawn thin scrollbar and the right-edge fade all
       come from one place at every width. The fade in particular was described
       in this comment but never actually declared here, which is exactly why
       the strip still ended mid-word at 402 with nothing to say it scrolled.

       What stays mobile-only: pinning the strip to its own full-width line
       (on desktop it shares the line with the header actions), and the 40px
       touch target on each pill. */
    .claims-header-tabs {
        flex: 1 1 100%;
    }
    .claims-header-tabs .claims-tab {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* ---- #3 (P2): header ACTIONS row overflow --------------------------------
       Desktop keeps `.claims-header-actions { flex-shrink:0; margin-left:auto }`.
       Once the tabs strip wraps (rule above), the actions buttons (Clear +
       Filter + Quick-intake + Create) land on their own line, but with
       flex-shrink:0 their combined ~422px width refuses to shrink and pushes
       .main-content ~48px sideways at 390px — the persistent horizontal overflow
       that exists on load and after open->close of the filter drawer.
       Mobile-only: let the row shrink + wrap so the buttons stack within the
       viewport instead of widening the page. Desktop (>768px) is untouched. */
    .claims-header-actions {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    /* ---- #1 (re-review): mobile sort control --------------------------------
       In card mode the <thead> (and its 8 sort links) is hidden, so the desktop
       header-sort path is unreachable. This compact select + direction toggle
       routes through the SAME no-refresh AJAX list mechanism (claimsList.load),
       preserving filters + resetting to page 1, exactly like the header links. */
    .list-mobile-sort {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }
    .list-mobile-sort .lms-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .list-mobile-sort .lms-select { flex: 1 1 auto; min-width: 0; }
    /* M3 (2026-07-14): the sort <select> gets the site-standard toolbar select
       skin (border/radius/padding/surface + the .select-icon chevron rendered
       by the markup) instead of the bare native control. */
    .list-mobile-sort .lms-select select {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        padding: 9px 32px 9px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius, 8px);
        font-size: 13px;
        font-family: inherit;
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
    }
    .list-mobile-sort .lms-select .select-icon { right: 12px; }
    .list-mobile-sort .lms-dir {
        flex: 0 0 auto;
        width: 38px;
        height: 36px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        border-radius: var(--radius, 8px);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .list-mobile-sort .lms-dir:hover { border-color: var(--primary); }

    /* ---- #3 (P2 re-fix): off-canvas filter drawer with ZERO closed overflow --
       Desktop keeps site.css's `right:-380px` (untouched above 768px).

       Previous mobile rule pushed the closed drawer off the right edge with
       `transform: translateX(calc(100% + 24px))`. Although the drawer is
       position:fixed, it lives INSIDE `.main-content` (which is overflow-x:auto),
       and Chromium counts the transformed box toward that scroll container's
       scrollable overflow — giving a persistent ~48px horizontal overflow on
       `.main-content` (present on load AND after open->close).

       Fix: the CLOSED drawer stays anchored at `right:0` (its layout right edge
       sits exactly on the viewport edge — contributes 0 overflow) and is taken
       out of the picture with `visibility:hidden` + `opacity:0`. The slide is
       preserved by animating a SMALL in-bounds transform (translateX(101%) would
       leave the box, so we keep it visually parked just off-screen ONLY while
       opacity/visibility hide it, but the *layout/transform box never extends
       past the viewport* because we cap the translate at the drawer's own offset
       and rely on visibility to hide the brief on-edge frame). The open state
       resets everything for a full, dark-correct, usable drawer. */
    .claims-filter-sidebar {
        right: 0;            /* layout box flush at the viewport edge -> 0 overflow */
        transform: none;     /* never translate the CLOSED box past the edge */
        visibility: hidden;  /* hide without removing the (in-bounds) layout box */
        opacity: 0;
        transition: opacity 0.2s ease, visibility 0s linear 0.25s;
    }
    .claims-filter-sidebar.open {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.2s ease, visibility 0s;
        /* Slide-in is a transient animation: its off-screen first frames are
           NOT a steady state, so they never persist as horizontal overflow. */
        animation: claimsFilterSlideIn 0.25s ease;
    }
    @keyframes claimsFilterSlideIn {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }

    /* ---- Narrow-phone guardrail (P2) ----------------------------------------
       The SHARED list toolbar (search + pipeline/status selects + Clear/Filter/
       Create buttons) is the persistent horizontal-overflow driver at very
       narrow phone widths (320/360px): site.css gives `.toolbar .select-wrapper
       select` a `min-width: 180px`, and two of those plus the buttons exceed the
       viewport, so .main-content scrolls sideways on EVERY list page (Claims,
       Users, …). These rules are mobile-gated (<=768px) so desktop (>=769px)
       light/dark rendering is byte-identical; they only let the toolbar wrap and
       its children shrink to the available width. Applies to all lists.

       Measured before this fix: 320px≈71px, 360px≈31px .main-content overflow. */
    .toolbar {
        flex-wrap: wrap;
    }
    .toolbar .search-box {
        flex: 1 1 100%;
        min-width: 0;
    }
    .toolbar .select-wrapper {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
    }
    .toolbar .select-wrapper select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .toolbar .filter-btn-outline,
    .toolbar .btn-secondary,
    .toolbar button {
        min-width: 0;
    }
    /* Filter-button groups (e.g. Users page Role/Status dropdowns) sit in a
       `.filter-group` flex row with `margin-left:auto`; at 320px their combined
       intrinsic width (~344px) overruns the viewport because the group never
       wraps. Mobile-only: let the group wrap onto multiple lines and let its
       context-menu wrappers shrink, so the toolbar stays within the page. */
    .toolbar .filter-group {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }
    .toolbar .filter-group .context-menu-wrapper {
        min-width: 0;
    }

    /* ---- M2 (2026-07-14): compact one-row CLAIMS filter toolbar -------------
       Previously: search took a full row, then the 3 quick dropdowns (claim
       types / status groups / statuses) + Filters/Clear/Columns/Export wrapped
       into 2-4 ragged rows. Now ONE row: search (flex 1) + Filters (icon+badge)
       + "⋯" overflow (Columns/Export/Clear). The three quick dropdowns HIDE —
       their facets already exist inside the mobile-hardened filter drawer
       (#filterSidebar). Scoped to #claimsFiltersRow so other list toolbars keep
       the generic wrap guardrail above; desktop (>768px) byte-identical. */
    #claimsFiltersRow {
        flex-wrap: nowrap;
        align-items: center;
    }
    #claimsFiltersRow .search-box {
        flex: 1 1 auto;
        min-width: 110px;
    }
    /* !important: the .claims-search-filter wrappers carry an inline
       style="display:inline-block" (markup in _ClaimsToolbarFilters.cshtml),
       which would beat any stylesheet rule. Mobile-gated, so desktop keeps
       the inline display untouched. */
    #claimsFiltersRow .claims-search-filter,
    #claimsFiltersRow .claims-columns-trigger,
    #claimsFiltersRow .claims-export-wrapper,
    #claimsFiltersRow .claims-clear-all {
        display: none !important;
    }
    #claimsFiltersRow .claims-filter-btn-text {
        display: none; /* Filters button collapses to icon + active-count badge */
    }
    #claimsFiltersRow #openFilterSidebar,
    #claimsFiltersRow .claims-toolbar-overflow .filter-btn-outline {
        flex: 0 0 auto;
        min-height: 40px;
    }
    #claimsFiltersRow .claims-toolbar-overflow {
        display: inline-block;
        position: relative;
        flex: 0 0 auto;
    }
    /* Broker "My portfolio" toggle (conditional) shares the row — let it give
       way before the search/buttons rather than pushing the page sideways. */
    #claimsFiltersRow .broker-portfolio-toggle {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Card status pills may carry long labels; let them wrap instead of forcing
       a wide intrinsic width (the nowrap rule above keeps desktop untouched). */
    table.list-cards-mobile tbody td .status-badge {
        white-space: normal;
    }

    table.list-cards-mobile tbody td[data-col="intakeStatus"] {
        flex-wrap: wrap;
    }

    table.list-cards-mobile tbody td .claims-intake-workstate-badge {
        max-width: 68%;
        white-space: normal;
        text-align: right;
        justify-content: flex-end;
    }

    /* ---- Page-header action row guardrail (P0, sitewide) --------------------
       `.page-header` is a non-wrapping `display:flex; justify-content:space-
       between` row of [H1] + [.page-header-actions]. The actions group holds the
       Export / Quick / Create buttons (~355-392px combined) which do NOT wrap, so
       at 320/360px they push `.main-content` sideways on every list page
       (Clients, Assets/*, Processes …). Measured before this fix:
       320px≈44-88px, 360px≈4-48px contained overflow.
       Mobile-only (<=768px) → desktop (>=769px) layout is byte-identical. Let the
       header and its action group wrap so the buttons stack within the page. */
    .page-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    .page-header-actions {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
    }
    .page-header-actions > *,
    .page-header-actions .btn-primary,
    .page-header-actions .btn-secondary,
    .page-header-actions .btn-export {
        min-width: 0;
    }
}

/* ===== source: /css/theme.css ===== */
/* =============================================================================
   theme.css — Hive2 dark-mode token contract + theme switcher styles.
   (HIVE dark-mode/mobile 2026-06-06; loaded after site.css.)

   1:1 LIGHT GUARANTEE
   - Light is the default: with NO [data-theme] attribute, only :root applies and
     the existing site.css values are untouched -> the Full-HD light layout is
     byte-identical before/after.
   - The :root additions below are PREVIOUSLY-UNREFERENCED tokens only, so giving
     them light values changes nothing that renders today. (--surface-2 is NOT set
     here: it is read in light with per-call-site fallbacks, so it stays undefined
     in light and is defined only under dark.)
   - Pre-existing tokens (--primary-text, --shadow-lg) are NOT redefined in :root;
     they are only overridden under html[data-theme="dark"].
   - All dark rules are gated on html[data-theme="dark"] -> zero effect in light.

   Palette: warm-tinted dark (chosen 2026-06-06). Sidebar tokens are intentionally
   left untouched (already pure black). WCAG AA verified for body text on surface.
   ============================================================================= */

/* ---- New semantic tokens, LIGHT values (additive; previously unreferenced) ---- */
:root {
  --surface-3: #F3F0E4;
  --hover-bg: rgba(0, 0, 0, .04);
  --overlay-bg: rgba(0, 0, 0, .45);
  --input-bg: #FFFDF8;
  --input-border: #CFC8B8;
  /* Brandbook OFF-WHITE at full strength. This is the ONE token column headers
     may paint with — never --bg. A header painted with the page-ground token is
     invisible while that ground is near-white and becomes "the table lost its
     top edge" the moment the ground carries real colour. */
  --table-header-bg: #EAE7D8;
  --table-row-hover: rgba(0, 0, 0, .03);
  --muted-border: #E4E0D1;
  --shadow-color: rgba(0, 0, 0, .08);
  --focus-ring: rgba(244, 116, 33, .45);
  /* Component primitives.  --border remains the quiet decorative hairline;
     controls/cards can opt into boundaries that satisfy WCAG non-text
     contrast without making every divider visually loud. */
  --component-border: #c9c1b8;
  --control-border: #9b8f82;
  --placeholder-text: #71675d;
  --on-primary: #201b16;
  --disabled-bg: #EFEBDD;
  --disabled-text: #71675d;
  --canvas-frame: #8b8176;
  --success-bg: #e7f6ec; --success-text: #1f7a44;
  --warning-bg: #fbf3e0; --warning-text: #8a6400;
  --danger-bg:  #fdeaea; --danger-text:  #a32424;
  --info-bg:    #e6f0fa; --info-text:    #205a99;
  --qci-highlight: #FFF6E2;

  /* ── WP1 semantic tokens (site-ui-interaction-unification-modernization-plan-
     2026-08-17). ADDITIVE layer: page families adopt these as they migrate;
     nothing below redefines a pre-existing token. Surfaces/borders alias the
     proven palette; elevation + layers replace per-page ad-hoc shadow/z-index
     values as callers migrate (COBX popovers are the first consumer). ── */
  --surface-page: var(--bg);
  --surface-panel: var(--surface);
  --surface-raised: var(--surface);
  --surface-overlay: var(--surface);
  --surface-hover: var(--hover-bg);
  --surface-selected: rgba(244, 116, 33, .10);
  --border-subtle: var(--muted-border);
  --border-control: var(--control-border);
  --border-strong: var(--component-border);
  --shadow-card: 0 1px 2px var(--shadow-color);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, .12);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, .18);
  --shadow-dialog: 0 18px 48px rgba(0, 0, 0, .24);
  --layer-sticky: 100;
  --layer-dropdown: 6000;
  --layer-drawer: 9000;
  --layer-modal: 10000;
  --layer-toast: 11000;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px;
  --control-sm: 28px; --control-md: 34px; --control-lg: 40px;
  --motion-fast: 140ms cubic-bezier(.2, .7, .3, 1);
}

/* ---- Dark theme (warm-tinted) — only active when html[data-theme="dark"] ---- */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #14110d;
  --surface:   #1c1813;
  --surface-2: #241f18;
  --surface-3: #2d2720;
  --border:        #332b22;
  --muted-border:  #271f18;

  --text:           #efe9e1;   /* ~14:1 on --surface (AAA) */
  --text-secondary: #bcae9d;   /* ~8.4:1 (AAA) */
  --text-muted:     #9a8d7c;   /* ~5.4:1 (AA)  */

  --hover-bg:   rgba(255, 240, 220, .06);
  --overlay-bg: rgba(12, 9, 5, .68);

  --input-bg:     #211c16;
  --input-border: #3d3327;

  --table-header-bg: #241f18;
  --table-row-hover: rgba(255, 240, 220, .045);

  --shadow-color: rgba(0, 0, 0, .55);
  --shadow:       0 1px 3px rgba(0, 0, 0, .55);
  --shadow-lg:    0 8px 28px rgba(0, 0, 0, .6);
  --focus-ring:   rgba(248, 169, 0, .55);

  /* Keep structural hairlines quiet, but give interactive/component edges a
     separate >=3:1 contract. #80715f remains >=3:1 even against the lightest
     dark application surface (--surface-3), as well as inputs/surface-2. */
  --component-border: #80715f;
  --control-border:   #80715f;
  --placeholder-text: #bcae9d;
  --disabled-bg:      #2d2720;
  --disabled-text:    #bcae9d;
  --canvas-frame:     #80715f;
  --focus-indicator:  #ffc45c;

  /* Brand orange stays for fills/buttons; brightened as text-on-dark.
     D7 (2026-08-14): accents follow the brandbook, dark SURFACES do not —
     the warm-dark ramp keeps its measured AA/AAA contrast. */
  --primary-text:  #F79343;
  --primary-light: rgba(244, 116, 33, .18);
  /* Dark ink on the brand orange #F47421 is 5.99:1, unlike white at 2.85:1.
     --on-primary is already the brandbook GREY. */
  --on-primary: #201b16;

  /* --text-primary is used in several files as var(--text-primary, #1a1a1a|#111);
     undefined in light it harmlessly uses those (dark) fallbacks, but on a dark
     surface that fallback is near-black -> unreadable. Define it under dark only
     (mirrors --text), so light stays byte-identical and dark becomes legible. */
  --text-primary: var(--text);

  --success: #4cbb7c; --warning: #edca50; --danger: #e35c5c; --info: #4aa0e4;
  --success-bg: #1a2418; --success-text: #84dca6;
  --warning-bg: #2c2410; --warning-text: #f2c558;
  --danger-bg:  #2c1612; --danger-text:  #f29191;
  --info-bg:    #15212f; --info-text:    #74b6ef;
  --qci-highlight: #302313;

  /* One semantic state map for chips, editable triggers and banners. */
  --neutral-state-bg: #2d2720; --neutral-state-text: #d6cabd;
  --priority-low-bg: #2d3033; --priority-low-text: #d4d9df;
  --priority-medium-bg: #332b12; --priority-medium-text: #f6d66d;
  --priority-high-bg: #382315; --priority-high-text: #ffb979;
  --priority-critical-bg: #391919; --priority-critical-text: #ffaaa5;
  --status-open-bg: #192b42; --status-open-text: #a8d2ff;
  --status-final-bg: #173021; --status-final-text: #9de0b4;
  --status-suspended-bg: #352a12; --status-suspended-text: #f4d16f;

  /* WP1 semantic tokens — dark values. Raised/overlay surfaces step UP the
     warm-dark ramp (shadow alone doesn't separate layers on dark grounds);
     shadows deepen to stay visible against the dark page. */
  --surface-raised: var(--surface-2);
  --surface-overlay: var(--surface-2);
  --surface-selected: rgba(248, 169, 0, .14);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, .55);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, .6);
  --shadow-dialog: 0 18px 48px rgba(0, 0, 0, .65);
}

/* =============================================================================
   Theme switcher control (lives inside the header user dropdown — hidden until
   the dropdown is opened, so it never affects the default-page layout).
   ============================================================================= */
.theme-toggle-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
}
/* The dropdown copy of the switcher is mobile-only: desktop already has the
   header segmented control, so the duplicate (and its divider) stays hidden. */
.mobile-theme-menu-section {
  display: none;
}
@media (max-width: 768px) {
  .mobile-theme-menu-section {
    display: block;
  }
}
.theme-toggle-row .theme-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-right: auto;
}
.theme-opt {
  width: 30px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.theme-opt:hover { border-color: var(--primary); color: var(--text); }
.theme-opt.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
html[data-theme="dark"] .theme-opt:not(.is-active) {
  border-color: var(--control-border);
}

/* Visible header theme switcher (compact segmented sun/moon/desktop, left of the
   language switcher). Reuses .theme-opt; ungated so it renders correctly in BOTH
   themes (the control must be visible in light too). This is the one intentional
   addition to the 1920 light header — the light pixel baseline is re-captured to
   accept it. */
.header-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 4px;
}
.header-theme-toggle .theme-opt {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}
@media (max-width: 768px) {
  /* Phones: hide the header segmented control to keep the top bar uncrowded.
     The same Light/Dark/System switcher remains reachable in the profile
     dropdown (its .theme-toggle-row), so the preference is still settable. */
  .header-theme-toggle { display: none; }
}

/* =============================================================================
   DARK-MODE "WHITE ISLAND" NEUTRALISATION  (review item #2)
   -----------------------------------------------------------------------------
   site.css hardcodes white / near-white backgrounds (#fff, #ffffff, #fafafa,
   #f9fafb, …) and near-black text (#344054, #475467, #202635, #3b4252) on a
   number of SHARED components (modals, drawers, dropdown panels, inputs, outline
   buttons, sub-surfaces, hover washes, neutral chips). Under dark these render as
   glaring light rectangles / invisible-on-dark text. Every rule below is gated on
   html[data-theme="dark"] and remaps those hardcoded values onto the dark theme
   tokens declared above — so LIGHT IS BYTE-IDENTICAL (no [data-theme] attr -> none
   of this applies). Each override matches the SAME property the source rule sets
   (background vs background-color, border vs border-color), so light specificity
   is never altered.

   DELIBERATELY LEFT COLORED (NOT touched here): .btn-primary / .btn-danger /
   .btn-success and all CTA fills; status pills (.status-active/.status-inactive/
   status-*); active states (.filter-btn-outline.filter-active, .btn-cost-type-chip
   .active, .multiselect-option.selected, .claims-wizard-step.active); the amber
   cargo block (.claims-wizard-cargo-block #fffbf6/#fde68a); the colored
   .group-member-btn.make-parent/.make-child/.remove variants; .chip-menu /
   .chip-menu-sub (already a dark #1e1e1e context menu, no fix needed). Where a
   white-bg element also carries a brand accent (e.g. .btn-primary-outline orange
   text+border, .multiselect-badge orange border) only the white SURFACE is
   neutralised; the accent is preserved.
   ============================================================================= */

/* ---- Scrims / overlays behind modals & drawers -> dark overlay token ---- */
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .claims-filter-overlay {
  background: var(--overlay-bg);
}

/* ---- Modals / drawers / dropdown panels / popovers -> --surface + --border ---- */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .claims-filter-sidebar,
html[data-theme="dark"] .business-info-contact-card,
html[data-theme="dark"] .assign-selected-list-wrap,
html[data-theme="dark"] .user-company-dropdown {
  background: var(--surface);
  color: var(--text);
}
/* .pipelines-summary-panel / .permissions-summary-panel: white summary strips
   inside the create/edit-user modal (the "Žalų tipai" / "Teisės" rows). */
html[data-theme="dark"] .pipelines-summary-panel,
html[data-theme="dark"] .permissions-summary-panel {
  background: var(--surface-2);
}
/* .multiselect-dropdown / .claim-email-modal .cef-dropdown panels (panel float). */
html[data-theme="dark"] .multiselect-dropdown {
  background: var(--surface);
}
html[data-theme="dark"] .claim-email-modal .cef-dropdown {
  background: var(--surface);
  color: var(--text);
}
/* .contract-fees-accordion sets `border:` shorthand + bg with hardcoded hex. */
html[data-theme="dark"] .contract-fees-accordion {
  background: var(--surface);
  border-color: var(--border);
}
/* .business-info-section is a light-gray sub-surface card (#fafafa). */
html[data-theme="dark"] .business-info-section {
  background: var(--surface-2);
}
/* .business-info-contact-card hardcodes border #e6e8eb. */
html[data-theme="dark"] .business-info-contact-card {
  border-color: var(--border);
}
/* .clients-wizard-steps step strip: hardcoded #f9fafb bg + #eaecf0 border. */
html[data-theme="dark"] .clients-wizard-steps {
  background: var(--surface-2);
  border-color: var(--border);
}
/* .hive-alert-modal near-black heading/body text on the now-dark modal surface. */
html[data-theme="dark"] .hive-alert-modal .modal-header h2 { color: var(--text); }
html[data-theme="dark"] .hive-alert-modal .modal-body p { color: var(--text-secondary); }
/* (.user-company-dropdown surface handled in the panel group above — its border
   already uses var(--border) in site.css. .new-user-modal carries no bg of its
   own; it inherits the now-dark .modal-content surface.) */

/* ---- Text inputs / selects / textareas -> --input-bg + --input-border ---- */
/* (.form-control / .claims-wizard-form-row input|select already use
   --surface/--border/--text in site.css and adapt automatically.) */
html[data-theme="dark"] .country-code-select,
html[data-theme="dark"] .client-contact-card .select-wrapper select {
  background-color: var(--input-bg);
  color: var(--text);
}
html[data-theme="dark"] .multiselect-trigger,
html[data-theme="dark"] .multiselect-display,
html[data-theme="dark"] .user-company-control {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .agr-fee-field input,
html[data-theme="dark"] .agr-fee-inline-input,
html[data-theme="dark"] .agr-fee-notes-row textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .claims-wizard-payout-date {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .payout-input-row select {
  background: var(--input-bg);
  color: var(--text);
  /* border stays var(--primary) from site.css — deliberate accent, untouched. */
}
/* .claims-wizard-status-select / .claims-wizard-priority-select hardcode white bg,
   #D0D5DD border and #344054 text. Neutralise the SURFACE only; their orange
   :hover / :focus accent (var(--accent-orange, #F47421)) is on separate rules and is left intact. */
html[data-theme="dark"] .claims-wizard-status-select,
html[data-theme="dark"] .claims-wizard-priority-select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
/* .claim-email-modal inputs/dropdowns hardcode #fff bg + #dedede border. */
html[data-theme="dark"] .claim-email-modal .form-control {
  background: var(--input-bg);
  border-color: var(--input-border);
}
/* .claims-wizard-currency-symbol is the input-adjacent prefix box (#f9fafb). */
html[data-theme="dark"] .claims-wizard-currency-symbol {
  background: var(--input-bg);
}

/* ---- Secondary / outline buttons -> --surface + --border, hover --hover-bg ---- */
html[data-theme="dark"] .btn-cancel {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .btn-cancel:hover { background: var(--hover-bg); }
html[data-theme="dark"] .btn-export {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .btn-export:hover {
  background-color: var(--hover-bg);
  border-color: var(--border);
  color: var(--text);
}
/* .btn-primary-outline: keep orange text + orange border (brand accent);
   only neutralise the white fill so it isn't a light island on dark. */
html[data-theme="dark"] .btn-primary-outline { background: var(--surface); }
/* .btn-cost-type-chip (inactive): white pill. .active variant (orange fill) left. */
html[data-theme="dark"] .btn-cost-type-chip,
html[data-theme="dark"] .btn-additional-cost-chip,
html[data-theme="dark"] .btn-dp-cost-chip { background: var(--surface); }
html[data-theme="dark"] .btn-cost-type-chip:hover,
html[data-theme="dark"] .btn-additional-cost-chip:hover,
html[data-theme="dark"] .btn-dp-cost-chip:hover { background: var(--hover-bg); }
/* .filter-btn-outline (inactive): white + near-black text/icons.
   .filter-active (orange) is a separate rule and is deliberately left colored. */
html[data-theme="dark"] .filter-btn-outline {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .filter-btn-outline:hover {
  background: var(--hover-bg);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .filter-btn-outline i { color: var(--text-secondary); }
/* .group-member-btn (plain): white pill. The .make-parent/.make-child/.remove
   colored variants are deliberately left as-is. */
html[data-theme="dark"] .group-member-btn {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .group-member-btn:hover { background: var(--hover-bg); }
/* .claim-email-modal .btn-secondary / .btn-cancel: white + #dedede border. */
html[data-theme="dark"] .claim-email-modal .btn-secondary,
html[data-theme="dark"] .claim-email-modal .btn-cancel {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .claim-email-modal .btn-secondary:hover,
html[data-theme="dark"] .claim-email-modal .btn-cancel:hover {
  background: var(--hover-bg);
  border-color: var(--border);
}

/* ---- Header + dashboard chrome icon/text contrast (P0) ----------------------
   Scan-confirmed near-black-on-dark controls in dark mode (cr ~1.0-1.2):
     .header-icon-btn  -> #101828 bell/envelope/bug icons on the dark header
     .cal-nav-btn      -> #1f2937 calendar prev/next glyphs
     .quick-action-*   -> #201B16 dashboard quick-action label/icon
   A higher-specificity literal-color rule wins over the token-based color in
   these spots, so we mirror !important to guarantee the dark control reads.
   Brand-accent variants keep the orange (--primary-text); neutral chrome uses
   --text-secondary (icons) / --text (glyphs). All html[data-theme="dark"]-gated
   so light is byte-identical. */
html[data-theme="dark"] .header-icon-btn { color: var(--text-secondary) !important; }
html[data-theme="dark"] .header-icon-btn:hover { color: var(--text) !important; }
html[data-theme="dark"] .cal-nav-btn,
html[data-theme="dark"] .cal-nav-btn i { color: var(--text) !important; }
/* feature #8 — the dashboard (.quick-action-*) and claim rail (.claims-wizard-quick-action-*)
   quick-action buttons were redesigned to a fully theme-tokenised hierarchy
   (neutral-outline secondary / brand-fill primary / danger). Those tokens already
   resolve correctly in dark, so the old rainbow-era dark overrides here (which forced
   the whole stack to orange and re-pointed the retired -dark/transfer variants) were
   removed — they now flatten the hierarchy. Dark values come from the tokens. */

/* ---- App-wide chart text/grid legibility in dark (P0) -----------------------
   ApexCharts everywhere (Reports, Dashboard, Monitoring). Many charts bypass the
   chart-theme.js themer and create ApexCharts directly with hard-coded axis/label
   fills (e.g. #0f172a via labels.style.colors or text.setAttribute('fill',…)),
   which render near-black on a dark chart surface. This CSS recolours the
   RENDERED svg text (CSS fill beats the presentation attribute / inline style),
   so it works regardless of how the chart was built — WITHOUT mutating the DOM
   fill attributes, so export clones keep the original (dark) colours and stay
   legible on white. Data labels (.apexcharts-datalabel) are excluded: they sit
   on coloured slices/bars where the page picks a contrasting colour. The export
   path additionally forces #373d3f via ReportExportRenderer + svgToPngDataUri. */
html[data-theme="dark"] .apexcharts-canvas text:not(.apexcharts-datalabel) {
  fill: var(--text-secondary) !important;
}
html[data-theme="dark"] .apexcharts-legend-text { color: var(--text-secondary) !important; }
html[data-theme="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-grid-borders line { stroke: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .apexcharts-tooltip {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-theme="dark"] .apexcharts-tooltip-title {
  background: var(--surface-3, var(--surface-2)) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-yaxistooltip {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
/* Dark polish: gently desaturate + dim chart SERIES FILLS so large bright slices
   / bars (e.g. the PBIX neon-yellow pie) read as accents rather than glow on the
   dark surface, while staying distinguishable. Display-only filter (no DOM
   mutation) → PDF/Print/DOCX exports keep full PBIX saturation (the export doc
   has no data-theme="dark"). Axis text/data labels are separate elements, so the
   chart-text legibility above is unaffected. */
html[data-theme="dark"] .apexcharts-pie-area,
html[data-theme="dark"] .apexcharts-bar-area,
html[data-theme="dark"] .apexcharts-area-series .apexcharts-area,
html[data-theme="dark"] .apexcharts-radialBar-area,
html[data-theme="dark"] .apexcharts-slices path {
  filter: saturate(0.82) brightness(0.9);
}
/* ApexCharts' built-in export menu (.apexcharts-menu) is kept in the DOM but
   hidden (opacity:0) — the visible toolbar uses custom copy/download icons. It
   still has a #fff fill, so a strict scan flags it as a (hidden) white island.
   Dark-style it so it's correct if a future chart re-enables it AND the scan no
   longer false-positives. */
html[data-theme="dark"] .apexcharts-menu {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-theme="dark"] .apexcharts-menu-item { color: var(--text) !important; }
html[data-theme="dark"] .apexcharts-menu-item:hover { background: var(--hover-bg) !important; }

/* Page background safety net: body uses var(--bg) but a few pages (e.g.
   EmailTracking) leave their content containers transparent, and a stray
   later-loaded rule can repaint body light — which shows through as a light page
   behind dark chrome. Pin body to the dark bg in dark mode (0,2,1 specificity).
   Light is untouched. Real generated-artifact surfaces keep their own light fill. */
html[data-theme="dark"] body { background: var(--bg); }

/* ---- Light-gray sub-surfaces -> --surface-2 ---- */
html[data-theme="dark"] .claims-wizard-cost-table-header,
html[data-theme="dark"] .claims-wizard-cost-table-footer,
html[data-theme="dark"] .claims-wizard-info-bar,
html[data-theme="dark"] .multiselect-option,
html[data-theme="dark"] .group-members-list .group-member-row {
  background: var(--surface-2);
}
html[data-theme="dark"] .group-members-list .group-member-row {
  border-color: var(--border);
}
/* .data-table tr.group-member-row (Clients LIST grouped child rows): site.css
   gives these a literal #f8f9fb fill (+ #f0f2f6 hover) which renders as a
   below-the-fold white island on /Clients in dark. The earlier override only
   covered the wizard's `.group-members-list` context, not the rendered table
   row. Use the elevated surface so grouped children stay distinct from the
   parent row; keep the primary accent left-border (it reads fine on dark). */
html[data-theme="dark"] .data-table tr.group-member-row {
  background: var(--surface-2);
}
html[data-theme="dark"] .data-table tr.group-member-row:hover {
  background: var(--table-row-hover);
}

/* ---- Hover washes -> --table-row-hover / --hover-bg ---- */
html[data-theme="dark"] .data-table tbody tr:hover {
  background: var(--table-row-hover);
}
html[data-theme="dark"] .agr-card-header:hover { background: var(--hover-bg); }
html[data-theme="dark"] .multiselect-option:hover { background: var(--hover-bg); }

/* ---- Neutral chips -> --surface-2, --text-secondary, --border ---- */
html[data-theme="dark"] .claims-filter-chip,
html[data-theme="dark"] .clients-filter-chip {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border);
}
/* #443 — chip hover is the brand orange (was red); keep it readable on dark. */
html[data-theme="dark"] .claims-filter-chip:hover {
  background: rgba(236, 123, 41, 0.14);
  border-color: var(--accent-orange, #F47421);
  color: #F79638;
}
/* .multiselect-badge keeps its orange border (accent); only neutralise the white
   fill so the badge body is not a light island. */
html[data-theme="dark"] .multiselect-badge { background: var(--surface-2); }

/* ---- Neutral status pills (.status-active / .status-inactive) -> dark chips ----
   site.css gives these a near-white fill (#f8fafc) + light border (#d0d5dd) which
   reads as a light island on dark rows. Neutralise only the pill SURFACE/border/text;
   the green/red status DOT (::before) keeps its own semantic color (untouched). */
html[data-theme="dark"] .status-active,
html[data-theme="dark"] .status-inactive {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* ---- Semantic claim-status pills (.status-open / -inprogress / -underreview /
   -approved / -denied / -done) -> dark-tinted chips (item 30 re-entry) ----
   site.css:1388-1440 gives these LIGHT pastel fills (open=#e0e7ff lavender,
   inprogress=#fef0c7, …) with dark text. On dark rows they read as light islands
   (the reviewer confirmed .status-open computing rgb(224,231,255)). The mild
   .status-badge filter below can't darken a pastel, and only .status-active/
   -inactive had an override. Give each a LOW-lightness tint of its own hue +
   legible light text so the semantic distinction survives (the reviewer asked for
   ALL status colors, not a flat neutral). Dots (::before) keep/lighten their
   semantic color so they stay visible on dark. Dark-gated; light byte-identical. */
html[data-theme="dark"] .status-open      { background: #2b3350; color: #c7d2fe; }
html[data-theme="dark"] .status-open::before      { background: #8b9bf5; }
html[data-theme="dark"] .status-inprogress { background: #3a2c10; color: #fcd489; }
html[data-theme="dark"] .status-underreview { background: #38152c; color: #f4b6dd; }
html[data-theme="dark"] .status-approved  { background: #0f2e1e; color: #86e0ad; }
html[data-theme="dark"] .status-denied    { background: #3a1512; color: #fca29b; }
html[data-theme="dark"] .status-done      { background: #2a2f38; color: #cdd3dc; }
html[data-theme="dark"] .status-done::before      { background: #98a2b3; }

/* Dark polish: claim STAGE pills (.status-badge) carry admin-configured SOLID
   colours via inline style; a few (bright greens/ambers) glow against the dark
   rows. A gentle desaturate/dim softens them to accents without hurting
   readability or distinguishability. Inline-style colours can't be tokenised, so
   a display-only filter is the right tool; light is untouched (dark-gated). */
html[data-theme="dark"] .status-badge {
  filter: saturate(0.88) brightness(0.93);
}

/* =============================================================================
   PAGE-FAMILY DARK ISLANDS  (rollout 2026-06-06)
   -----------------------------------------------------------------------------
   The shared-component block above covers site.css. These per-page CSS files
   hardcode their own white / near-white surfaces (#fff/#ffffff/#fafafa/#f8fafc/
   #fbbfcd/…), light borders (#e4e7ec/#d0d5dd/#e5e5e5/…) and near-black text
   (#0f172a/#1f2937/#111827/#1a1a1a/#344054/#475467/#5B6370/…) that the shared
   rules never touch. Each family below is gated on html[data-theme="dark"] so
   LIGHT (and every >=769px desktop render) stays byte-identical.

   STRATEGY
   - Files that drive themselves off LOCAL design-system variables (email-tracking
     --email-*, mtpl-statistics --stats-*, mtpl-liable --mtpl-*) get those vars
     REMAPPED onto the dark theme tokens, scoped to the page-root element. One
     scoped block neutralises the bulk of the surfaces in those files at once.
   - Remaining hardcoded literals (and files with no local var system) get
     class-level overrides matching the SAME property the source rule sets.

   DELIBERATELY LEFT COLORED (NOT flattened anywhere below): status / stage /
   followup / outbox / kind / activity pills and their dots; semantic alert
   blocks (success/warning/danger washes); brand-orange accents, CTAs, primary
   buttons, focus rings, "today"/selected highlights; column-group header colors
   in the stats matrix table; tooltip chips that are intentionally dark already.
   For elements that carry BOTH a white surface and a brand accent (orange border
   etc.) only the white SURFACE is neutralised; the accent is preserved.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FAMILY: Dashboard  (wwwroot/css/dashboard/*.css)
   calendar grid, reminder/transfer/schedule/bulk modals, KPI + rail cards.
   These files hardcode #ffffff surfaces, #e4e7ec/#d0d5dd borders, #1f2937/
   #111827/#344054/#475467/#5B6370 text, #f8fafc/#fbfbfc/#fafbfc/#f0f0f0/#fafafa
   sub-surfaces, and a set of warm orange "today / hover / accent" washes
   (#fff8f1/#fff7f1/#fff9f3/#fff4eb/#fff5ec/#fff5f5/#fffaf0/#fff4eb) plus a
   #fffbeb/#fde68a attention block and #fef2f2/#fecaca danger block.
   --------------------------------------------------------------------------- */

/* calendar.css ---------------------------------------------------------------- */
html[data-theme="dark"] .cal-month-grid {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .cal-month-header {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .cal-month-cell {
  border-right-color: var(--border);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .cal-month-cell:hover { background: var(--hover-bg); }
/* "today" is an intentional brand wash -> keep warm, use the brand tint token. */
html[data-theme="dark"] .cal-month-cell.today { background: var(--primary-light); }
html[data-theme="dark"] .date-number,
html[data-theme="dark"] .cal-reminder-item { color: var(--text); }
html[data-theme="dark"] .date-day-label { color: var(--text-secondary); }
/* dashboard.css list/cell hover washes (#fafafa). */
html[data-theme="dark"] .cal-reminder-row:hover { background: var(--hover-bg); }
@media (max-width: 768px) {
  html[data-theme="dark"] .cal-month-cell { border-bottom-color: var(--border); }
}

/* rail.css — right-hand rail cards (transfers inbox + new-claims feed) --------- */
html[data-theme="dark"] .rail-card,
html[data-theme="dark"] .inbox-card,
html[data-theme="dark"] .claim-feed-card,
html[data-theme="dark"] .claim-feed-card.source-fromclient,
html[data-theme="dark"] .claim-feed-card.source-autoassigned,
html[data-theme="dark"] .claim-source-badge {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .rail-card-header h2 { color: var(--text); }
html[data-theme="dark"] .rail-card-eyebrow { color: var(--text-secondary); }
/* the orange transfer-count pill (#fff4eb) is a brand accent -> brand tint. */
html[data-theme="dark"] .transfer-count-pill { background: var(--primary-light); }

/* shell.css — the page CANVAS itself is a hardcoded light-gray (#f2f2f2) -> --bg,
   else the whole /Dashboard/My background is a glaring light island. */
html[data-theme="dark"] .dashboard-layout.dashboard-page { background: var(--bg); }
html[data-theme="dark"] .dashboard-header-copy h1 { color: var(--text); }
/* shell.css — overview + handler-stat cards, calendar toolbar + day grids ------ */
html[data-theme="dark"] .dashboard-overview-card,
html[data-theme="dark"] .handler-stat-card,
html[data-theme="dark"] .calendar-toolbar,
html[data-theme="dark"] .day-timeline-shell,
html[data-theme="dark"] .cal-day-section,
html[data-theme="dark"] .day-slot-row {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .day-slot-row { border-bottom-color: var(--border); }
html[data-theme="dark"] .day-slot-time {
  background: var(--surface-2);
  border-right-color: var(--border);
}
html[data-theme="dark"] .day-timeline-header {
  background: var(--surface-2);
  border-bottom-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .day-timeline-header .event-count,
html[data-theme="dark"] .day-empty-state { color: var(--text-secondary); }
/* toolbar buttons -> --input-bg surface; the .view-toggle-btn keeps its orange
   border (brand accent) — only the white fill is neutralised. */
html[data-theme="dark"] .cal-today-btn {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
/* item 19 — the toggle is now a segmented pill: the .view-toggle CONTAINER carries
   the --surface fill (already theme-tokenised), so each btn is a transparent
   segment; the active one keeps the shared --primary rule. */
html[data-theme="dark"] .view-toggle-btn { background: transparent; color: var(--text-secondary); }

/* modals.css — reminder / detail / transfer / schedule / bulk ----------------- */
/* (.modal-content surface + .modal-overlay scrim come from the shared block.) */
html[data-theme="dark"] .reminder-modal .modal-header h2,
html[data-theme="dark"] .transfer-single-modal .modal-header h2,
html[data-theme="dark"] .bulk-action-panel .modal-header h2,
html[data-theme="dark"] .schedule-reminder-title,
html[data-theme="dark"] .transfer-table-title,
html[data-theme="dark"] .schedule-reminder-meta-value,
html[data-theme="dark"] .reminder-detail-modal .detail-row-content,
html[data-theme="dark"] .reminder-detail-modal .detail-row-primary,
html[data-theme="dark"] .reminder-detail-modal .detail-row-secondary,
html[data-theme="dark"] .reminder-detail-modal #viewReminderPriority,
html[data-theme="dark"] .reminder-detail-modal .btn-close-modal,
html[data-theme="dark"] .reminder-detail-modal #viewReminderClaimContent a {
  color: var(--text);
}
html[data-theme="dark"] .reminder-modal .form-row label,
html[data-theme="dark"] .reminder-modal .form-row input[type="text"],
html[data-theme="dark"] .reminder-modal .form-row textarea,
html[data-theme="dark"] .reminder-modal .form-row select,
html[data-theme="dark"] .reminder-modal .autocomplete-item,
html[data-theme="dark"] .reminder-modal .btn-cancel,
html[data-theme="dark"] .reminder-detail-modal .detail-row-icon,
html[data-theme="dark"] .reminder-detail-modal .btn-icon,
html[data-theme="dark"] .transfer-single-modal .transfer-single-heading,
html[data-theme="dark"] .transfer-single-modal .transfer-single-subtitle,
html[data-theme="dark"] .transfer-single-modal .transfer-single-info,
html[data-theme="dark"] .transfer-table-from-cell,
html[data-theme="dark"] .transfer-inbox-from-cell,
html[data-theme="dark"] .transfer-inbox-date-cell,
html[data-theme="dark"] .transfer-table-note-snippet,
html[data-theme="dark"] .transfer-table-subtitle,
html[data-theme="dark"] .schedule-form-row label,
html[data-theme="dark"] .schedule-reminder-meta-row,
html[data-theme="dark"] .schedule-reminder-meta-label,
html[data-theme="dark"] .transfer-inbox-empty,
html[data-theme="dark"] .bulk-action-panel .reschedule-section-label,
html[data-theme="dark"] .bulk-action-panel .reschedule-keep-times-label,
html[data-theme="dark"] .bulk-action-panel .reschedule-keep-times small,
html[data-theme="dark"] .bulk-action-panel .bulk-footer-info,
html[data-theme="dark"] .bulk-action-panel .bulk-footer-info span,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row label {
  color: var(--text-secondary);
}
/* inputs / selects / textareas across the dashboard modals */
html[data-theme="dark"] .reminder-modal .form-row input[type="text"],
html[data-theme="dark"] .reminder-modal .form-row textarea,
html[data-theme="dark"] .reminder-modal .form-row select,
html[data-theme="dark"] .reminder-detail-modal .btn-icon,
html[data-theme="dark"] .bulk-action-panel .bulk-field input,
html[data-theme="dark"] .bulk-action-panel .select-wrapper select,
html[data-theme="dark"] .bulk-action-panel #rescheduleNewTime,
html[data-theme="dark"] .bulk-action-panel .quick-select-btn,
html[data-theme="dark"] .bulk-action-panel .bulk-filters-toggle,
html[data-theme="dark"] .bulk-action-panel .btn-cancel,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row select,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row textarea,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row .colleague-autocomplete-input,
html[data-theme="dark"] .quick-select-btn,
html[data-theme="dark"] .bulk-tab {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
/* floating autocomplete dropdown panels -> --surface */
html[data-theme="dark"] .reminder-modal .autocomplete-dropdown,
html[data-theme="dark"] .reminder-modal .autocomplete-item {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .reminder-modal .autocomplete-toggle:hover,
html[data-theme="dark"] .reminder-modal .autocomplete-clear:hover,
html[data-theme="dark"] .reminder-detail-modal .btn-icon:hover,
html[data-theme="dark"] .transfer-inbox-row:hover,
html[data-theme="dark"] .bulk-table tbody tr:hover,
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody tr:hover { background: var(--hover-bg); }
html[data-theme="dark"] .reminder-modal .autocomplete-toggle:hover,
html[data-theme="dark"] .reminder-modal .autocomplete-clear:hover { color: var(--text); }
/* light-gray info / note blocks -> --surface-2 */
html[data-theme="dark"] .transfer-single-info,
html[data-theme="dark"] .schedule-info,
html[data-theme="dark"] .transfer-single-modal .transfer-single-info,
html[data-theme="dark"] .incoming-transfer-note,
html[data-theme="dark"] .bulk-table thead th,
html[data-theme="dark"] .bulk-action-panel .bulk-table-wrapper,
html[data-theme="dark"] .bulk-action-panel .bulk-table thead th,
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody td { background: var(--surface-2); }
html[data-theme="dark"] .bulk-action-panel .bulk-table-wrapper,
html[data-theme="dark"] .bulk-action-panel .bulk-table thead th { border-color: var(--border); }
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody td,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-title-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-date-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-claim-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table thead th { color: var(--text-secondary); }
html[data-theme="dark"] .bulk-table tbody td { border-bottom-color: var(--border); }
html[data-theme="dark"] .bulk-table tbody tr:hover,
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody tr:hover { background: var(--hover-bg); }
/* warm orange washes (hover / schedule / incoming-transfer) -> brand tint token */
html[data-theme="dark"] .transfer-inbox-row:hover,
html[data-theme="dark"] .incoming-transfer-schedule-btn,
html[data-theme="dark"] .schedule-transfer-modal .schedule-info,
html[data-theme="dark"] .bulk-action-panel .bulk-tab:hover:not(.active),
html[data-theme="dark"] .bulk-action-panel .bulk-filters-toggle:hover,
html[data-theme="dark"] .bulk-action-panel .quick-select-btn:hover { background: var(--primary-light); }

html[data-theme="dark"] .btn-decline,
html[data-theme="dark"] .inbox-card-btn-decline {
  background: var(--danger-bg);
  border-color: var(--danger-text);
  color: var(--danger-text);
}

html[data-theme="dark"] .btn-decline:hover,
html[data-theme="dark"] .inbox-card-btn-decline:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
/* attention (amber) + danger washes -> semantic tokens */
html[data-theme="dark"] .bulk-attention {
  background: var(--warning-bg);
  border-color: var(--warning-text);
  color: var(--warning-text);
}
html[data-theme="dark"] .bulk-attention-danger {
  background: var(--danger-bg);
  border-color: var(--danger-text);
  color: var(--danger-text);
}
html[data-theme="dark"] .schedule-transfer-modal .schedule-info { border-color: var(--border); }

/* kpi.css — most cards already read var(--surface); the literal islands are the
   pipeline tile (#fff) and the green/yellow/red health washes. The health washes
   are SEMANTIC status encodings -> remap to the dark status-bg/-text tokens so
   they stay legible (not flattened to a neutral surface). */
html[data-theme="dark"] .dashboard-pipeline-tile {
  background: var(--surface-2);
  border-color: var(--border);
}
html[data-theme="dark"] .dashboard-pipeline-code {
  background: color-mix(in srgb, var(--pipeline-color) 22%, var(--surface));
}
html[data-theme="dark"] .dashboard-health-signal.green,
html[data-theme="dark"] .dashboard-health-overall.green {
  background: var(--success-bg); color: var(--success-text);
}
html[data-theme="dark"] .dashboard-health-signal.yellow,
html[data-theme="dark"] .dashboard-health-overall.yellow {
  background: var(--warning-bg); color: var(--warning-text);
}
html[data-theme="dark"] .dashboard-health-signal.red,
html[data-theme="dark"] .dashboard-health-overall.red {
  background: var(--danger-bg); color: var(--danger-text);
}

/* -----------------------------------------------------------------------------
   FAMILY: Email tracking  (wwwroot/css/email-tracking.css)
   Driven by --email-* on .email-tracking-page plus many hardcoded literals.
   Remap the local vars, then mop up the literals not covered by a var.
   --------------------------------------------------------------------------- */
/* Step 1: remap the local vars (handles --surface panels' borders + muted/soft). */
html[data-theme="dark"] .email-tracking-page {
  --email-panel-border: var(--border);
  --email-muted-bg: var(--surface-2);
  --email-soft-orange: var(--primary-light);
}
/* Step 2: headings + blue-gray meta text literals (#111827/#475467/#667085/
   #1f2937/#64748b/#94a3b8/#334155/#0f172a) that aren't bound to a var. */
html[data-theme="dark"] .email-thread-list-title h2,
html[data-theme="dark"] .email-thread-detail-header h2,
html[data-theme="dark"] .email-tracking-side-panel h2,
html[data-theme="dark"] .email-compose-header h2,
html[data-theme="dark"] .email-message-body,
html[data-theme="dark"] .email-body-content,
html[data-theme="dark"] .email-thread-row-top strong,
html[data-theme="dark"] .email-recipient-label,
html[data-theme="dark"] .email-outbox-subject a { color: var(--text); }
html[data-theme="dark"] .email-count-pill,
html[data-theme="dark"] .email-filter,
html[data-theme="dark"] .email-search i,
html[data-theme="dark"] .email-search input,
html[data-theme="dark"] .email-thread-row-top span,
html[data-theme="dark"] .email-thread-preview,
html[data-theme="dark"] .email-thread-meta,
html[data-theme="dark"] .email-confirm-body,
html[data-theme="dark"] .email-quick-reply-label-inline,
html[data-theme="dark"] .email-outbox-empty,
html[data-theme="dark"] .email-followup-empty { color: var(--text-secondary); }
/* Step 3: hardcoded white surfaces / light input + filter borders. */
html[data-theme="dark"] .email-search input,
html[data-theme="dark"] .email-quick-reply-to,
html[data-theme="dark"] .email-quick-reply-cc,
html[data-theme="dark"] .email-quick-reply-body,
html[data-theme="dark"] .email-confirm-modal,
html[data-theme="dark"] .email-quick-reply-card,
html[data-theme="dark"] .email-thread-detail,
html[data-theme="dark"] .email-tracking-page .form-control {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* neutral source/status badge (#eef2f7) -> --surface-2; the colored is-overdue/
   is-replied/is-draft status variants stay semantic and are NOT listed. */
html[data-theme="dark"] .email-source-badge,
html[data-theme="dark"] .email-status-badge {
  background: var(--surface-2);
  color: var(--text-secondary);
}
/* neutral "outbound" sender avatar circle (#eef2f7) -> --surface-3. The warm
   inbound (#ffe5d2) + yellow system (#fff3cc) avatars are intentionally tinted
   and are left as-is. */
html[data-theme="dark"] .email-avatar.is-outbound {
  background: var(--surface-3);
  color: var(--text);
}
/* the page's many small white controls (selects / chips / toggles / compose
   fields / outbox chips+cards / links) -> --input-bg surface + --border. */
html[data-theme="dark"] .email-timer-relative-inputs select,
html[data-theme="dark"] .email-preset-chip,
html[data-theme="dark"] .email-source-filter select,
html[data-theme="dark"] .email-modal-mode-toggle,
html[data-theme="dark"] .email-modal-preset,
html[data-theme="dark"] .email-compose-field textarea,
html[data-theme="dark"] .email-compose-scheduled-at,
html[data-theme="dark"] .email-followup-link,
html[data-theme="dark"] .email-outbox-chip,
html[data-theme="dark"] .email-outbox-card,
html[data-theme="dark"] .email-outbox-filter-field select,
html[data-theme="dark"] .email-side-open-claim,
html[data-theme="dark"] .email-thread-toggle-btn,
html[data-theme="dark"] .email-followup-tab,
html[data-theme="dark"] .email-outbox-tab {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text-secondary);
}
/* their warm #fff7ea hover/active washes -> brand tint (kept warm, not white). */
html[data-theme="dark"] .email-thread-toggle-btn:hover,
html[data-theme="dark"] .email-preset-chip:hover,
html[data-theme="dark"] .email-followup-link:hover,
html[data-theme="dark"] .email-side-open-claim:hover,
html[data-theme="dark"] .email-followup-tab.is-active,
html[data-theme="dark"] .email-outbox-tab.is-active,
html[data-theme="dark"] .email-outbox-link:hover { background: var(--primary-light); }
html[data-theme="dark"] .email-filter {
  background: var(--surface-2);
  border-color: var(--border);
}
/* thread-row default text (#344054) + the #f6f7f9 hover/active wash. */
html[data-theme="dark"] .email-thread-row { color: var(--text-secondary); }
html[data-theme="dark"] .email-thread-row:hover,
html[data-theme="dark"] .email-thread-row.is-active,
html[data-theme="dark"] .email-followup-row:hover,
html[data-theme="dark"] .email-outbox-row:hover { background: var(--hover-bg); }
/* (.is-active keeps its inset orange accent bar — that rule is untouched.) */
/* .email-filter.is-active (#111827 dark fill + white text) reads fine on dark and
   is an intentional active state — left untouched. status / followup / outbox /
   tab pills stay semantic — explicitly NOT overridden. */

/* -----------------------------------------------------------------------------
   FAMILY: MTPL statistics  (wwwroot/css/mtpl-statistics.css)
   Driven by --stats-* on .stats-page. Remap surface/border/text vars; the
   column-group colors (--stats-g1..g7) + matrix header fills are INTENTIONAL
   data-encoding colors and are left as-is.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .stats-page {
  --stats-bg: var(--bg);
  --stats-surface: var(--surface);
  --stats-border: var(--border);
  --stats-text: var(--text);
  --stats-text-muted: var(--text-secondary);
}
/* The .stats-table head/body, .composer-field/.composer-input, .stats-summary-
   badge etc. all read var(--stats-surface|border|text|text-muted) -> covered by
   the remap above. Mop up the literal stragglers: the #fafaf8 row hover and the
   #fffef5 warm inline-edit input. */
html[data-theme="dark"] .stats-table tbody tr:hover { background: var(--hover-bg); }
html[data-theme="dark"] .stats-inline-input {
  background: var(--input-bg);
  color: var(--text);
}
html[data-theme="dark"] .composer-btn-secondary:hover { background: var(--hover-bg); }
/* row-mismatch (#fde2e2 / #fbcfcf) is an intentional error highlight -> danger. */
html[data-theme="dark"] .stats-table tbody tr.row-mismatch td,
html[data-theme="dark"] .stats-table tbody tr.row-mismatch:hover td { background: var(--danger-bg); }
/* the column-group --stats-g1..g7 header colors + the dark tooltip chip
   (#1f2330, already dark) are intentional -> left untouched. */

/* -----------------------------------------------------------------------------
   FAMILY: MTPL liable invoices  (wwwroot/css/mtpl-liable-invoices.css)
   Defines --mtpl-* on :root (light values). Re-point them under dark, scoped to
   the page wrapper so light :root is untouched. Brand orange + soft/line accents
   and the colored stage pills stay as-is.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .mtpl-liable-shell {
  --mtpl-surface: var(--surface);
  --mtpl-border: var(--border);
  --mtpl-text: var(--text);
  --mtpl-muted: var(--text-secondary);
  --mtpl-soft: var(--surface-2);
  /* semantic tonal washes used by the alert/success/danger strips: keep tonal
     (NOT flattened) but move off the light hex so they aren't light islands. */
  --mtpl-warning-soft: var(--warning-bg);
  --mtpl-success-soft: var(--success-bg);
  --mtpl-danger-soft: var(--danger-bg);
}
/* the strips also hardcode their TEXT (#7a5a14 / #1f5333) -> semantic text. */
html[data-theme="dark"] .mtpl-liable-shell .mtpl-alert-strip,
html[data-theme="dark"] .mtpl-liable-shell .mtpl-liable-message,
html[data-theme="dark"] .mtpl-liable-shell .mtpl-success-strip.mtpl-success-strip-mixed { color: var(--warning-text); border-color: var(--warning-text); }
html[data-theme="dark"] .mtpl-liable-shell .mtpl-success-strip { color: var(--success-text); border-color: var(--success-text); }
html[data-theme="dark"] .mtpl-liable-shell .mtpl-liable-message.error { color: var(--danger-text); border-color: var(--danger-text); }
/* The .mtpl-modal-dialog / .mtpl-mode-option / .mtpl-card surfaces all read
   var(--mtpl-surface|border|text), so the remap above covers them. Mop up the
   few literal stragglers: the white recipient input + #fafafb zebra rows.
   (.recipient-pill #eef2ff is a semantic info pill -> left as-is.) */
html[data-theme="dark"] .mtpl-liable-shell .mtpl-recipient-input,
html[data-theme="dark"] .mtpl-liable-shell input[type="text"],
html[data-theme="dark"] .mtpl-liable-shell input[type="search"],
html[data-theme="dark"] .mtpl-liable-shell textarea,
html[data-theme="dark"] .mtpl-liable-shell select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .mtpl-liable-shell .mtpl-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .mtpl-liable-shell tr.zebra { background: var(--surface-2); }

/* -----------------------------------------------------------------------------
   FAMILY: Claim assignment  (wwwroot/css/claim-assignment.css)
   This file is almost entirely token-driven (.ca-bulk-toolbar / .assignment-
   report-card / .ca-config-* etc. already read var(--surface|border|text)), so
   it auto-adapts. The only literal islands are the amber "sunset"/"ooo" strips,
   which are SEMANTIC notices -> remap to the warning tokens (kept warm/legible,
   not flattened). Fairness-cell rgba(0,0,0,.08) hairlines are left (subtle).
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .claim-assignment-sunset-banner {
  background: var(--warning-bg);
  color: var(--warning-text);
}
html[data-theme="dark"] .claim-assignment-ooo-strip {
  background: var(--warning-bg);
  border-color: var(--warning-text);
  color: var(--warning-text);
}

/* -----------------------------------------------------------------------------
   FAMILY: Admin — Insurer reminders  (wwwroot/css/admin-reminders.css)
   Mostly token-driven already; the alert blocks are semantic. Remap white
   panels, light pills/toolbars (#f8fafc + #d0d5dd) and the activity drawer.
   --------------------------------------------------------------------------- */
/* main cards (.insurer-reminder-branch-card / -log-card) already use --surface.
   White inputs / inline buttons / filter controls -> --input-bg + --input-border. */
html[data-theme="dark"] .reminder-edit-button,
html[data-theme="dark"] .reminder-inline-input,
html[data-theme="dark"] .reminder-inline-cancel,
html[data-theme="dark"] .reminder-filter-mode,
html[data-theme="dark"] .reminder-filter-select,
html[data-theme="dark"] .reminder-filter-helper,
html[data-theme="dark"] .safety-banner-field input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
/* white modal + side drawer surfaces -> --surface (their #-hex scrims handled by
   the shared .modal-overlay rule where the class matches; explicit here too). */
html[data-theme="dark"] .reminders-confirm-modal,
html[data-theme="dark"] .branch-config-drawer,
html[data-theme="dark"] .branch-config-drawer-head {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* light-gray dashed empty-state + card footer -> --surface-2 */
html[data-theme="dark"] .branch-empty-state,
html[data-theme="dark"] .branch-card-footer { background: var(--surface-2); }
/* neutral status pill surface/border -> tokens (the colored *-dot stays semantic). */
html[data-theme="dark"] .reminders-activity-chip,
html[data-theme="dark"] .reminders-status-pill.status-previewed,
html[data-theme="dark"] .reminders-status-pill.status-skipped {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-secondary);
}
/* the colored per-status reminders-*-pill variants (sent/drafted/acknowledged/
   failed) stay SEMANTIC — NOT overridden. */
/* safety banner tonal variants: light hex bg + dark text -> dark semantic tokens
   (kept tonal/legible, not flattened to a neutral surface). */
html[data-theme="dark"] .insurer-reminders-safety-banner.safety-tone-info,
html[data-theme="dark"] .branch-chip.info {
  background: var(--info-bg); color: var(--info-text); border-color: var(--info-text);
}
html[data-theme="dark"] .insurer-reminders-safety-banner.safety-tone-warning,
html[data-theme="dark"] .branch-chip.warning {
  background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-text);
}
html[data-theme="dark"] .branch-chip.live {
  background: var(--primary-light); color: var(--primary-text);
}
html[data-theme="dark"] .insurer-reminders-safety-banner.safety-tone-danger,
html[data-theme="dark"] .branch-chip.danger,
html[data-theme="dark"] .insurer-reminders-alert.danger {
  background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-text);
}
html[data-theme="dark"] .insurer-reminders-alert.success {
  background: var(--success-bg); color: var(--success-text); border-color: var(--success-text);
}
html[data-theme="dark"] .insurer-reminders-alert.warning {
  background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-text);
}
/* neutral chips + the neutral preview-stat card + inline code chips + config
   items -> --surface-2. */
html[data-theme="dark"] .branch-chip.paused,
html[data-theme="dark"] .branch-chip.neutral,
html[data-theme="dark"] .branch-preview-stat,
html[data-theme="dark"] .branch-card-code code,
html[data-theme="dark"] .branch-config-value code,
html[data-theme="dark"] .branch-config-item {
  background: var(--surface-2);
  color: var(--text-secondary);
}
/* (.insurer-reminders-alert success/warning/danger washes + .safety-tone-danger
   reuse the same hex pattern; the danger banner is handled by its own tonal rule
   in admin-reminders via --danger; left tonal.) */

/* -----------------------------------------------------------------------------
   FAMILY: Admin — Insurers directory  (wwwroot/css/admin-insurers.css)
   Token-driven toolbar/cards already adapt; mop up the literal #f8fafc/#fafafa
   table surfaces, #d0d5dd pill borders and #344054 pill text.
   --------------------------------------------------------------------------- */
/* (.insurers-drawer / .insurers-toolbar / .insurers-result-count already use
   --surface.) Light table headers + sub-surfaces -> --surface-2. */
html[data-theme="dark"] .insurers-table th,
html[data-theme="dark"] .insurers-contacts-table th,
html[data-theme="dark"] .insurers-contact-row-inactive,
html[data-theme="dark"] .insurers-readonly-grid > div,
html[data-theme="dark"] .insurers-contact-form,
html[data-theme="dark"] .insurers-usage-pipeline-list div { background: var(--surface-2); }
/* zebra / icon-button hover washes -> --hover-bg */
html[data-theme="dark"] .insurers-row:hover,
html[data-theme="dark"] .insurers-icon-button:hover { background: var(--hover-bg); }
/* neutral badge + chip pill surface/border -> tokens (their colored variants,
   e.g. .insurers-badge-warning #fff7ed, stay semantic and are NOT listed). */
html[data-theme="dark"] .insurers-badge,
html[data-theme="dark"] .insurers-chip {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   FAMILY: COBX directory  (wwwroot/css/cobx-directory.css)
   Token-driven cells adapt; neutralise the translucent-white sticky toolbar,
   #fbfcfd zebra rows, #f8fafc/#fafafa/#f8f9fb sub-surfaces and #fff modals.
   The colored .cobx-kind-chip[data-kind] chips are semantic and left as-is.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .cobx-toolbar {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
/* table header / zebra / footer / summary sub-surfaces -> --surface-2 */
html[data-theme="dark"] .cobx-table th,
html[data-theme="dark"] .cobx-footer,
html[data-theme="dark"] .cobx-relation-footer,
html[data-theme="dark"] .cobx-drawer-summary > div,
html[data-theme="dark"] .cobx-import-grid > div,
html[data-theme="dark"] .cobx-selected-target,
html[data-theme="dark"] .cobx-inactive-pill,
html[data-theme="dark"] .cobx-relation-item--inactive { background: var(--surface-2); }
/* hover washes -> --hover-bg */
html[data-theme="dark"] .cobx-table tbody tr:hover,
html[data-theme="dark"] .cobx-icon-button:hover,
html[data-theme="dark"] .cobx-mini-button:hover,
html[data-theme="dark"] .cobx-relation-item:hover,
html[data-theme="dark"] .cobx-target-option:hover,
html[data-theme="dark"] .cobx-target-option.selected { background: var(--hover-bg); }
/* white floating surfaces -> --surface */
html[data-theme="dark"] .cobx-relation-item,
html[data-theme="dark"] .cobx-multi-popover,
html[data-theme="dark"] .cobx-multi-popover input[type="search"],
html[data-theme="dark"] .cobx-multi-option input[type="checkbox"] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* progress track -> neutral surface-3 */
html[data-theme="dark"] .cobx-import-progress-track { background: var(--surface-3); }
/* light pill border + text on the neutral .cobx-badge -> tokens (its colored
   dot ::before stays semantic). */
html[data-theme="dark"] .cobx-badge {
  background: var(--surface-2);
  border-color: var(--border);
}
/* success / error toasts -> semantic tokens */
html[data-theme="dark"] .cobx-toast {
  background: var(--success-bg);
  border-color: var(--success-text);
}
html[data-theme="dark"] .cobx-toast.error {
  background: var(--danger-bg);
  border-color: var(--danger-text);
}
/* .cobx-kind-chip[data-kind] + contact badges stay semantic — NOT overridden. */

/* -----------------------------------------------------------------------------
   FAMILY: Admin — misc (invoice-settings / mass-mailing / agreement-settings /
   claim-section-layout). These files already read var(--surface|border|text|…)
   with light hex fallbacks, so they auto-adapt under dark. Only their few
   hardcoded-white literals need help.
   --------------------------------------------------------------------------- */
/* mass-mailing: white recipient-card states + template/skip swatches. */
html[data-theme="dark"] .mm-rcp-card.is-skipped { background: var(--surface-2); }
html[data-theme="dark"] .mm-sw-tpl { background: var(--primary-light); border-color: var(--border); }
html[data-theme="dark"] .mm-sw-skp { background: var(--surface-2); border-color: var(--border); }
/* invoice-settings: the white Saskaita123 config card forced bg. */
html[data-theme="dark"] .invsettings-s123-card,
html[data-theme="dark"] .invsettings-panel,
html[data-theme="dark"] .invsettings-modal { background: var(--surface); border-color: var(--border); color: var(--text); }

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD FAMILY — DARK TEXT CONTRAST (2026-06-07)
   dashboard/*.css hard-codes near-black text (#1f2937/#344054/#111827
   primary; #475467/#6b7280/#5B6370 secondary) with no dark override →
   ~1.2:1 on dark. primary→--text, secondary→--text-secondary. Every
   individual selector is html[data-theme="dark"]-gated → light 1:1.
   Accent colours (blue/green/orange/red) are intentionally left.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .date-number,
html[data-theme="dark"] .cal-reminder-item,
html[data-theme="dark"] .hive-toast-message strong,
html[data-theme="dark"] .hive-toast-undo:hover,
html[data-theme="dark"] .hive-toast-close:hover,
html[data-theme="dark"] .reminder-modal .modal-header h2,
html[data-theme="dark"] .reminder-modal .form-row label,
html[data-theme="dark"] .reminder-modal .form-row input[type="text"],
html[data-theme="dark"] .reminder-modal .form-row textarea,
html[data-theme="dark"] .reminder-modal .form-row select,
html[data-theme="dark"] .reminder-modal .autocomplete-toggle:hover,
html[data-theme="dark"] .reminder-modal .autocomplete-clear:hover,
html[data-theme="dark"] .reminder-modal .autocomplete-item,
html[data-theme="dark"] .reminder-modal .btn-cancel,
html[data-theme="dark"] .reminder-detail-modal .btn-close-modal,
html[data-theme="dark"] .reminder-detail-modal .detail-row-content,
html[data-theme="dark"] .reminder-detail-modal .detail-row-primary,
html[data-theme="dark"] .reminder-detail-modal .detail-row-secondary,
html[data-theme="dark"] .reminder-detail-modal #viewReminderClaimContent a,
html[data-theme="dark"] .reminder-detail-modal #viewReminderPriority,
html[data-theme="dark"] .transfer-single-modal .modal-header h2,
html[data-theme="dark"] .transfer-single-modal .transfer-single-info,
html[data-theme="dark"] .transfer-single-modal .transfer-single-heading,
html[data-theme="dark"] .transfer-table-title,
html[data-theme="dark"] .transfer-inbox-from-cell,
html[data-theme="dark"] .transfer-inbox-date-cell,
html[data-theme="dark"] .incoming-transfer-note,
html[data-theme="dark"] .schedule-form-row label,
html[data-theme="dark"] .schedule-reminder-title,
html[data-theme="dark"] .schedule-reminder-meta-label,
html[data-theme="dark"] .schedule-reminder-meta-value,
html[data-theme="dark"] .bulk-action-panel .modal-header h2,
html[data-theme="dark"] .bulk-action-panel .bulk-field input,
html[data-theme="dark"] .bulk-action-panel .select-wrapper select,
html[data-theme="dark"] .bulk-action-panel #rescheduleNewTime,
html[data-theme="dark"] .bulk-action-panel .reschedule-section-label,
html[data-theme="dark"] .bulk-action-panel .reschedule-keep-times-label,
html[data-theme="dark"] .bulk-action-panel .bulk-footer-info span,
html[data-theme="dark"] .bulk-action-panel .btn-cancel,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row label,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row select,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row textarea,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row .colleague-autocomplete-input,
html[data-theme="dark"] .colleague-autocomplete-clear:hover,
html[data-theme="dark"] .rail-card-header h2,
html[data-theme="dark"] .inbox-card-title,
html[data-theme="dark"] .claim-card-number,
html[data-theme="dark"] .quick-action-transfer,
html[data-theme="dark"] .dashboard-header-copy h1,
html[data-theme="dark"] .handler-stat-value,
html[data-theme="dark"] .overview-name,
html[data-theme="dark"] .overview-stat-value,
html[data-theme="dark"] .cal-nav-btn,
html[data-theme="dark"] .cal-nav-title,
html[data-theme="dark"] .day-timeline-header,
html[data-theme="dark"] .day-reminder-title,
html[data-theme="dark"] .cal-reminder-info-title,
html[data-theme="dark"] .cal-day-header { color: var(--text); }
/* HIVE-508 — inline completion is a button now; themed like the other
   secondary pills (light hover would glare in dark). */
html[data-theme="dark"] .btn-mark-complete {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text);
}
html[data-theme="dark"] .btn-mark-complete:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--text);
}
/* HIVE-504 — .priority-normal/.priority-high removed from the group above:
   recoloring their ink to var(--text) made the light brand fills illegible.
   Their dark treatment lives in the dedicated priority block further down. */
html[data-theme="dark"] .cal-month-header,
html[data-theme="dark"] .date-day-label,
html[data-theme="dark"] .hive-toast-message small,
html[data-theme="dark"] .hive-toast-undo,
html[data-theme="dark"] .hive-toast-close,
html[data-theme="dark"] .reminder-modal .form-row input::placeholder,
html[data-theme="dark"] .reminder-modal .form-row textarea::placeholder,
html[data-theme="dark"] .reminder-modal .form-row select:invalid,
html[data-theme="dark"] .reminder-modal .autocomplete-toggle,
html[data-theme="dark"] .reminder-modal .autocomplete-clear,
html[data-theme="dark"] .reminder-modal .btn-close-modal,
html[data-theme="dark"] .reminder-detail-modal .btn-icon,
html[data-theme="dark"] .reminder-detail-modal .detail-row-icon,
html[data-theme="dark"] .transfer-single-modal .transfer-single-subtitle,
html[data-theme="dark"] .transfer-single-modal .transfer-single-meta,
html[data-theme="dark"] .transfer-inbox-empty,
html[data-theme="dark"] .transfer-table-subtitle,
html[data-theme="dark"] .transfer-table-note-snippet,
html[data-theme="dark"] .transfer-table-empty,
html[data-theme="dark"] .schedule-reminder-meta-row,
html[data-theme="dark"] .schedule-reminder-meta-dot,
html[data-theme="dark"] .bulk-action-panel .btn-close-modal,
html[data-theme="dark"] .bulk-action-panel .bulk-field input::placeholder,
html[data-theme="dark"] .bulk-action-panel #rescheduleNewTime::placeholder,
html[data-theme="dark"] .bulk-action-panel .bulk-table thead th,
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody td,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-title-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-date-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-claim-cell,
html[data-theme="dark"] .bulk-action-panel .reschedule-keep-times small,
html[data-theme="dark"] .bulk-action-panel .quick-select-btn,
html[data-theme="dark"] .bulk-action-panel .bulk-footer-info,
html[data-theme="dark"] .colleague-autocomplete-clear,
html[data-theme="dark"] .rail-card-eyebrow,
html[data-theme="dark"] .inbox-tab,
html[data-theme="dark"] .inbox-tab span,
html[data-theme="dark"] .transfer-rail-list:empty::before,
html[data-theme="dark"] .inbox-card-meta,
html[data-theme="dark"] .inbox-card-desc,
html[data-theme="dark"] .claim-card-desc,
html[data-theme="dark"] .claim-card-time,
html[data-theme="dark"] .handler-stat-head,
html[data-theme="dark"] .handler-stat-unit,
html[data-theme="dark"] .handler-stat-foot,
html[data-theme="dark"] .handler-stat-sublabel,
html[data-theme="dark"] .overview-role,
html[data-theme="dark"] .overview-stat-label,
html[data-theme="dark"] .cal-today-btn,
html[data-theme="dark"] .day-timeline-header .event-count,
html[data-theme="dark"] .day-empty-state,
html[data-theme="dark"] .day-slot-time,
html[data-theme="dark"] .day-reminder-claim,
html[data-theme="dark"] .cal-reminder-info-claim,
html[data-theme="dark"] .cal-month-claim,
html[data-theme="dark"] .day-reminder-notes,
html[data-theme="dark"] .cal-reminder-info-desc,
html[data-theme="dark"] .pending-outgoing-status,
html[data-theme="dark"] .day-reminder-card.completed .day-reminder-title,
html[data-theme="dark"] .day-reminder-card.completed .day-reminder-claim,
html[data-theme="dark"] .day-reminder-card.completed .day-reminder-notes,
html[data-theme="dark"] .cal-reminder-row.completed .cal-reminder-info-title,
html[data-theme="dark"] .cal-reminder-row.completed .cal-reminder-info-claim,
html[data-theme="dark"] .cal-reminder-row.completed .cal-reminder-info-desc,
html[data-theme="dark"] .cal-day-header .event-count,
html[data-theme="dark"] .cal-reminder-time,
html[data-theme="dark"] .cal-reminder-empty { color: var(--text-secondary); }

/* Claims header tab counts (.claims-tab-count): on INACTIVE (dark) tabs the
   pill bg rgba(0,0,0,.1) vanishes on dark, leaving the count text low-contrast —
   give it a light translucent pill + bright text. But the ACTIVE tab is GOLD
   (var(--gold) var(--gold, #F8A900)) with BLACK text in BOTH themes, so its count must stay
   DARK on a dark-translucent pill (matching the active label + light mode) —
   light text there is the ~1.2:1 bug. Light untouched. */
html[data-theme="dark"] .claims-tab-count,
html[data-theme="dark"] .list-filter-chip-count {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
}
html[data-theme="dark"] .claims-tab.active .claims-tab-count,
html[data-theme="dark"] .list-filter-chip.active .list-filter-chip-count {
    background: rgba(0, 0, 0, 0.15);
    color: #000;
}
/* #449 — the pale-yellow inactive pill (#FEF2D9, site.css) would be a light island
   with light-gray text in dark; use a translucent gold tint instead so
   var(--text-secondary) stays readable. Active/hover keep the gold + black look. */
html[data-theme="dark"] .claims-header-tabs .claims-tab:not(.active):not(:hover),
html[data-theme="dark"] .list-filter-chip:not(.active):not(:hover) {
    background: rgba(255, 208, 116, 0.10);
}

/* ── Final handoff: claim quick-action modal + landing-card dark contrast ─────── */
/* HIVE-504 — High/Urgent keep their accessible brand fills in both themes.
   Only Normal changes in dark mode, through the shared dashboard tokens, so
   every calendar/modal/transfer rendering consumes the same palette. */
html[data-theme="dark"] {
    --dashboard-priority-normal-bg: rgba(255, 208, 116, 0.14);
    --dashboard-priority-normal-text: var(--text);
    --dashboard-priority-normal-border: var(--border);
}
html[data-theme="dark"] .priority-completed {
    background: var(--success-bg); color: var(--success-text); border-color: var(--success-bg);
}

/* Landing cards (site.css .activity-landing-card, reused by ActivityHistory /
   Admin / Assets): h2 hard-codes #201B16 (near-black, ~1.0:1 on dark) and p #666.
   The gold icon on its #201B16 chip already reads; just fix the text. */
html[data-theme="dark"] .activity-landing-card h2 { color: var(--text); }
html[data-theme="dark"] .activity-landing-card p { color: var(--text-secondary); }
html[data-theme="dark"] .activity-landing-card-icon { background: var(--surface-2); }

/* =============================================================================
   CLAIM DARK CONTRAST FOUNDATION (2026-07-13)
   Shared contracts used by the claim-form/detail feature layers.  These rules
   are dark-gated; the light render remains unchanged.
   ============================================================================= */

/* Text-bearing brand controls use the accessible ink token.  Decorative orange
   dots/rails are intentionally not included. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-primary-outline:hover,
html[data-theme="dark"] .status-modal-footer .status-modal-confirm,
html[data-theme="dark"] .claims-create-btn,
html[data-theme="dark"] .claims-wizard-pill-tab.active,
html[data-theme="dark"] .btn-create-pill:hover,
html[data-theme="dark"] .btn-create-pill:focus-visible,
html[data-theme="dark"] .btn-get-location:hover,
html[data-theme="dark"] .location-plain-text-btn:hover,
html[data-theme="dark"] .btn-toggle-map:hover,
html[data-theme="dark"] .btn-cost-type-chip.active,
html[data-theme="dark"] .btn-additional-cost-chip.active,
html[data-theme="dark"] .btn-dp-cost-chip.active,
html[data-theme="dark"] .ui-timepicker-list li.ui-timepicker-selected,
html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.startRange,
html[data-theme="dark"] .flatpickr-day.endRange {
  color: var(--on-primary) !important;
}
.mobile-bug-tracker-menu-item {
  display: none !important;
}

/* Small solid-orange claim/email controls use the same readable ink-on-brand
   contract as primary buttons; white on the approved orange does not reach AA. */
.claim-subtype-pill,
.claim-email-modal .email-modal-check input:checked + .email-modal-checkmark {
  color: var(--on-primary) !important;
}

html[data-theme="dark"] :where(
  .btn-primary:disabled,
  .btn-primary[aria-disabled="true"],
  .cma-btn-primary:disabled,
  .assistant-send-btn:disabled
) {
  background: #4a3d30 !important;
  border-color: var(--component-border) !important;
  color: var(--placeholder-text) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

html[data-theme="dark"] .theme-opt.is-active,
html[data-theme="dark"] .header-icon-btn .badge,
html[data-theme="dark"] .tab-count,
html[data-theme="dark"] .claims-count,
html[data-theme="dark"] .claims-wizard-pipeline-badge,
html[data-theme="dark"] .pipeline-prefix-badge,
html[data-theme="dark"] .transfer-reminder-pill {
  color: var(--on-primary) !important;
}

html[data-theme="dark"] .skip-link {
  color: var(--on-primary);
  outline-color: var(--focus-indicator);
}

/* A few destructive confirmation buttons reuse .btn-primary but replace only
   its fill inline with #dc2626.  Preserve white on that darker red (4.8:1)
   rather than inheriting the orange-specific ink foreground. */
html[data-theme="dark"] :where(
  #claimAttachmentDeleteSubmit,
  #claimAttachmentLeaveSubmit,
  .btn-primary.js-unsaved-leave,
  .btn-primary[style*="#dc2626" i]
) {
  color: #fff !important;
}
html[data-theme="dark"] :where(.btn-danger-outline, .btn-outline-danger) {
  color: var(--danger-text) !important;
  border-color: var(--danger-text) !important;
}

/* A readable placeholder is still visually secondary to entered text. */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .hive-combobox-input::placeholder,
html[data-theme="dark"] .cmb-chip-popover-search::placeholder {
  color: var(--placeholder-text) !important;
  opacity: 1;
}

/* Shared keyboard indicator.  a11y.css intentionally owns the generic light
   ring; this higher-specificity dark contract replaces low-contrast neutral
   rings used by nav and wizard controls. */
html[data-theme="dark"] :where(
  a, button, input, select, textarea, [role="button"], [role="option"],
  [role="tab"], [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--focus-indicator) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(20, 17, 13, .88) !important;
}

/* Inputs that deliberately remove their own outline retain a strong inset
   component edge plus the outer keyboard cue. */
html[data-theme="dark"] :where(input, select, textarea):focus-visible {
  border-color: var(--focus-indicator) !important;
}

/* Dark native form controls and predictable unchecked boundaries. */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  accent-color: var(--primary);
}
html[data-theme="dark"] :where(.claims-wizard-checkbox, .claims-wizard-radio) input:not(:checked) {
  border-color: var(--control-border);
}

/* Shared disabled/read-only contract.  Feature layers can flatten a read-only
   Details value, but must not dim its content below AA. */
html[data-theme="dark"] :where(input, select, textarea):disabled,
html[data-theme="dark"] :where(input, select, textarea)[readonly] {
  color: var(--disabled-text);
  -webkit-text-fill-color: var(--disabled-text);
  opacity: 1;
}

/* Global active navigation: a dark brand wash, plus a persistent left marker so
   current location does not depend on fill colour alone. */
html[data-theme="dark"] body[data-restyle] .nav-item.active:not(.sub-item) {
  background: rgba(248, 169, 0, .16) !important;
  color: #ffe59a !important;
  box-shadow: inset 3px 0 0 #f8a900;
}
html[data-theme="dark"] body[data-restyle] .nav-item.active:not(.sub-item) .nav-icon {
  stroke: #ffe59a !important;
}
html[data-theme="dark"] body[data-restyle] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill {
  fill: #ffe59a !important;
}
html[data-theme="dark"] body[data-restyle] .nav-item.active:not(.sub-item) > .fas,
html[data-theme="dark"] body[data-restyle] .nav-item.active:not(.sub-item) > .fa-solid,
html[data-theme="dark"] body[data-restyle] .nav-item.active:not(.sub-item) .fa-user-shield {
  color: #ffe59a !important;
}

/* Floating chrome needs a component edge, not the quiet page hairline. */
html[data-theme="dark"] .scroll-fab,
html[data-theme="dark"] .sidebar-contacts-trigger {
  border-color: var(--control-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] {
  scrollbar-color: var(--component-border) var(--surface-2);
}
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-2); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--component-border);
  border: 2px solid var(--surface-2);
}

/* Quick-create vehicle / driver / insured-person overlays (D43).  Both the
   current shared modal IDs and the legacy .quick-create-modal host are covered,
   because claim pipelines can still open either markup path. */
html[data-theme="dark"] .quick-create-modal .modal-dialog,
html[data-theme="dark"] :is(#createVehicleModal, #createDriverModal, #createPersonModal) .modal-content {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--component-border);
  box-shadow: var(--shadow-lg);
}
html[data-theme="dark"] .quick-create-modal :where(.modal-header, .modal-footer),
html[data-theme="dark"] :is(#createVehicleModal, #createDriverModal, #createPersonModal) :where(.modal-header, .modal-footer) {
  background: var(--surface);
  border-color: var(--component-border);
}
html[data-theme="dark"] .quick-create-modal :where(.modal-header h3, .qc-row label, .modal-close),
html[data-theme="dark"] :is(#createVehicleModal, #createDriverModal, #createPersonModal) :where(.modal-header h2, .form-row label, .btn-close-modal) {
  color: var(--text);
}
html[data-theme="dark"] .quick-create-modal :where(.qc-row input, .qc-row select),
html[data-theme="dark"] :is(#createVehicleModal, #createDriverModal, #createPersonModal) .form-row :where(input:not([type="checkbox"]), select, textarea) {
  background: var(--input-bg);
  border-color: var(--control-border);
  color: var(--text);
}
html[data-theme="dark"] .quick-create-modal :where(.qc-row input, .qc-row select):disabled,
html[data-theme="dark"] :is(#createVehicleModal, #createDriverModal, #createPersonModal) .form-row :where(input, select, textarea):disabled {
  background: var(--disabled-bg);
  border-color: var(--component-border);
  color: var(--disabled-text);
  -webkit-text-fill-color: var(--disabled-text);
  opacity: 1;
}
html[data-theme="dark"] .quick-create-modal :where(.qc-row input, .qc-row select):focus-visible,
html[data-theme="dark"] :is(#createVehicleModal, #createDriverModal, #createPersonModal) .form-row :where(input, select, textarea):focus-visible {
  border-color: var(--focus-indicator);
}
html[data-theme="dark"] .quick-create-modal :where(.qc-error, .field-validation-error),
html[data-theme="dark"] :is(#createVehicleModal, #createDriverModal, #createPersonModal) :where(
  #vehicleModalError, #driverModalError, #personModalError, .field-validation-error
) {
  color: var(--danger-text) !important;
}
html[data-theme="dark"] :is(#createVehicleModal, #createDriverModal, #createPersonModal) :where(.btn-cancel, .btn-clear) {
  background: var(--surface-2);
  border-color: var(--control-border);
  color: var(--text);
}

/* ===== source: /css/restyle-preview.css ===== */
/* ════════════════════════════════════════════════════════════════════
   LEFT-SECTION RESTYLE — interactive preview themes (2026-05-31, extended 2026-06-03)
   Dev-only / opt-in. Loaded on /Claims/Details + /Claims/Edit in Development,
   or on test/prod via ?restylepreview=1 (sticky cookie). A floating switcher
   sets three independent attributes on <body>:
     • data-restyle="N"   — section/field/document THEME (1–9; absent = Current)
     • data-dynfields="modern" — render repeating money/cargo blocks as the
                                 modern invoice-table + summary-card look
     • data-cargo="tabs"  — show cargo/vehicle items as a tab strip (JS-built)
   Each is scoped so "Current" (no attribute) is completely untouched.
   Goal (business): all-orange section headers, tighter field spacing, daintier
   Documents cards, and a compact/dense/modern left column with less scroll.
   Overrides the real .cdv-* (Details readonly), .claims-wizard-* (Edit + inline
   editor) and document cards. Orange family: #F47421 / #a95505 / #fff7ed / #fed7aa.

   THEME-AWARE ACCENT TOKENS — the dynamic-fields + tabs layers read these vars
   so their colour follows whichever theme is active. Defaults are the orange
   family; each theme can override them below.
═══════════════════════════════════════════════════════════════════════ */

body {
    /* R5-C5: brand token layer (brandbook Insurance Bee) — shared by the C2/C3 variants. */
    --rsp-brand: #F47421;        /* brand orange (fills only)      */
    --rsp-brand-yellow: #F8A900; /* brand yellow                   */
    --rsp-cream: #EAE7D8;        /* brand off-white / cream        */
    --rsp-ink: #201B16;          /* brand ink / grey               */
    --rsp-accent: #F47421;       /* primary accent fill            */
    --rsp-accent-dark: #a95505;  /* accent text on light surfaces  */
    --rsp-soft: #fff7ed;         /* soft accent-tinted background  */
    --rsp-line: #fed7aa;         /* accent-tinted border           */
    --rsp-line-soft: #e9edf3;    /* neutral hairline border        */
    --rsp-mut: #7a8597;          /* muted label text               */
}
/* R5-C5: under any restyle variant the old PEACH wash/border become a warm CREAM wash + a
   yellow-tint border (kills the off-brand peach). "Current" keeps the peach. */
body[data-restyle] {
    --rsp-soft: #fdf4e3;
    --rsp-line: #f0d9a0;
}

/* ───────────────────────── SHARED BASE (all themes) ───────────────────── */

/* 1) ALL section titles orange — beat the per-section-ID colour rules and
      the inline --cdv-accent on the read-only title pill. */
body[data-restyle] .cdv-section-title { background: #F47421 !important; }
body[data-restyle] .cdv-section-header .cdv-section-number,
body[data-restyle] .claims-wizard-section-number { background: #F47421 !important; color: #fff !important; }
body[data-restyle] .claim-details-v2 .claims-wizard-section-title,
body[data-restyle] .claims-wizard-section-title,
body[data-restyle] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: #a95505 !important; }

/* 2) Compact: tighten read-only definition-list rows + edit form rows. */
body[data-restyle] .cdv-dl { gap: 3px 20px !important; }
body[data-restyle] .cdv-dl dt,
body[data-restyle] .cdv-dl dd { padding: 4px 0 !important; }
body[data-restyle] .cdv-section-body { padding: 14px 18px !important; }
body[data-restyle] .cdv-section { margin-bottom: 10px !important; }
body[data-restyle] .cdv-section-body .cdv-subgroup { margin-bottom: 12px !important; }
body[data-restyle] .claims-wizard-form-row { margin-bottom: 9px !important; }
body[data-restyle] .claims-wizard-section-body { padding-top: 12px !important; padding-bottom: 12px !important; }
/* #431 — the right-rail status card (#cmb-status-card) uniquely wraps its content in a
   .claims-wizard-section-body (for the inline-edit pencil), so the rule above double-padded it
   (~24px top/bottom) vs sibling cards (~12px). Zero that extra padding on the sidebar status card
   ONLY (identified by the .cse-sidebar-section ancestor — no left-column form section has it) so it
   matches its siblings. Higher specificity than the bare rule above → wins. */
body[data-restyle] .cse-sidebar-section .claims-wizard-section-body { padding-top: 0 !important; padding-bottom: 0 !important; }

/* The editable subsection-title band (e.g. "Finansinė informacija" in the inline
   section editor) uses `margin: 4px -24px 0` to span edge-to-edge, ASSUMING the
   section body has ~24px side padding. Restyle themes shrink that padding (theme
   8 → 0, theme 1 → 4px), so the -24px margin over-pulls the band left and the
   section's overflow:hidden clips its first letter. Neutralize the side margins
   under restyle so the band insets within whatever padding the active theme uses
   — never clipped, on any pipeline or variant. */
body[data-restyle] .claims-wizard-subsection-title { margin-left: 0 !important; margin-right: 0 !important; }

/* 3) Daintier Documents — smaller/lighter/thinner cards, small light chevron,
      smaller category title, narrower columns. Applies to both surfaces. */
body[data-restyle] .claims-wizard-upload-grid { gap: 8px !important; }
body[data-restyle] .claims-wizard-upload-box,
body[data-restyle] .attachment-type-card {
    border: 1px solid #eef1f5 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}
body[data-restyle] .attachment-card-header { padding: 8px 12px !important; gap: 8px !important; }
body[data-restyle] .attachment-card-chevron {
    font-size: 9px !important;
    color: #c4c9d4 !important;
    width: 9px !important;
}
body[data-restyle] .attachment-card-title { font-size: 12.5px !important; font-weight: 600 !important; }
body[data-restyle] .attachment-card-file-count { font-size: 10.5px !important; color: #9aa1ad !important; }
body[data-restyle] .attachment-header-upload-btn { transform: scale(0.85); opacity: 0.65; }
body[data-restyle] .attachment-header-upload-btn:hover { opacity: 1; }

/* ───────────────────────── 5 · BRANDED (filled orange headers) ────────── */
/* ── R5-C2 (owner round-5): Branded variants — oranžinė (5, default) + geltona (5g). Section
   headers / number bubbles / left stripes / quick-preview header + the sidebar menu all follow
   the variant accent via these vars. Orange fills anchor on brand #F47421 (white text); yellow on
   #F8A900 (ink #201B16 text) per the brandbook contrast rules. C5 extends this token layer. ── */
body[data-restyle="5"]  { --rsp-accent: #F47421; --rsp-accent-2: #f89150; --rsp-on-accent: #fff;    --rsp-bubble: rgba(255,255,255,.25); --rsp-bubble-fg: #fff;    --rsp-sec-border: #f1e4d6; }
body[data-restyle="5g"] { --rsp-accent: #F8A900; --rsp-accent-2: #ffc233; --rsp-on-accent: #201B16; --rsp-bubble: rgba(32,27,22,.20);   --rsp-bubble-fg: #201B16; --rsp-sec-border: #efe4c9; }

body[data-restyle="5"] .cdv-section, body[data-restyle="5g"] .cdv-section,
body[data-restyle="5"] .claims-wizard-section, body[data-restyle="5g"] .claims-wizard-section { border: 1px solid var(--rsp-sec-border) !important; border-left: 3px solid var(--rsp-accent) !important; border-radius: 11px !important; box-shadow: 0 1px 2px rgba(15,23,42,.05) !important; }
body[data-restyle="5"] .cdv-section-header, body[data-restyle="5g"] .cdv-section-header,
body[data-restyle="5"] .claims-wizard-section-header, body[data-restyle="5g"] .claims-wizard-section-header {
    background: linear-gradient(90deg, var(--rsp-accent), var(--rsp-accent-2)) !important; border-bottom: none !important; padding: 7px 14px !important;
}
body[data-restyle="5"] .cdv-section-title, body[data-restyle="5g"] .cdv-section-title { background: transparent !important; color: var(--rsp-on-accent) !important; }
body[data-restyle="5"] .cdv-section-header .cdv-section-number, body[data-restyle="5g"] .cdv-section-header .cdv-section-number,
body[data-restyle="5"] .claims-wizard-section-number, body[data-restyle="5g"] .claims-wizard-section-number { background: var(--rsp-bubble) !important; color: var(--rsp-bubble-fg) !important; }
body[data-restyle="5"] .claim-details-v2 .claims-wizard-section-title, body[data-restyle="5g"] .claim-details-v2 .claims-wizard-section-title,
body[data-restyle="5"] .claims-wizard-section-title, body[data-restyle="5g"] .claims-wizard-section-title,
body[data-restyle="5"] .claims-wizard-section-title > span:not(.claims-wizard-section-number), body[data-restyle="5g"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-on-accent) !important; }
body[data-restyle="5"] .claims-wizard-section-header .claims-wizard-section-chevron, body[data-restyle="5g"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-on-accent) !important; }
body[data-restyle="5"] .attachment-file-row, body[data-restyle="5g"] .attachment-file-row { background: #fff7ed !important; }

/* ════════════════════════════════════════════════════════════════════════
   DYNAMIC FIELDS — MODERN  (body[data-dynfields="modern"])
   Repeating money rows (payouts / costs) → invoice-style tabular rows inside a
   bordered card; cargo/vehicle blocks → rounded summary cards with a soft
   accent header. Colour follows the active theme via the --rsp-* tokens.
   Purely visual — inputs stay editable, no markup/behaviour change.
═══════════════════════════════════════════════════════════════════════════ */

/* --- payout line-items (edit) --- */
body[data-dynfields="modern"] .claims-wizard-payout-container,
body[data-dynfields="modern"] .additional-costs-container {
    border: 1px solid var(--rsp-line-soft) !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
    /* breathing room before the next form row (Amount reduced sat flush under the card) */
    margin-bottom: 16px !important;
}
body[data-dynfields="modern"] .payout-committed-rows .claims-wizard-payout-row,
body[data-dynfields="modern"] .dp-payout-committed-rows .claims-wizard-payout-row {
    border-bottom: 1px solid #f3f5f9 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Modern committed payout row → invoice line-item. The default row is a
   160px|fields grid with a centered 44px label; promote the inner .payout-fields
   with display:contents so label + amount + date + ✕ become four grid columns
   that line up with the JS-injected header (.rsp-li-head-payout) and total
   footer (.rsp-li-foot-payout) sharing the same template. */
body[data-dynfields="modern"] .claims-wizard-payout-row .claims-wizard-form-row-inline,
body[data-dynfields="modern"] .rsp-li-head-payout,
body[data-dynfields="modern"] .rsp-li-foot-payout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 150px 150px 30px !important;
    align-items: center !important; gap: 6px 10px !important; padding: 8px 12px !important;
}
body[data-dynfields="modern"] .claims-wizard-payout-row .claims-wizard-payout-fields { display: contents !important; }
body[data-dynfields="modern"] .claims-wizard-payout-label {
    display: block !important; width: auto !important; min-width: 0 !important; min-height: 0 !important;
    text-align: left !important; justify-content: flex-start !important; line-height: 1.3 !important;
    position: relative !important; padding-left: 14px !important;
    font-weight: 600 !important; color: #334155 !important; background: transparent !important; border: none !important;
}
body[data-dynfields="modern"] .claims-wizard-payout-label::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: var(--rsp-accent);
}

/* JS-injected line-item header / total footer / per-card amount. These are
   DISPLAY-ONLY nodes (no form inputs) added by buildModern() and removed by
   clearModern(), so submission is unaffected and the toggle reverts cleanly. */
body[data-dynfields="modern"] .rsp-li-head {
    font-size: 10px !important; text-transform: none !important; letter-spacing: .5px !important;
    color: var(--rsp-mut) !important; font-weight: 700 !important; border-bottom: 1px solid var(--rsp-line-soft) !important;
    padding-top: 6px !important; padding-bottom: 6px !important;
}
body[data-dynfields="modern"] .rsp-li-foot {
    border-top: 2px solid var(--rsp-line-soft) !important; font-weight: 700 !important; font-size: 14px !important;
}
body[data-dynfields="modern"] .rsp-li-foot .rsp-li-foot-amt { color: var(--rsp-accent-dark) !important; font-variant-numeric: tabular-nums !important; font-weight: 800 !important; }
body[data-dynfields="modern"] .claims-wizard-cargo-block-header,
body[data-dynfields="modern"] .cdv-cargo-item-header { display: flex !important; align-items: center !important; }
body[data-dynfields="modern"] .rsp-card-amount {
    margin-left: auto !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important;
    color: var(--rsp-accent) !important; font-size: 13px !important; padding-left: 12px !important; white-space: nowrap !important;
}
body[data-dynfields="modern"] .payout-amount,
body[data-dynfields="modern"] .payout-input-amount { font-variant-numeric: tabular-nums !important; font-weight: 700 !important; }
body[data-dynfields="modern"] .btn-add-payout,
body[data-dynfields="modern"] .btn-add-additional-cost,
body[data-dynfields="modern"] .btn-add-cmr-vehicle,
body[data-dynfields="modern"] .btn-add-cmr-standard {
    border: 1px dashed var(--rsp-line) !important;
    background: var(--rsp-soft) !important;
    color: var(--rsp-accent-dark) !important;
    border-radius: 8px !important;
}

/* --- cost rows (edit) → tabular --- */
body[data-dynfields="modern"] .cargo-cost-row {
    border-bottom: 1px solid #f3f5f9 !important; padding: 6px 12px !important; margin: 0 !important;
}
body[data-dynfields="modern"] .damaged-property-cost-rows,
body[data-dynfields="modern"] .payout-committed-rows { background: #fff !important; }

/* --- payout / cost rows (details readonly) → tabular --- */
body[data-dynfields="modern"] .cdv-payout-row {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 7px 12px !important; border-bottom: 1px solid #f3f5f9 !important;
}
body[data-dynfields="modern"] .cdv-payout-value { font-variant-numeric: tabular-nums !important; font-weight: 700 !important; color: var(--rsp-accent-dark) !important; }

/* --- cargo / vehicle items → rounded summary cards w/ soft accent header --- */
body[data-dynfields="modern"] .cargo-item,
body[data-dynfields="modern"] .cdv-cargo-item {
    border: 1px solid var(--rsp-line-soft) !important;
    border-radius: 11px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
}
body[data-dynfields="modern"] .claims-wizard-cargo-block-header,
body[data-dynfields="modern"] .cdv-cargo-item-header {
    background: var(--rsp-soft) !important;
    border-bottom: 1px solid var(--rsp-line) !important;
    padding: 9px 14px !important;
}
body[data-dynfields="modern"] .claims-wizard-cargo-block-title,
body[data-dynfields="modern"] .cdv-cargo-item-header {
    color: var(--rsp-accent-dark) !important; font-weight: 700 !important; font-size: 13px !important;
}
body[data-dynfields="modern"] .cdv-cargo-item-header i { color: var(--rsp-accent) !important; }
body[data-dynfields="modern"] .claims-wizard-cargo-block-body { padding: 13px 14px !important; }

/* ════════════════════════════════════════════════════════════════════════
   CARGO / VEHICLES — TABS  (body[data-cargo="tabs"], strip built by JS)
   The switcher JS inserts a .rsp-cargo-tabs bar before each group of
   cargo/vehicle items and shows one at a time. Colour follows the theme.
═══════════════════════════════════════════════════════════════════════════ */
.rsp-cargo-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0 0 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--rsp-line-soft);
}
.rsp-cargo-tab {
    border: 1px solid var(--rsp-line-soft); background: #fff; color: var(--rsp-mut);
    border-radius: 8px; padding: 5px 13px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all .12s; line-height: 1.2;
}
.rsp-cargo-tab:hover { border-color: var(--rsp-line); background: var(--rsp-soft); }
.rsp-cargo-tab.rsp-tab-active { background: var(--rsp-soft); border-color: var(--rsp-accent); color: var(--rsp-accent-dark); }
.rsp-cargo-tab .rsp-tab-badge { color: var(--rsp-accent-dark); opacity: .7; margin-left: 6px; font-weight: 700; }
/* Non-active items are hidden via a CLASS (not inline display) so we never fight
   the real cargo-type toggle, which hides the non-selected type via inline
   display:none. An item is visible only if BOTH agree. */
body[data-cargo="tabs"] .rsp-tab-hidden { display: none !important; }
/* in tabs mode the collapse chevron is redundant; keep the body open */
body[data-cargo="tabs"] .btn-collapse-cargo-block { display: none !important; }
body[data-cargo="tabs"] .cargo-item .claims-wizard-cargo-block-body { display: block !important; }

/* ── Claims-list QUICK PREVIEW (owner 2026-07-05): the summary panel follows the
   active restyle theme so the list preview matches Details/Edit. ───────────── */
body[data-restyle] .claim-summary-panel {
    /* Owner 2026-07-22: the list quick-preview is an INLINE row expansion, not a
       floating card. The rounded card + drop shadow read as an unwanted vertical
       "shadow" on the right where the panel edge meets the page margin. Keep its
       outer frame completely flat and let the header/tabs/inner sections provide
       the visual hierarchy. */
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: none !important;
}
/* C5.1 (owner round-2): the intense orange gradient header was "way too much on the
   eyes" — toned to a pale orange wash with legible brand-orange text. Dark mode is
   untouched (this only targets data-restyle="5"). */
body[data-restyle="5"] .claim-summary-header {
    background: linear-gradient(90deg,#fff3e8,#fffaf5) !important;
    padding: 7px 14px !important;
}
body[data-restyle="5"] .claim-summary-header .claim-summary-number { color: #B44C09 !important; }
body[data-restyle="5"] .claim-summary-header .claim-summary-status { background: rgba(244, 116, 33,.14) !important; color: #9a3412 !important; }
/* 5g quick-preview: give the yellow variant its own pale yellow-cream wash + ink text
   (brandbook: black on yellow). */
body[data-restyle="5g"] .claim-summary-header {
    background: linear-gradient(90deg,#fff7e0,#fffdf5) !important;
    padding: 7px 14px !important;
}
body[data-restyle="5g"] .claim-summary-header .claim-summary-number { color: #201B16 !important; }
body[data-restyle="5g"] .claim-summary-header .claim-summary-status { background: rgba(248,169,0,.20) !important; color: #201B16 !important; }

/* HIVE-96 sf quick-preview: the expanded claims-list panel had peach/rose washes
   from the generic primary-light path. Keep the preview structure, but move the
   row, header, tabs and document accordion surfaces to Snieguole-final yellow. */
body[data-restyle="sf"] tr.claim-summary-row > td {
    background: #fff8e8 !important;
}
/* HIVE-96 (owner 2026-07-08): guarantee the read-only definition-list LABELS wrap inside their
   fixed .cdv-dl grid track in the narrow quick-preview panel (long LT labels like "Kaltininko
   transporto priemonės registracijos Nr." must not paint across the value column). The base fix
   resets the inherited `.data-table td{white-space:nowrap}` on the row td; re-assert it on the
   labels here and add overflow-wrap so an over-long token breaks instead of overflowing. */
body[data-restyle="sf"] .claim-summary-panel .cdv-dl dt {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0 !important;
}
body[data-restyle="sf"] .claim-summary-panel {
    /* Flat full-bleed section (see base body[data-restyle] rule) — only the pale
       yellow wash is sf-specific. */
    background: #fffdf5 !important;
}
body[data-restyle="sf"] .claim-summary-header {
    background: linear-gradient(90deg, #fff2c4, #fffdf5) !important;
    border-bottom: 1px solid #f0d9a0 !important;
    margin: -16px -18px 14px !important;
    padding: 13px 18px !important;
}
body[data-restyle="sf"] .claim-summary-header .claim-summary-number { color: #201B16 !important; }
body[data-restyle="sf"] .claim-summary-header .claim-summary-status {
    background: rgba(248,169,0,.22) !important;
    color: #201B16 !important;
}
body[data-restyle="sf"] .claim-summary-tabs {
    background: #fff8e8 !important;
    border-bottom-color: #f0d9a0 !important;
    margin: 0 -18px 16px !important;
    padding: 6px 18px 0 !important;
}
body[data-restyle="sf"] .claim-summary-tab {
    color: #5f4931 !important;
    border-bottom-color: transparent !important;
}
/* Owner 2026-07-08: the ACTIVE tab lifts as a white card too (was a flat pale-yellow
   fill) — transform + top-radius come from the base [aria-selected] lift rule; here we
   warm the shadow + keep the brown text/yellow underline as the active accent. */
body[data-restyle="sf"] .claim-summary-tab[aria-selected="true"] {
    background: #fff !important;
    color: #8a4a06 !important;
    border-bottom-color: var(--rsp-accent) !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 14px -4px rgba(160, 110, 0, .30) !important;
}
/* Snieguolė nice-to-have (Variant A) in the brand-yellow (sf) theme: a warm-tinted
   soft lift on hover/focus. transform + top-radius are inherited from the base
   .claim-summary-tab:hover rule; here we only warm the shadow + ground. */
body[data-restyle="sf"] .claim-summary-tab:hover,
body[data-restyle="sf"] .claim-summary-tab:focus-visible {
    background: #fff !important;
    color: #201B16 !important;
    box-shadow: 0 6px 14px -4px rgba(160, 110, 0, .30) !important;
}
body[data-restyle="sf"] .claim-summary-loading,
body[data-restyle="sf"] .claim-summary-error {
    color: #5f4931 !important;
}
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group {
    border-color: #efe4c9 !important;
}
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group-title {
    background: #FEF2D9 !important;
    color: #201B16 !important;
}
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group-title:hover,
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-row:hover,
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-download:hover {
    background: rgba(248,169,0,.14) !important;
}
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-chevron,
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-name:hover,
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-name:focus-visible,
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-download:hover {
    color: #8a4a06 !important;
}
body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-count {
    background: var(--rsp-accent) !important;
    color: #201B16 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   R5-C2 MENU WIRING (#404) — the sidebar follows the active variant, and the
   bee logo + divider go brand-yellow in EVERY restyle variant (reversible via
   "Current"). Sidebar bg #000 → brand ink #201B16. Nav ICONS stay (recolored).
   ════════════════════════════════════════════════════════════════════════ */
body[data-restyle="5"] .sidebar, body[data-restyle="5g"] .sidebar { background: #201B16 !important; }
/* Top-level active item carries the accent FILL; sub-items get accent TEXT only (no full pill). */
body[data-restyle="5"] .nav-item.active:not(.sub-item), body[data-restyle="5g"] .nav-item.active:not(.sub-item) { background: var(--rsp-accent) !important; color: var(--rsp-on-accent) !important; }
body[data-restyle="5"] .nav-item.active:not(.sub-item) .nav-icon, body[data-restyle="5g"] .nav-item.active:not(.sub-item) .nav-icon { stroke: var(--rsp-on-accent) !important; }
body[data-restyle="5"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill, body[data-restyle="5g"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill { fill: var(--rsp-on-accent) !important; }
body[data-restyle="5"] .nav-item.sub-item.active, body[data-restyle="5g"] .nav-item.sub-item.active { background: transparent !important; color: var(--rsp-accent) !important; font-weight: 700 !important; }
body[data-restyle="5"] .nav-item.sub-item.active .nav-icon, body[data-restyle="5g"] .nav-item.sub-item.active .nav-icon { stroke: var(--rsp-accent) !important; }
body[data-restyle="5"] .btn-create-claim, body[data-restyle="5g"] .btn-create-claim { background: var(--rsp-accent) !important; color: var(--rsp-on-accent) !important; border-color: var(--rsp-accent) !important; }
body[data-restyle="5"] .btn-create-claim:hover, body[data-restyle="5g"] .btn-create-claim:hover { filter: brightness(1.06); color: var(--rsp-on-accent) !important; }
/* The create-claim SVG icon paths have no fill attr (default black) — force on-accent so the icon
   is visible on the accent-filled button (was invisible: #E07E10 on #F47421 ≈ 1.05:1). */
body[data-restyle="5"] .btn-create-claim .create-icon, body[data-restyle="5g"] .btn-create-claim .create-icon,
body[data-restyle="5"] .btn-create-claim .create-icon path, body[data-restyle="5g"] .btn-create-claim .create-icon path { fill: var(--rsp-on-accent) !important; }
/* nav item strokes recolored to the variant accent (icons kept — owner 2026-07-07) */
body[data-restyle="5"] .nav-icon, body[data-restyle="5g"] .nav-icon { stroke: var(--rsp-accent) !important; }
body[data-restyle="5"] .nav-icon .nav-icon-fill, body[data-restyle="5g"] .nav-icon .nav-icon-fill { fill: var(--rsp-accent) !important; }
/* bee → BEEYELLOW + divider → brand yellow, ALL restyle variants (owner 6 / #404.3) */
body[data-restyle] .bee-logo-icon { content: url('/images/beeyellow.png') !important; }
body[data-restyle] .brand-separator { background: #F8A900 !important; }


/* ════════════════════════════════════════════════════════════════════════
   R5-C3 (owner 7 / #402.3) — CHIPS section-header family. HEADERS ONLY — the
   full-width branded band becomes a compact tinted CHIP (rounded, inline-width)
   + a same-tone number bubble. NEVER touches .cdv-dl geometry (theme-13 lesson).
   Three tints: chips oranžinė (c5), chips geltona (c5g), chips navigacijos (c5n,
   matches the right "Žalos skiltys" quick-nav ACTIVE style so they read as one).
   ════════════════════════════════════════════════════════════════════════ */
body[data-restyle="c5"]  { --rsp-chip-bg: rgba(244,116,33,.12); --rsp-chip-fg: #9a3412; --rsp-chip-bubble: #F47421; --rsp-chip-bubble-fg: #fff;     --rsp-chip-border: transparent; }
body[data-restyle="c5g"] { --rsp-chip-bg: rgba(248,169,0,.15);  --rsp-chip-fg: #201B16; --rsp-chip-bubble: #F8A900; --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent; }
body[data-restyle="c5n"] { --rsp-chip-bg: #fff8ee;              --rsp-chip-fg: #F47421; --rsp-chip-bubble: #F47421; --rsp-chip-bubble-fg: #fff;     --rsp-chip-border: #F47421; }
body[data-restyle="sf"]  {
    /* HIVE-96: Snieguole final = branded geltona chrome + chips geltona section chips. */
    --rsp-accent: #F8A900; --rsp-accent-2: #ffc233; --rsp-on-accent: #201B16;
    --rsp-accent-dark: #8a4a06; --rsp-soft: #FEF2D9; --rsp-line: #F8A900;
    --rsp-bubble: rgba(32,27,22,.20); --rsp-bubble-fg: #201B16; --rsp-sec-border: #efe4c9;
    --rsp-chip-bg: rgba(248,169,0,.15); --rsp-chip-fg: #201B16; --rsp-chip-bubble: #F8A900;
    --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent;
    /* Owner 2026-07-08: the base --sidebar-hover (#1a1a1a) is invisible on the sf
       dark-brown sidebar (#201B16), so expanded-mode hover read as nothing. Use a
       subtle brand-yellow tint (same alpha as the section-chip fill) — it composites
       over the dark ground to a warm tint. The base .nav-item transition:all .15s
       animates it smoothly; active items keep their cream fill (!important). */
    --sidebar-hover: rgba(248, 169, 0, .15);
}

/* Sidebar active-item wiring for the CHIP family (owner 2026-07-08). The base app
   paints the active nav item a dark-brown pill with white text (site.css .nav-item.active);
   the chip variants never overrode it, so the left menu did not follow the header colour.
   Wire it here: the active TOP-LEVEL item takes the header's bright chip colour
   (--rsp-chip-bubble — the same tone as the section number bubble / left stripe) as a
   filled pill with brand-ink (#201B16 ≈ black) text + icon. Sub-items get the chip colour
   as TEXT only (no full pill), mirroring the 5/5g treatment above. Applies to every chip
   tint (c5/c5g/c5n/c5b/c5p) so whichever chip the user selected, the pill matches its header. */
/* Owner 2026-07-08 (refinement): match the CLAIM SECTION CHIP, not the solid accent.
   The active pill takes the variant's OPAQUE chip-FILL (= --rsp-chip-bg composited over
   white — a translucent rgba can't be used directly here, it would composite over the DARK
   sidebar to near-black instead of the cream seen on the light form). Ink text/icon stay.
     c5  rgba(244,116,33,.12)/white = #FEEEE0   c5g/c5b/c5p rgba(248,169,0,.15)/white = #FEF2D9
     c5n #fff8ee (already opaque)  = #FFF8EE */
body[data-restyle="c5"]  .nav-item.active:not(.sub-item) { background: #FEEEE0 !important; color: #201B16 !important; }
body[data-restyle="c5g"] .nav-item.active:not(.sub-item) { background: #FEF2D9 !important; color: #201B16 !important; }
body[data-restyle="c5n"] .nav-item.active:not(.sub-item) { background: #FFF8EE !important; color: #201B16 !important; }
body[data-restyle="c5b"] .nav-item.active:not(.sub-item) { background: #FEF2D9 !important; color: #201B16 !important; }
body[data-restyle="c5p"] .nav-item.active:not(.sub-item) { background: #FEF2D9 !important; color: #201B16 !important; }
body[data-restyle="c5"] .nav-item.active:not(.sub-item) .nav-icon,
body[data-restyle="c5g"] .nav-item.active:not(.sub-item) .nav-icon,
body[data-restyle="c5n"] .nav-item.active:not(.sub-item) .nav-icon,
body[data-restyle="c5b"] .nav-item.active:not(.sub-item) .nav-icon,
body[data-restyle="c5p"] .nav-item.active:not(.sub-item) .nav-icon { stroke: #201B16 !important; }
body[data-restyle="c5"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill,
body[data-restyle="c5g"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill,
body[data-restyle="c5n"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill,
body[data-restyle="c5b"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill,
body[data-restyle="c5p"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill { fill: #201B16 !important; }
body[data-restyle="c5"] .nav-item.active:not(.sub-item) .fa-user-shield,
body[data-restyle="c5g"] .nav-item.active:not(.sub-item) .fa-user-shield,
body[data-restyle="c5n"] .nav-item.active:not(.sub-item) .fa-user-shield,
body[data-restyle="c5b"] .nav-item.active:not(.sub-item) .fa-user-shield,
body[data-restyle="c5p"] .nav-item.active:not(.sub-item) .fa-user-shield { color: #201B16 !important; }
body[data-restyle="c5"] .nav-item.sub-item.active,
body[data-restyle="c5g"] .nav-item.sub-item.active,
body[data-restyle="c5n"] .nav-item.sub-item.active,
body[data-restyle="c5b"] .nav-item.sub-item.active,
body[data-restyle="c5p"] .nav-item.sub-item.active { background: transparent !important; color: var(--rsp-chip-bubble) !important; font-weight: 700 !important; }
body[data-restyle="c5"] .nav-item.sub-item.active .nav-icon,
body[data-restyle="c5g"] .nav-item.sub-item.active .nav-icon,
body[data-restyle="c5n"] .nav-item.sub-item.active .nav-icon,
body[data-restyle="c5b"] .nav-item.sub-item.active .nav-icon,
body[data-restyle="c5p"] .nav-item.sub-item.active .nav-icon { stroke: var(--rsp-chip-bubble) !important; }

/* header band → transparent, keep only a light bottom divider */
body[data-restyle="c5"] .cdv-section-header,
body[data-restyle="c5g"] .cdv-section-header,
body[data-restyle="c5n"] .cdv-section-header,
body[data-restyle="c5"] .claims-wizard-section-header,
body[data-restyle="c5g"] .claims-wizard-section-header,
body[data-restyle="c5n"] .claims-wizard-section-header { background: transparent !important; border-bottom: 1px solid var(--border, #e6e8ee) !important; padding: 9px 14px !important; }
/* title → compact rounded CHIP (inline-width) */
body[data-restyle="c5"] .cdv-section-title,
body[data-restyle="c5g"] .cdv-section-title,
body[data-restyle="c5n"] .cdv-section-title,
body[data-restyle="c5"] .claims-wizard-section-title,
body[data-restyle="c5g"] .claims-wizard-section-title,
body[data-restyle="c5n"] .claims-wizard-section-title {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    background: var(--rsp-chip-bg) !important; color: var(--rsp-chip-fg) !important;
    border: 1px solid var(--rsp-chip-border) !important; border-radius: 999px !important;
    padding: 3px 12px !important; flex: 0 0 auto !important;
}
body[data-restyle="c5"] .claims-wizard-section-title > span:not(.claims-wizard-section-number),
body[data-restyle="c5g"] .claims-wizard-section-title > span:not(.claims-wizard-section-number),
body[data-restyle="c5n"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-chip-fg) !important; }
body[data-restyle="c5"] .claims-wizard-section-header .claims-wizard-section-chevron,
body[data-restyle="c5g"] .claims-wizard-section-header .claims-wizard-section-chevron,
body[data-restyle="c5n"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-chip-fg) !important; }
/* number bubble → solid same-tone */
body[data-restyle="c5"] .cdv-section-header .cdv-section-number,
body[data-restyle="c5g"] .cdv-section-header .cdv-section-number,
body[data-restyle="c5n"] .cdv-section-header .cdv-section-number,
body[data-restyle="c5"] .claims-wizard-section-number,
body[data-restyle="c5g"] .claims-wizard-section-number,
body[data-restyle="c5n"] .claims-wizard-section-number { background: var(--rsp-chip-bubble) !important; color: var(--rsp-chip-bubble-fg) !important; }
/* subtle accent left-edge on the section box (ties the chip to its panel; header-adjacent, not .cdv-dl) */
body[data-restyle="c5"] .cdv-section,
body[data-restyle="c5g"] .cdv-section,
body[data-restyle="c5n"] .cdv-section,
body[data-restyle="c5"] .claims-wizard-section,
body[data-restyle="c5g"] .claims-wizard-section,
body[data-restyle="c5n"] .claims-wizard-section { border-left: 3px solid var(--rsp-chip-bubble) !important; }


/* ════════════════════════════════════════════════════════════════════════
   R5-C4 (#403) — LANDING HERO: swap the photo + dark overlay for the brand
   line-maze STRIPE pattern with "WELCOME … TO THE BEST PLAN BEE" (black
   condensed caps). ALL restyle variants; "Current" keeps the photo hero.
   Cards + the rest of the landing are untouched.
   ════════════════════════════════════════════════════════════════════════ */
body[data-restyle] .landing-hero {
    /* #403: stripes smaller/denser — brand-stripe-pattern-dense.png is a 1x2 mirror pair of the
       original maze (twice as wide, seamless at the centre join), so `cover` scales it to ~half
       the per-stripe width of the single image. Same organic maze, thinner stripes, no tiling seam. */
    background: #EAE7D8 url('/images/brand-stripe-pattern-dense.png') center / cover no-repeat !important;
    min-height: 230px; padding: 24px 32px !important;
}
body[data-restyle] .landing-hero::before { content: none !important; background: none !important; }
body[data-restyle] .landing-hero h1, body[data-restyle] .landing-hero p { display: none !important; }
body[data-restyle] .hero-brand-welcome, body[data-restyle] .hero-brand-tagline {
    display: block !important; position: absolute; z-index: 2;
    /* Owner 2026-07-09 all-caps sweep: this ONE element keeps uppercase on purpose.
       It is aria-hidden decorative brand branding (a wordmark), not readable UI text,
       and it renders in the Oswald *condensed display-caps* face chosen for that look —
       title-case here would look broken. Flagged for owner; flip to none if desired. */
    color: #201B16; font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: .5px;
    /* #403: bundled Oswald (condensed caps) — the previous stack named unbundled condensed faces
       and fell back to a plain sans-serif, so the heading never rendered condensed. */
    font-family: 'Oswald', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', sans-serif;
    text-shadow: 0 1px 0 rgba(234,231,216,.35);
}
body[data-restyle] .hero-brand-welcome { top: 20px; left: 32px; font-size: clamp(30px, 5.2vw, 60px); }
body[data-restyle] .hero-brand-tagline { right: 32px; bottom: 20px; font-size: clamp(22px, 3.8vw, 46px); text-align: right; }


/* ════════════════════════════════════════════════════════════════════════
   R5-C3-followup (Snieguolė 2026-07-07) — two more chip layouts (geltona tint):
   • c5b "Chips be burbulo": the WHOLE header becomes one pill; the number is
     PLAIN (no circle) inside it → "1 Title".
   • c5p "Chips burbulas prieš": the number keeps its circle bubble but sits
     clearly BEFORE a separate title chip (extra gap). Headers ONLY.
   ════════════════════════════════════════════════════════════════════════ */
body[data-restyle="c5b"], body[data-restyle="c5p"] { --rsp-chip-bg: rgba(248,169,0,.15); --rsp-chip-fg: #201B16; --rsp-chip-bubble: #F8A900; --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent; }

/* c5b — number INSIDE one pill, NO circle: the header is the chip */
body[data-restyle="c5b"] .cdv-section-header,
body[data-restyle="c5b"] .claims-wizard-section-header {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    background: var(--rsp-chip-bg) !important; border: none !important; border-bottom: none !important;
    border-radius: 999px !important; padding: 4px 15px !important; width: auto !important;
}
body[data-restyle="c5b"] .cdv-section-header-spacer { display: none !important; }
body[data-restyle="c5b"] .cdv-section-title,
body[data-restyle="c5b"] .claims-wizard-section-title { background: transparent !important; color: var(--rsp-chip-fg) !important; border: none !important; border-radius: 0 !important; padding: 0 !important; }
body[data-restyle="c5b"] .cdv-section-header .cdv-section-number,
body[data-restyle="c5b"] .claims-wizard-section-number {
    background: transparent !important; color: var(--rsp-chip-fg) !important; border-radius: 0 !important;
    width: auto !important; min-width: 0 !important; height: auto !important; font-weight: 800 !important; padding: 0 !important;
}
body[data-restyle="c5b"] .cdv-section, body[data-restyle="c5b"] .claims-wizard-section { border-left: 3px solid var(--rsp-chip-bubble) !important; }

/* c5p — number circle bubble clearly BEFORE a separate title chip */
body[data-restyle="c5p"] .cdv-section-header,
body[data-restyle="c5p"] .claims-wizard-section-header { background: transparent !important; border-bottom: 1px solid var(--border, #e6e8ee) !important; padding: 9px 14px !important; gap: 13px !important; }
body[data-restyle="c5p"] .cdv-section-title,
body[data-restyle="c5p"] .claims-wizard-section-title {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    background: var(--rsp-chip-bg) !important; color: var(--rsp-chip-fg) !important;
    border: 1px solid var(--rsp-chip-border) !important; border-radius: 999px !important; padding: 3px 12px !important; flex: 0 0 auto !important;
}
body[data-restyle="c5p"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-chip-fg) !important; }
body[data-restyle="c5p"] .cdv-section-header .cdv-section-number,
body[data-restyle="c5p"] .claims-wizard-section-number { background: var(--rsp-chip-bubble) !important; color: var(--rsp-chip-bubble-fg) !important; }
/* c5p WIZARD surface fix (2026-07-08): the wizard number lives INSIDE
   .claims-wizard-section-title AND the title TEXT is a bare text node (no wrapping span). The old
   rule tried to chip a "> span" that doesn't exist, so c5p rendered plain and was indistinct from
   c5g. Fix without markup change: make the h2 TITLE itself the pale chip pill (like c5g's title),
   but pull the number OUT as an absolutely-positioned solid circle to the LEFT of the pill (reserve
   room with margin-left) so the bubble sits clearly BEFORE the chip = "burbulas prieš". This is the
   ONLY thing separating c5p from c5g. cdv surface keeps its own rules above (number is a real
   sibling there), so it is untouched. */
body[data-restyle="c5p"] .claims-wizard-section-title {
    position: relative !important;
    display: inline-flex !important; align-items: center !important;
    background: var(--rsp-chip-bg) !important; color: var(--rsp-chip-fg) !important;
    border: 1px solid var(--rsp-chip-border) !important; border-radius: 999px !important;
    padding: 3px 14px !important; margin-left: 32px !important; gap: 0 !important;
}
/* if any header DOES wrap its title text in a span, keep that span plain (the h2 is the chip) */
body[data-restyle="c5p"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; color: var(--rsp-chip-fg) !important;
}
body[data-restyle="c5p"] .claims-wizard-section-number {
    position: absolute !important; left: -32px !important; top: 50% !important; transform: translateY(-50%) !important;
    margin: 0 !important; width: 22px !important; height: 22px !important; min-width: 22px !important;
    border-radius: 50% !important; background: var(--rsp-chip-bubble) !important; color: var(--rsp-chip-bubble-fg) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-weight: 800 !important; padding: 0 !important; flex: 0 0 auto !important;
}
body[data-restyle="c5p"] .cdv-section, body[data-restyle="c5p"] .claims-wizard-section { border-left: 3px solid var(--rsp-chip-bubble) !important; }


/* ════════════════════════════════════════════════════════════════════════
   HIVE-96 — Snieguolė final (sf). Hybrid:
   - 5g branded geltona for sidebar chrome, yellow create button, right-nav active tokens;
   - c5g chips geltona for the active sidebar pill and Details/Edit section chips.
   Everything here is sf-scoped so the existing 5g/c5g/c5b/c5p previews stay unchanged.
   ════════════════════════════════════════════════════════════════════════ */
body[data-restyle="sf"] .sidebar { background: #201B16 !important; }

body[data-restyle="sf"] .btn-create-claim {
    background: var(--rsp-accent) !important;
    color: var(--rsp-on-accent) !important;
    border-color: var(--rsp-accent) !important;
}
body[data-restyle="sf"] .btn-create-claim:hover { filter: brightness(1.06); color: var(--rsp-on-accent) !important; }
body[data-restyle="sf"] .btn-create-claim .create-icon,
body[data-restyle="sf"] .btn-create-claim .create-icon path { fill: var(--rsp-on-accent) !important; }

body[data-restyle="sf"] .nav-icon { stroke: var(--rsp-accent) !important; }
body[data-restyle="sf"] .nav-icon .nav-icon-fill { fill: var(--rsp-accent) !important; }
body[data-restyle="sf"] .nav-item:not(.sub-item) > .fas,
body[data-restyle="sf"] .nav-item:not(.sub-item) > .fa-solid { color: var(--rsp-accent) !important; }

/* Smooth icon colour transitions — the base .nav-item transition:all only covers the
   nav-item box, not the SVG stroke/fill or the FA colour, so add one on the icons. */
body[data-restyle="sf"] .nav-icon,
body[data-restyle="sf"] .nav-item > .fas,
body[data-restyle="sf"] .nav-item > .fa-solid { transition: stroke .15s ease, fill .15s ease, color .15s ease; }

/* Rail (collapsed) mode: labels are hidden, so hover feedback is the icon getting
   LIGHTER (brand yellow → --rsp-accent-2 #ffc233). Non-active top-level items only;
   the yellow-tint hover bg (--sidebar-hover) still fades in behind it. */
[data-sidebar-mode="rail"] body[data-restyle="sf"] .nav-item:not(.active):not(.sub-item):hover .nav-icon { stroke: var(--rsp-accent-2) !important; }
[data-sidebar-mode="rail"] body[data-restyle="sf"] .nav-item:not(.active):not(.sub-item):hover .nav-icon .nav-icon-fill { fill: var(--rsp-accent-2) !important; }
[data-sidebar-mode="rail"] body[data-restyle="sf"] .nav-item:not(.active):not(.sub-item):hover > .fas,
[data-sidebar-mode="rail"] body[data-restyle="sf"] .nav-item:not(.active):not(.sub-item):hover > .fa-solid { color: var(--rsp-accent-2) !important; }

body[data-restyle="sf"] .nav-item.active:not(.sub-item) {
    background: #FEF2D9 !important;
    color: #201B16 !important;
}
body[data-restyle="sf"] .nav-item.active:not(.sub-item) .nav-icon { stroke: #201B16 !important; }
body[data-restyle="sf"] .nav-item.active:not(.sub-item) .nav-icon .nav-icon-fill { fill: #201B16 !important; }
body[data-restyle="sf"] .nav-item.active:not(.sub-item) > .fas,
body[data-restyle="sf"] .nav-item.active:not(.sub-item) > .fa-solid,
body[data-restyle="sf"] .nav-item.active:not(.sub-item) .fa-user-shield { color: #201B16 !important; }

body[data-restyle="sf"] .nav-item.sub-item.active {
    background: transparent !important;
    color: var(--rsp-chip-bubble) !important;
    font-weight: 700 !important;
}
body[data-restyle="sf"] .nav-item.sub-item.active .nav-icon { stroke: var(--rsp-chip-bubble) !important; }
body[data-restyle="sf"] .nav-item.sub-item.active .sub-icon { color: var(--rsp-chip-bubble) !important; }

body[data-restyle="sf"] .activity-landing-card::before { background: var(--rsp-accent) !important; }
body[data-restyle="sf"] .activity-landing-card:hover {
    border-color: var(--rsp-accent) !important;
    box-shadow: 0 6px 20px rgba(248, 169, 0, .18) !important;
}
body[data-restyle="sf"] .activity-landing-card-icon {
    background: #201B16 !important;
    color: var(--rsp-accent) !important;
}
body[data-restyle="sf"] .activity-landing-card-icon i { color: var(--rsp-accent) !important; }

body[data-restyle="sf"] .cdv-section-header,
body[data-restyle="sf"] .claims-wizard-section-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border, #e6e8ee) !important;
    padding: 9px 14px !important;
}
body[data-restyle="sf"] .cdv-section-title,
body[data-restyle="sf"] .claims-wizard-section-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--rsp-chip-bg) !important;
    color: var(--rsp-chip-fg) !important;
    border: 1px solid var(--rsp-chip-border) !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    /* Owner 2026-07-09: business flagged ALL-CAPS section titles — force normal (title) case for
       BOTH Details + Edit (was uppercase for the HIVE-96 parity chip). */
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 700 !important;
}
body[data-restyle="sf"] .cdv-section-title i { display: none !important; }
body[data-restyle="sf"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-chip-fg) !important; }
body[data-restyle="sf"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-chip-fg) !important; }
body[data-restyle="sf"] .cdv-section-header .cdv-section-number,
body[data-restyle="sf"] .claims-wizard-section-number {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    background: var(--rsp-chip-bubble) !important;
    color: var(--rsp-chip-bubble-fg) !important;
    font-size: 12.5px !important;
}
body[data-restyle="sf"] .cdv-section,
body[data-restyle="sf"] .claims-wizard-section { border-left: 3px solid var(--rsp-chip-bubble) !important; }

/* HIVE-96 (owner 2026-07-08): on the EDIT (wizard) surface the number lives INSIDE
   .claims-wizard-section-title, so the pale chip wrapped [bubble + title]. On the Details (.cdv-*)
   surface the number is a SEPARATE sibling BEFORE the title chip. Unify them: pull the wizard number
   OUT to the LEFT of the chip (absolute, reserving room with the title's margin-left) so Edit reads
   [bubble] [title chip] exactly like Details + the list quick-preview. Details is untouched. */
body[data-restyle="sf"] .claims-wizard-section-title { position: relative !important; margin-left: 36px !important; }
body[data-restyle="sf"] .claims-wizard-section-number {
    position: absolute !important; left: -36px !important; top: 50% !important; transform: translateY(-50%) !important;
    margin: 0 !important;
}

body[data-restyle="sf"] .cdv-subgroup-title {
    background: #FEF2D9 !important;
    border-left-color: #F8A900 !important;
    color: #8a4a06 !important;
}
body[data-restyle="sf"] .claims-wizard-subsection-title {
    background: #FEF2D9 !important;
    border-left: 3px solid #F8A900 !important;
    border-bottom-color: #f0d9a0 !important;
    border-radius: 0 4px 4px 0 !important;
    color: #8a4a06 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   R5-C5 — off-brand wash cleanup (restyle layer only). The right "Žalos skiltys"
   quick-nav ACTIVE state + the quick-claim/client intake selected/hover washes
   follow the variant accent / cream wash instead of the fixed peach.
   ════════════════════════════════════════════════════════════════════════ */
body[data-restyle] .claims-wizard-step.active {
    /* text is INK not the accent — orange/yellow on the cream wash fails AA (≈1.8–2.6:1);
       the accent cue rides the left border + the number bubble instead (brandbook: no orange text). */
    color: #201B16 !important;
    border-color: var(--rsp-accent) !important;
    background: var(--rsp-soft) !important;
}
body[data-restyle] .claims-wizard-step.active .claims-wizard-step-number { background: var(--rsp-accent) !important; color: var(--rsp-on-accent, #fff) !important; }
/* quick-claim / quick-client intake selected + active washes → the cream variant wash */
body[data-restyle] .qci-search-result-item.is-active,
body[data-restyle] .qci-option.is-selected,
body[data-restyle] .qci-card.is-selected,
body[data-restyle] .quick-client-intake .is-selected,
body[data-restyle] .quick-client-intake .is-active { background: var(--rsp-soft) !important; }

/* #444 — cargo/vehicle tabs match the yellow header chip (active = #F8A900 + ink). */
body[data-restyle="sf"] .rsp-cargo-tab.rsp-tab-active {
    background: #F8A900 !important; color: #201B16 !important; border-color: #F8A900 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   HIVE 433–449 — sf global restyle refinements (owner 2026-07-09).
   sf is now the ONLY style; the restyler PANEL is hidden here (R0) while the
   switcher script stays loaded to build the sf cargo/vehicle tabs.
   Palette: accent #F8A900, ink #201B16, soft #FEF2D9, orange var(--primary).
   ════════════════════════════════════════════════════════════════════════════ */

/* R0 — hide the restyler switcher panel (script stays for the cargo tabs). */
.rsp-panel { display: none !important; }

/* #441 — subsection headers: rounded + pale-yellow + black text, no left stripe.
   .cdv-subgroup-title is shared by Details + Edit; .claims-wizard-subsection-title is Edit. */
body[data-restyle="sf"] .cdv-subgroup-title {
    background: #FEF2D9 !important;
    color: #201B16 !important;
    border-left: 0 !important;
    border-radius: 10px !important;
    padding: 5px 14px !important; /* #441 follow-up — slimmer band (was 8px) */
    text-transform: none !important; /* owner 2026-07-09 — no ALL-CAPS in subsection bands */
    letter-spacing: normal !important;
}
body[data-restyle="sf"] .cdv-subgroup-title * { color: #201B16 !important; }
body[data-restyle="sf"] .claims-wizard-subsection-title {
    background: #FEF2D9 !important;
    color: #201B16 !important;
    border-bottom: 0 !important;
    border-radius: 10px !important;
    padding: 5px 14px !important; /* #441 follow-up — slimmer band (was 8px) */
    text-transform: none !important; /* owner 2026-07-09 — no ALL-CAPS */
    letter-spacing: normal !important;
}
body[data-restyle="sf"] .claims-wizard-subsection-title * { color: #201B16 !important; }

/* #439 / #443 — hide redundant subsection bands (section-name echoes + the group-count strip).
   The three specific bands carry .cdv-subgroup-hide-sf (added in the partials). */
body[data-restyle="sf"] .cdv-subgroup-hide-sf { display: none !important; }

/* #445 — "Not received" FIR chip → soft yellow + ink. */
body[data-restyle="sf"] .cdv-fi-chip.is-waiting { background: #FEF2D9 !important; color: #201B16 !important; }

/* #446 — cargo damaged-parts / cost-type chips → solid orange (like the Outcome action chips). */
body[data-restyle="sf"] .cargo-cost-type-badge {
    background: var(--primary, #d77504) !important;
    color: #fff !important;
    border-color: var(--primary, #d77504) !important;
}

/* #440 — Outcome "Unlock" lock icon + text → brand orange. */
body[data-restyle="sf"] .claims-wizard-outcome-toggle,
body[data-restyle="sf"] .claims-wizard-outcome-toggle i { color: var(--primary, #d77504) !important; }

/* #436 — Missing-document indicator pill → pale-yellow, no border.
   Follow-up (owner 2026-07-09): the unchecked "Mark as missing" HOVER gets the
   same pale-yellow borderless treatment (site.css :hover otherwise paints an
   orange border + peach bg), the pill is borderless in every state, and the
   triangle returns to 10px with an optical-center nudge (the 8px first pass
   read as superscript beside the 11px label). */
body[data-restyle="sf"] .missing-doc-pill { border-color: transparent !important; }
body[data-restyle="sf"] .missing-doc-pill.is-missing,
body[data-restyle="sf"] .missing-doc-pill.is-readonly,
body[data-restyle="sf"] .missing-doc-pill:hover:not(.is-missing):not(.is-readonly) {
    background: #FEF2D9 !important;
    color: #201B16 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .missing-doc-pill:hover:not(.is-missing):not(.is-readonly),
html[data-theme="dark"] body[data-restyle="sf"] .missing-doc-pill.is-missing,
html[data-theme="dark"] body[data-restyle="sf"] .missing-doc-pill.is-readonly {
    background: rgba(248, 169, 0, 0.16) !important; /* pale yellow glows on dark */
    color: #fde68a !important;
}
body[data-restyle="sf"] .missing-doc-pill-icon {
    font-size: 10px !important;
    line-height: 1 !important;
    position: relative;
    top: 0.5px; /* FA triangle rides high beside the 11px label */
}

/* #449 — claims-list category tabs → rounded pill; drop the red active border.
   2026-08-11: the shared .list-filter-chip (contract-list quick filters) joins the SAME
   declarations. It reuses the chip colours from site.css, and this layer is what gives those
   chips their SHAPE — leaving it Claims-only is why the two surfaces matched on colour but
   not on radius (22px vs 6px) or active border (orange vs transparent). */
body[data-restyle="sf"] .claims-header-tabs .claims-tab,
body[data-restyle="sf"] .list-filter-chip { border-radius: 22px !important; }
body[data-restyle="sf"] .claims-header-tabs .claims-tab.active,
body[data-restyle="sf"] .list-filter-chip.active { border-color: #F8A900 !important; }
/* M5 (2026-07-14) — MTPL statistics status tabs are the visual twin of the
   claims-list tabs; mirror the same sf pill radius + active border for exact
   side-by-side parity (colors already mirrored in mtpl-statistics.css). */
body[data-restyle="sf"] .stats-header-tabs .stats-tab { border-radius: 22px !important; }
body[data-restyle="sf"] .stats-header-tabs .stats-tab.active { border-color: #F8A900 !important; }

/* #447 (owner 2026-07-09) — document "New" badge → solid brand orange (the "selected outcome" look).
   Confirmed: badge is .attachment-file-status-badge (list) / .attachment-thumb-badge (grid); never green. */
body[data-restyle="sf"] .attachment-file-status-badge,
body[data-restyle="sf"] .attachment-thumb-badge {
    background: var(--primary, #d77504) !important;
    color: #fff !important;
    border-color: var(--primary, #d77504) !important;
}

/* #437 (owner 2026-07-09) — Missing Documents badge + active Missing Information pills/chips →
   solid brand orange (the "selected outcome" look, matching #446). Unmarked classifier pills stay
   white (base .claims-wizard-pill-tag). Replaced 3 dead guessed selectors with the real classes:
   .missing-doc-badge (was red), .claims-wizard-pill-tag.active, .missing-info-chip (free-text). */
body[data-restyle="sf"] .missing-doc-badge,
body[data-restyle="sf"] .claims-wizard-pill-tag.active,
body[data-restyle="sf"] .missing-info-chip {
    background: var(--primary, #d77504) !important;
    color: #fff !important;
    border-color: var(--primary, #d77504) !important;
}

/* HIVE (2026-07-21, item 1) — clear active/inactive contrast for the missing-doc
   SUMMARY editor chips AND the quick-claim wizard's missing-info pills.
   The #437 rule above paints EVERY .missing-doc-badge solid brand orange, so the
   summary editor's UNMARKED chips (.claim-summary-chip without .is-on) came out the
   same strong orange as the marked ones — only a .72 opacity apart. Restyle the
   INACTIVE state to a near-white faint-orange wash with muted text + a subtle border;
   the marked (.is-on) / .active state keeps the strong orange from #437 above. The
   tokens are theme-aware, so this reads correctly in light mode; the dark override
   lives in dark/claim-forms-dark.css. Higher specificity + !important so it wins over
   the #437 block. */
body[data-restyle="sf"] .claim-summary-chip:not(.is-on),
body[data-restyle="sf"] .claims-wizard-pill-tag:not(.active) {
    background: var(--primary-light, rgba(230, 124, 47, 0.12)) !important;
    color: var(--text-secondary, #666666) !important;
    border-color: var(--border, #e5e5e5) !important;
}
/* Summary chips carried a resting opacity: .72 (claim-summary.css); reset it so the
   inactive wash reads crisp. (NOT applied to wizard pills — they keep the :disabled
   0.7 dimming from site.css.) */
body[data-restyle="sf"] .claim-summary-chip:not(.is-on) {
    opacity: 1 !important;
}

/* #438 (owner 2026-07-09) — Multiclaims "fields that will be copied" chips: active → solid orange
   (matching #437); inactive stays white (base .mc-copy-chip). The semantic panel wrapper carries
   the light/dark WCAG palettes in site.css. */
body[data-restyle="sf"] .mc-copy-chip.mc-copy-chip--active {
    background: var(--primary, #d77504) !important;
    color: #fff !important;
    border-color: var(--primary, #d77504) !important;
}

/* White on the regular brand orange is below AA at this 12px chip size. Keep the
   solid-orange treatment in dark mode, but use its darker brand shade (5.2:1). */
html[data-theme="dark"] body[data-restyle="sf"] .mc-copy-fields-panel .mc-copy-chip.mc-copy-chip--active {
    background: #a95505 !important;
    border-color: #a95505 !important;
    color: #fff !important;
}

/* ── #458 — Documents section: cream container headers ("gelsvai"), grayish containers
   ("pilkšvai"), rows carry no colour of their own (see the partial's inline block for the
   row de-tint). Header band follows the #441 cream convention; the card clips it into the
   9px corners. Placed at the end of the file so it wins the equal-specificity "daintier
   documents" body[data-restyle] overrides above. */
body[data-restyle="sf"] .claims-wizard-upload-box,
body[data-restyle="sf"] .attachment-type-card {
    background: #f8f9fb !important;
    border-color: #e6eaf0 !important;
    overflow: hidden;
}
body[data-restyle="sf"] .attachment-card-header {
    background: #FEF2D9 !important;
    border-radius: 8px 8px 0 0 !important;
}
body[data-restyle="sf"] .attachment-card-header:hover { background: #fdecc7 !important; }
body[data-restyle="sf"] .attachment-card-header .attachment-card-title { color: #201B16 !important; }
body[data-restyle="sf"] .attachment-card-header .attachment-card-chevron { color: #8a6f4d !important; }
body[data-restyle="sf"] .attachment-card-header .attachment-card-file-count { color: #8a6f4d !important; }
body[data-restyle="sf"] .attachment-card-header .attachment-header-upload-icon { color: #8a6f4d; }

/* ── #461 — cost-section BOUNDARY headings: solid brand yellow full-width band + ink.
   Only the OUTER cost-pool titles carry .claims-cost-boundary-title (#460's semantic
   class: Cargo/Vehicle cost details + Damaged (entrusted) property costs, in edit,
   read-only and dynamic markup). Nested Payment titles keep the pale #FEF2D9 band
   (#441 rules above). The pale rules use !important at equal specificity, so these
   overrides sit LATER in the file with !important — do not move them above #441. */
body[data-restyle="sf"] .claims-cost-boundary-title {
    background: var(--rsp-brand-yellow, #F8A900) !important;
    color: var(--rsp-ink, #201B16) !important;
}
body[data-restyle="sf"] .claims-cost-boundary-title * { color: var(--rsp-ink, #201B16) !important; }
/* the filled-state dot paints its own background (site.css var(--primary)) — give it an
   explicit dark visible fill on the yellow band; chevron rides the ink rule above. */
body[data-restyle="sf"] .claims-cost-boundary-title .claims-subsection-filled-dot {
    background: var(--rsp-ink, #201B16) !important;
}
/* concrete keyboard focus on the yellow band: ink ring reads against the light page
   AND the yellow fill (the generic var(--primary) ring would melt into the band). */
body[data-restyle="sf"] .claims-cost-boundary-title:focus-visible {
    outline: 2px solid var(--rsp-ink, #201B16) !important;
    outline-offset: 2px;
}

/* ===== source: /css/restyle-preview-dark.css ===== */


/* ───────────────────────── SHARED BASE (all themes) ───────────────────── */

/* 1) Section title pill + number badge: the orange fill stays orange in dark
      (brand accent), but lift it slightly so white text keeps contrast. The
      transparent-title themes (1,3,6,7,8,9,12,13) override .cdv-section-title
      again locally to make it accent-coloured text, handled per-theme below. */
html[data-theme="dark"] body[data-restyle] .cdv-section-title { background: #F47421 !important; color: var(--on-primary) !important; }
html[data-theme="dark"] body[data-restyle] .cdv-section-header .cdv-section-number,
html[data-theme="dark"] body[data-restyle] .claims-wizard-section-number { background: #F47421 !important; color: var(--on-primary) !important; }
html[data-theme="dark"] body[data-restyle] .claim-details-v2 .claims-wizard-section-title,
html[data-theme="dark"] body[data-restyle] .claims-wizard-section-title,
html[data-theme="dark"] body[data-restyle] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: #f6a64d !important; }

/* 3) Daintier Documents cards — light #eef1f5 border / grey chevron / grey
      counts re-pointed at dark tokens. Layout (radius, padding) untouched. */
html[data-theme="dark"] body[data-restyle] .claims-wizard-upload-box,
html[data-theme="dark"] body[data-restyle] .attachment-type-card {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] body[data-restyle] .attachment-card-chevron { color: var(--text-secondary) !important; }
html[data-theme="dark"] body[data-restyle] .attachment-card-file-count { color: var(--text-secondary) !important; }

/* Modern dynamic fields and generated cargo tabs are declared later in the
   light restyle sheet with `!important` white/blue-gray literals. Retokenize
   every one of those surfaces here so Current/Modern and Stacked/Tabs are true
   theme variants, not light islands inside the dark claim form. */
html[data-theme="dark"] body[data-dynfields="modern"] {
    --rsp-soft: var(--primary-light);
    --rsp-line: var(--primary-text);
    --rsp-line-soft: var(--component-border);
    --rsp-accent-dark: #ffd49b;
    --rsp-mut: var(--text-secondary);
}
html[data-theme="dark"] body[data-dynfields="modern"] :is(
    .claims-wizard-payout-container,
    .additional-costs-container,
    .damaged-property-cost-rows,
    .payout-committed-rows
) {
    background: var(--surface-2) !important;
    border-color: var(--component-border) !important;
}
html[data-theme="dark"] body[data-dynfields="modern"] :is(
    .payout-committed-rows .claims-wizard-payout-row,
    .dp-payout-committed-rows .claims-wizard-payout-row,
    .cargo-cost-row,
    .cdv-payout-row
) {
    border-color: var(--component-border) !important;
}
html[data-theme="dark"] body[data-dynfields="modern"] .claims-wizard-payout-label {
    background: transparent !important;
    color: var(--text) !important;
}
html[data-theme="dark"] body[data-dynfields="modern"] :is(.cargo-item, .cdv-cargo-item) {
    background: var(--surface) !important;
    border-color: var(--component-border) !important;
}
html[data-theme="dark"] body[data-dynfields="modern"] :is(
    .claims-wizard-cargo-block-header,
    .cdv-cargo-item-header
) {
    background: var(--primary-light) !important;
    border-color: var(--primary-text) !important;
    color: #ffd49b !important;
}
html[data-theme="dark"] body[data-dynfields="modern"] :is(
    .claims-wizard-cargo-block-title,
    .rsp-li-foot .rsp-li-foot-amt,
    .cdv-payout-value
) {
    color: #ffd49b !important;
}
html[data-theme="dark"] .rsp-cargo-tabs {
    border-bottom-color: var(--component-border);
}
html[data-theme="dark"] .rsp-cargo-tab {
    background: var(--surface-2);
    border-color: var(--control-border);
    color: var(--text-secondary);
}
html[data-theme="dark"] .rsp-cargo-tab:hover,
html[data-theme="dark"] .rsp-cargo-tab:focus-visible {
    background: var(--hover-bg);
    border-color: var(--primary-text);
    color: var(--text);
}
html[data-theme="dark"] .rsp-cargo-tab.rsp-tab-active {
    background: var(--primary-light);
    border-color: var(--primary-text);
    color: #ffd49b;
    box-shadow: inset 0 -3px 0 var(--primary-text);
}

/* ───────────────────────── 5 · BRANDED (filled orange headers) ────────── */
/* The whole point is a saturated orange gradient header with white title — that
   reads great on dark already, so keep the gradient. Only the warm card border
   #f1e4d6 → warm-tinted dark border, light shadow → dark, and the light
   file-row tint #fff7ed → translucent orange so file rows don't flash white. */
/* R5-C2: dark twins for both branded variants (accent via the vars set in restyle-preview.css). */
html[data-theme="dark"] body[data-restyle="5"] .cdv-section, html[data-theme="dark"] body[data-restyle="5g"] .cdv-section,
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section, html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section {
    border: 1px solid rgba(244, 116, 33,.25) !important;
    border-left: 3px solid var(--rsp-accent) !important;
    background: var(--surface) !important;
    box-shadow: 0 1px 2px var(--shadow-color, rgba(0,0,0,.45)) !important;
}
html[data-theme="dark"] body[data-restyle="5"] .cdv-section-header, html[data-theme="dark"] body[data-restyle="5g"] .cdv-section-header,
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-header, html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section-header {
    background: linear-gradient(90deg, var(--rsp-accent), var(--rsp-accent-2)) !important; border-bottom: none !important; padding: 7px 14px !important;
}
html[data-theme="dark"] body[data-restyle="5"] .cdv-section-title, html[data-theme="dark"] body[data-restyle="5g"] .cdv-section-title { background: transparent !important; color: var(--rsp-on-accent) !important; }
html[data-theme="dark"] body[data-restyle="5"] .cdv-section-header .cdv-section-number, html[data-theme="dark"] body[data-restyle="5g"] .cdv-section-header .cdv-section-number,
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-number, html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section-number { background: var(--rsp-bubble) !important; color: var(--rsp-bubble-fg) !important; }
html[data-theme="dark"] body[data-restyle="5"] .claim-details-v2 .claims-wizard-section-title, html[data-theme="dark"] body[data-restyle="5g"] .claim-details-v2 .claims-wizard-section-title,
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-title, html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section-title,
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-title > span:not(.claims-wizard-section-number), html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-on-accent) !important; }
html[data-theme="dark"] body[data-restyle="5"] .claims-wizard-section-header .claims-wizard-section-chevron, html[data-theme="dark"] body[data-restyle="5g"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-on-accent) !important; }
html[data-theme="dark"] body[data-restyle="5"] .attachment-file-row, html[data-theme="dark"] body[data-restyle="5g"] .attachment-file-row { background: rgba(240,138,42,.12) !important; }

/* ════════════════════════════════════════════════════════════════════════
   COVERAGE NOTE
   Covered: shared body[data-restyle] base rules (section title/number, daintier
   Documents cards), and all of the requested 9 themes:
     1 Mercury, 2 Stripe, 3 Ramp/Brex, 4 Linear/Notion, 5 Branded, 6 Compact,
     7 Slate, 8 Grid, 9 Midnight.
   Each theme's DISTINCT CHARACTER (rounded/flat/pill/card, density) is preserved
   — only colours/contrast were re-pointed at the dark token contract; literal
   light values (#fff, #eef1f5, #f8fafc, #fafbfc, #f3f5f9, #f0eee9, #f1e4d6,
   #fff7ed, light shadows, #6b7280 labels) were each given a dark counterpart.
   The shared dynamic-fields (data-dynfields="modern") + cargo-tabs
   (data-cargo="tabs") layers already read the --rsp-* tokens, which the dark
   accent base re-tunes, so they follow into dark without separate rules.

   Accent-resolution notes / not fully resolvable:
   - Theme 4 (Linear/Notion): the peach pill title is the theme's signature, so
     it is kept as a literal #f6a64d fill with dark text (#2a1a08) for contrast
     rather than tokenised — a tasteful dark-adjusted accent, not a neutral token.
   - Theme 3 (Ramp/Brex): the original rust accent #c2410c is too dark to read on
     a dark surface, so it is lifted to amber (#ea7a3c / #f0a25e). This is a
     deliberate hue shift — the only theme whose accent could not be preserved
     1:1; everything else keeps its original hue brightened in place.
   - Theme 9 (Midnight): header literal #1f2937 is intentionally retained (it is
     a dark band by design and the theme's identity); not tokenised because it
     must stay distinct from the dark card body. If a project --surface-3 is
     darker than #1f2937, swap it in for full token alignment.
   - Themes 7 & 8 use var(--surface-2, …) with a literal fallback (#232a34) in
     case dark-tokens.css does not yet define --surface-2; same for
     --muted-border and --shadow-color fallbacks elsewhere.
═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   RESTYLE-PREVIEW SWITCHER CHROME — DARK (2026-06-06)
   The floating switcher control (.rsp-panel) is built at runtime by
   wwwroot/js/restyle-preview-switcher.js, which injects a <style> block with
   LIGHT literals (#fff panel, #fff7ed orange head, #e6e8ee hairlines,
   #334155 button text). In dark mode that panel renders as a pure-white
   island. These overrides re-skin only the switcher's own chrome — the active
   orange state (#F47421/#fff) is intentionally kept as the accent.
   Specificity: html[data-theme="dark"] .rsp-* (0,2,1) strictly beats the
   injected single-class rules (0,1,0), so no !important is needed and source
   order of the runtime <style> is irrelevant. Layout is untouched. */
html[data-theme="dark"] .rsp-panel {
    background: var(--surface, #1c1813);
    border-color: var(--border, #332b22);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .rsp-head {
    background: rgba(240, 138, 42, .12);
    color: #f6a64d;
    border-bottom-color: var(--border, #332b22);
}
html[data-theme="dark"] .rsp-min { color: #f6a64d; }
html[data-theme="dark"] .rsp-label { color: var(--text-secondary, #b9b0a2); }
html[data-theme="dark"] .rsp-btn,
html[data-theme="dark"] .rsp-seg-btn {
    background: var(--surface-2, #241f18);
    border-color: var(--border, #332b22);
    color: var(--text, #efe9e1);
}
html[data-theme="dark"] .rsp-btn:hover,
html[data-theme="dark"] .rsp-seg-btn:hover {
    border-color: rgba(240, 138, 42, .5);
    background: rgba(240, 138, 42, .12);
}

html[data-theme="dark"] body[data-restyle="sf"] tr.claim-summary-row > td {
    background: rgba(248,169,0,.08) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-panel {
    background: var(--surface, #1c1813) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-header {
    background: linear-gradient(90deg, rgba(248,169,0,.18), rgba(248,169,0,.05)) !important;
    border-bottom: 1px solid rgba(248,169,0,.25) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-header .claim-summary-number,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab:hover {
    color: var(--text, #efe9e1) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-header .claim-summary-status {
    background: rgba(248,169,0,.22) !important;
    color: #fde68a !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tabs {
    background: rgba(248,169,0,.08) !important;
    border-bottom-color: rgba(248,169,0,.25) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab {
    color: var(--text-secondary, #b9b0a2) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab:hover,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab[aria-selected="true"],
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group-title,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group-title:hover,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-row:hover,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-download:hover {
    background: rgba(248,169,0,.16) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-tab[aria-selected="true"] {
    color: #fde68a !important;
    border-bottom-color: #F8A900 !important;
}
/* Sweep 2026-07-19: the sf light skin pins the collapsed doc-group title ink
   (#201B16 !important in restyle-preview.css) while the block above only remaps
   the BACKGROUND to a translucent amber wash — dark-brown on dark = illegible.
   Same specificity tier + !important so it wins the light pin in dark. */
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group-title {
    color: var(--text, #efe9e1) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-group {
    border-color: rgba(248,169,0,.25) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-chevron,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-name:hover,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-name:focus-visible,
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-download:hover {
    color: #fde68a !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claim-summary-documents .claim-summary-doc-count {
    background: #F8A900 !important;
    color: #201B16 !important;
}


/* R5-C3: dark chips — redefine the chip vars for legibility on dark (rules live in
   restyle-preview.css). Lighter chip text + slightly stronger wash. */
html[data-theme="dark"] body[data-restyle="c5"]  { --rsp-chip-bg: rgba(244,116,33,.18); --rsp-chip-fg: #fdba74; --rsp-chip-bubble: #F47421; --rsp-chip-bubble-fg: var(--on-primary); --rsp-chip-border: transparent; }
html[data-theme="dark"] body[data-restyle="c5g"] { --rsp-chip-bg: rgba(248,169,0,.18);  --rsp-chip-fg: #fde68a; --rsp-chip-bubble: #F8A900; --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent; }
html[data-theme="dark"] body[data-restyle="c5n"] { --rsp-chip-bg: rgba(244, 116, 33,.16); --rsp-chip-fg: #fdba74; --rsp-chip-bubble: #F47421; --rsp-chip-bubble-fg: var(--on-primary); --rsp-chip-border: #F47421; }
html[data-theme="dark"] body[data-restyle="sf"]  {
    --rsp-accent: #F8A900; --rsp-accent-2: #ffc233; --rsp-on-accent: #201B16;
    --rsp-bubble: rgba(32,27,22,.22); --rsp-bubble-fg: #201B16; --rsp-sec-border: rgba(248,169,0,.28);
    --rsp-chip-bg: rgba(248,169,0,.18); --rsp-chip-fg: #fde68a; --rsp-chip-bubble: #F8A900;
    --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent;
}

/* R5-C3-followup: dark geltona chip vars for the two new layouts. */
html[data-theme="dark"] body[data-restyle="c5b"], html[data-theme="dark"] body[data-restyle="c5p"] { --rsp-chip-bg: rgba(248,169,0,.18); --rsp-chip-fg: #fde68a; --rsp-chip-bubble: #F8A900; --rsp-chip-bubble-fg: #201B16; --rsp-chip-border: transparent; }

/* HIVE-96 sf: dark stylesheet loads after light, so repeat the chip/subsection
   surfaces at dark specificity while keeping the same yellow active chrome. */
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section {
    border-left: 3px solid var(--rsp-chip-bubble) !important;
    background: var(--surface) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section-header,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border, #332b22) !important;
    padding: 9px 14px !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section-title,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--rsp-chip-bg) !important;
    color: var(--rsp-chip-fg) !important;
    border: 1px solid var(--rsp-chip-border) !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section-title i { display: none !important; }
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-title > span:not(.claims-wizard-section-number) { color: var(--rsp-chip-fg) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-header .claims-wizard-section-chevron { color: var(--rsp-chip-fg) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .activity-landing-card::before { background: var(--rsp-accent) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .activity-landing-card:hover {
    border-color: var(--rsp-accent) !important;
    box-shadow: 0 6px 20px rgba(248, 169, 0, .20) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .activity-landing-card-icon {
    background: #201B16 !important;
    color: var(--rsp-accent) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .activity-landing-card-icon i { color: var(--rsp-accent) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .cdv-section-header .cdv-section-number,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-section-number {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    background: var(--rsp-chip-bubble) !important;
    color: var(--rsp-chip-bubble-fg) !important;
    font-size: 12.5px !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .cdv-subgroup-title,
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-subsection-title {
    background: rgba(248,169,0,.16) !important;
    border-left-color: #F8A900 !important;
    color: #fde68a !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-subsection-title {
    border-left: 3px solid #F8A900 !important;
    border-bottom-color: rgba(248,169,0,.25) !important;
}

/* ── #458 dark twins — gray container → --surface-2, cream header band → translucent gold
   + pale-gold ink (the #441 band convention). Placed last to win the generic
   body[data-restyle] container rule near the top of this file. */
html[data-theme="dark"] body[data-restyle="sf"] .claims-wizard-upload-box,
html[data-theme="dark"] body[data-restyle="sf"] .attachment-type-card {
    background: var(--surface-2, #241f18) !important;
    border-color: var(--border, #332b22) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header {
    background: rgba(248, 169, 0, 0.16) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header:hover { background: rgba(248, 169, 0, 0.22) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header .attachment-card-title { color: #fde68a !important; }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header .attachment-card-chevron { color: #fde68a !important; }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header .attachment-card-file-count { color: rgba(253, 230, 138, 0.75) !important; }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-header .attachment-header-upload-icon { color: #fde68a; }
/* row hover + "Internal only" chip (light amber #fef3c7/#92400e had no dark twin — light island). */
html[data-theme="dark"] body[data-restyle="sf"] .attachment-file-row:hover { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-file-row[data-thumb-selected="true"] { background: rgba(240, 138, 42, 0.12); }
html[data-theme="dark"] body[data-restyle="sf"] .attachment-card-internal-badge {
    background: rgba(248, 169, 0, 0.16) !important;
    color: #fde68a !important;
}

/* #458 item 7 — Select all active state, dark twin per the filter-chip convention
   (theme.css): #F47421 border, brightened #F79638 text, translucent orange wash. */
html[data-theme="dark"] .attachment-bulk-select-toggle.is-active {
    background: rgba(244, 116, 33, 0.14);
    color: #F79638;
    border-color: #F47421;
}

/* ── #461 dark twin — cost-section boundary headings. Solid brand fills keep their hue
   in dark (repo convention), so the band stays #F8A900 with ink text/controls; only the
   focus ring flips to pale gold so it reads against the dark page background. Placed
   LAST so it beats the equal-specificity translucent-gold subsection rules above. */
html[data-theme="dark"] body[data-restyle="sf"] .claims-cost-boundary-title {
    background: var(--rsp-brand-yellow, #F8A900) !important;
    color: #201B16 !important;
    border-left-color: var(--rsp-brand-yellow, #F8A900) !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claims-cost-boundary-title * { color: #201B16 !important; }
html[data-theme="dark"] body[data-restyle="sf"] .claims-cost-boundary-title .claims-subsection-filled-dot {
    background: #201B16 !important;
}
html[data-theme="dark"] body[data-restyle="sf"] .claims-cost-boundary-title:focus-visible {
    outline: 2px solid #fde68a !important;
    outline-offset: 2px;
}

/* =============================================================================
   CLAIM SEMANTIC / INTERACTION CONTRACT (2026-07-13)
   This file is re-linked after the claim feature styles on Edit/Details.  The
   explicit dark + claim-page scope also protects Create from later feature
   literals without affecting any light route.
   ============================================================================= */

/* Editable and read-only status/priority controls share the same dark pairs. */
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-select-wrap.is-empty :where(.cmb-chip-button, .cmb-chip-select),
html[data-theme="dark"] body.claim-merged-bar-page :where(.cmb-chip-empty, .cmb-color-dot-empty) {
    background: var(--neutral-state-bg) !important;
    border-color: var(--control-border) !important;
    color: var(--neutral-state-text) !important;
}

html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-select-wrap.pri-low :where(.cmb-chip-button, .cmb-chip-select),
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-pri-low {
    background: var(--priority-low-bg) !important;
    border-color: var(--component-border) !important;
    color: var(--priority-low-text) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-select-wrap.pri-medium :where(.cmb-chip-button, .cmb-chip-select),
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-pri-med {
    background: var(--priority-medium-bg) !important;
    border-color: #927821 !important;
    color: var(--priority-medium-text) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-select-wrap.pri-high :where(.cmb-chip-button, .cmb-chip-select),
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-pri-high {
    background: var(--priority-high-bg) !important;
    border-color: #a36536 !important;
    color: var(--priority-high-text) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-select-wrap.pri-critical :where(.cmb-chip-button, .cmb-chip-select),
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-pri-crit {
    background: var(--priority-critical-bg) !important;
    border-color: #b25c58 !important;
    color: var(--priority-critical-text) !important;
}

html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-select-wrap.st-open :where(.cmb-chip-button, .cmb-chip-select),
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-st-open {
    background: var(--status-open-bg) !important;
    border-color: #4f78a1 !important;
    color: var(--status-open-text) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-select-wrap.st-final :where(.cmb-chip-button, .cmb-chip-select),
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-st-final {
    background: var(--status-final-bg) !important;
    border-color: #4f8b65 !important;
    color: var(--status-final-text) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-select-wrap.st-suspended :where(.cmb-chip-button, .cmb-chip-select),
html[data-theme="dark"] body.claim-merged-bar-page .cmb-chip-st-suspended {
    background: var(--status-suspended-bg) !important;
    border-color: #92762c !important;
    color: var(--status-suspended-text) !important;
}

html[data-theme="dark"] body.claim-merged-bar-page :where(.cmb-chip-button, .cmb-chip-select, .cmb-chip) {
    border-width: 1px;
    border-style: solid;
}

/* The MTN outcome row is emitted outside the common form-control class set.
   Give its plain input the same field tokens and 3:1 control boundary as all
   other editable dark fields. */
html[data-theme="dark"] body.claim-merged-bar-page .claims-wizard-action-input input {
    background: var(--input-bg) !important;
    border-color: var(--control-border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .cmb-chip-popover {
    background: var(--surface-2) !important;
    border-color: var(--control-border) !important;
}
html[data-theme="dark"] .cmb-chip-popover-search {
    background: var(--input-bg) !important;
    border-color: var(--control-border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .cmb-chip-popover-item.is-active {
    background: var(--primary-light) !important;
    color: #ffd49b !important;
    box-shadow: inset 3px 0 0 var(--primary-text);
}
html[data-theme="dark"] .cmb-chip-popover-item.pri-low {
    background: var(--priority-low-bg);
    color: var(--priority-low-text);
}
html[data-theme="dark"] .cmb-chip-popover-item.pri-medium {
    background: var(--priority-medium-bg);
    color: var(--priority-medium-text);
}
html[data-theme="dark"] .cmb-chip-popover-item.pri-high {
    background: var(--priority-high-bg);
    color: var(--priority-high-text);
}
html[data-theme="dark"] .cmb-chip-popover-item.pri-critical {
    background: var(--priority-critical-bg);
    color: var(--priority-critical-text);
}
html[data-theme="dark"] .cmb-chip-popover-item.st-open {
    background: var(--status-open-bg);
    color: var(--status-open-text);
}
html[data-theme="dark"] .cmb-chip-popover-item.st-final {
    background: var(--status-final-bg);
    color: var(--status-final-text);
}
html[data-theme="dark"] .cmb-chip-popover-item.st-suspended {
    background: var(--status-suspended-bg);
    color: var(--status-suspended-text);
}
html[data-theme="dark"] .cmb-chip-popover-item:is(
    .pri-low, .pri-medium, .pri-high, .pri-critical,
    .st-open, .st-final, .st-suspended
):is(:hover, :focus, .is-active) {
    border-left: 3px solid var(--primary-text);
    filter: brightness(1.12);
}

/* The stale-save alert banner still carries light-theme colors; contain it here
   until its markup migrates to semantic classes (D20). The inline-styled intake
   badge twin died with _FormHeader.cshtml — the live badges are class-themed. */
html[data-theme="dark"] body.claim-merged-bar-page .claims-quick-intake-banner[role="alert"] {
    background: var(--danger-bg) !important;
    border-color: var(--danger-text) !important;
    color: var(--danger-text) !important;
}

/* Header, rail and inline secondary actions require a discoverable boundary. */
html[data-theme="dark"] body.claim-merged-bar-page :where(
    .cmb-ch-actions .btn-secondary,
    .cmb-ch-actions .btn-primary-outline,
    .cmb-sb-action.btn-secondary,
    .claims-wizard-quick-action-btn,
    .claim-form-density-btn,
    .cse-edit-btn
) {
    border-color: var(--control-border) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .cse-edit-btn {
    background: var(--surface-2);
    color: var(--text);
}
html[data-theme="dark"] body.claim-merged-bar-page .cse-edit-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-text) !important;
    color: #ffd49b;
}
html[data-theme="dark"] body.claim-merged-bar-page .claim-form-density-menu {
    background: var(--surface-2);
    border-color: var(--control-border);
    box-shadow: var(--shadow-lg);
}
html[data-theme="dark"] body.claim-merged-bar-page .claim-form-density-menu button.on {
    background: var(--primary-light);
    color: #ffd49b;
    box-shadow: inset 3px 0 0 var(--primary-text);
}

/* Filled claim actions and pipeline labels use dark ink on orange. */
html[data-theme="dark"] body.claim-merged-bar-page :where(
    .cmb-ch-actions .btn-primary,
    .cmb-sb-action.btn-primary,
    .claims-wizard-pipeline-badge
) {
    color: var(--on-primary) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .cmb-ch-intake-badge--draft,
html[data-theme="dark"] body.claim-merged-bar-page .cmb-ch-intake-badge--quick {
    background: var(--warning-bg) !important;
    border-color: var(--warning-text) !important;
    color: var(--warning-text) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .cmb-ch-intake-badge--email {
    background: var(--info-bg) !important;
    border-color: var(--info-text) !important;
    color: var(--info-text) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .cmb-ch-intake-badge--request {
    background: var(--success-bg) !important;
    border-color: var(--success-text) !important;
    color: var(--success-text) !important;
}

/* Colour dots: duplicate the feature-local ring contract here because this
   stylesheet intentionally sits after the merged-bar sizing overrides. */
html[data-theme="dark"] body.claim-merged-bar-page .claims-wizard-color-dot {
    position: relative;
    border: 1px solid var(--control-border) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .claims-wizard-color-dot.active,
html[data-theme="dark"] body.claim-merged-bar-page .claims-wizard-color-dot:focus-visible {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--focus-indicator) !important;
}
html[data-theme="dark"] body.claim-merged-bar-page .claims-wizard-color-dot.active::after {
    content: "\2713";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-shadow: -1px -1px 0 #201b16, 1px -1px 0 #201b16,
                 -1px 1px 0 #201b16, 1px 1px 0 #201b16;
}

@media (max-width: 768px) {
    html[data-theme="dark"] body.claim-merged-bar-page .claim-mobile-action-bar {
        background: var(--surface-2) !important;
        border-top-color: var(--component-border) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .68) !important;
    }
    html[data-theme="dark"] body.claim-merged-bar-page .claim-mobile-action-bar .cma-btn {
        background: var(--surface-3);
        border-color: var(--control-border);
        color: var(--text);
    }
    html[data-theme="dark"] body.claim-merged-bar-page .claim-mobile-action-bar .cma-btn-primary {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--on-primary) !important;
    }
    html[data-theme="dark"] body.claim-merged-bar-page .claims-wizard-sidebar {
        background: var(--surface) !important;
        border-top-color: var(--component-border) !important;
        box-shadow: 0 -12px 36px rgba(0, 0, 0, .78) !important;
    }
    html[data-theme="dark"] .claim-mobile-sheet-backdrop {
        background: rgba(8, 6, 4, .78) !important;
        backdrop-filter: blur(2px);
    }
}

/* ===== source: /css/a11y.css ===== */
/* ============================================================================
   a11y.css — shared accessibility primitives (WCAG 2.2 AA pass).
   Additive only: a skip link + a consistent keyboard focus ring. No layout
   reflow. Loaded last so the focus token wins over browser defaults but NOT
   over controls that set their own outline (lower specificity by design).
   ============================================================================ */

/* Sitewide skip link — first focusable element, hidden off-screen until focused,
   then drops in at the top-left and lands focus on #main-content. */
.skip-link {
    position: absolute;
    left: 8px;
    top: -56px;
    z-index: 100000;
    background: var(--primary, #F47421);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Consistent, brand-coloured keyboard focus ring. :focus-visible only matches
   keyboard focus, so mouse clicks don't draw rings. Low specificity: it adds a
   ring where a control relies on the browser default, and leaves controls that
   define their own outline/box-shadow focus style untouched. */
:focus-visible {
    outline: 2px solid var(--primary, #F47421);
    outline-offset: 2px;
}

/* The skip-link target is a non-interactive landmark; focusing it (tabindex=-1)
   should not draw a ring around the whole content area. */
#main-content:focus {
    outline: none;
}

/* Modal containers receive programmatic focus for the focus-trap (modal-a11y.js
   adds tabindex=-1 and calls .focus() on open). They are non-interactive divs, so
   the brand focus ring on them reads as a stray orange border — suppress it, the
   same way #main-content is handled. The dialog is still announced via
   role="dialog"/aria-modal/aria-labelledby, so this is WCAG-safe. */
.modal-overlay:focus,
.modal-overlay:focus-visible,
.modal-content:focus,
.modal-content:focus-visible,
.modal:focus,
.modal:focus-visible,
.modal-box:focus,
.modal-box:focus-visible {
    outline: none;
}

/* Interactive icon-only / nav controls: the loud brand-orange ring reads as a bug
   here. Drop any mouse/programmatic-focus border and replace the keyboard ring with
   a quiet neutral one (still a visible WCAG 2.4.7 keyboard indicator). */
.btn-close-modal:focus:not(:focus-visible),
.nav-item:focus:not(:focus-visible),
.claims-wizard-step:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
.btn-close-modal:focus-visible,
.nav-item:focus-visible,
.claims-wizard-step:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18);
}

/* Visually-hidden utility for screen-reader-only labels (e.g. an actions-column
   header, an icon-button name). Self-contained so it's guaranteed present. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Interactive-target floor (2026-08-12 intake/triage sweep + KIT audit) ----
   The iPhone 15 audit flagged these shared controls below 32px: modal close
   buttons, email-history filter chips, list claim-number links, the page-size
   select, breadcrumb links and ghost cancel buttons in dialogs. The follow-up
   KIT lifecycle audit measured 22–30px icon controls and 17–23px language/link
   surfaces with a FINE pointer too, so the floor now applies on all pointers
   for controls whose visible look doesn't change when their box grows —
   borderless/transparent icon buttons and text links (the glyph stays the
   same size; only the clickable box extends). */
.btn-close-modal,
.btn.btn-ghost,
.claims-header-btn,
.lang-btn,
.lang-menu button,
.lang-menu a {
    min-width: 32px;
    min-height: 32px;
}

a.claim-number-link,
.page-breadcrumb a,
.lang-btn,
.lang-menu button,
.lang-menu a {
    min-height: 32px;
    padding-top: max(6px, 0.35em);
    padding-bottom: max(6px, 0.35em);
    display: inline-flex;
    align-items: center;
}

/* Visible-box controls (native selects, bordered filter chips) cannot take a
   hit-only extension without wrappers — enlarging them changes the design's
   density. They keep the touch-only floor (desktop sizes stay ≥ the WCAG 2.5.8
   24px minimum). */
@media (pointer: coarse) {
    .email-filter,
    select {
        min-width: 32px;
        min-height: 32px;
    }

    .email-filter {
        min-height: 32px;
        padding-top: max(6px, 0.35em);
        padding-bottom: max(6px, 0.35em);
        display: inline-flex;
        align-items: center;
    }
}

/* ===== source: /css/mobile-contain.css ===== */
/* ============================================================================
   mobile-contain.css — narrow-phone contained-overflow guardrails for the dense
   admin / analytical pages flagged in the final handoff review (2026-06-07).

   These pages have page-local <style> or feature CSS that loads AFTER the global
   dark files, so a plain `.class { … }` override loses by source order. Every
   selector here is ELEMENT- or ID-prefixed (e.g. `table.data-table`, specificity
   0,2,1; `aside#favoritesDrawer`, 1,1,0) so it beats those rules regardless of
   load order. All rules are @media (max-width:768px) → desktop is byte-identical,
   and they apply in BOTH light and dark (these are layout, not colour, fixes).
   ============================================================================ */
@media (max-width: 768px) {
    /* Dense admin / matrix tables: the natural scroll container is the
       .data-table-wrapper — make it scroll horizontally (it sits at .main-content
       width, so the wide table scrolls INSIDE it instead of pushing the page).
       Card-mode lists (which already kill the wide table) are excluded. */
    div.data-table-wrapper:not(:has(> table.list-cards-mobile)) {
        overflow-x: auto !important;
        max-width: 100%;
        min-width: 0;
    }
    /* Tables themselves scroll. min-width:0 is essential — these tables set a
       min-width (e.g. 800px) which would otherwise beat max-width:100% and keep
       the box wide. display:block + overflow-x:auto + min-width:0 clamps the BOX
       to the column and scrolls the table content inside. (Wrapped tables also
       get this harmlessly — their wrapper already scrolls.) */
    /* (Round 2, 2026-08-08: table.pm-grid-table removed from this list — it
       contradicted the pm-shell comment below: display:block made the TABLE
       its own scroller, so the purpose-built .pm-grid-scroll container never
       scrolled and its shared edge cue could never light.) */
    table.data-table:not(.list-cards-mobile),
    table.mm-table,
    table.bk-table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
    }
    /* MassMailing client autocomplete dropdown wrapper. */
    div.mm-typeahead-wrap,
    div.client-autocomplete {
        min-width: 0;
        max-width: 100%;
    }

    /* Admin tab strips (flex rows that don't wrap) → horizontal scroll so the
       row doesn't widen .main-content. */
    div.admin-tabs,
    div.bk-tabs,
    nav.invsettings-tabs,
    div.mm-tabs,
    div.fn-tabs,
    div.role-tabs,
    div.csl-segment,
    div.csl-expansion-controls {
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
    }
    /* Long inline hints/labels (e.g. MassMailing typeahead hint) wrap. */
    span.mm-typeahead-hint,
    span.mm-muted {
        overflow-wrap: anywhere;
        min-width: 0;
        white-space: normal;
    }

    /* /Admin/Permissions single-column rules live in the unified
       @media (max-width: 1023px) block further down (owner decision 1,
       2026-08-08) — the phone and tablet bands share byte-identical rules. */

    /* /Admin/Roles — owner decision 2 (2026-08-08): the always-two-pane
       280px 1fr .role-shell leaves the detail pane a ~70–90px sliver at 390.
       Stack: role list above, detail below (selection is a full navigation;
       the page script scrolls the detail into view when ?selected= is set). */
    div.role-shell {
        grid-template-columns: 1fr !important;
    }
    aside.role-rail,
    section.role-main {
        min-width: 0;
        max-width: 100%;
    }

    /* /Admin/ClaimSectionLayout — the real container is .csl-split (collapses via
       its own @media<=1100); the residual +3px scrollbar at 320 is the
       .csl-preview-stage grid (1fr 100px) whose fixed 100px sidebar col + gap
       won't fit the ~254px panel. Collapse it; shrink the sidebar. (The old
       .csl-layout/.csl-shell selectors here were dead — never in the markup.) */
    div.csl-preview-stage { grid-template-columns: 1fr !important; }
    div.csl-preview-sidebar { min-width: 0; max-width: 100%; }

    /* /Admin/Functionalities — long code/meta lines don't wrap. */
    span.code-line,
    div.cd,
    div.nm,
    span.meta {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* /Reports/AiReports — the favourites drawer's CLOSED state stays off-canvas
       so it never contributes layout width (ID beats the page's #favoritesDrawer
       rule). The page already makes it full-width when open. */
    aside#favoritesDrawer:not(.is-open) {
        right: 0 !important;
        /* transform:none (NOT translateX) — a transformed off-canvas box still
           extends the page's scrollable overflow; keep the box in-viewport at
           right:0 and hide it with visibility instead. */
        transform: none !important;
        visibility: hidden !important;
    }

    /* ------------------------------------------------------------------ *
     * Round 2 (2026-06-07) — residuals the first pass left contained.
     * Each rule below was proven live (inject-and-measure: the targeted
     * box scrollWidth-clientWidth driven to 0 at 320 AND 390, light+dark,
     * desktop inert) before being committed.
     * ------------------------------------------------------------------ */

    /* /Claims/Details + /Claims/Edit — #btnClaimAdmin claim-admin modal.
       .ca-action-bar is a non-wrapping flex row (Action label + select +
       refresh button); the box only caps at 1100px, so on phones the select
       keeps its ~316px intrinsic width and the refresh button overflows the
       box (56px @390, 126px @320). Cap the box, wrap the bar, full-width select. */
    #claimAdminModal .modal-content.claim-admin-modal { max-width: 100%; }
    #claimAdminModal .ca-action-bar { flex-wrap: wrap; min-width: 0; }
    #claimAdminModal .ca-action-select { flex: 1 1 100%; min-width: 0; max-width: 100%; }
    #claimAdminModal .ca-head,
    #claimAdminModal .ca-foot { flex-wrap: wrap; min-width: 0; }
    #claimAdminModal .ca-foot-info { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
    #claimAdminModal .ca-endpoint,
    #claimAdminModal .ca-issue,
    #claimAdminModal .ca-file,
    #claimAdminModal .ca-confirm { flex-wrap: wrap; min-width: 0; }
    /* In-panel HIVE-51 type-of-claim dropdown (Atralo "Siųsti į Atralo" panel) and
       any .select-wrapper select: site.css .select-wrapper select sets no width, so
       it takes its longest option's intrinsic width (~184px: "010 — Vėluojantis
       pristatymas") and bleeds past the box — visually clipping the chevron + the
       data-grid's left column. The box scrollWidth metric misses it because the box
       has overflow:hidden (clips, doesn't register). Cap the select + let the cell
       shrink. */
    #claimAdminModal .ca-type-of-claim-select,
    #claimAdminModal .select-wrapper select { width: 100%; min-width: 0; max-width: 100%; }
    #claimAdminModal .ca-data-grid .select-wrapper { display: block; min-width: 0; max-width: 100%; }

    /* Generalised select-overflow cap. The same .select-wrapper select pattern
       (no width → longest-option intrinsic width) bleeds out of OTHER modals too
       (e.g. /Admin/Circumstances #circumstancePipelineId, +45px@320), and report
       filter <select>s carry an inline style="min-width:260px/220px" that beats
       any stylesheet width. On mobile, cap every modal select + any inline-
       min-width select to its container (min-width:0 !important to defeat the
       inline style). Mobile-only → desktop 1:1 unaffected. */
    .modal-overlay .select-wrapper select,
    .modal-overlay select.form-control { min-width: 0 !important; max-width: 100%; }
    select[style*="min-width"] { min-width: 0 !important; max-width: 100%; }

    /* /Admin/MassMailing — the real offender is the "Find & add client" typeahead
       row: .mm-typeahead-row's own CSS sets display:flex, which DEFEATS the
       [hidden] attr the JS toggles for claim/client mode, so in the default claim
       mode the row still lays out and its flex:0 0 360px wrap overflows by 123px.
       Honour [hidden] on mobile; when shown, let the wrap take full width. */
    div.mm-typeahead-row[hidden] { display: none !important; }
    div.mm-typeahead-row { flex-wrap: wrap; }
    div.mm-typeahead-wrap { flex: 1 1 100%; min-width: 0; max-width: 100%; }
    /* Source-mode pills: 1fr 1fr forces ~390px of content at 320; stack to one col. */
    div.mm-source-toggle { grid-template-columns: 1fr; }
    button.mm-src-pill { min-width: 0; }
    span.mm-src-label,
    span.mm-src-sub { min-width: 0; overflow-wrap: anywhere; }

    /* Small SuperAdmin residuals — page-header actions rows that don't wrap
       (Permissions/Functionalities/PermissionMatrix export buttons). */
    div.page-header { flex-wrap: wrap; }
    div.page-header > div { min-width: 0; max-width: 100%; }
    div.page-header > div[style*="flex"] { flex-wrap: wrap; }
    div.page-header a.btn-primary,
    div.page-header a.btn-secondary { min-width: 0; }

    /* Monitoring pages use .page-toolbar (title + an inline display:flex action
       row of link/buttons) which doesn't wrap — the action row overflows at 320
       (e.g. /Monitoring/AlertRules ← Monitoring / Settings / + New rule). Wrap. */
    div.page-toolbar { flex-wrap: wrap; }
    div.page-toolbar > div { flex-wrap: wrap; min-width: 0; }

    /* /Admin/PermissionMatrix — the .pm-stats 4-col grid forces the single
       .pm-shell column to its min-content width (~344px), stretching every
       sibling past .main-content. Collapse stats to 2 cols; shrink shell kids.
       The matrix keeps its own .pm-grid-scroll contained scroll. */
    div.pm-shell > * { min-width: 0; max-width: 100%; }
    section.pm-stats { grid-template-columns: repeat(2, 1fr) !important; }
    div.pm-toolbar input[type="search"] { min-width: 0; }

    /* /Admin/Functionalities — the .fn-shell 2-col grid (340px 1fr) won't
       collapse; the 340px rail overhangs at 320. One column + shrink panels. */
    div.fn-shell { grid-template-columns: 1fr !important; }
    aside.fn-rail,
    section.fn-inspector { min-width: 0; max-width: 100%; }

    /* /Reports/AiReports — the .report-header space-between flex has a #schemaInfo
       meta-badge whose long date string won't shrink. Wrap header + badge text. */
    div.report-header { flex-wrap: wrap; }
    div.report-header > div { min-width: 0; max-width: 100%; }
    span#schemaInfo.meta-badge { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }

    /* /Admin/InvoiceSettings — the #s123ConfigActions inline-flex (Unsaved
       changes + Save) in a space-between card head overhangs by ~20 at 320. */
    div#s123ConfigActions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    div#s123ConfigCard > div:first-child { flex-wrap: wrap; min-width: 0; }

    /* /Admin/BusinessKnowledge — each .bk-toggle has min-width:280px which
       overhangs the flex-wrap .bk-toggles row by ~13 at 320. Drop the floor. */
    label.bk-toggle { min-width: 0; max-width: 100%; }

    /* ------------------------------------------------------------------ *
     * Round 3 (2026-06-07) — deeper-state residuals the adversarial pass
     * found (wizard steps 2/3, Batch pages, Audit/Regressions tabs).
     * Each proven live before commit.
     * ------------------------------------------------------------------ */

    /* /Admin/MassMailing step 2 "Compose" — .mm-compose-grid is a 2fr 1fr grid
       with no phone collapse, forcing ~347px at 320. One column. */
    div.mm-compose-grid { grid-template-columns: 1fr !important; }

    /* /Admin/MassMailing step 3 "Review & send" — the .mm-rcp-summary 4-col grid
       (1fr auto auto auto) + the 700px-capped nowrap preview render ~700px and
       never reflow. Stack the summary, let the preview/cards shrink. */
    div.mm-rcp-summary { grid-template-columns: 1fr !important; }
    div.mm-rcp-preview { max-width: 100% !important; white-space: normal; }
    div.mm-rcp-card,
    div.mm-rcp-body { min-width: 0; max-width: 100%; }
    div.mm-rcp-body input[type="text"],
    div.mm-rcp-body textarea { max-width: 100%; min-width: 0; }
    label.mm-rcp-skip,
    span.mm-rcp-meta-chip,
    span.mm-rcp-chevron { min-width: 0; }

    /* /Admin/MassMailing/Batches detail — the .mm-kpi-row card grid overflows. */
    div.mm-kpi-row { grid-template-columns: 1fr !important; }
    div.mm-kpi-card { min-width: 0; max-width: 100%; }

    /* /Admin/MassMailing step 3 "Review & send" — the .mm-review-banner
       (space-between flex) and its .mm-step-actions row (Back / Send test /
       Send all — 3 buttons, no wrap) overflow by ~48 at 320; the primary
       #mm-send-batch "Send all" CTA itself overhangs. Wrap both + shrink. */
    div.mm-review-banner { flex-wrap: wrap; }
    div.mm-step-actions { flex-wrap: wrap; min-width: 0; }
    div.mm-step-actions button,
    button#mm-send-batch { min-width: 0; }

    /* /Admin/MassMailing wizard step-indicator strip — ol.mm-wizard is
       flex-nowrap + overflow:hidden, so step 3 "Review & send" is clipped past
       the box at phone widths and can't be reached. Let the steps wrap (and zero
       the default <ol> inline padding that nudged it ~3px over at 320). */
    ol.mm-wizard { flex-wrap: wrap; padding-left: 0; padding-inline-start: 0; }
    li.mm-wiz-step { min-width: 0; }
    li.mm-wiz-step > div { min-width: 0; }
    li.mm-wiz-step .mm-wiz-label,
    li.mm-wiz-step .mm-wiz-sub { overflow-wrap: anywhere; min-width: 0; }

    /* /Admin/BusinessKnowledge Audit/Regressions tabs — .bk-toolbar is a
       no-wrap flex row with a flex:1 spacer pushing a right-aligned pill/button
       off the edge (+182 Audit, +28 Regressions at 320). NOTE: the Audit toolbar
       is a <form class="bk-toolbar">, not a <div> — so target the class (not
       div.) and neutralise the spacer strut so the trailing pill can wrap. */
    .bk-toolbar { flex-wrap: wrap !important; }
    .bk-toolbar > * { min-width: 0; max-width: 100%; }
    .bk-toolbar > .spacer { flex-basis: 100%; flex-grow: 0; }

    /* Deployment-gate blocker 2 — /Reports/MtnInvoices/PaidInvoiceClientWorkbook
       (and any report filter form): the path inputs carry inline min-width:320px
       (beats stylesheet width) and overflow at 320. Cap inline-min-width inputs +
       let the filter rows + file inputs wrap/shrink. */
    input[style*="min-width"] { min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
    div.report-filter-row,
    div.report-filter-row-secondary { flex-wrap: wrap; min-width: 0; }
    div.report-filter-row input,
    div.report-filter-row input[type="file"] { max-width: 100%; min-width: 0; box-sizing: border-box; }

    /* Deployment-gate blocker 4 — the restyle-preview pill is fixed bottom-right
       and, at rest on a phone, can sit over claim action/content (the AI-drawer-
       open hide rule only covers the drawer case). The pill is a desktop
       review/preview tool; hide it entirely on phones so nothing tappable is ever
       covered. Chosen theme still persists (cookie) and renders on mobile; only
       the picker UI is desktop-only. (Desktop keeps the pill; the drawer-open
       hide rule below still applies there.) */
    .rsp-panel { display: none !important; }
}

/* ====================================================================== *
 * Tablet band (769–1100px). The app's drawer/split breakpoints sit at
 * 1100px, but the wide-table scroll-containment above is gated <=768, so
 * table-heavy admin pages (MassMailing, BusinessKnowledge) still clip when a
 * desktop window is resized into portrait-tablet range. Re-apply the table
 * containment (and neutralise the sticky-thead leak) up to 1100 so the band
 * is clean too. Still well below Full-HD 1920 → light desktop byte-identical.
 * ====================================================================== */
@media (max-width: 1100px) {
    /* (Round 2, 2026-08-08: table.pm-grid-table removed here too — see the
       ≤768 block; .pm-grid-scroll is the matrix's one scroller + cue host.) */
    table.data-table:not(.list-cards-mobile),
    table.mm-table,
    table.bk-table,
    table.ar-table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
    }
    /* .mm-table th is position:sticky;top:0 — inside the display:block scroll box
       its cell geometry still leaks into .main-content scrollWidth (+25/+151).
       Drop sticky in the contained range; the header simply scrolls with rows. */
    table.mm-table thead th { position: static; }

    /* BusinessKnowledge toolbar wraps in the tablet band too (form.bk-toolbar). */
    .bk-toolbar { flex-wrap: wrap !important; }
    .bk-toolbar > .spacer { flex-basis: 100%; flex-grow: 0; }

    /* The 9-button .bk-tabs strip (Concepts…Audit) overflows ~1079px; its
       overflow-x:auto guard is gated <=768, so it clips in the tablet band.
       Same for the other admin tab strips that run wide. */
    div.bk-tabs,
    div.admin-tabs,
    nav.invsettings-tabs,
    div.mm-tabs,
    div.fn-tabs,
    div.role-tabs {
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
    }

    /* MassMailing "Find & add client" typeahead row: its display:flex defeats
       [hidden] (claim mode) and the flex:0 0 360px wrap overflows the tablet
       band too. Honour [hidden]; full-width wrap when shown. */
    div.mm-typeahead-row[hidden] { display: none !important; }
    div.mm-typeahead-row { flex-wrap: wrap; }
    div.mm-typeahead-wrap { flex: 1 1 100%; min-width: 0; max-width: 100%; }
    span.mm-typeahead-hint,
    span.mm-muted { overflow-wrap: anywhere; min-width: 0; white-space: normal; }
}

/* ====================================================================== *
 * /Admin/Permissions — owner decision 1 (2026-08-08): single column across
 * the WHOLE ≤1023 range (phone band + 769–1023 tablet band merged — the
 * round-2 tablet block was byte-identical to the phone rules). With the
 * icon rail + page padding, the inline 280px 1fr 300px .perm-shell
 * collapses its middle detail track to ~80–160px at 820 (word-per-line
 * titles, clipped code badges). Stack in DOM order: list → detail →
 * catalog. Deliberately capped at 1023 — the captured 1024 three-pane
 * layout is usable and must stay untouched, as must desktop.
 * (Selectors match the real markup: aside.perm-rail, section.perm-bundle,
 * aside.perm-catalog — the old div.perm-rail/div.perm-bundle/
 * section.perm-detail variants were dead.)
 * ====================================================================== */
@media (max-width: 1023px) {
    div.perm-shell {
        grid-template-columns: 1fr !important;
    }
    aside.perm-rail,
    section.perm-bundle,
    aside.perm-catalog {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* V3 — the fixed assistant and scroll FABs sit at right:24px / bottom:80px
       with z-index 1050, so on narrow viewports they landed directly on the
       sticky pagination controls (the rows-per-page select) and on the last card
       of a request page. Reserve their column instead of moving the FABs, which
       are positioned consistently across the whole app. */
    .pagination-wrapper {
        padding-right: 76px;
    }

    /* The companion `.intake-request-page { padding-bottom: 104px }` rule is
       gone (V3/P5, 2026-08-08): `.main-content` now reserves the FAB stack via
       --content-safe-bottom at EVERY width, and this page sits inside it, so
       keeping a second reserve here just stacked ~250px of dead space under
       the last card on a phone. */
}

/* ===== source: /css/notifications.css ===== */
/* ============================================
   Notification Bell Dropdown
   ============================================ */

.notification-bell-wrapper {
    position: relative;
    display: inline-block;
}

.notification-dropdown,
.notification-sidebar,
.notification-modal {
    font-family: var(--font-support);
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
}

.notification-dropdown.active {
    display: block;
}

.notification-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.notification-dropdown-link {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: 500;
}

.notification-dropdown-link:hover {
    text-decoration: underline;
    color: var(--accent-orange-deep);
}

/* ============================================
   HIVE-717 — "Mark all as read" action (shared by the notification AND message
   dropdowns, pinned drawers and full pages; messages.css reuses these classes).
   aria-disabled (not disabled) keeps focus after completion; the is-loading
   icon swap keeps the fa-fw glyph box so dimensions never change.

   2A (polish plan 2026-08-25): in the header POPUPS the action is no longer a
   full-width row — mark-all, settings and pin are equal compact icon tools
   (.popup-icon-tool) in the popup header; the pinned drawers adopt the same
   icon-only treatment through the shared .hive-drawer-actions chrome.
   ============================================ */

.markall-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-orange);
    cursor: pointer;
    white-space: nowrap;
}

.markall-btn:hover {
    background: var(--bg);
    color: var(--accent-orange-deep);
}

.markall-btn.is-disabled {
    color: var(--text-secondary);
    opacity: 0.65;
    cursor: default;
}

.markall-btn.is-disabled:hover {
    background: none;
    color: var(--text-secondary);
}

.markall-btn.is-loading {
    cursor: progress;
}

/* 2A — compact icon tools in the popup headers. Visual box 32px (mockup
   30–32px inside the 44px header rhythm); the inset -4px pseudo-element
   extends the effective pointer target to 40×40 without shifting layout.
   The three tools (mark-all / gear / pin) share this exact geometry. */
.header-popup-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.popup-icon-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.popup-icon-tool::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 10px;
}

.popup-icon-tool:hover {
    background: var(--bg);
    color: var(--accent-orange-deep);
    text-decoration: none;
}

.popup-icon-tool:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 1px;
}

/* Mark-all is the accent tool; disabled falls back to the shared quiet state
   (the button STAYS in the header — no layout shift when nothing is unread). */
.markall-btn.popup-icon-tool {
    color: var(--accent-orange);
}

.markall-btn.popup-icon-tool.is-disabled,
.markall-btn.popup-icon-tool.is-disabled:hover {
    background: none;
    color: var(--text-secondary);
}

/* Drawer-header variant (2A/§10 parity): the shared .hive-drawer-actions child
   rule already squeezes every action to a 30px icon square — the icon-only
   mark-all just needs its accent color and the base .markall-btn min-height
   neutralised so the square stays 30px. */
.hive-drawer-actions > .markall-btn {
    min-height: 0;
    color: var(--accent-orange);
}

.hive-drawer-actions > .markall-btn.is-disabled {
    color: var(--text-secondary);
}

/* 44px usable touch target on coarse-pointer/mobile widths without stretching
   desktop header rows. !important: the repo's generic mobile touch floor is
   40px with high-specificity selectors (list-mobile.css
   `body:has(table.list-cards-mobile) :is(button, …)`), which would silently
   cap these controls at 40px on /Notifications — HIVE-717 specifies 44px for
   the mark-all action. Icon tools grow to a full 44×44 square. */
@media (max-width: 768px) {
    .btn-secondary[data-notification-mark-all-read],
    .messages-state-button[data-message-mark-all-read] {
        min-height: 44px !important;
    }

    .popup-icon-tool {
        width: 44px;
        height: 44px;
    }

    /* Scoped to the two comms drawers — other hive-drawers (assistant, claim
       chat) keep their own header geometry. */
    .notification-sidebar .hive-drawer-actions > :is(button, a),
    .message-sidebar .hive-drawer-actions > :is(button, a) {
        width: 44px;
        height: 44px;
    }
}

/* Phones: both header dropdowns are 360px wide and right-anchored to their
   bell, which sits mid-header on narrow screens — the left half of the panel
   (and the mark-all action row with it) rendered past the left screen edge.
   Pin the panel to the viewport below the 61px mobile header instead. No
   ancestor creates a transform stacking context (verified 2026-08-25), so
   position:fixed anchors to the viewport. */
@media (max-width: 480px) {
    .notification-dropdown,
    .message-dropdown {
        position: fixed;
        top: 65px;
        left: 8px;
        right: 8px;
        width: auto;
    }
}

/* Full-page variants (btn-secondary on /Notifications, messages-state-button on
   /Messages) reuse the controller's state classes; aria-disabled — not the
   disabled attribute — so focus survives completion. */
.btn-secondary[data-notification-mark-all-read].is-disabled,
.messages-state-button[data-message-mark-all-read].is-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: auto;
}

.btn-secondary[data-notification-mark-all-read].is-loading,
.messages-state-button[data-message-mark-all-read].is-loading {
    cursor: progress;
}

.notification-dropdown-list {
    max-height: 320px;
    overflow-y: auto;
}

.notification-dropdown-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: var(--font-support);
}

/* ============================================
   Notification Item (shared by dropdown & sidebar)
   ============================================ */

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: var(--bg);
}

.notification-item.unread {
    border-left: 3px solid var(--accent-orange);
}

.notification-item.requires-ack {
    border-left: 3px solid var(--accent-orange-text, #B44C09);
    background: rgba(180, 83, 9, 0.04);
}

.notification-item.unread .notification-item-message {
    font-weight: 600;
}

.notification-item-chip,
.notif-required-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 6px;
    padding: 2px 8px;
    border: 1px solid rgba(180, 83, 9, 0.25);
    border-radius: 999px;
    background: rgba(180, 83, 9, 0.08);
    color: #92400e;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

/* HIVE-170.3 — reminder colour stripe (inline `box-shadow: inset 4px …` set from
   the reminder colour in notifications.js) + urgency badge. The stripe is an inset
   shadow, NOT border-left, so it layers WITH the orange unread / amber ack
   border-left rather than overriding it (an unread reminder shows both). The
   shadow draws over the left edge of the existing padding — no layout shift. */
.notification-priority-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 6px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.notification-priority-badge.priority-high {
    background: rgba(217, 119, 6, 0.10);
    border-color: rgba(217, 119, 6, 0.30);
    color: var(--accent-orange-text, #B44C09);
}
.notification-priority-badge.priority-urgent {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.30);
    color: #b91c1c;
}
html[data-theme="dark"] .notification-priority-badge.priority-high {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.40);
    color: #fbbf24;
}
html[data-theme="dark"] .notification-priority-badge.priority-urgent {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.40);
    color: #f87171;
}

.notification-item-date {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums lining-nums;
}

.notification-item-title {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-item-message {
    font-family: var(--font-support);
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ============================================
   Notification Sidebar
   ============================================ */

.notification-sidebar {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    flex-direction: column;
    overflow: hidden;
}

.notification-sidebar.active {
    display: flex;
    animation: notificationSlideIn 0.2s ease-out;
}

@keyframes notificationSlideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.notification-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.notification-sidebar-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    padding: 0;
}

.notification-sidebar-close:hover {
    color: var(--text);
}

.notification-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ============================================
   Notification Detail Modal
   ============================================ */

.notification-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1200;
    justify-content: center;
    align-items: center;
}

.notification-modal-overlay.active {
    display: flex;
}

.notification-modal-overlay.requires-ack {
    background: rgba(0, 0, 0, 0.62);
}

.notification-modal-overlay.requires-ack .notification-modal-close {
    display: none;
}

.notification-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 480px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.notification-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.notification-modal-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.notification-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    padding: 0;
}

.notification-modal-close:hover {
    color: var(--text);
}

.notification-modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.notification-modal-date {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums lining-nums;
}

.notification-modal-message {
    font-family: var(--font-support);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}

.notification-modal-footer {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}

.notification-modal-footer .btn {
    font-family: var(--font-ui);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.notification-modal-footer .btn:hover {
    background: var(--bg);
}

.notification-modal-footer .btn-primary {
    background: var(--accent-orange);
    color: #fff;
    border-color: var(--accent-orange);
}

.notification-modal-footer .btn-primary:hover {
    background: var(--accent-orange-deep);
    border-color: var(--accent-orange-deep);
}

.notification-modal-footer .btn-danger-outline {
    color: #dc3545;
    border-color: #dc3545;
}

.notification-modal-footer .btn-danger-outline:hover {
    background: #dc3545;
    color: #fff;
}

.notif-modal-transfer-actions {
    display: flex;
    gap: 8px;
    margin-right: auto;
}

.notif-modal-unread-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    user-select: none;
}

.notif-modal-unread-toggle:hover {
    background: var(--bg);
}

.notif-modal-unread-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* ============================================
   Notifications Page — Table Enhancements
   ============================================ */

.data-table tr.unread-row {
    border-left: 3px solid var(--accent-orange);
}

.data-table tr.notification-requires-ack-row {
    border-left: 3px solid var(--accent-orange-text, #B44C09);
}

.data-table tr.unread-row td.notif-title-cell,
.data-table tr.unread-row td.notif-msg-cell {
    font-weight: 600;
}

.data-table td.notif-title-cell,
.data-table td.notif-msg-cell {
    cursor: pointer;
}

/* Sweep 2026-07-19: in the mobile card reflow the admin Recipients cell lays
   its five toggle+label pairs on one flex line (~560px) inside a ~330px card —
   clipped. Let the pairs wrap, keeping the data-label pinned left. */
@media (max-width: 768px) {
    table.list-cards-mobile .notif-recipients-cell {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 4px;
    }

    table.list-cards-mobile .notif-recipients-cell::before {
        margin-right: auto;
    }

    /* Round 2 (2026-08-08): card-mode truncation comes from the shared
       .card-ellipsis opt-in (list-mobile.css) carried in the row markup.
       Only the max-width lift stays page-local — the desktop 400px clamp
       (below) would otherwise re-clip the card's block line early. */
    table.list-cards-mobile td.notif-msg-cell {
        max-width: none;
    }
}

.data-table td.notif-title-cell:hover,
.data-table td.notif-msg-cell:hover {
    color: var(--accent-orange);
}

.data-table td.notif-msg-cell {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-badge.status-unread {
    background: rgba(229, 122, 0, 0.08);
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
}

.notifications-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
}

/* ============================================
   Notification Settings Modal / Page
   ============================================ */

#settingsTable,
#notificationSettingsTable {
    min-width: 0;
}

.notification-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.notification-reset-all,
.notification-row-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
}

.notification-row-reset {
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.notification-row-reset:hover,
.notification-row-reset:focus-visible {
    background: var(--bg);
    color: var(--primary);
}

.notification-reset-cell {
    text-align: center;
}

.notification-family-row th {
    padding: 18px 14px 8px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .055em;
    text-align: left;
    text-transform: uppercase;
}

/* ============================================
   Toggle Switch (Notification Settings)
   ============================================ */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    vertical-align: middle;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 22px;
    transition: 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary);
}

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

/* Mini toggle for inline use */
.toggle-switch[style*="width:32px"] .toggle-slider::before {
    height: 12px;
    width: 12px;
}
.toggle-switch[style*="width:32px"] input:checked + .toggle-slider::before {
    transform: translateX(14px);
}

/* Notification administration — dynamic recipient editor */
.notif-recipients-cell {
    min-width: 220px;
}

.notif-recipient-button {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface, var(--card-bg, #fff));
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.notif-recipient-button:hover,
.notif-recipient-button:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.notif-recipient-button__summary {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-recipient-button > i {
    flex: 0 0 auto;
    font-size: 11px;
}

.notif-recipient-modal {
    width: min(620px, calc(100vw - 32px));
    max-width: 620px;
}

.notif-recipient-modal__body {
    display: grid;
    gap: 22px;
    max-height: min(68vh, 620px);
    overflow-y: auto;
    padding: 20px 24px;
}

.notif-recipient-section h3 {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.notif-recipient-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.notif-recipient-option {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
}

.notif-recipient-option:hover {
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}

.notif-recipient-option input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.notif-recipient-option--readonly {
    background: var(--bg);
    color: var(--text-secondary);
    cursor: default;
}

.notif-recipient-option--readonly:hover {
    border-color: var(--border);
}

.notif-recipient-option__count {
    min-width: 24px;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 11px;
    text-align: center;
}

/* Direct child of the modal body grid (it must survive the sections being hidden),
   so the grid gap supplies the spacing. */
.notif-recipient-system-rule {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.notif-recipient-system-rule[hidden] {
    display: none;
}

.notif-recipient-system-rule i {
    margin-top: 2px;
    color: var(--primary);
}

.notif-recipient-loading,
.notif-recipient-empty {
    grid-column: 1 / -1;
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: 7px;
    color: var(--text-secondary);
    text-align: center;
}

.notif-recipient-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
}

.notif-section-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* Visibility is fail-closed: this line states that an empty set reaches nobody,
   and turns into an error when a save is attempted with nothing selected. */
.notif-visibility-hint {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.notif-visibility-hint--error {
    color: var(--danger);
    font-weight: 600;
}

.notif-recipient-button--system .notif-recipient-button__summary {
    white-space: normal;
}

.notif-template-modal {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
}

.notif-template-modal__body {
    max-height: min(70vh, 680px);
    overflow-y: auto;
    padding: 22px 24px;
}

.notif-template-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.notif-template-card {
    display: grid;
    gap: 13px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.notif-template-card h3 {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    color: var(--primary);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.notif-template-card label {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
}

.notif-template-card :is(input, textarea) {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg);
    color: var(--text-primary);
    font: inherit;
    font-weight: 400;
}

.notif-template-card textarea {
    min-height: 116px;
    resize: vertical;
}

.notif-template-card :is(input, textarea):focus {
    border-color: var(--primary);
    outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
}

.notif-template-modal__footer,
.notif-apply-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
}

.notif-apply-modal__body {
    display: grid;
    gap: 16px;
    padding: 24px;
}

.notif-default-state-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.notif-default-state-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
}

.notif-state-pill {
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 11px;
}

.notif-state-pill.is-on {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

.notif-apply-warning,
.notif-affected-count {
    margin: 0;
    line-height: 1.5;
}

.notif-affected-count {
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
}

.notif-affected-count--error {
    color: var(--danger);
    font-weight: 600;
}

.notif-count-retry {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: none;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.notif-count-retry:hover {
    border-color: var(--primary);
}

@media (max-width: 640px) {
    .notif-recipient-options {
        grid-template-columns: 1fr;
    }

    .notif-recipient-modal__body {
        padding: 16px;
    }

    .notif-template-fields,
    .notif-default-state-grid {
        grid-template-columns: 1fr;
    }

    .notif-template-modal__body {
        padding: 16px;
    }
}

/* ===== source: /css/messages.css ===== */
/* ============================================
   Messages Page
   ============================================ */

.messages-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.messages-page-header,
.message-modal,
.message-dropdown,
.message-sidebar {
    font-family: var(--font-support);
}

.messages-page-header h1 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.02em;
}

.messages-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.messages-filter-tab {
    font-family: var(--font-ui);
    padding: 8px 20px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.messages-filter-tab:hover {
    background: var(--bg);
}

.messages-filter-tab.active {
    background: var(--text);
    color: var(--surface);
    border-color: var(--text);
}

.messages-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--font-ui);
}

.messages-bulk-toolbar[hidden] {
    display: none;
}

.messages-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.messages-select-all input,
.thread-card-select input {
    width: 17px;
    height: 17px;
    accent-color: var(--accent-orange);
}

.messages-selected-count {
    color: var(--text-secondary);
    font-size: 13px;
}

.messages-bulk-buttons {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.messages-state-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.messages-state-button:hover:not(:disabled) {
    border-color: var(--accent-orange);
    color: var(--accent-orange-deep);
}

.messages-state-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Thread List
   ============================================ */

.messages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 3C (polish plan 2026-08-25): the row's desktop layout is the fixed grid in
   communications.css — this file keeps only the card chrome (surface, border,
   hover, unread emphasis). */
.message-thread-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.thread-card-select {
    display: inline-flex;
    cursor: pointer;
}

.message-thread-card:hover {
    background: var(--bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.message-thread-card.unread {
    border-left: 3px solid var(--accent-orange);
}

.thread-card-claim {
    min-width: 0;
}

.thread-card-claim-id {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.thread-card-claim-meta {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
}

.thread-card-sender {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.thread-card-preview {
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-thread-card.unread .thread-card-preview {
    font-weight: 600;
}

.messages-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
    color: var(--text-secondary);
    font-size: 15px;
    font-family: var(--font-support);
}

/* ============================================
   Message Modal (shared)
   ============================================ */

.message-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1200;
    justify-content: center;
    align-items: center;
}

.message-modal-overlay.active {
    display: flex;
}

.message-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 700px;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.message-modal-wide {
    width: 780px;
}

.message-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px 16px;
    border-bottom: 1px solid var(--border);
}

.message-modal-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.message-modal-title-row strong {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text);
    letter-spacing: -0.02em;
}

.message-modal-link {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text);
    text-decoration: underline;
    font-weight: 500;
}

.message-modal-link:hover {
    color: var(--accent-orange);
}

.message-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    padding: 0;
}

.message-modal-close:hover {
    color: var(--text);
}

.message-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}

.message-modal-section-title {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* ============================================
   Message Bubbles (inside thread modal)
   ============================================ */

.message-thread-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100px;
}

.message-bubble {
    padding: 14px 18px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 85%;
}

.message-bubble-header {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums lining-nums;
}

.message-bubble-header strong {
    color: var(--text);
    font-weight: 600;
}

.message-bubble-content {
    font-family: var(--font-support);
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-thread-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 24px 0;
    font-family: var(--font-support);
}

/* ============================================
   Compose Area
   ============================================ */

.message-modal-compose {
    padding: 20px 32px 24px;
    border-top: 1px solid var(--border);
}

.message-compose-label {
    font-family: var(--font-ui);
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.message-compose-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-ui);
    resize: vertical;
    background: var(--surface);
    color: var(--text);
}

.message-compose-input:focus {
    outline: none;
    border-color: var(--accent-orange);
}

.message-compose-input::placeholder {
    color: var(--text-secondary);
}

.message-compose-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.btn-post {
    padding: 10px 24px;
    background: var(--text);
    color: var(--surface);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-post:hover {
    opacity: 0.85;
}

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

/* ============================================
   Claim Search (New Message Modal)
   ============================================ */

.claim-search-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.claim-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 14px;
}

.claim-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-ui);
    background: var(--surface);
    color: var(--text);
}

.claim-search-input:focus {
    outline: none;
    border-color: var(--accent-orange);
}

.claim-search-results {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    margin-bottom: 16px;
}

.claim-search-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.claim-search-item:last-child {
    border-bottom: none;
}

.claim-search-item:hover {
    background: var(--bg);
}

.claim-search-item-title {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.claim-search-item-meta {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
}

/* ============================================
   Claim Details Grid (New Message Modal)
   ============================================ */

.claim-details-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg);
    border-radius: 8px;
}

.claim-detail-row {
    display: contents;
}

.claim-detail-label {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: right;
}

.claim-detail-value {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
}

/* ============================================
   Header Message Dropdown
   ============================================ */

.message-bell-wrapper {
    position: relative;
    display: inline-block;
}

.message-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
}

.message-dropdown.active {
    display: block;
}

.message-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-ui);
}

.message-dropdown-link {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: 500;
}

.message-dropdown-link:hover {
    text-decoration: underline;
    color: var(--accent-orange-deep);
}

.message-dropdown-list {
    max-height: 360px;
    overflow-y: auto;
}

.message-dropdown-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: var(--font-support);
}

.message-dropdown-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.message-dropdown-item:last-child {
    border-bottom: none;
}

.message-dropdown-item:hover {
    background: var(--bg);
}

.message-dropdown-item.unread {
    border-left: 3px solid var(--accent-orange);
}

.message-dropdown-item-claim {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.message-dropdown-item-sender {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.message-dropdown-item-preview {
    font-family: var(--font-support);
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.message-dropdown-item.unread .message-dropdown-item-preview {
    font-weight: 600;
}

/* ============================================
   Header Message Sidebar
   ============================================ */

.message-sidebar {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    flex-direction: column;
    overflow: hidden;
}

.message-sidebar.active {
    display: flex;
    animation: messageSlideIn 0.2s ease-out;
}

@keyframes messageSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.message-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.message-sidebar-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    padding: 0;
}

.message-sidebar-close:hover {
    color: var(--text);
}

.message-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ── Messages mobile overflow fix (post-rollout, 2026-06-07) ──────────────────
   This file loads AFTER wwwroot/css/dark/comms-dark.css, so the Messages mobile
   layout fix belongs here (source-order-robust). The base card is a flex row with
   gap:40px + a 200px-min, non-shrinking claim column → contained overflow on
   phones (mc≈93@320, 53@360, 23@390). Wrap the card and let columns shrink.
   @media-gated → desktop unchanged; applies in light + dark. */
@media (max-width: 768px) {
    .messages-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .messages-filters,
    .messages-bulk-toolbar {
        width: 100%;
        flex-wrap: wrap;
    }

    .messages-bulk-buttons {
        width: 100%;
        margin-left: 0;
    }

    .messages-bulk-buttons .messages-state-button {
        flex: 1 1 180px;
    }

    /* 3C: the stacked-card transform for thread rows lives in
       communications.css (shared shell). */
    .messages-list { min-width: 0; }
}

/* ===== source: /css/table-density.css ===== */
/* HIVE-222 — Table density toggle (desktop-only presets + toggle UI).
   State lives on [data-list-page] as data-density="<level>"; "current"/absent = today's behaviour.
   Per-page localStorage. Mobile (<=768px) card layout untouched; toggle hidden there. */

/* ── 1) Toggle UI ─────────────────────────────────────────────────────────── */
.table-density {
  position: relative;
  display: inline-flex;
  gap: 6px;
}

/* .table-density-btn inherits .filter-btn-outline; only the open/active state is added. */
.table-density-btn[aria-expanded="true"] {
  background: var(--hover-bg);
}

.table-density-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 50;
}

.table-density-menu[hidden] {
  display: none;
}

.table-density-menu button {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
}

.table-density-menu button:hover {
  background: var(--hover-bg);
}

.table-density-menu button.on {
  background: var(--primary);
  color: var(--accent-brown-button);
}

/* ── 2) Density presets (desktop-only) ────────────────────────────────────── */
@media (min-width: 769px) {
  /* comfortable */
  [data-density="comfortable"] .data-table tbody td {
    padding: 9px 14px;
  }

  /* compact */
  [data-density="compact"] .data-table {
    font-size: 12.5px;
  }
  [data-density="compact"] .data-table thead th {
    padding: 8px 12px;
  }
  [data-density="compact"] .data-table tbody td {
    padding: 6px 12px;
  }

  /* dense */
  [data-density="dense"] .data-table {
    font-size: 12px;
  }
  [data-density="dense"] .data-table thead th {
    padding: 7px 10px;
  }
  [data-density="dense"] .data-table tbody td {
    padding: 4px 10px;
  }

  /* ultra */
  [data-density="ultra"] .data-table {
    font-size: 11.5px;
  }
  [data-density="ultra"] .data-table thead th {
    padding: 6px 9px;
  }
  [data-density="ultra"] .data-table tbody td {
    padding: 3px 9px;
  }
  /* Theme-aware zebra (subtle in light, elevated in dark) for the densest level. */
  [data-density="ultra"] .data-table tbody tr:nth-child(even) {
    background: var(--table-row-hover);
  }
  /* Keep row-hover winning over the zebra stripe (equal specificity → later wins). */
  [data-density="ultra"] .data-table tbody tr:hover {
    background: var(--hover-bg);
  }

  /* dense + ultra: collapse the claim cell to one line + shrink badges */
  [data-density="dense"] .data-table tbody td,
  [data-density="ultra"] .data-table tbody td {
    white-space: nowrap;
  }
  [data-density="dense"] .claim-number-cell,
  [data-density="ultra"] .claim-number-cell {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  [data-density="dense"] .claim-badge,
  [data-density="dense"] .claim-badge-priority,
  [data-density="dense"] .claim-badge-unread,
  [data-density="dense"] .claim-badge-missing,
  [data-density="dense"] .claim-badge-email,
  [data-density="ultra"] .claim-badge,
  [data-density="ultra"] .claim-badge-priority,
  [data-density="ultra"] .claim-badge-unread,
  [data-density="ultra"] .claim-badge-missing,
  [data-density="ultra"] .claim-badge-email {
    height: 14px;
    font-size: 9px;
    padding: 1px 5px;
  }
  [data-density="dense"] .status-badge,
  [data-density="ultra"] .status-badge {
    font-size: 11.5px;
    padding: .12rem .45rem;
  }
}

/* ── 3) Hide toggle on mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .table-density {
    display: none;
  }
}

/* Control strip for toolbar-less data-table pages. Server-rendered (reserved
   pre-paint via min-height so the JS-injected buttons don't shift the table)
   or synthesized by table-density.js when absent. */
.table-tools-strip {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
  min-height: 34px;
}

@media (max-width: 768px) {
  .table-tools-strip {
    display: none;
  }
}

/* ===== source: /css/claim-form-density.css ===== */
/* HIVE-467 — Claim create/edit form density toggle.
   Business asked for a compact button like the claims-list density toggle so the whole
   claim form can be tightened to the smaller spacing the cargo/vehicle sections already use,
   and each user's choice becomes their default (per-user localStorage, like the list toggle).
   State lives on <html data-claim-form-density="<level>"> so the pre-paint head script applies
   it before first render (no flash). "comfortable"/absent = today's spacing.
   Desktop-focused; the presets only touch vertical rhythm + control padding, never widths,
   so column alignment and financial rows are unchanged. */

/* ── 1) Toggle UI (mirrors .table-density) ─────────────────────────────────── */
.claim-form-density {
  position: relative;
  display: inline-flex;
}

.claim-form-density-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
}
.claim-form-density-btn:hover { background: var(--hover-bg); color: var(--text); }
.claim-form-density-btn[aria-expanded="true"] { background: var(--hover-bg); color: var(--text); }

.claim-form-density-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 60;
}
.claim-form-density-menu[hidden] { display: none; }

.claim-form-density-menu button {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
}
.claim-form-density-menu button:hover { background: var(--hover-bg); }
.claim-form-density-menu button.on {
  /* brand orange fill + readable ink — --primary keeps its hue in dark. */
  background: var(--primary);
  color: var(--accent-brown-button, #fff);
}

/* ── 2) Density presets ────────────────────────────────────────────────────
   #467 follow-up: five levels mirroring the claims-list density menu.
   "current"/Dabartinis = no rule (today's spacing, the roomiest). comfortable =
   a modest explicit tightening; compact ≈ the cargo-section feel; dense = tighter;
   ultra = tightest. Scoped to the claim wizard so nothing else shifts.

   HIVE-498 — every explicit level now carries ONE set of control tokens
   instead of per-widget padding patches. The presets only ever adjusted the
   generic input/select/textarea padding, while shared one-line widgets
   (combobox, multiselect, currency, vehicle registration) kept hard-coded
   38/44px floors, so rows mixed control heights in every tightened mode.
     --cf-control-h  single-line control height (inputs, selects, combobox,
                     currency editors, registration slots/toggle);
     --cf-pad-y/-x   control padding;
     --cf-font       control font size.
   Multiline/content-driven controls (textarea, dropzones, chip wrap states)
   consume only the padding/font tokens plus a min-height floor — they must
   never be forced into the one-line height. The default/current mode has no
   attribute and is intentionally untouched. */
html[data-claim-form-density="comfortable"] {
  --cf-control-h: 36px; --cf-pad-y: 7px; --cf-pad-x: 11px; --cf-font: 14px;
}
html[data-claim-form-density="compact"] {
  --cf-control-h: 34px; --cf-pad-y: 6px; --cf-pad-x: 10px; --cf-font: 14px;
}
html[data-claim-form-density="dense"] {
  --cf-control-h: 30px; --cf-pad-y: 4px; --cf-pad-x: 9px; --cf-font: 13px;
}
html[data-claim-form-density="ultra"] {
  --cf-control-h: 28px; --cf-pad-y: 3px; --cf-pad-x: 8px; --cf-font: 12.5px;
}

/* Shared control sweep — identical for every explicit level. The var()
   fallbacks mirror today's default look so an unexpected attribute value
   (pre-paint script trusts localStorage) degrades to the current spacing
   instead of zeroed padding. */
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row input,
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row select,
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row textarea {
  padding: var(--cf-pad-y, 8px) var(--cf-pad-x, 12px);
  font-size: var(--cf-font, 14px);
}

/* One-line controls take the exact height token so mixed rows line up.
   Checkbox/radio/file stay content-sized; textarea is deliberately excluded. */
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row select:not([multiple]),
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .hive-combobox-input,
/* F5 (HIVE-498): the "Paros metas" daypart badge is a bordered, single-line
   (white-space:nowrap) control in the incident date/time row. It was uncovered
   by the density sweep, so it kept its natural 36px min-height while its
   date/time/currency row-mates shrank. box-sizing:border-box means the token
   height already accounts for its 1px border, exactly like the inputs above. */
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .time-of-day-badge {
  height: var(--cf-control-h, 38px);
  min-height: var(--cf-control-h, 38px);
}

/* Date/time editors put the border on a flex wrapper, just like the currency
   editor below. Keep the wrapper at the shared token and compensate its two
   border pixels on both the input and icon cell; otherwise dense/ultra rows
   render 2px taller than their neighbouring one-line controls. */
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .claims-wizard-date-input,
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .claims-wizard-time-input {
  box-sizing: border-box;
  height: var(--cf-control-h, 38px);
  min-height: var(--cf-control-h, 38px);
}

html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .claims-wizard-date-input input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .claims-wizard-time-input input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]) {
  height: calc(var(--cf-control-h, 38px) - 2px);
  min-height: calc(var(--cf-control-h, 38px) - 2px);
  padding-top: 0;
  padding-bottom: 0;
}

html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .claims-wizard-date-icon,
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .claims-wizard-time-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  height: calc(var(--cf-control-h, 38px) - 2px);
  min-height: calc(var(--cf-control-h, 38px) - 2px);
  padding: 0 var(--cf-pad-x, 10px);
  line-height: 1;
}

/* Currency editor: the border sits on the wrapper and the inner input is
   borderless, so the inner height is the token minus the 2px wrapper border.
   The first selector repeats the sweep's :not() chain so it out-specifies the
   generic one-line rule above for currency inputs INSIDE form rows (otherwise
   the wrapper renders 2px taller than every sibling control). */
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .claims-wizard-currency-input input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-currency-input input {
  height: calc(var(--cf-control-h, 38px) - 2px);
  min-height: calc(var(--cf-control-h, 38px) - 2px);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--cf-font, 14px);
}

/* Chip/multiselect triggers can wrap to several chip lines — min-height only. */
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .multiselect-trigger,
html[data-claim-form-density]:not([data-claim-form-density="current"]) .claims-wizard-form-row .multiselect-display {
  min-height: var(--cf-control-h, 38px);
  padding-top: var(--cf-pad-y, 4px);
  padding-bottom: var(--cf-pad-y, 4px);
}

/* Vehicle registration consumes the HIVE-497 component variables: character
   slots and the mode toggle follow the active one-line height (F6: toggle capped
   at its 30px HIVE-497 desktop size; the ::after extender keeps the 44px target). */
html[data-claim-form-density]:not([data-claim-form-density="current"]) .vehicle-registration-field {
  --vr-slot-size: var(--cf-control-h, 44px);
  --vr-toggle-size: min(var(--cf-control-h, 30px), 30px);
}

/* comfortable — an explicit level slightly tighter than the default */
html[data-claim-form-density="comfortable"] .claims-wizard-form { gap: 12px; }
/* HIVE-678: the air under a subsection header. It tracks the level's ROW gap, not
   the form gap - dense/ultra compress the form gap to 3px/1px, which would put the
   two-line label back against the header bar that the ticket is about. A subsection
   header is a heavier divider than a field boundary, so it keeps a small floor. */
html[data-claim-form-density="comfortable"] { --cf-subsection-gap: 12px; }
html[data-claim-form-density="comfortable"] .claims-wizard-form-row { gap: 12px; }
html[data-claim-form-density="comfortable"] .claims-wizard-section-body { padding-top: 14px; padding-bottom: 14px; }

/* compact */
html[data-claim-form-density="compact"] .claims-wizard-form { gap: 10px; }
html[data-claim-form-density="compact"] { --cf-subsection-gap: 10px; }
html[data-claim-form-density="compact"] .claims-wizard-form-row { gap: 10px; }
html[data-claim-form-density="compact"] .claims-wizard-form-row > label { padding-top: 7px; }
html[data-claim-form-density="compact"] .claims-wizard-section-body { padding-top: 12px; padding-bottom: 12px; }
html[data-claim-form-density="compact"] .claims-wizard-subsection-title { margin-top: 10px; }

/* dense — business 2026-07-13: keep the font sizes, squeeze the vertical rhythm
   (gaps/margins between fields) harder than the first cut. */
html[data-claim-form-density="dense"] .claims-wizard-form { gap: 3px; }
html[data-claim-form-density="dense"] { --cf-subsection-gap: 6px; }
html[data-claim-form-density="dense"] .claims-wizard-form-row { gap: 6px; align-items: center; }
html[data-claim-form-density="dense"] .claims-wizard-form-row > label { padding-top: 0; font-size: 12.5px; }
html[data-claim-form-density="dense"] .claims-wizard-section-body { padding-top: 6px; padding-bottom: 6px; }
html[data-claim-form-density="dense"] .claims-wizard-subsection-title { margin-top: 5px; }

/* ultra — the densest level (mirrors the list's "Itin tankus"); same font sizes,
   minimum vertical spacing. */
html[data-claim-form-density="ultra"] .claims-wizard-form { gap: 1px; }
html[data-claim-form-density="ultra"] { --cf-subsection-gap: 4px; }
html[data-claim-form-density="ultra"] .claims-wizard-form-row { gap: 4px; align-items: center; }
html[data-claim-form-density="ultra"] .claims-wizard-form-row > label { padding-top: 0; font-size: 12px; }
html[data-claim-form-density="ultra"] .claims-wizard-section-body { padding-top: 4px; padding-bottom: 4px; }
html[data-claim-form-density="ultra"] .claims-wizard-subsection-title { margin-top: 3px; }

/* ── 3) Header-row fit ─────────────────────────────────────────────────────
   #467 follow-up: the toggle now lives in the top claim-header action row
   (.cmb-ch-actions) beside the Fork / Ask-AI buttons. Match their height and
   sit the dropdown flush to the right edge of the row. */
.cmb-ch-actions .claim-form-density { align-self: center; }
.cmb-ch-actions .claim-form-density-btn { height: 36px; }

/* Mobile: the action row already wraps; the toggle stays usable but the
   presets are desktop-oriented — keep them on so a user's choice still applies. */

/* ===== source: /css/audit-fixes.css ===== */
/* HIVE UX audit 2026-06-14 — small, targeted remediations (non-brand).
   Loaded after the feature CSS so these win by source order. */

/* ── #6 Touch targets ≥ 24×24 on compact row / clear controls ─────────────────
   Pads the *clickable* area without enlarging the glyph; rows are ~50px tall so
   this does not grow them. Keeps the dense look (HIVE-222) intact. */
.row-action-icon,
.data-table td.row-actions > button,
.data-table td.row-actions > a,
.ac-clear,
.vehicle-autocomplete .ac-clear {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* The ellipsis <i> is often wrapped in a zero-padding <button>; giving the icon a
   24px box makes the whole control a 24px target. */
.row-action-icon { padding: 5px; line-height: 1; cursor: pointer; }

/* ── #3 Tier-2 mobile: generic card title for admin/report tables ─────────────
   mobile-card-tables.js tags the first data cell data-cardcell="title". The Claims
   title rule hard-indents 30px to clear its top-left checkbox; generic tables have
   no pinned checkbox unless a header-less select column exists, so indent only then. */
@media (max-width: 768px) {
  table.list-cards-mobile[data-mct] tbody td[data-cardcell="title"] {
    padding-left: 0;
    font-weight: 600;
    font-size: 14px;
  }
  table.list-cards-mobile[data-mct] tbody tr:has(td[data-cardcell="check"]) td[data-cardcell="title"] {
    padding-left: 30px;
  }
  /* Decorative leading cells (drag-handle grip / spacer) — hidden on the card. */
  table.list-cards-mobile[data-mct] tbody td[data-cardcell="decor"] {
    display: none;
  }
}

/* ── #3 Tier-1 mobile: non-card tables stay reachable via horizontal scroll ────
   Admin/report tables don't opt into the card reflow (table.list-cards-mobile),
   so at phone widths they clipped columns — incl. the actions / email-toggle
   column — off-screen with no way to reach them. Make their wrapper scroll.
   The Claims-style list pages (card reflow) are excluded via :has(). */
@media (max-width: 768px) {
  .data-table-wrapper:not(:has(table.list-cards-mobile)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Mobile/tablet: attachment-type cards single-column ───────────────────────
   The document upload grid (`.claims-wizard-upload-grid`) defaults to 2 columns
   and only had a 1-col override in claim-details-v2.css (not loaded on every view
   that renders _Section_Documents), so on narrow widths the ~17 attachment cards
   crammed into 2 ragged, uneven-height columns. Globally force a single column up
   to tablet width so each card is full-width and clean. Desktop (>1024px) keeps
   its multi-column layout. */
@media (max-width: 1024px) {
  .claims-wizard-upload-grid {
    grid-template-columns: 1fr !important;
  }
  /* claim-attachments.js puts an inline `grid-column: span 2` on the last
     "other-documents" card; with a single explicit column that span forces an
     implicit 2nd column (the ragged 2-col layout). Neutralise it on mobile so
     every card spans the one column. (!important beats the inline style.) */
  .claims-wizard-upload-grid > * {
    grid-column: auto !important;
  }
}

/* ── #7 Dark-mode: keep CmrInternal/ClaimsReview urgency tints readable ───────
   The row tints (#F4CCCC/#FCE5CD/#FFF2CC) stay light under the dark theme, so the
   inherited light text became invisible. Force dark text on those tinted cells. */
html[data-theme="dark"] .claims-review-matrix tr.row-red td,
html[data-theme="dark"] .claims-review-matrix tr.row-orange td,
html[data-theme="dark"] .claims-review-matrix tr.row-yellow td {
  color: #1a1a1a;
}

/* ===== source: /css/tablet-tier.css ===== */
/* ============================================================================
   Tablet tier — 769px to 1024px inclusive
   ============================================================================
   THE single place that owns the tablet band. Every rule that is specific to
   it lives in this file; nothing else in the stylesheet tree should open a
   `(min-width: 769px) and (max-width: 1024px)` block.

   WHY THE TIER EXISTS
   -------------------
   The mobile treatment stops at 768px — the classic Bootstrap `md` value,
   chosen when the iPad *was* 768x1024. No current iPad is 768 wide:

     iPad mini      744   -> gets the mobile treatment (by 24px of luck)
     iPad / Air     820   -> desktop layout in a ~540px content pane
     iPad Pro 11"   834   -> same
     iPad Pro 12.9" 1024  -> same

   So the only iPad that renders correctly in portrait is the smallest one.
   Everything else gets the full 280px sidebar, desktop tables and a header
   action row that neither wraps nor scrolls — which is where the clipped
   create CTA, the cut table columns and the overflowing filter rows all come
   from (P1/P2/P3/P6/P7 in plans/pre-launch-site-review-2026-08-08.md).

   The decision taken (plans/pre-launch-fix-sequence-2026-08-08.md, decision 1)
   was an explicit new tier rather than raising 768 to 1024: raising it would
   hand small laptops a phone layout on a physical keyboard. In this tier the
   nav collapses to an icon rail and tables stay tabular.

   THE TWO EDGES ARE THE CONTRACT
   ------------------------------
   Below 769 the existing phone treatment (71 `@media (max-width: 768px)`
   rules) must not change, and above 1024 desktop must not change. That is
   what makes a change of this blast radius safe to ship, and it is why the
   tier is additive — a new file with its own scoped blocks — rather than an
   edit to the 768 rules.

   HOW TO USE IT
   -------------
   * Media query: `@media (min-width: 769px) and (max-width: 1024px)`.
     CSS cannot interpolate a custom property into a media condition, so the
     boundary literals are unavoidable — but they are unavoidable *here*, in
     one file, and the tokens below carry the same numbers for anything that
     can read them (JS reads `--tablet-tier-max` / the mirrored
     `window.__hiveTierMax`, see Pages/Shared/_Layout.cshtml).
   * Order: this file is registered in wwwroot/asset-manifest.json AFTER the
     other core stylesheets, so tier rules win over the base cascade without
     needing `!important`. Per-page `@section Styles` still loads later and
     still wins — that is deliberate.
   ============================================================================ */

:root {
    /* The band, as data. Kept in sync with the literals in the media queries
       below and with window.__hiveTierMin/__hiveTierMax in _Layout.cshtml. */
    --tablet-tier-min: 769px;
    --tablet-tier-max: 1024px;

    /* Nav in the tier is the existing desktop rail — same width, so a tablet
       and a rail-mode desktop are the same layout and not two to maintain. */
    --tablet-tier-nav-width: var(--sidebar-rail-width);

    /* Content gutters. Matches the `<=1024` `.main-content` padding in
       site.css so a tier rule can line up with the content edge. */
    --tablet-tier-content-padding: 24px;

    /* Row/column gap for the header, toolbar and chip rows that reflow in the
       tier. One value so a wrapped header and a wrapped filter row look like
       the same decision rather than two. */
    --tablet-tier-gutter: 12px;

    /* Size of the horizontal-scroll edge affordance on tables in the tier.
       PINNED TO 22px ON PURPOSE: data-table-scroll-cue.js positions the right
       overlay with `left = scrollLeft + clientWidth - 22`, so a wider cue would
       hang past the visible edge — and inside an `overflow-x: auto` container
       that overhang is itself scrollable width, so the cue would widen the
       table it is describing and then never switch off. Change both or
       neither. The tier gets its visibility from contrast and an explicit
       chevron instead of from width. */
    --tablet-tier-scroll-cue: 22px;
}

/* ----------------------------------------------------------------------------
   Page-header action row (P1, P6)
   ----------------------------------------------------------------------------
   `.page-header` is `display: flex; justify-content: space-between` with no
   wrap and no gap: [title] [Import | Export | Create]. When the two no longer
   fit, flex has only two moves left — shrink the items past their content, or
   overflow — and both are visible defects at tablet width:

     * Assets/InsuredPersons, Assets/Vehicles (820): the title wraps to two or
       three lines and the primary create CTA is pushed off the right edge of
       the viewport. `.main-content:has(> .data-table-wrapper)` is
       `overflow: hidden`, so it is clipped rather than scrollable — the main
       action on the page is not reachable at all. This is the only finding in
       the whole review that costs a primary action, so it is the one that had
       to be fixed.
     * Admin/Functionalities (1024): the two export buttons shrink into each
       other and render overlapping.
     * Admin/ClaimSectionDefaults (820): the buttons sit over a three-line
       wrapped heading.

   Clip vs overlap is only whether the ancestor hides overflow; the missing
   behaviour is the same one, so this is a single fix on the shared component
   rather than four page patches.

   Let the row wrap. The action group then takes its own line at full pane
   width instead of squeezing, and the title — which now has the whole line —
   stops wrapping to three. Tier-scoped: the identical rule already exists for
   <=768 (list-mobile.css), and above 1024 nothing wraps today, so both edges
   of the band stay byte-identical.

   `flex-wrap` engages on the items' natural sizes, not on overflow, which is
   exactly why this must NOT be global: at desktop widths several headers sit
   comfortably in a slightly-shrunk single row and would drop their actions to
   a second line for no reason.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .page-header {
        flex-wrap: wrap;
        gap: var(--tablet-tier-gutter) 16px;
    }

    /* The title cell must be allowed to shrink: a flex item's default
       `min-width: auto` is its min-content width, which is what let a long
       heading refuse to give the action group any room. */
    .page-header > h1,
    .page-header > div {
        min-width: 0;
        max-width: 100%;
    }

    /* Action groups. `.page-header-actions` is the shared one; the two admin
       pages in the finding hand-roll theirs (an inline `display:flex` div on
       Functionalities, `.csd-header-actions` on ClaimSectionDefaults), so both
       are named here rather than left to regress on their own. */
    .page-header-actions,
    .page-header > div[style*="flex"],
    .csd-header-actions {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
    }

    /* With the group wrapping there is somewhere for a button to GO, so
       shrinking it is no longer the right answer: keep buttons at their label
       width and let them take the next line. `max-width: 100%` is the backstop
       for a label longer than the whole pane — it wraps inside the button
       instead of overflowing the row. */
    .page-header-actions > *,
    .csd-header-actions > * {
        flex-shrink: 0;
        max-width: 100%;
    }
}

/* ----------------------------------------------------------------------------
   Table horizontal-scroll affordance (P2)
   ----------------------------------------------------------------------------
   FIRST, THE CONTAINER — a scroll cue is the last resort, never the first.
   A cue on a needlessly narrow container treats the symptom and leaves the
   page looking broken, so for each of these tables the question is whether the
   container is artificially narrow or whether the columns genuinely exceed the
   viewport. Checked, at 820:

     * the container WAS artificially narrow, and that is already fixed one
       commit earlier — the 280px sidebar was eating 34% of the viewport, and
       collapsing it to the 64px rail hands the table 216px back (pane 492 ->
       708). That is the real fix and it came first.
     * what remains is genuine. None of these tables sits under a max-width
       cap: `.main-content`, `.data-table-wrapper` and the page shells declare
       none, and the only `max-width` values on the routes involved (cobx's
       phone/email/address columns) are deliberate per-column ellipsis caps on
       an already-wide table. Meanwhile `.data-table` declares `min-width:
       1100px` (cobx 1080) for 8-9 real columns, which at 708px would leave
       ~80px per column — the one-word-per-line pathology the review flags as a
       defect in its own right (V1/P2).

   So: more columns than the viewport can hold, container already widened as
   far as it goes. Case for a cue.

   Decision 1 says tables stay tabular in this tier — no stacked label/value
   cards, which is the <=768 treatment. So the columns that do not fit have to
   read as *scrollable*, not as missing.

   Mechanically they already are. `.data-table` carries `min-width: 1100px` and
   `.data-table-wrapper` is `overflow-x: auto`, so every route in the finding
   (ActivityHistory/SystemActions + /UserActions, Assets/Vehicles' VIN,
   Admin/Cobx' email, Admin/Insurers' claim types, Admin/Notifications'
   recipients) does scroll. The defect is that nothing says so:

     * the edge cue is 22px of 13%-alpha shadow. Sampled off the 820 evidence
       screenshot of Assets/Vehicles it moves the pixels from 244 to 222 over
       the last 22px — present, and invisible unless you go looking.
     * the styled 10px scrollbar is the other affordance, and on a touch device
       (which is the entire point of this tier) scrollbars are overlays: they
       are not rendered until the user already scrolls.

   Leaving a reader with "this table has lost its right-hand columns" is the
   same outcome as actually losing them. So in the tier the cue becomes a
   control: wider, opaque enough to see, and carrying a chevron so its meaning
   is stated rather than implied. Still `pointer-events: none` and still
   `aria-hidden` — the underlying cells stay clickable, and the full value of a
   clipped cell is already exposed via title/aria-label by
   data-table-scroll-cue.js, which is the non-visual half of this affordance.

   The JS keeps ownership of WHEN the cue shows (`.is-on` only when there is
   more table in that direction) and of WHERE it sits; this block is CSS-only
   and changes nothing but how it looks.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .data-table-wrapper > .dt-scroll-cue {
        /* Same 22px the JS pins against — see the token's note. */
        width: var(--tablet-tier-scroll-cue);
    }

    .dt-scroll-cue--left {
        background: linear-gradient(to right, rgba(15, 23, 42, 0.26), rgba(15, 23, 42, 0));
    }

    .dt-scroll-cue--right {
        background: linear-gradient(to left, rgba(15, 23, 42, 0.26), rgba(15, 23, 42, 0));
    }

    html[data-theme="dark"] .dt-scroll-cue--left {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    }

    html[data-theme="dark"] .dt-scroll-cue--right {
        background: linear-gradient(to left, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    }

    /* The chevron, centred in the cue. On a list page the wrapper IS the
       vertical scroller (`.main-content > .data-table-wrapper` is
       `flex: 1; overflow: auto`), so the cue is viewport-height and the
       chevron lands dead centre of the visible table. On the pages where the
       wrapper is nested and the page scrolls instead, it sits at the middle of
       the table — the full-height gradient is the cue that is always on screen
       either way. */
    .data-table-wrapper > .dt-scroll-cue {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .data-table-wrapper > .dt-scroll-cue::after {
        content: "\f054";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 12px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--surface);
        color: var(--text-secondary);
        box-shadow: var(--shadow);
    }

    .data-table-wrapper > .dt-scroll-cue--left::after {
        content: "\f053";
    }
}

/* ----------------------------------------------------------------------------
   Filter rows (P3)
   ----------------------------------------------------------------------------
   Container first, same as the tables above.

   `Admin/AiConversations` needed nothing here: its filter panel is a
   `repeat(3, minmax(150px, 1fr))` grid, and at 820 the 280px sidebar left the
   card 460px of content, so the three tracks landed at ~145px — under their
   own 150px minimum, which is why the selects rendered as "Bet koks seanso
   tip…". Collapsing the nav to the rail gives the card 676px and the tracks
   ~217px, comfortably over the ~175px those labels need. The container was
   artificially narrow; widening it was the whole fix.

   `.toolbar` is the case that survives the widening. It is
   [search][filters] with no wrap, the search box is `flex: 1`, and the filter
   group's buttons stop shrinking well before their labels ellipsise — so the
   third control onward is pushed past the panel edge (Assets/Vehicles at 820:
   the row overflows by ~150px with "Vis…" cut at the viewport edge). Give the
   row somewhere to go: the filter group drops to its own full-width line,
   where three buttons at ~490px total fit the 708px pane with room to spare.

   This is the shared toolbar — the same `.filter-group` that ~20 list and
   admin filter partials render — so it is one component fix rather than a
   per-page one. Tier-scoped: `<=768` already wraps via mobile-contain.css and
   above 1024 the row has never needed to.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .toolbar {
        flex-wrap: wrap;
        row-gap: var(--tablet-tier-gutter);
    }

    /* The filter partials render `.filter-group` inside a `[data-list-filters]`
       block, so the block is the flex item that has to be allowed to give. */
    .toolbar > [data-list-filters] {
        min-width: 0;
        max-width: 100%;
    }

    .filter-group {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        row-gap: 8px;
    }
}

/* ===== source: /lib/fontawesome/css/all.min.css ===== */
/*!
 * Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}}@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}

.fa-0:before{content:"\30"}.fa-1:before{content:"\31"}.fa-2:before{content:"\32"}.fa-3:before{content:"\33"}.fa-4:before{content:"\34"}.fa-5:before{content:"\35"}.fa-6:before{content:"\36"}.fa-7:before{content:"\37"}.fa-8:before{content:"\38"}.fa-9:before{content:"\39"}.fa-fill-drip:before{content:"\f576"}.fa-arrows-to-circle:before{content:"\e4bd"}.fa-chevron-circle-right:before,.fa-circle-chevron-right:before{content:"\f138"}.fa-at:before{content:"\40"}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-text-height:before{content:"\f034"}.fa-user-times:before,.fa-user-xmark:before{content:"\f235"}.fa-stethoscope:before{content:"\f0f1"}.fa-comment-alt:before,.fa-message:before{content:"\f27a"}.fa-info:before{content:"\f129"}.fa-compress-alt:before,.fa-down-left-and-up-right-to-center:before{content:"\f422"}.fa-explosion:before{content:"\e4e9"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-wave-square:before{content:"\f83e"}.fa-ring:before{content:"\f70b"}.fa-building-un:before{content:"\e4d9"}.fa-dice-three:before{content:"\f527"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-anchor-circle-check:before{content:"\e4aa"}.fa-building-circle-arrow-right:before{content:"\e4d1"}.fa-volleyball-ball:before,.fa-volleyball:before{content:"\f45f"}.fa-arrows-up-to-line:before{content:"\e4c2"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-circle-minus:before,.fa-minus-circle:before{content:"\f056"}.fa-door-open:before{content:"\f52b"}.fa-right-from-bracket:before,.fa-sign-out-alt:before{content:"\f2f5"}.fa-atom:before{content:"\f5d2"}.fa-soap:before{content:"\e06e"}.fa-heart-music-camera-bolt:before,.fa-icons:before{content:"\f86d"}.fa-microphone-alt-slash:before,.fa-microphone-lines-slash:before{content:"\f539"}.fa-bridge-circle-check:before{content:"\e4c9"}.fa-pump-medical:before{content:"\e06a"}.fa-fingerprint:before{content:"\f577"}.fa-hand-point-right:before{content:"\f0a4"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"}.fa-forward-step:before,.fa-step-forward:before{content:"\f051"}.fa-face-smile-beam:before,.fa-smile-beam:before{content:"\f5b8"}.fa-flag-checkered:before{content:"\f11e"}.fa-football-ball:before,.fa-football:before{content:"\f44e"}.fa-school-circle-exclamation:before{content:"\e56c"}.fa-crop:before{content:"\f125"}.fa-angle-double-down:before,.fa-angles-down:before{content:"\f103"}.fa-users-rectangle:before{content:"\e594"}.fa-people-roof:before{content:"\e537"}.fa-people-line:before{content:"\e534"}.fa-beer-mug-empty:before,.fa-beer:before{content:"\f0fc"}.fa-diagram-predecessor:before{content:"\e477"}.fa-arrow-up-long:before,.fa-long-arrow-up:before{content:"\f176"}.fa-burn:before,.fa-fire-flame-simple:before{content:"\f46a"}.fa-male:before,.fa-person:before{content:"\f183"}.fa-laptop:before{content:"\f109"}.fa-file-csv:before{content:"\f6dd"}.fa-menorah:before{content:"\f676"}.fa-truck-plane:before{content:"\e58f"}.fa-record-vinyl:before{content:"\f8d9"}.fa-face-grin-stars:before,.fa-grin-stars:before{content:"\f587"}.fa-bong:before{content:"\f55c"}.fa-pastafarianism:before,.fa-spaghetti-monster-flying:before{content:"\f67b"}.fa-arrow-down-up-across-line:before{content:"\e4af"}.fa-spoon:before,.fa-utensil-spoon:before{content:"\f2e5"}.fa-jar-wheat:before{content:"\e517"}.fa-envelopes-bulk:before,.fa-mail-bulk:before{content:"\f674"}.fa-file-circle-exclamation:before{content:"\e4eb"}.fa-circle-h:before,.fa-hospital-symbol:before{content:"\f47e"}.fa-pager:before{content:"\f815"}.fa-address-book:before,.fa-contact-book:before{content:"\f2b9"}.fa-strikethrough:before{content:"\f0cc"}.fa-k:before{content:"\4b"}.fa-landmark-flag:before{content:"\e51c"}.fa-pencil-alt:before,.fa-pencil:before{content:"\f303"}.fa-backward:before{content:"\f04a"}.fa-caret-right:before{content:"\f0da"}.fa-comments:before{content:"\f086"}.fa-file-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-code-pull-request:before{content:"\e13c"}.fa-clipboard-list:before{content:"\f46d"}.fa-truck-loading:before,.fa-truck-ramp-box:before{content:"\f4de"}.fa-user-check:before{content:"\f4fc"}.fa-vial-virus:before{content:"\e597"}.fa-sheet-plastic:before{content:"\e571"}.fa-blog:before{content:"\f781"}.fa-user-ninja:before{content:"\f504"}.fa-person-arrow-up-from-line:before{content:"\e539"}.fa-scroll-torah:before,.fa-torah:before{content:"\f6a0"}.fa-broom-ball:before,.fa-quidditch-broom-ball:before,.fa-quidditch:before{content:"\f458"}.fa-toggle-off:before{content:"\f204"}.fa-archive:before,.fa-box-archive:before{content:"\f187"}.fa-person-drowning:before{content:"\e545"}.fa-arrow-down-9-1:before,.fa-sort-numeric-desc:before,.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-face-grin-tongue-squint:before,.fa-grin-tongue-squint:before{content:"\f58a"}.fa-spray-can:before{content:"\f5bd"}.fa-truck-monster:before{content:"\f63b"}.fa-w:before{content:"\57"}.fa-earth-africa:before,.fa-globe-africa:before{content:"\f57c"}.fa-rainbow:before{content:"\f75b"}.fa-circle-notch:before{content:"\f1ce"}.fa-tablet-alt:before,.fa-tablet-screen-button:before{content:"\f3fa"}.fa-paw:before{content:"\f1b0"}.fa-cloud:before{content:"\f0c2"}.fa-trowel-bricks:before{content:"\e58a"}.fa-face-flushed:before,.fa-flushed:before{content:"\f579"}.fa-hospital-user:before{content:"\f80d"}.fa-tent-arrow-left-right:before{content:"\e57f"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-binoculars:before{content:"\f1e5"}.fa-microphone-slash:before{content:"\f131"}.fa-box-tissue:before{content:"\e05b"}.fa-motorcycle:before{content:"\f21c"}.fa-bell-concierge:before,.fa-concierge-bell:before{content:"\f562"}.fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-arrows-left-right:before,.fa-people-arrows:before{content:"\e068"}.fa-mars-and-venus-burst:before{content:"\e523"}.fa-caret-square-right:before,.fa-square-caret-right:before{content:"\f152"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-sun-plant-wilt:before{content:"\e57a"}.fa-toilets-portable:before{content:"\e584"}.fa-hockey-puck:before{content:"\f453"}.fa-table:before{content:"\f0ce"}.fa-magnifying-glass-arrow-right:before{content:"\e521"}.fa-digital-tachograph:before,.fa-tachograph-digital:before{content:"\f566"}.fa-users-slash:before{content:"\e073"}.fa-clover:before{content:"\e139"}.fa-mail-reply:before,.fa-reply:before{content:"\f3e5"}.fa-star-and-crescent:before{content:"\f699"}.fa-house-fire:before{content:"\e50c"}.fa-minus-square:before,.fa-square-minus:before{content:"\f146"}.fa-helicopter:before{content:"\f533"}.fa-compass:before{content:"\f14e"}.fa-caret-square-down:before,.fa-square-caret-down:before{content:"\f150"}.fa-file-circle-question:before{content:"\e4ef"}.fa-laptop-code:before{content:"\f5fc"}.fa-swatchbook:before{content:"\f5c3"}.fa-prescription-bottle:before{content:"\f485"}.fa-bars:before,.fa-navicon:before{content:"\f0c9"}.fa-people-group:before{content:"\e533"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-heart-broken:before,.fa-heart-crack:before{content:"\f7a9"}.fa-external-link-square-alt:before,.fa-square-up-right:before{content:"\f360"}.fa-face-kiss-beam:before,.fa-kiss-beam:before{content:"\f597"}.fa-film:before{content:"\f008"}.fa-ruler-horizontal:before{content:"\f547"}.fa-people-robbery:before{content:"\e536"}.fa-lightbulb:before{content:"\f0eb"}.fa-caret-left:before{content:"\f0d9"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-school-circle-xmark:before{content:"\e56d"}.fa-arrow-right-from-bracket:before,.fa-sign-out:before{content:"\f08b"}.fa-chevron-circle-down:before,.fa-circle-chevron-down:before{content:"\f13a"}.fa-unlock-alt:before,.fa-unlock-keyhole:before{content:"\f13e"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-headphones-alt:before,.fa-headphones-simple:before{content:"\f58f"}.fa-sitemap:before{content:"\f0e8"}.fa-circle-dollar-to-slot:before,.fa-donate:before{content:"\f4b9"}.fa-memory:before{content:"\f538"}.fa-road-spikes:before{content:"\e568"}.fa-fire-burner:before{content:"\e4f1"}.fa-flag:before{content:"\f024"}.fa-hanukiah:before{content:"\f6e6"}.fa-feather:before{content:"\f52d"}.fa-volume-down:before,.fa-volume-low:before{content:"\f027"}.fa-comment-slash:before{content:"\f4b3"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-compress:before{content:"\f066"}.fa-wheat-alt:before,.fa-wheat-awn:before{content:"\e2cd"}.fa-ankh:before{content:"\f644"}.fa-hands-holding-child:before{content:"\e4fa"}.fa-asterisk:before{content:"\2a"}.fa-check-square:before,.fa-square-check:before{content:"\f14a"}.fa-peseta-sign:before{content:"\e221"}.fa-header:before,.fa-heading:before{content:"\f1dc"}.fa-ghost:before{content:"\f6e2"}.fa-list-squares:before,.fa-list:before{content:"\f03a"}.fa-phone-square-alt:before,.fa-square-phone-flip:before{content:"\f87b"}.fa-cart-plus:before{content:"\f217"}.fa-gamepad:before{content:"\f11b"}.fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"}.fa-dizzy:before,.fa-face-dizzy:before{content:"\f567"}.fa-egg:before{content:"\f7fb"}.fa-house-medical-circle-xmark:before{content:"\e513"}.fa-campground:before{content:"\f6bb"}.fa-folder-plus:before{content:"\f65e"}.fa-futbol-ball:before,.fa-futbol:before,.fa-soccer-ball:before{content:"\f1e3"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-lock:before{content:"\f023"}.fa-gas-pump:before{content:"\f52f"}.fa-hot-tub-person:before,.fa-hot-tub:before{content:"\f593"}.fa-map-location:before,.fa-map-marked:before{content:"\f59f"}.fa-house-flood-water:before{content:"\e50e"}.fa-tree:before{content:"\f1bb"}.fa-bridge-lock:before{content:"\e4cc"}.fa-sack-dollar:before{content:"\f81d"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-car-side:before{content:"\f5e4"}.fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"}.fa-heart-circle-minus:before{content:"\e4ff"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-microscope:before{content:"\f610"}.fa-sink:before{content:"\e06d"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-arrow-down-z-a:before,.fa-sort-alpha-desc:before,.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-mitten:before{content:"\f7b5"}.fa-person-rays:before{content:"\e54d"}.fa-users:before{content:"\f0c0"}.fa-eye-slash:before{content:"\f070"}.fa-flask-vial:before{content:"\e4f3"}.fa-hand-paper:before,.fa-hand:before{content:"\f256"}.fa-om:before{content:"\f679"}.fa-worm:before{content:"\e599"}.fa-house-circle-xmark:before{content:"\e50b"}.fa-plug:before{content:"\f1e6"}.fa-chevron-up:before{content:"\f077"}.fa-hand-spock:before{content:"\f259"}.fa-stopwatch:before{content:"\f2f2"}.fa-face-kiss:before,.fa-kiss:before{content:"\f596"}.fa-bridge-circle-xmark:before{content:"\e4cb"}.fa-face-grin-tongue:before,.fa-grin-tongue:before{content:"\f589"}.fa-chess-bishop:before{content:"\f43a"}.fa-face-grin-wink:before,.fa-grin-wink:before{content:"\f58c"}.fa-deaf:before,.fa-deafness:before,.fa-ear-deaf:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-road-circle-check:before{content:"\e564"}.fa-dice-five:before{content:"\f523"}.fa-rss-square:before,.fa-square-rss:before{content:"\f143"}.fa-land-mine-on:before{content:"\e51b"}.fa-i-cursor:before{content:"\f246"}.fa-stamp:before{content:"\f5bf"}.fa-stairs:before{content:"\e289"}.fa-i:before{content:"\49"}.fa-hryvnia-sign:before,.fa-hryvnia:before{content:"\f6f2"}.fa-pills:before{content:"\f484"}.fa-face-grin-wide:before,.fa-grin-alt:before{content:"\f581"}.fa-tooth:before{content:"\f5c9"}.fa-v:before{content:"\56"}.fa-bangladeshi-taka-sign:before{content:"\e2e6"}.fa-bicycle:before{content:"\f206"}.fa-rod-asclepius:before,.fa-rod-snake:before,.fa-staff-aesculapius:before,.fa-staff-snake:before{content:"\e579"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-ambulance:before,.fa-truck-medical:before{content:"\f0f9"}.fa-wheat-awn-circle-exclamation:before{content:"\e598"}.fa-snowman:before{content:"\f7d0"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-road-barrier:before{content:"\e562"}.fa-school:before{content:"\f549"}.fa-igloo:before{content:"\f7ae"}.fa-joint:before{content:"\f595"}.fa-angle-right:before{content:"\f105"}.fa-horse:before{content:"\f6f0"}.fa-q:before{content:"\51"}.fa-g:before{content:"\47"}.fa-notes-medical:before{content:"\f481"}.fa-temperature-2:before,.fa-temperature-half:before,.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-dong-sign:before{content:"\e169"}.fa-capsules:before{content:"\f46b"}.fa-poo-bolt:before,.fa-poo-storm:before{content:"\f75a"}.fa-face-frown-open:before,.fa-frown-open:before{content:"\f57a"}.fa-hand-point-up:before{content:"\f0a6"}.fa-money-bill:before{content:"\f0d6"}.fa-bookmark:before{content:"\f02e"}.fa-align-justify:before{content:"\f039"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-helmet-un:before{content:"\e503"}.fa-bullseye:before{content:"\f140"}.fa-bacon:before{content:"\f7e5"}.fa-hand-point-down:before{content:"\f0a7"}.fa-arrow-up-from-bracket:before{content:"\e09a"}.fa-folder-blank:before,.fa-folder:before{content:"\f07b"}.fa-file-medical-alt:before,.fa-file-waveform:before{content:"\f478"}.fa-radiation:before{content:"\f7b9"}.fa-chart-simple:before{content:"\e473"}.fa-mars-stroke:before{content:"\f229"}.fa-vial:before{content:"\f492"}.fa-dashboard:before,.fa-gauge-med:before,.fa-gauge:before,.fa-tachometer-alt-average:before{content:"\f624"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-e:before{content:"\45"}.fa-pen-alt:before,.fa-pen-clip:before{content:"\f305"}.fa-bridge-circle-exclamation:before{content:"\e4ca"}.fa-user:before{content:"\f007"}.fa-school-circle-check:before{content:"\e56b"}.fa-dumpster:before{content:"\f793"}.fa-shuttle-van:before,.fa-van-shuttle:before{content:"\f5b6"}.fa-building-user:before{content:"\e4da"}.fa-caret-square-left:before,.fa-square-caret-left:before{content:"\f191"}.fa-highlighter:before{content:"\f591"}.fa-key:before{content:"\f084"}.fa-bullhorn:before{content:"\f0a1"}.fa-globe:before{content:"\f0ac"}.fa-synagogue:before{content:"\f69b"}.fa-person-half-dress:before{content:"\e548"}.fa-road-bridge:before{content:"\e563"}.fa-location-arrow:before{content:"\f124"}.fa-c:before{content:"\43"}.fa-tablet-button:before{content:"\f10a"}.fa-building-lock:before{content:"\e4d6"}.fa-pizza-slice:before{content:"\f818"}.fa-money-bill-wave:before{content:"\f53a"}.fa-area-chart:before,.fa-chart-area:before{content:"\f1fe"}.fa-house-flag:before{content:"\e50d"}.fa-person-circle-minus:before{content:"\e540"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-camera-rotate:before{content:"\e0d8"}.fa-air-freshener:before,.fa-spray-can-sparkles:before{content:"\f5d0"}.fa-star:before{content:"\f005"}.fa-repeat:before{content:"\f363"}.fa-cross:before{content:"\f654"}.fa-box:before{content:"\f466"}.fa-venus-mars:before{content:"\f228"}.fa-arrow-pointer:before,.fa-mouse-pointer:before{content:"\f245"}.fa-expand-arrows-alt:before,.fa-maximize:before{content:"\f31e"}.fa-charging-station:before{content:"\f5e7"}.fa-shapes:before,.fa-triangle-circle-square:before{content:"\f61f"}.fa-random:before,.fa-shuffle:before{content:"\f074"}.fa-person-running:before,.fa-running:before{content:"\f70c"}.fa-mobile-retro:before{content:"\e527"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-spider:before{content:"\f717"}.fa-hands-bound:before{content:"\e4f9"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-plane-circle-exclamation:before{content:"\e556"}.fa-x-ray:before{content:"\f497"}.fa-spell-check:before{content:"\f891"}.fa-slash:before{content:"\f715"}.fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"}.fa-arrow-right-to-bracket:before,.fa-sign-in:before{content:"\f090"}.fa-shop-slash:before,.fa-store-alt-slash:before{content:"\e070"}.fa-server:before{content:"\f233"}.fa-virus-covid-slash:before{content:"\e4a9"}.fa-shop-lock:before{content:"\e4a5"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-blender-phone:before{content:"\f6b6"}.fa-building-wheat:before{content:"\e4db"}.fa-person-breastfeeding:before{content:"\e53a"}.fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"}.fa-venus:before{content:"\f221"}.fa-passport:before{content:"\f5ab"}.fa-heart-pulse:before,.fa-heartbeat:before{content:"\f21e"}.fa-people-carry-box:before,.fa-people-carry:before{content:"\f4ce"}.fa-temperature-high:before{content:"\f769"}.fa-microchip:before{content:"\f2db"}.fa-crown:before{content:"\f521"}.fa-weight-hanging:before{content:"\f5cd"}.fa-xmarks-lines:before{content:"\e59a"}.fa-file-prescription:before{content:"\f572"}.fa-weight-scale:before,.fa-weight:before{content:"\f496"}.fa-user-friends:before,.fa-user-group:before{content:"\f500"}.fa-arrow-up-a-z:before,.fa-sort-alpha-up:before{content:"\f15e"}.fa-chess-knight:before{content:"\f441"}.fa-face-laugh-squint:before,.fa-laugh-squint:before{content:"\f59b"}.fa-wheelchair:before{content:"\f193"}.fa-arrow-circle-up:before,.fa-circle-arrow-up:before{content:"\f0aa"}.fa-toggle-on:before{content:"\f205"}.fa-person-walking:before,.fa-walking:before{content:"\f554"}.fa-l:before{content:"\4c"}.fa-fire:before{content:"\f06d"}.fa-bed-pulse:before,.fa-procedures:before{content:"\f487"}.fa-shuttle-space:before,.fa-space-shuttle:before{content:"\f197"}.fa-face-laugh:before,.fa-laugh:before{content:"\f599"}.fa-folder-open:before{content:"\f07c"}.fa-heart-circle-plus:before{content:"\e500"}.fa-code-fork:before{content:"\e13b"}.fa-city:before{content:"\f64f"}.fa-microphone-alt:before,.fa-microphone-lines:before{content:"\f3c9"}.fa-pepper-hot:before{content:"\f816"}.fa-unlock:before{content:"\f09c"}.fa-colon-sign:before{content:"\e140"}.fa-headset:before{content:"\f590"}.fa-store-slash:before{content:"\e071"}.fa-road-circle-xmark:before{content:"\e566"}.fa-user-minus:before{content:"\f503"}.fa-mars-stroke-up:before,.fa-mars-stroke-v:before{content:"\f22a"}.fa-champagne-glasses:before,.fa-glass-cheers:before{content:"\f79f"}.fa-clipboard:before{content:"\f328"}.fa-house-circle-exclamation:before{content:"\e50a"}.fa-file-arrow-up:before,.fa-file-upload:before{content:"\f574"}.fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"}.fa-bath:before,.fa-bathtub:before{content:"\f2cd"}.fa-underline:before{content:"\f0cd"}.fa-user-edit:before,.fa-user-pen:before{content:"\f4ff"}.fa-signature:before{content:"\f5b7"}.fa-stroopwafel:before{content:"\f551"}.fa-bold:before{content:"\f032"}.fa-anchor-lock:before{content:"\e4ad"}.fa-building-ngo:before{content:"\e4d7"}.fa-manat-sign:before{content:"\e1d5"}.fa-not-equal:before{content:"\f53e"}.fa-border-style:before,.fa-border-top-left:before{content:"\f853"}.fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"}.fa-jedi:before{content:"\f669"}.fa-poll:before,.fa-square-poll-vertical:before{content:"\f681"}.fa-mug-hot:before{content:"\f7b6"}.fa-battery-car:before,.fa-car-battery:before{content:"\f5df"}.fa-gift:before{content:"\f06b"}.fa-dice-two:before{content:"\f528"}.fa-chess-queen:before{content:"\f445"}.fa-glasses:before{content:"\f530"}.fa-chess-board:before{content:"\f43c"}.fa-building-circle-check:before{content:"\e4d2"}.fa-person-chalkboard:before{content:"\e53d"}.fa-mars-stroke-h:before,.fa-mars-stroke-right:before{content:"\f22b"}.fa-hand-back-fist:before,.fa-hand-rock:before{content:"\f255"}.fa-caret-square-up:before,.fa-square-caret-up:before{content:"\f151"}.fa-cloud-showers-water:before{content:"\e4e4"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\f080"}.fa-hands-bubbles:before,.fa-hands-wash:before{content:"\e05e"}.fa-less-than-equal:before{content:"\f537"}.fa-train:before{content:"\f238"}.fa-eye-low-vision:before,.fa-low-vision:before{content:"\f2a8"}.fa-crow:before{content:"\f520"}.fa-sailboat:before{content:"\e445"}.fa-window-restore:before{content:"\f2d2"}.fa-plus-square:before,.fa-square-plus:before{content:"\f0fe"}.fa-torii-gate:before{content:"\f6a1"}.fa-frog:before{content:"\f52e"}.fa-bucket:before{content:"\e4cf"}.fa-image:before{content:"\f03e"}.fa-microphone:before{content:"\f130"}.fa-cow:before{content:"\f6c8"}.fa-caret-up:before{content:"\f0d8"}.fa-screwdriver:before{content:"\f54a"}.fa-folder-closed:before{content:"\e185"}.fa-house-tsunami:before{content:"\e515"}.fa-square-nfi:before{content:"\e576"}.fa-arrow-up-from-ground-water:before{content:"\e4b5"}.fa-glass-martini-alt:before,.fa-martini-glass:before{content:"\f57b"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-columns:before,.fa-table-columns:before{content:"\f0db"}.fa-lemon:before{content:"\f094"}.fa-head-side-mask:before{content:"\e063"}.fa-handshake:before{content:"\f2b5"}.fa-gem:before{content:"\f3a5"}.fa-dolly-box:before,.fa-dolly:before{content:"\f472"}.fa-smoking:before{content:"\f48d"}.fa-compress-arrows-alt:before,.fa-minimize:before{content:"\f78c"}.fa-monument:before{content:"\f5a6"}.fa-snowplow:before{content:"\f7d2"}.fa-angle-double-right:before,.fa-angles-right:before{content:"\f101"}.fa-cannabis:before{content:"\f55f"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-tablets:before{content:"\f490"}.fa-ethernet:before{content:"\f796"}.fa-eur:before,.fa-euro-sign:before,.fa-euro:before{content:"\f153"}.fa-chair:before{content:"\f6c0"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-circle-stop:before,.fa-stop-circle:before{content:"\f28d"}.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}.fa-plate-wheat:before{content:"\e55a"}.fa-icicles:before{content:"\f7ad"}.fa-person-shelter:before{content:"\e54f"}.fa-neuter:before{content:"\f22c"}.fa-id-badge:before{content:"\f2c1"}.fa-marker:before{content:"\f5a1"}.fa-face-laugh-beam:before,.fa-laugh-beam:before{content:"\f59a"}.fa-helicopter-symbol:before{content:"\e502"}.fa-universal-access:before{content:"\f29a"}.fa-chevron-circle-up:before,.fa-circle-chevron-up:before{content:"\f139"}.fa-lari-sign:before{content:"\e1c8"}.fa-volcano:before{content:"\f770"}.fa-person-walking-dashed-line-arrow-right:before{content:"\e553"}.fa-gbp:before,.fa-pound-sign:before,.fa-sterling-sign:before{content:"\f154"}.fa-viruses:before{content:"\e076"}.fa-square-person-confined:before{content:"\e577"}.fa-user-tie:before{content:"\f508"}.fa-arrow-down-long:before,.fa-long-arrow-down:before{content:"\f175"}.fa-tent-arrow-down-to-line:before{content:"\e57e"}.fa-certificate:before{content:"\f0a3"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-suitcase:before{content:"\f0f2"}.fa-person-skating:before,.fa-skating:before{content:"\f7c5"}.fa-filter-circle-dollar:before,.fa-funnel-dollar:before{content:"\f662"}.fa-camera-retro:before{content:"\f083"}.fa-arrow-circle-down:before,.fa-circle-arrow-down:before{content:"\f0ab"}.fa-arrow-right-to-file:before,.fa-file-import:before{content:"\f56f"}.fa-external-link-square:before,.fa-square-arrow-up-right:before{content:"\f14c"}.fa-box-open:before{content:"\f49e"}.fa-scroll:before{content:"\f70e"}.fa-spa:before{content:"\f5bb"}.fa-location-pin-lock:before{content:"\e51f"}.fa-pause:before{content:"\f04c"}.fa-hill-avalanche:before{content:"\e507"}.fa-temperature-0:before,.fa-temperature-empty:before,.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-bomb:before{content:"\f1e2"}.fa-registered:before{content:"\f25d"}.fa-address-card:before,.fa-contact-card:before,.fa-vcard:before{content:"\f2bb"}.fa-balance-scale-right:before,.fa-scale-unbalanced-flip:before{content:"\f516"}.fa-subscript:before{content:"\f12c"}.fa-diamond-turn-right:before,.fa-directions:before{content:"\f5eb"}.fa-burst:before{content:"\e4dc"}.fa-house-laptop:before,.fa-laptop-house:before{content:"\e066"}.fa-face-tired:before,.fa-tired:before{content:"\f5c8"}.fa-money-bills:before{content:"\e1f3"}.fa-smog:before{content:"\f75f"}.fa-crutch:before{content:"\f7f7"}.fa-cloud-arrow-up:before,.fa-cloud-upload-alt:before,.fa-cloud-upload:before{content:"\f0ee"}.fa-palette:before{content:"\f53f"}.fa-arrows-turn-right:before{content:"\e4c0"}.fa-vest:before{content:"\e085"}.fa-ferry:before{content:"\e4ea"}.fa-arrows-down-to-people:before{content:"\e4b9"}.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}.fa-arrows-alt-h:before,.fa-left-right:before{content:"\f337"}.fa-boxes-packing:before{content:"\e4c7"}.fa-arrow-circle-left:before,.fa-circle-arrow-left:before{content:"\f0a8"}.fa-group-arrows-rotate:before{content:"\e4f6"}.fa-bowl-food:before{content:"\e4c6"}.fa-candy-cane:before{content:"\f786"}.fa-arrow-down-wide-short:before,.fa-sort-amount-asc:before,.fa-sort-amount-down:before{content:"\f160"}.fa-cloud-bolt:before,.fa-thunderstorm:before{content:"\f76c"}.fa-remove-format:before,.fa-text-slash:before{content:"\f87d"}.fa-face-smile-wink:before,.fa-smile-wink:before{content:"\f4da"}.fa-file-word:before{content:"\f1c2"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-arrows-h:before,.fa-arrows-left-right:before{content:"\f07e"}.fa-house-lock:before{content:"\e510"}.fa-cloud-arrow-down:before,.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}.fa-children:before{content:"\e4e1"}.fa-blackboard:before,.fa-chalkboard:before{content:"\f51b"}.fa-user-alt-slash:before,.fa-user-large-slash:before{content:"\f4fa"}.fa-envelope-open:before{content:"\f2b6"}.fa-handshake-alt-slash:before,.fa-handshake-simple-slash:before{content:"\e05f"}.fa-mattress-pillow:before{content:"\e525"}.fa-guarani-sign:before{content:"\e19a"}.fa-arrows-rotate:before,.fa-refresh:before,.fa-sync:before{content:"\f021"}.fa-fire-extinguisher:before{content:"\f134"}.fa-cruzeiro-sign:before{content:"\e152"}.fa-greater-than-equal:before{content:"\f532"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-atlas:before,.fa-book-atlas:before{content:"\f558"}.fa-virus:before{content:"\e074"}.fa-envelope-circle-check:before{content:"\e4e8"}.fa-layer-group:before{content:"\f5fd"}.fa-arrows-to-dot:before{content:"\e4be"}.fa-archway:before{content:"\f557"}.fa-heart-circle-check:before{content:"\e4fd"}.fa-house-chimney-crack:before,.fa-house-damage:before{content:"\f6f1"}.fa-file-archive:before,.fa-file-zipper:before{content:"\f1c6"}.fa-square:before{content:"\f0c8"}.fa-glass-martini:before,.fa-martini-glass-empty:before{content:"\f000"}.fa-couch:before{content:"\f4b8"}.fa-cedi-sign:before{content:"\e0df"}.fa-italic:before{content:"\f033"}.fa-church:before{content:"\f51d"}.fa-comments-dollar:before{content:"\f653"}.fa-democrat:before{content:"\f747"}.fa-z:before{content:"\5a"}.fa-person-skiing:before,.fa-skiing:before{content:"\f7c9"}.fa-road-lock:before{content:"\e567"}.fa-a:before{content:"\41"}.fa-temperature-arrow-down:before,.fa-temperature-down:before{content:"\e03f"}.fa-feather-alt:before,.fa-feather-pointed:before{content:"\f56b"}.fa-p:before{content:"\50"}.fa-snowflake:before{content:"\f2dc"}.fa-newspaper:before{content:"\f1ea"}.fa-ad:before,.fa-rectangle-ad:before{content:"\f641"}.fa-arrow-circle-right:before,.fa-circle-arrow-right:before{content:"\f0a9"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-locust:before{content:"\e520"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-list-1-2:before,.fa-list-numeric:before,.fa-list-ol:before{content:"\f0cb"}.fa-person-dress-burst:before{content:"\e544"}.fa-money-check-alt:before,.fa-money-check-dollar:before{content:"\f53d"}.fa-vector-square:before{content:"\f5cb"}.fa-bread-slice:before{content:"\f7ec"}.fa-language:before{content:"\f1ab"}.fa-face-kiss-wink-heart:before,.fa-kiss-wink-heart:before{content:"\f598"}.fa-filter:before{content:"\f0b0"}.fa-question:before{content:"\3f"}.fa-file-signature:before{content:"\f573"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-house-chimney-user:before{content:"\e065"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-puzzle-piece:before{content:"\f12e"}.fa-money-check:before{content:"\f53c"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-code:before{content:"\f121"}.fa-glass-whiskey:before,.fa-whiskey-glass:before{content:"\f7a0"}.fa-building-circle-exclamation:before{content:"\e4d3"}.fa-magnifying-glass-chart:before{content:"\e522"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-cubes-stacked:before{content:"\e4e6"}.fa-krw:before,.fa-won-sign:before,.fa-won:before{content:"\f159"}.fa-virus-covid:before{content:"\e4a8"}.fa-austral-sign:before{content:"\e0a9"}.fa-f:before{content:"\46"}.fa-leaf:before{content:"\f06c"}.fa-road:before{content:"\f018"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-person-circle-plus:before{content:"\e541"}.fa-chart-pie:before,.fa-pie-chart:before{content:"\f200"}.fa-bolt-lightning:before{content:"\e0b7"}.fa-sack-xmark:before{content:"\e56a"}.fa-file-excel:before{content:"\f1c3"}.fa-file-contract:before{content:"\f56c"}.fa-fish-fins:before{content:"\e4f2"}.fa-building-flag:before{content:"\e4d5"}.fa-face-grin-beam:before,.fa-grin-beam:before{content:"\f582"}.fa-object-ungroup:before{content:"\f248"}.fa-poop:before{content:"\f619"}.fa-location-pin:before,.fa-map-marker:before{content:"\f041"}.fa-kaaba:before{content:"\f66b"}.fa-toilet-paper:before{content:"\f71e"}.fa-hard-hat:before,.fa-hat-hard:before,.fa-helmet-safety:before{content:"\f807"}.fa-eject:before{content:"\f052"}.fa-arrow-alt-circle-right:before,.fa-circle-right:before{content:"\f35a"}.fa-plane-circle-check:before{content:"\e555"}.fa-face-rolling-eyes:before,.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-object-group:before{content:"\f247"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-mask-ventilator:before{content:"\e524"}.fa-arrow-right:before{content:"\f061"}.fa-map-signs:before,.fa-signs-post:before{content:"\f277"}.fa-cash-register:before{content:"\f788"}.fa-person-circle-question:before{content:"\e542"}.fa-h:before{content:"\48"}.fa-tarp:before{content:"\e57b"}.fa-screwdriver-wrench:before,.fa-tools:before{content:"\f7d9"}.fa-arrows-to-eye:before{content:"\e4bf"}.fa-plug-circle-bolt:before{content:"\e55b"}.fa-heart:before{content:"\f004"}.fa-mars-and-venus:before{content:"\f224"}.fa-home-user:before,.fa-house-user:before{content:"\e1b0"}.fa-dumpster-fire:before{content:"\f794"}.fa-house-crack:before{content:"\e3b1"}.fa-cocktail:before,.fa-martini-glass-citrus:before{content:"\f561"}.fa-face-surprise:before,.fa-surprise:before{content:"\f5c2"}.fa-bottle-water:before{content:"\e4c5"}.fa-circle-pause:before,.fa-pause-circle:before{content:"\f28b"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-apple-alt:before,.fa-apple-whole:before{content:"\f5d1"}.fa-kitchen-set:before{content:"\e51a"}.fa-r:before{content:"\52"}.fa-temperature-1:before,.fa-temperature-quarter:before,.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-cube:before{content:"\f1b2"}.fa-bitcoin-sign:before{content:"\e0b4"}.fa-shield-dog:before{content:"\e573"}.fa-solar-panel:before{content:"\f5ba"}.fa-lock-open:before{content:"\f3c1"}.fa-elevator:before{content:"\e16d"}.fa-money-bill-transfer:before{content:"\e528"}.fa-money-bill-trend-up:before{content:"\e529"}.fa-house-flood-water-circle-arrow-right:before{content:"\e50f"}.fa-poll-h:before,.fa-square-poll-horizontal:before{content:"\f682"}.fa-circle:before{content:"\f111"}.fa-backward-fast:before,.fa-fast-backward:before{content:"\f049"}.fa-recycle:before{content:"\f1b8"}.fa-user-astronaut:before{content:"\f4fb"}.fa-plane-slash:before{content:"\e069"}.fa-trademark:before{content:"\f25c"}.fa-basketball-ball:before,.fa-basketball:before{content:"\f434"}.fa-satellite-dish:before{content:"\f7c0"}.fa-arrow-alt-circle-up:before,.fa-circle-up:before{content:"\f35b"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-volume-high:before,.fa-volume-up:before{content:"\f028"}.fa-users-rays:before{content:"\e593"}.fa-wallet:before{content:"\f555"}.fa-clipboard-check:before{content:"\f46c"}.fa-file-audio:before{content:"\f1c7"}.fa-burger:before,.fa-hamburger:before{content:"\f805"}.fa-wrench:before{content:"\f0ad"}.fa-bugs:before{content:"\e4d0"}.fa-rupee-sign:before,.fa-rupee:before{content:"\f156"}.fa-file-image:before{content:"\f1c5"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-plane-departure:before{content:"\f5b0"}.fa-handshake-slash:before{content:"\e060"}.fa-book-bookmark:before{content:"\e0bb"}.fa-code-branch:before{content:"\f126"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-bridge:before{content:"\e4c8"}.fa-phone-alt:before,.fa-phone-flip:before{content:"\f879"}.fa-truck-front:before{content:"\e2b7"}.fa-cat:before{content:"\f6be"}.fa-anchor-circle-exclamation:before{content:"\e4ab"}.fa-truck-field:before{content:"\e58d"}.fa-route:before{content:"\f4d7"}.fa-clipboard-question:before{content:"\e4e3"}.fa-panorama:before{content:"\e209"}.fa-comment-medical:before{content:"\f7f5"}.fa-teeth-open:before{content:"\f62f"}.fa-file-circle-minus:before{content:"\e4ed"}.fa-tags:before{content:"\f02c"}.fa-wine-glass:before{content:"\f4e3"}.fa-fast-forward:before,.fa-forward-fast:before{content:"\f050"}.fa-face-meh-blank:before,.fa-meh-blank:before{content:"\f5a4"}.fa-parking:before,.fa-square-parking:before{content:"\f540"}.fa-house-signal:before{content:"\e012"}.fa-bars-progress:before,.fa-tasks-alt:before{content:"\f828"}.fa-faucet-drip:before{content:"\e006"}.fa-cart-flatbed:before,.fa-dolly-flatbed:before{content:"\f474"}.fa-ban-smoking:before,.fa-smoking-ban:before{content:"\f54d"}.fa-terminal:before{content:"\f120"}.fa-mobile-button:before{content:"\f10b"}.fa-house-medical-flag:before{content:"\e514"}.fa-basket-shopping:before,.fa-shopping-basket:before{content:"\f291"}.fa-tape:before{content:"\f4db"}.fa-bus-alt:before,.fa-bus-simple:before{content:"\f55e"}.fa-eye:before{content:"\f06e"}.fa-face-sad-cry:before,.fa-sad-cry:before{content:"\f5b3"}.fa-audio-description:before{content:"\f29e"}.fa-person-military-to-person:before{content:"\e54c"}.fa-file-shield:before{content:"\e4f0"}.fa-user-slash:before{content:"\f506"}.fa-pen:before{content:"\f304"}.fa-tower-observation:before{content:"\e586"}.fa-file-code:before{content:"\f1c9"}.fa-signal-5:before,.fa-signal-perfect:before,.fa-signal:before{content:"\f012"}.fa-bus:before{content:"\f207"}.fa-heart-circle-xmark:before{content:"\e501"}.fa-home-lg:before,.fa-house-chimney:before{content:"\e3af"}.fa-window-maximize:before{content:"\f2d0"}.fa-face-frown:before,.fa-frown:before{content:"\f119"}.fa-prescription:before{content:"\f5b1"}.fa-shop:before,.fa-store-alt:before{content:"\f54f"}.fa-floppy-disk:before,.fa-save:before{content:"\f0c7"}.fa-vihara:before{content:"\f6a7"}.fa-balance-scale-left:before,.fa-scale-unbalanced:before{content:"\f515"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}.fa-plant-wilt:before{content:"\e5aa"}.fa-diamond:before{content:"\f219"}.fa-face-grin-squint:before,.fa-grin-squint:before{content:"\f585"}.fa-hand-holding-dollar:before,.fa-hand-holding-usd:before{content:"\f4c0"}.fa-bacterium:before{content:"\e05a"}.fa-hand-pointer:before{content:"\f25a"}.fa-drum-steelpan:before{content:"\f56a"}.fa-hand-scissors:before{content:"\f257"}.fa-hands-praying:before,.fa-praying-hands:before{content:"\f684"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-biohazard:before{content:"\f780"}.fa-location-crosshairs:before,.fa-location:before{content:"\f601"}.fa-mars-double:before{content:"\f227"}.fa-child-dress:before{content:"\e59c"}.fa-users-between-lines:before{content:"\e591"}.fa-lungs-virus:before{content:"\e067"}.fa-face-grin-tears:before,.fa-grin-tears:before{content:"\f588"}.fa-phone:before{content:"\f095"}.fa-calendar-times:before,.fa-calendar-xmark:before{content:"\f273"}.fa-child-reaching:before{content:"\e59d"}.fa-head-side-virus:before{content:"\e064"}.fa-user-cog:before,.fa-user-gear:before{content:"\f4fe"}.fa-arrow-up-1-9:before,.fa-sort-numeric-up:before{content:"\f163"}.fa-door-closed:before{content:"\f52a"}.fa-shield-virus:before{content:"\e06c"}.fa-dice-six:before{content:"\f526"}.fa-mosquito-net:before{content:"\e52c"}.fa-bridge-water:before{content:"\e4ce"}.fa-person-booth:before{content:"\f756"}.fa-text-width:before{content:"\f035"}.fa-hat-wizard:before{content:"\f6e8"}.fa-pen-fancy:before{content:"\f5ac"}.fa-digging:before,.fa-person-digging:before{content:"\f85e"}.fa-trash:before{content:"\f1f8"}.fa-gauge-simple-med:before,.fa-gauge-simple:before,.fa-tachometer-average:before{content:"\f629"}.fa-book-medical:before{content:"\f7e6"}.fa-poo:before{content:"\f2fe"}.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-cubes:before{content:"\f1b3"}.fa-divide:before{content:"\f529"}.fa-tenge-sign:before,.fa-tenge:before{content:"\f7d7"}.fa-headphones:before{content:"\f025"}.fa-hands-holding:before{content:"\f4c2"}.fa-hands-clapping:before{content:"\e1a8"}.fa-republican:before{content:"\f75e"}.fa-arrow-left:before{content:"\f060"}.fa-person-circle-xmark:before{content:"\e543"}.fa-ruler:before{content:"\f545"}.fa-align-left:before{content:"\f036"}.fa-dice-d6:before{content:"\f6d1"}.fa-restroom:before{content:"\f7bd"}.fa-j:before{content:"\4a"}.fa-users-viewfinder:before{content:"\e595"}.fa-file-video:before{content:"\f1c8"}.fa-external-link-alt:before,.fa-up-right-from-square:before{content:"\f35d"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-file-pdf:before{content:"\f1c1"}.fa-bible:before,.fa-book-bible:before{content:"\f647"}.fa-o:before{content:"\4f"}.fa-medkit:before,.fa-suitcase-medical:before{content:"\f0fa"}.fa-user-secret:before{content:"\f21b"}.fa-otter:before{content:"\f700"}.fa-female:before,.fa-person-dress:before{content:"\f182"}.fa-comment-dollar:before{content:"\f651"}.fa-briefcase-clock:before,.fa-business-time:before{content:"\f64a"}.fa-table-cells-large:before,.fa-th-large:before{content:"\f009"}.fa-book-tanakh:before,.fa-tanakh:before{content:"\f827"}.fa-phone-volume:before,.fa-volume-control-phone:before{content:"\f2a0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-clipboard-user:before{content:"\f7f3"}.fa-child:before{content:"\f1ae"}.fa-lira-sign:before{content:"\f195"}.fa-satellite:before{content:"\f7bf"}.fa-plane-lock:before{content:"\e558"}.fa-tag:before{content:"\f02b"}.fa-comment:before{content:"\f075"}.fa-birthday-cake:before,.fa-cake-candles:before,.fa-cake:before{content:"\f1fd"}.fa-envelope:before{content:"\f0e0"}.fa-angle-double-up:before,.fa-angles-up:before{content:"\f102"}.fa-paperclip:before{content:"\f0c6"}.fa-arrow-right-to-city:before{content:"\e4b3"}.fa-ribbon:before{content:"\f4d6"}.fa-lungs:before{content:"\f604"}.fa-arrow-up-9-1:before,.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-litecoin-sign:before{content:"\e1d3"}.fa-border-none:before{content:"\f850"}.fa-circle-nodes:before{content:"\e4e2"}.fa-parachute-box:before{content:"\f4cd"}.fa-indent:before{content:"\f03c"}.fa-truck-field-un:before{content:"\e58e"}.fa-hourglass-empty:before,.fa-hourglass:before{content:"\f254"}.fa-mountain:before{content:"\f6fc"}.fa-user-doctor:before,.fa-user-md:before{content:"\f0f0"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-cloud-meatball:before{content:"\f73b"}.fa-camera-alt:before,.fa-camera:before{content:"\f030"}.fa-square-virus:before{content:"\e578"}.fa-meteor:before{content:"\f753"}.fa-car-on:before{content:"\e4dd"}.fa-sleigh:before{content:"\f7cc"}.fa-arrow-down-1-9:before,.fa-sort-numeric-asc:before,.fa-sort-numeric-down:before{content:"\f162"}.fa-hand-holding-droplet:before,.fa-hand-holding-water:before{content:"\f4c1"}.fa-water:before{content:"\f773"}.fa-calendar-check:before{content:"\f274"}.fa-braille:before{content:"\f2a1"}.fa-prescription-bottle-alt:before,.fa-prescription-bottle-medical:before{content:"\f486"}.fa-landmark:before{content:"\f66f"}.fa-truck:before{content:"\f0d1"}.fa-crosshairs:before{content:"\f05b"}.fa-person-cane:before{content:"\e53c"}.fa-tent:before{content:"\e57d"}.fa-vest-patches:before{content:"\e086"}.fa-check-double:before{content:"\f560"}.fa-arrow-down-a-z:before,.fa-sort-alpha-asc:before,.fa-sort-alpha-down:before{content:"\f15d"}.fa-money-bill-wheat:before{content:"\e52a"}.fa-cookie:before{content:"\f563"}.fa-arrow-left-rotate:before,.fa-arrow-rotate-back:before,.fa-arrow-rotate-backward:before,.fa-arrow-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"}.fa-face-grin-squint-tears:before,.fa-grin-squint-tears:before{content:"\f586"}.fa-dumbbell:before{content:"\f44b"}.fa-list-alt:before,.fa-rectangle-list:before{content:"\f022"}.fa-tarp-droplet:before{content:"\e57c"}.fa-house-medical-circle-check:before{content:"\e511"}.fa-person-skiing-nordic:before,.fa-skiing-nordic:before{content:"\f7ca"}.fa-calendar-plus:before{content:"\f271"}.fa-plane-arrival:before{content:"\f5af"}.fa-arrow-alt-circle-left:before,.fa-circle-left:before{content:"\f359"}.fa-subway:before,.fa-train-subway:before{content:"\f239"}.fa-chart-gantt:before{content:"\e0e4"}.fa-indian-rupee-sign:before,.fa-indian-rupee:before,.fa-inr:before{content:"\e1bc"}.fa-crop-alt:before,.fa-crop-simple:before{content:"\f565"}.fa-money-bill-1:before,.fa-money-bill-alt:before{content:"\f3d1"}.fa-left-long:before,.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-dna:before{content:"\f471"}.fa-virus-slash:before{content:"\e075"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-chess:before{content:"\f439"}.fa-arrow-left-long:before,.fa-long-arrow-left:before{content:"\f177"}.fa-plug-circle-check:before{content:"\e55c"}.fa-street-view:before{content:"\f21d"}.fa-franc-sign:before{content:"\e18f"}.fa-volume-off:before{content:"\f026"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before,.fa-hands-american-sign-language-interpreting:before,.fa-hands-asl-interpreting:before{content:"\f2a3"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-droplet-slash:before,.fa-tint-slash:before{content:"\f5c7"}.fa-mosque:before{content:"\f678"}.fa-mosquito:before{content:"\e52b"}.fa-star-of-david:before{content:"\f69a"}.fa-person-military-rifle:before{content:"\e54b"}.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}.fa-vials:before{content:"\f493"}.fa-plug-circle-plus:before{content:"\e55f"}.fa-place-of-worship:before{content:"\f67f"}.fa-grip-vertical:before{content:"\f58e"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-u:before{content:"\55"}.fa-square-root-alt:before,.fa-square-root-variable:before{content:"\f698"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-backward-step:before,.fa-step-backward:before{content:"\f048"}.fa-pallet:before{content:"\f482"}.fa-faucet:before{content:"\e005"}.fa-baseball-bat-ball:before{content:"\f432"}.fa-s:before{content:"\53"}.fa-timeline:before{content:"\e29c"}.fa-keyboard:before{content:"\f11c"}.fa-caret-down:before{content:"\f0d7"}.fa-clinic-medical:before,.fa-house-chimney-medical:before{content:"\f7f2"}.fa-temperature-3:before,.fa-temperature-three-quarters:before,.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-mobile-android-alt:before,.fa-mobile-screen:before{content:"\f3cf"}.fa-plane-up:before{content:"\e22d"}.fa-piggy-bank:before{content:"\f4d3"}.fa-battery-3:before,.fa-battery-half:before{content:"\f242"}.fa-mountain-city:before{content:"\e52e"}.fa-coins:before{content:"\f51e"}.fa-khanda:before{content:"\f66d"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-folder-tree:before{content:"\f802"}.fa-network-wired:before{content:"\f6ff"}.fa-map-pin:before{content:"\f276"}.fa-hamsa:before{content:"\f665"}.fa-cent-sign:before{content:"\e3f5"}.fa-flask:before{content:"\f0c3"}.fa-person-pregnant:before{content:"\e31e"}.fa-wand-sparkles:before{content:"\f72b"}.fa-ellipsis-v:before,.fa-ellipsis-vertical:before{content:"\f142"}.fa-ticket:before{content:"\f145"}.fa-power-off:before{content:"\f011"}.fa-long-arrow-alt-right:before,.fa-right-long:before{content:"\f30b"}.fa-flag-usa:before{content:"\f74d"}.fa-laptop-file:before{content:"\e51d"}.fa-teletype:before,.fa-tty:before{content:"\f1e4"}.fa-diagram-next:before{content:"\e476"}.fa-person-rifle:before{content:"\e54e"}.fa-house-medical-circle-exclamation:before{content:"\e512"}.fa-closed-captioning:before{content:"\f20a"}.fa-hiking:before,.fa-person-hiking:before{content:"\f6ec"}.fa-venus-double:before{content:"\f226"}.fa-images:before{content:"\f302"}.fa-calculator:before{content:"\f1ec"}.fa-people-pulling:before{content:"\e535"}.fa-n:before{content:"\4e"}.fa-cable-car:before,.fa-tram:before{content:"\f7da"}.fa-cloud-rain:before{content:"\f73d"}.fa-building-circle-xmark:before{content:"\e4d4"}.fa-ship:before{content:"\f21a"}.fa-arrows-down-to-line:before{content:"\e4b8"}.fa-download:before{content:"\f019"}.fa-face-grin:before,.fa-grin:before{content:"\f580"}.fa-backspace:before,.fa-delete-left:before{content:"\f55a"}.fa-eye-dropper-empty:before,.fa-eye-dropper:before,.fa-eyedropper:before{content:"\f1fb"}.fa-file-circle-check:before{content:"\e5a0"}.fa-forward:before{content:"\f04e"}.fa-mobile-android:before,.fa-mobile-phone:before,.fa-mobile:before{content:"\f3ce"}.fa-face-meh:before,.fa-meh:before{content:"\f11a"}.fa-align-center:before{content:"\f037"}.fa-book-dead:before,.fa-book-skull:before{content:"\f6b7"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-heart-circle-exclamation:before{content:"\e4fe"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-calendar-week:before{content:"\f784"}.fa-laptop-medical:before{content:"\f812"}.fa-b:before{content:"\42"}.fa-file-medical:before{content:"\f477"}.fa-dice-one:before{content:"\f525"}.fa-kiwi-bird:before{content:"\f535"}.fa-arrow-right-arrow-left:before,.fa-exchange:before{content:"\f0ec"}.fa-redo-alt:before,.fa-rotate-forward:before,.fa-rotate-right:before{content:"\f2f9"}.fa-cutlery:before,.fa-utensils:before{content:"\f2e7"}.fa-arrow-up-wide-short:before,.fa-sort-amount-up:before{content:"\f161"}.fa-mill-sign:before{content:"\e1ed"}.fa-bowl-rice:before{content:"\e2eb"}.fa-skull:before{content:"\f54c"}.fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"}.fa-truck-pickup:before{content:"\f63c"}.fa-long-arrow-alt-up:before,.fa-up-long:before{content:"\f30c"}.fa-stop:before{content:"\f04d"}.fa-code-merge:before{content:"\f387"}.fa-upload:before{content:"\f093"}.fa-hurricane:before{content:"\f751"}.fa-mound:before{content:"\e52d"}.fa-toilet-portable:before{content:"\e583"}.fa-compact-disc:before{content:"\f51f"}.fa-file-arrow-down:before,.fa-file-download:before{content:"\f56d"}.fa-caravan:before{content:"\f8ff"}.fa-shield-cat:before{content:"\e572"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-glass-water:before{content:"\e4f4"}.fa-oil-well:before{content:"\e532"}.fa-vault:before{content:"\e2c5"}.fa-mars:before{content:"\f222"}.fa-toilet:before{content:"\f7d8"}.fa-plane-circle-xmark:before{content:"\e557"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen-sign:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble-sign:before,.fa-ruble:before{content:"\f158"}.fa-sun:before{content:"\f185"}.fa-guitar:before{content:"\f7a6"}.fa-face-laugh-wink:before,.fa-laugh-wink:before{content:"\f59c"}.fa-horse-head:before{content:"\f7ab"}.fa-bore-hole:before{content:"\e4c3"}.fa-industry:before{content:"\f275"}.fa-arrow-alt-circle-down:before,.fa-circle-down:before{content:"\f358"}.fa-arrows-turn-to-dots:before{content:"\e4c1"}.fa-florin-sign:before{content:"\e184"}.fa-arrow-down-short-wide:before,.fa-sort-amount-desc:before,.fa-sort-amount-down-alt:before{content:"\f884"}.fa-less-than:before{content:"\3c"}.fa-angle-down:before{content:"\f107"}.fa-car-tunnel:before{content:"\e4de"}.fa-head-side-cough:before{content:"\e061"}.fa-grip-lines:before{content:"\f7a4"}.fa-thumbs-down:before{content:"\f165"}.fa-user-lock:before{content:"\f502"}.fa-arrow-right-long:before,.fa-long-arrow-right:before{content:"\f178"}.fa-anchor-circle-xmark:before{content:"\e4ac"}.fa-ellipsis-h:before,.fa-ellipsis:before{content:"\f141"}.fa-chess-pawn:before{content:"\f443"}.fa-first-aid:before,.fa-kit-medical:before{content:"\f479"}.fa-person-through-window:before{content:"\e5a9"}.fa-toolbox:before{content:"\f552"}.fa-hands-holding-circle:before{content:"\e4fb"}.fa-bug:before{content:"\f188"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-hand-holding-hand:before{content:"\e4f7"}.fa-book-open-reader:before,.fa-book-reader:before{content:"\f5da"}.fa-mountain-sun:before{content:"\e52f"}.fa-arrows-left-right-to-line:before{content:"\e4ba"}.fa-dice-d20:before{content:"\f6cf"}.fa-truck-droplet:before{content:"\e58c"}.fa-file-circle-xmark:before{content:"\e5a1"}.fa-temperature-arrow-up:before,.fa-temperature-up:before{content:"\e040"}.fa-medal:before{content:"\f5a2"}.fa-bed:before{content:"\f236"}.fa-h-square:before,.fa-square-h:before{content:"\f0fd"}.fa-podcast:before{content:"\f2ce"}.fa-temperature-4:before,.fa-temperature-full:before,.fa-thermometer-4:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-bell:before{content:"\f0f3"}.fa-superscript:before{content:"\f12b"}.fa-plug-circle-xmark:before{content:"\e560"}.fa-star-of-life:before{content:"\f621"}.fa-phone-slash:before{content:"\f3dd"}.fa-paint-roller:before{content:"\f5aa"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-file:before{content:"\f15b"}.fa-greater-than:before{content:"\3e"}.fa-person-swimming:before,.fa-swimmer:before{content:"\f5c4"}.fa-arrow-down:before{content:"\f063"}.fa-droplet:before,.fa-tint:before{content:"\f043"}.fa-eraser:before{content:"\f12d"}.fa-earth-america:before,.fa-earth-americas:before,.fa-earth:before,.fa-globe-americas:before{content:"\f57d"}.fa-person-burst:before{content:"\e53b"}.fa-dove:before{content:"\f4ba"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-socks:before{content:"\f696"}.fa-inbox:before{content:"\f01c"}.fa-section:before{content:"\e447"}.fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"}.fa-envelope-open-text:before{content:"\f658"}.fa-hospital-alt:before,.fa-hospital-wide:before,.fa-hospital:before{content:"\f0f8"}.fa-wine-bottle:before{content:"\f72f"}.fa-chess-rook:before{content:"\f447"}.fa-bars-staggered:before,.fa-reorder:before,.fa-stream:before{content:"\f550"}.fa-dharmachakra:before{content:"\f655"}.fa-hotdog:before{content:"\f80f"}.fa-blind:before,.fa-person-walking-with-cane:before{content:"\f29d"}.fa-drum:before{content:"\f569"}.fa-ice-cream:before{content:"\f810"}.fa-heart-circle-bolt:before{content:"\e4fc"}.fa-fax:before{content:"\f1ac"}.fa-paragraph:before{content:"\f1dd"}.fa-check-to-slot:before,.fa-vote-yea:before{content:"\f772"}.fa-star-half:before{content:"\f089"}.fa-boxes-alt:before,.fa-boxes-stacked:before,.fa-boxes:before{content:"\f468"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-assistive-listening-systems:before,.fa-ear-listen:before{content:"\f2a2"}.fa-tree-city:before{content:"\e587"}.fa-play:before{content:"\f04b"}.fa-font:before{content:"\f031"}.fa-rupiah-sign:before{content:"\e23d"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-ping-pong-paddle-ball:before,.fa-table-tennis-paddle-ball:before,.fa-table-tennis:before{content:"\f45d"}.fa-diagnoses:before,.fa-person-dots-from-line:before{content:"\f470"}.fa-trash-can-arrow-up:before,.fa-trash-restore-alt:before{content:"\f82a"}.fa-naira-sign:before{content:"\e1f6"}.fa-cart-arrow-down:before{content:"\f218"}.fa-walkie-talkie:before{content:"\f8ef"}.fa-file-edit:before,.fa-file-pen:before{content:"\f31c"}.fa-receipt:before{content:"\f543"}.fa-pen-square:before,.fa-pencil-square:before,.fa-square-pen:before{content:"\f14b"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-person-circle-exclamation:before{content:"\e53f"}.fa-chevron-down:before{content:"\f078"}.fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-skull-crossbones:before{content:"\f714"}.fa-code-compare:before{content:"\e13a"}.fa-list-dots:before,.fa-list-ul:before{content:"\f0ca"}.fa-school-lock:before{content:"\e56f"}.fa-tower-cell:before{content:"\e585"}.fa-down-long:before,.fa-long-arrow-alt-down:before{content:"\f309"}.fa-ranking-star:before{content:"\e561"}.fa-chess-king:before{content:"\f43f"}.fa-person-harassing:before{content:"\e549"}.fa-brazilian-real-sign:before{content:"\e46c"}.fa-landmark-alt:before,.fa-landmark-dome:before{content:"\f752"}.fa-arrow-up:before{content:"\f062"}.fa-television:before,.fa-tv-alt:before,.fa-tv:before{content:"\f26c"}.fa-shrimp:before{content:"\e448"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-jug-detergent:before{content:"\e519"}.fa-circle-user:before,.fa-user-circle:before{content:"\f2bd"}.fa-user-shield:before{content:"\f505"}.fa-wind:before{content:"\f72e"}.fa-car-burst:before,.fa-car-crash:before{content:"\f5e1"}.fa-y:before{content:"\59"}.fa-person-snowboarding:before,.fa-snowboarding:before{content:"\f7ce"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-fish:before{content:"\f578"}.fa-user-graduate:before{content:"\f501"}.fa-adjust:before,.fa-circle-half-stroke:before{content:"\f042"}.fa-clapperboard:before{content:"\e131"}.fa-circle-radiation:before,.fa-radiation-alt:before{content:"\f7ba"}.fa-baseball-ball:before,.fa-baseball:before{content:"\f433"}.fa-jet-fighter-up:before{content:"\e518"}.fa-diagram-project:before,.fa-project-diagram:before{content:"\f542"}.fa-copy:before{content:"\f0c5"}.fa-volume-mute:before,.fa-volume-times:before,.fa-volume-xmark:before{content:"\f6a9"}.fa-hand-sparkles:before{content:"\e05d"}.fa-grip-horizontal:before,.fa-grip:before{content:"\f58d"}.fa-share-from-square:before,.fa-share-square:before{content:"\f14d"}.fa-child-combatant:before,.fa-child-rifle:before{content:"\e4e0"}.fa-gun:before{content:"\e19b"}.fa-phone-square:before,.fa-square-phone:before{content:"\f098"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-expand:before{content:"\f065"}.fa-computer:before{content:"\e4e5"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-arrows-up-down-left-right:before,.fa-arrows:before{content:"\f047"}.fa-chalkboard-teacher:before,.fa-chalkboard-user:before{content:"\f51c"}.fa-peso-sign:before{content:"\e222"}.fa-building-shield:before{content:"\e4d8"}.fa-baby:before{content:"\f77c"}.fa-users-line:before{content:"\e592"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-tractor:before{content:"\f722"}.fa-trash-arrow-up:before,.fa-trash-restore:before{content:"\f829"}.fa-arrow-down-up-lock:before{content:"\e4b0"}.fa-lines-leaning:before{content:"\e51e"}.fa-ruler-combined:before{content:"\f546"}.fa-copyright:before{content:"\f1f9"}.fa-equals:before{content:"\3d"}.fa-blender:before{content:"\f517"}.fa-teeth:before{content:"\f62e"}.fa-ils:before,.fa-shekel-sign:before,.fa-shekel:before,.fa-sheqel-sign:before,.fa-sheqel:before{content:"\f20b"}.fa-map:before{content:"\f279"}.fa-rocket:before{content:"\f135"}.fa-photo-film:before,.fa-photo-video:before{content:"\f87c"}.fa-folder-minus:before{content:"\f65d"}.fa-store:before{content:"\f54e"}.fa-arrow-trend-up:before{content:"\e098"}.fa-plug-circle-minus:before{content:"\e55e"}.fa-sign-hanging:before,.fa-sign:before{content:"\f4d9"}.fa-bezier-curve:before{content:"\f55b"}.fa-bell-slash:before{content:"\f1f6"}.fa-tablet-android:before,.fa-tablet:before{content:"\f3fb"}.fa-school-flag:before{content:"\e56e"}.fa-fill:before{content:"\f575"}.fa-angle-up:before{content:"\f106"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-holly-berry:before{content:"\f7aa"}.fa-chevron-left:before{content:"\f053"}.fa-bacteria:before{content:"\e059"}.fa-hand-lizard:before{content:"\f258"}.fa-notdef:before{content:"\e1fe"}.fa-disease:before{content:"\f7fa"}.fa-briefcase-medical:before{content:"\f469"}.fa-genderless:before{content:"\f22d"}.fa-chevron-right:before{content:"\f054"}.fa-retweet:before{content:"\f079"}.fa-car-alt:before,.fa-car-rear:before{content:"\f5de"}.fa-pump-soap:before{content:"\e06b"}.fa-video-slash:before{content:"\f4e2"}.fa-battery-2:before,.fa-battery-quarter:before{content:"\f243"}.fa-radio:before{content:"\f8d7"}.fa-baby-carriage:before,.fa-carriage-baby:before{content:"\f77d"}.fa-traffic-light:before{content:"\f637"}.fa-thermometer:before{content:"\f491"}.fa-vr-cardboard:before{content:"\f729"}.fa-hand-middle-finger:before{content:"\f806"}.fa-percent:before,.fa-percentage:before{content:"\25"}.fa-truck-moving:before{content:"\f4df"}.fa-glass-water-droplet:before{content:"\e4f5"}.fa-display:before{content:"\e163"}.fa-face-smile:before,.fa-smile:before{content:"\f118"}.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}.fa-trophy:before{content:"\f091"}.fa-person-praying:before,.fa-pray:before{content:"\f683"}.fa-hammer:before{content:"\f6e3"}.fa-hand-peace:before{content:"\f25b"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-spinner:before{content:"\f110"}.fa-robot:before{content:"\f544"}.fa-peace:before{content:"\f67c"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-warehouse:before{content:"\f494"}.fa-arrow-up-right-dots:before{content:"\e4b7"}.fa-splotch:before{content:"\f5bc"}.fa-face-grin-hearts:before,.fa-grin-hearts:before{content:"\f584"}.fa-dice-four:before{content:"\f524"}.fa-sim-card:before{content:"\f7c4"}.fa-transgender-alt:before,.fa-transgender:before{content:"\f225"}.fa-mercury:before{content:"\f223"}.fa-arrow-turn-down:before,.fa-level-down:before{content:"\f149"}.fa-person-falling-burst:before{content:"\e547"}.fa-award:before{content:"\f559"}.fa-ticket-alt:before,.fa-ticket-simple:before{content:"\f3ff"}.fa-building:before{content:"\f1ad"}.fa-angle-double-left:before,.fa-angles-left:before{content:"\f100"}.fa-qrcode:before{content:"\f029"}.fa-clock-rotate-left:before,.fa-history:before{content:"\f1da"}.fa-face-grin-beam-sweat:before,.fa-grin-beam-sweat:before{content:"\f583"}.fa-arrow-right-from-file:before,.fa-file-export:before{content:"\f56e"}.fa-shield-blank:before,.fa-shield:before{content:"\f132"}.fa-arrow-up-short-wide:before,.fa-sort-amount-up-alt:before{content:"\f885"}.fa-house-medical:before{content:"\e3b2"}.fa-golf-ball-tee:before,.fa-golf-ball:before{content:"\f450"}.fa-chevron-circle-left:before,.fa-circle-chevron-left:before{content:"\f137"}.fa-house-chimney-window:before{content:"\e00d"}.fa-pen-nib:before{content:"\f5ad"}.fa-tent-arrow-turn-left:before{content:"\e580"}.fa-tents:before{content:"\e582"}.fa-magic:before,.fa-wand-magic:before{content:"\f0d0"}.fa-dog:before{content:"\f6d3"}.fa-carrot:before{content:"\f787"}.fa-moon:before{content:"\f186"}.fa-wine-glass-alt:before,.fa-wine-glass-empty:before{content:"\f5ce"}.fa-cheese:before{content:"\f7ef"}.fa-yin-yang:before{content:"\f6ad"}.fa-music:before{content:"\f001"}.fa-code-commit:before{content:"\f386"}.fa-temperature-low:before{content:"\f76b"}.fa-biking:before,.fa-person-biking:before{content:"\f84a"}.fa-broom:before{content:"\f51a"}.fa-shield-heart:before{content:"\e574"}.fa-gopuram:before{content:"\f664"}.fa-earth-oceania:before,.fa-globe-oceania:before{content:"\e47b"}.fa-square-xmark:before,.fa-times-square:before,.fa-xmark-square:before{content:"\f2d3"}.fa-hashtag:before{content:"\23"}.fa-expand-alt:before,.fa-up-right-and-down-left-from-center:before{content:"\f424"}.fa-oil-can:before{content:"\f613"}.fa-t:before{content:"\54"}.fa-hippo:before{content:"\f6ed"}.fa-chart-column:before{content:"\e0e3"}.fa-infinity:before{content:"\f534"}.fa-vial-circle-check:before{content:"\e596"}.fa-person-arrow-down-to-line:before{content:"\e538"}.fa-voicemail:before{content:"\f897"}.fa-fan:before{content:"\f863"}.fa-person-walking-luggage:before{content:"\e554"}.fa-arrows-alt-v:before,.fa-up-down:before{content:"\f338"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-calendar:before{content:"\f133"}.fa-trailer:before{content:"\e041"}.fa-bahai:before,.fa-haykal:before{content:"\f666"}.fa-sd-card:before{content:"\f7c2"}.fa-dragon:before{content:"\f6d5"}.fa-shoe-prints:before{content:"\f54b"}.fa-circle-plus:before,.fa-plus-circle:before{content:"\f055"}.fa-face-grin-tongue-wink:before,.fa-grin-tongue-wink:before{content:"\f58b"}.fa-hand-holding:before{content:"\f4bd"}.fa-plug-circle-exclamation:before{content:"\e55d"}.fa-chain-broken:before,.fa-chain-slash:before,.fa-link-slash:before,.fa-unlink:before{content:"\f127"}.fa-clone:before{content:"\f24d"}.fa-person-walking-arrow-loop-left:before{content:"\e551"}.fa-arrow-up-z-a:before,.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-fire-alt:before,.fa-fire-flame-curved:before{content:"\f7e4"}.fa-tornado:before{content:"\f76f"}.fa-file-circle-plus:before{content:"\e494"}.fa-book-quran:before,.fa-quran:before{content:"\f687"}.fa-anchor:before{content:"\f13d"}.fa-border-all:before{content:"\f84c"}.fa-angry:before,.fa-face-angry:before{content:"\f556"}.fa-cookie-bite:before{content:"\f564"}.fa-arrow-trend-down:before{content:"\e097"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-draw-polygon:before{content:"\f5ee"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-gauge-simple-high:before,.fa-tachometer-fast:before,.fa-tachometer:before{content:"\f62a"}.fa-shower:before{content:"\f2cc"}.fa-desktop-alt:before,.fa-desktop:before{content:"\f390"}.fa-m:before{content:"\4d"}.fa-table-list:before,.fa-th-list:before{content:"\f00b"}.fa-comment-sms:before,.fa-sms:before{content:"\f7cd"}.fa-book:before{content:"\f02d"}.fa-user-plus:before{content:"\f234"}.fa-check:before{content:"\f00c"}.fa-battery-4:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-house-circle-check:before{content:"\e509"}.fa-angle-left:before{content:"\f104"}.fa-diagram-successor:before{content:"\e47a"}.fa-truck-arrow-right:before{content:"\e58b"}.fa-arrows-split-up-and-left:before{content:"\e4bc"}.fa-fist-raised:before,.fa-hand-fist:before{content:"\f6de"}.fa-cloud-moon:before{content:"\f6c3"}.fa-briefcase:before{content:"\f0b1"}.fa-person-falling:before{content:"\e546"}.fa-image-portrait:before,.fa-portrait:before{content:"\f3e0"}.fa-user-tag:before{content:"\f507"}.fa-rug:before{content:"\e569"}.fa-earth-europe:before,.fa-globe-europe:before{content:"\f7a2"}.fa-cart-flatbed-suitcase:before,.fa-luggage-cart:before{content:"\f59d"}.fa-rectangle-times:before,.fa-rectangle-xmark:before,.fa-times-rectangle:before,.fa-window-close:before{content:"\f410"}.fa-baht-sign:before{content:"\e0ac"}.fa-book-open:before{content:"\f518"}.fa-book-journal-whills:before,.fa-journal-whills:before{content:"\f66a"}.fa-handcuffs:before{content:"\e4f8"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-database:before{content:"\f1c0"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-bottle-droplet:before{content:"\e4c4"}.fa-mask-face:before{content:"\e1d7"}.fa-hill-rockslide:before{content:"\e508"}.fa-exchange-alt:before,.fa-right-left:before{content:"\f362"}.fa-paper-plane:before{content:"\f1d8"}.fa-road-circle-exclamation:before{content:"\e565"}.fa-dungeon:before{content:"\f6d9"}.fa-align-right:before{content:"\f038"}.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-life-ring:before{content:"\f1cd"}.fa-hands:before,.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-calendar-day:before{content:"\f783"}.fa-ladder-water:before,.fa-swimming-pool:before,.fa-water-ladder:before{content:"\f5c5"}.fa-arrows-up-down:before,.fa-arrows-v:before{content:"\f07d"}.fa-face-grimace:before,.fa-grimace:before{content:"\f57f"}.fa-wheelchair-alt:before,.fa-wheelchair-move:before{content:"\e2ce"}.fa-level-down-alt:before,.fa-turn-down:before{content:"\f3be"}.fa-person-walking-arrow-right:before{content:"\e552"}.fa-envelope-square:before,.fa-square-envelope:before{content:"\f199"}.fa-dice:before{content:"\f522"}.fa-bowling-ball:before{content:"\f436"}.fa-brain:before{content:"\f5dc"}.fa-band-aid:before,.fa-bandage:before{content:"\f462"}.fa-calendar-minus:before{content:"\f272"}.fa-circle-xmark:before,.fa-times-circle:before,.fa-xmark-circle:before{content:"\f057"}.fa-gifts:before{content:"\f79c"}.fa-hotel:before{content:"\f594"}.fa-earth-asia:before,.fa-globe-asia:before{content:"\f57e"}.fa-id-card-alt:before,.fa-id-card-clip:before{content:"\f47f"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}.fa-thumbs-up:before{content:"\f164"}.fa-user-clock:before{content:"\f4fd"}.fa-allergies:before,.fa-hand-dots:before{content:"\f461"}.fa-file-invoice:before{content:"\f570"}.fa-window-minimize:before{content:"\f2d1"}.fa-coffee:before,.fa-mug-saucer:before{content:"\f0f4"}.fa-brush:before{content:"\f55d"}.fa-mask:before{content:"\f6fa"}.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-ruler-vertical:before{content:"\f548"}.fa-user-alt:before,.fa-user-large:before{content:"\f406"}.fa-train-tram:before{content:"\e5b4"}.fa-user-nurse:before{content:"\f82f"}.fa-syringe:before{content:"\f48e"}.fa-cloud-sun:before{content:"\f6c4"}.fa-stopwatch-20:before{content:"\e06f"}.fa-square-full:before{content:"\f45c"}.fa-magnet:before{content:"\f076"}.fa-jar:before{content:"\e516"}.fa-note-sticky:before,.fa-sticky-note:before{content:"\f249"}.fa-bug-slash:before{content:"\e490"}.fa-arrow-up-from-water-pump:before{content:"\e4b6"}.fa-bone:before{content:"\f5d7"}.fa-user-injured:before{content:"\f728"}.fa-face-sad-tear:before,.fa-sad-tear:before{content:"\f5b4"}.fa-plane:before{content:"\f072"}.fa-tent-arrows-down:before{content:"\e581"}.fa-exclamation:before{content:"\21"}.fa-arrows-spin:before{content:"\e4bb"}.fa-print:before{content:"\f02f"}.fa-try:before,.fa-turkish-lira-sign:before,.fa-turkish-lira:before{content:"\e2bb"}.fa-dollar-sign:before,.fa-dollar:before,.fa-usd:before{content:"\24"}.fa-x:before{content:"\58"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-users-cog:before,.fa-users-gear:before{content:"\f509"}.fa-person-military-pointing:before{content:"\e54a"}.fa-bank:before,.fa-building-columns:before,.fa-institution:before,.fa-museum:before,.fa-university:before{content:"\f19c"}.fa-umbrella:before{content:"\f0e9"}.fa-trowel:before{content:"\e589"}.fa-d:before{content:"\44"}.fa-stapler:before{content:"\e5af"}.fa-masks-theater:before,.fa-theater-masks:before{content:"\f630"}.fa-kip-sign:before{content:"\e1c4"}.fa-hand-point-left:before{content:"\f0a5"}.fa-handshake-alt:before,.fa-handshake-simple:before{content:"\f4c6"}.fa-fighter-jet:before,.fa-jet-fighter:before{content:"\f0fb"}.fa-share-alt-square:before,.fa-square-share-nodes:before{content:"\f1e1"}.fa-barcode:before{content:"\f02a"}.fa-plus-minus:before{content:"\e43c"}.fa-video-camera:before,.fa-video:before{content:"\f03d"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-person-circle-check:before{content:"\e53e"}.fa-level-up-alt:before,.fa-turn-up:before{content:"\f3bf"}
.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/lib/fontawesome/webfonts/fa-brands-400.woff2) format("woff2")}.fa-brands,.fab{font-weight:400}.fa-monero:before{content:"\f3d0"}.fa-hooli:before{content:"\f427"}.fa-yelp:before{content:"\f1e9"}.fa-cc-visa:before{content:"\f1f0"}.fa-lastfm:before{content:"\f202"}.fa-shopware:before{content:"\f5b5"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-aws:before{content:"\f375"}.fa-redhat:before{content:"\f7bc"}.fa-yoast:before{content:"\f2b1"}.fa-cloudflare:before{content:"\e07d"}.fa-ups:before{content:"\f7e0"}.fa-pixiv:before{content:"\e640"}.fa-wpexplorer:before{content:"\f2de"}.fa-dyalog:before{content:"\f399"}.fa-bity:before{content:"\f37a"}.fa-stackpath:before{content:"\f842"}.fa-buysellads:before{content:"\f20d"}.fa-first-order:before{content:"\f2b0"}.fa-modx:before{content:"\f285"}.fa-guilded:before{content:"\e07e"}.fa-vnv:before{content:"\f40b"}.fa-js-square:before,.fa-square-js:before{content:"\f3b9"}.fa-microsoft:before{content:"\f3ca"}.fa-qq:before{content:"\f1d6"}.fa-orcid:before{content:"\f8d2"}.fa-java:before{content:"\f4e4"}.fa-invision:before{content:"\f7b0"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-centercode:before{content:"\f380"}.fa-glide-g:before{content:"\f2a6"}.fa-drupal:before{content:"\f1a9"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-unity:before{content:"\e049"}.fa-whmcs:before{content:"\f40d"}.fa-rocketchat:before{content:"\f3e8"}.fa-vk:before{content:"\f189"}.fa-untappd:before{content:"\f405"}.fa-mailchimp:before{content:"\f59e"}.fa-css3-alt:before{content:"\f38b"}.fa-reddit-square:before,.fa-square-reddit:before{content:"\f1a2"}.fa-vimeo-v:before{content:"\f27d"}.fa-contao:before{content:"\f26d"}.fa-square-font-awesome:before{content:"\e5ad"}.fa-deskpro:before{content:"\f38f"}.fa-brave:before{content:"\e63c"}.fa-sistrix:before{content:"\f3ee"}.fa-instagram-square:before,.fa-square-instagram:before{content:"\e055"}.fa-battle-net:before{content:"\f835"}.fa-the-red-yeti:before{content:"\f69d"}.fa-hacker-news-square:before,.fa-square-hacker-news:before{content:"\f3af"}.fa-edge:before{content:"\f282"}.fa-threads:before{content:"\e618"}.fa-napster:before{content:"\f3d2"}.fa-snapchat-square:before,.fa-square-snapchat:before{content:"\f2ad"}.fa-google-plus-g:before{content:"\f0d5"}.fa-artstation:before{content:"\f77a"}.fa-markdown:before{content:"\f60f"}.fa-sourcetree:before{content:"\f7d3"}.fa-google-plus:before{content:"\f2b3"}.fa-diaspora:before{content:"\f791"}.fa-foursquare:before{content:"\f180"}.fa-stack-overflow:before{content:"\f16c"}.fa-github-alt:before{content:"\f113"}.fa-phoenix-squadron:before{content:"\f511"}.fa-pagelines:before{content:"\f18c"}.fa-algolia:before{content:"\f36c"}.fa-red-river:before{content:"\f3e3"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-safari:before{content:"\f267"}.fa-google:before{content:"\f1a0"}.fa-font-awesome-alt:before,.fa-square-font-awesome-stroke:before{content:"\f35c"}.fa-atlassian:before{content:"\f77b"}.fa-linkedin-in:before{content:"\f0e1"}.fa-digital-ocean:before{content:"\f391"}.fa-nimblr:before{content:"\f5a8"}.fa-chromecast:before{content:"\f838"}.fa-evernote:before{content:"\f839"}.fa-hacker-news:before{content:"\f1d4"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-adversal:before{content:"\f36a"}.fa-creative-commons:before{content:"\f25e"}.fa-watchman-monitoring:before{content:"\e087"}.fa-fonticons:before{content:"\f280"}.fa-weixin:before{content:"\f1d7"}.fa-shirtsinbulk:before{content:"\f214"}.fa-codepen:before{content:"\f1cb"}.fa-git-alt:before{content:"\f841"}.fa-lyft:before{content:"\f3c3"}.fa-rev:before{content:"\f5b2"}.fa-windows:before{content:"\f17a"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-square-viadeo:before,.fa-viadeo-square:before{content:"\f2aa"}.fa-meetup:before{content:"\f2e0"}.fa-centos:before{content:"\f789"}.fa-adn:before{content:"\f170"}.fa-cloudsmith:before{content:"\f384"}.fa-opensuse:before{content:"\e62b"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-dribbble-square:before,.fa-square-dribbble:before{content:"\f397"}.fa-codiepie:before{content:"\f284"}.fa-node:before{content:"\f419"}.fa-mix:before{content:"\f3cb"}.fa-steam:before{content:"\f1b6"}.fa-cc-apple-pay:before{content:"\f416"}.fa-scribd:before{content:"\f28a"}.fa-debian:before{content:"\e60b"}.fa-openid:before{content:"\f19b"}.fa-instalod:before{content:"\e081"}.fa-expeditedssl:before{content:"\f23e"}.fa-sellcast:before{content:"\f2da"}.fa-square-twitter:before,.fa-twitter-square:before{content:"\f081"}.fa-r-project:before{content:"\f4f7"}.fa-delicious:before{content:"\f1a5"}.fa-freebsd:before{content:"\f3a4"}.fa-vuejs:before{content:"\f41f"}.fa-accusoft:before{content:"\f369"}.fa-ioxhost:before{content:"\f208"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-app-store:before{content:"\f36f"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-itunes-note:before{content:"\f3b5"}.fa-golang:before{content:"\e40f"}.fa-kickstarter:before{content:"\f3bb"}.fa-grav:before{content:"\f2d6"}.fa-weibo:before{content:"\f18a"}.fa-uncharted:before{content:"\e084"}.fa-firstdraft:before{content:"\f3a1"}.fa-square-youtube:before,.fa-youtube-square:before{content:"\f431"}.fa-wikipedia-w:before{content:"\f266"}.fa-rendact:before,.fa-wpressr:before{content:"\f3e4"}.fa-angellist:before{content:"\f209"}.fa-galactic-republic:before{content:"\f50c"}.fa-nfc-directional:before{content:"\e530"}.fa-skype:before{content:"\f17e"}.fa-joget:before{content:"\f3b7"}.fa-fedora:before{content:"\f798"}.fa-stripe-s:before{content:"\f42a"}.fa-meta:before{content:"\e49b"}.fa-laravel:before{content:"\f3bd"}.fa-hotjar:before{content:"\f3b1"}.fa-bluetooth-b:before{content:"\f294"}.fa-square-letterboxd:before{content:"\e62e"}.fa-sticker-mule:before{content:"\f3f7"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-hips:before{content:"\f452"}.fa-behance:before{content:"\f1b4"}.fa-reddit:before{content:"\f1a1"}.fa-discord:before{content:"\f392"}.fa-chrome:before{content:"\f268"}.fa-app-store-ios:before{content:"\f370"}.fa-cc-discover:before{content:"\f1f2"}.fa-wpbeginner:before{content:"\f297"}.fa-confluence:before{content:"\f78d"}.fa-shoelace:before{content:"\e60c"}.fa-mdb:before{content:"\f8ca"}.fa-dochub:before{content:"\f394"}.fa-accessible-icon:before{content:"\f368"}.fa-ebay:before{content:"\f4f4"}.fa-amazon:before{content:"\f270"}.fa-unsplash:before{content:"\e07c"}.fa-yarn:before{content:"\f7e3"}.fa-square-steam:before,.fa-steam-square:before{content:"\f1b7"}.fa-500px:before{content:"\f26e"}.fa-square-vimeo:before,.fa-vimeo-square:before{content:"\f194"}.fa-asymmetrik:before{content:"\f372"}.fa-font-awesome-flag:before,.fa-font-awesome-logo-full:before,.fa-font-awesome:before{content:"\f2b4"}.fa-gratipay:before{content:"\f184"}.fa-apple:before{content:"\f179"}.fa-hive:before{content:"\e07f"}.fa-gitkraken:before{content:"\f3a6"}.fa-keybase:before{content:"\f4f5"}.fa-apple-pay:before{content:"\f415"}.fa-padlet:before{content:"\e4a0"}.fa-amazon-pay:before{content:"\f42c"}.fa-github-square:before,.fa-square-github:before{content:"\f092"}.fa-stumbleupon:before{content:"\f1a4"}.fa-fedex:before{content:"\f797"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-shopify:before{content:"\e057"}.fa-neos:before{content:"\f612"}.fa-square-threads:before{content:"\e619"}.fa-hackerrank:before{content:"\f5f7"}.fa-researchgate:before{content:"\f4f8"}.fa-swift:before{content:"\f8e1"}.fa-angular:before{content:"\f420"}.fa-speakap:before{content:"\f3f3"}.fa-angrycreative:before{content:"\f36e"}.fa-y-combinator:before{content:"\f23b"}.fa-empire:before{content:"\f1d1"}.fa-envira:before{content:"\f299"}.fa-google-scholar:before{content:"\e63b"}.fa-gitlab-square:before,.fa-square-gitlab:before{content:"\e5ae"}.fa-studiovinari:before{content:"\f3f8"}.fa-pied-piper:before{content:"\f2ae"}.fa-wordpress:before{content:"\f19a"}.fa-product-hunt:before{content:"\f288"}.fa-firefox:before{content:"\f269"}.fa-linode:before{content:"\f2b8"}.fa-goodreads:before{content:"\f3a8"}.fa-odnoklassniki-square:before,.fa-square-odnoklassniki:before{content:"\f264"}.fa-jsfiddle:before{content:"\f1cc"}.fa-sith:before{content:"\f512"}.fa-themeisle:before{content:"\f2b2"}.fa-page4:before{content:"\f3d7"}.fa-hashnode:before{content:"\e499"}.fa-react:before{content:"\f41b"}.fa-cc-paypal:before{content:"\f1f4"}.fa-squarespace:before{content:"\f5be"}.fa-cc-stripe:before{content:"\f1f5"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-bitcoin:before{content:"\f379"}.fa-keycdn:before{content:"\f3ba"}.fa-opera:before{content:"\f26a"}.fa-itch-io:before{content:"\f83a"}.fa-umbraco:before{content:"\f8e8"}.fa-galactic-senate:before{content:"\f50d"}.fa-ubuntu:before{content:"\f7df"}.fa-draft2digital:before{content:"\f396"}.fa-stripe:before{content:"\f429"}.fa-houzz:before{content:"\f27c"}.fa-gg:before{content:"\f260"}.fa-dhl:before{content:"\f790"}.fa-pinterest-square:before,.fa-square-pinterest:before{content:"\f0d3"}.fa-xing:before{content:"\f168"}.fa-blackberry:before{content:"\f37b"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-playstation:before{content:"\f3df"}.fa-quinscape:before{content:"\f459"}.fa-less:before{content:"\f41d"}.fa-blogger-b:before{content:"\f37d"}.fa-opencart:before{content:"\f23d"}.fa-vine:before{content:"\f1ca"}.fa-signal-messenger:before{content:"\e663"}.fa-paypal:before{content:"\f1ed"}.fa-gitlab:before{content:"\f296"}.fa-typo3:before{content:"\f42b"}.fa-reddit-alien:before{content:"\f281"}.fa-yahoo:before{content:"\f19e"}.fa-dailymotion:before{content:"\e052"}.fa-affiliatetheme:before{content:"\f36b"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-bootstrap:before{content:"\f836"}.fa-odnoklassniki:before{content:"\f263"}.fa-nfc-symbol:before{content:"\e531"}.fa-mintbit:before{content:"\e62f"}.fa-ethereum:before{content:"\f42e"}.fa-speaker-deck:before{content:"\f83c"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-patreon:before{content:"\f3d9"}.fa-avianex:before{content:"\f374"}.fa-ello:before{content:"\f5f1"}.fa-gofore:before{content:"\f3a7"}.fa-bimobject:before{content:"\f378"}.fa-brave-reverse:before{content:"\e63d"}.fa-facebook-f:before{content:"\f39e"}.fa-google-plus-square:before,.fa-square-google-plus:before{content:"\f0d4"}.fa-mandalorian:before{content:"\f50f"}.fa-first-order-alt:before{content:"\f50a"}.fa-osi:before{content:"\f41a"}.fa-google-wallet:before{content:"\f1ee"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-periscope:before{content:"\f3da"}.fa-fulcrum:before{content:"\f50b"}.fa-cloudscale:before{content:"\f383"}.fa-forumbee:before{content:"\f211"}.fa-mizuni:before{content:"\f3cc"}.fa-schlix:before{content:"\f3ea"}.fa-square-xing:before,.fa-xing-square:before{content:"\f169"}.fa-bandcamp:before{content:"\f2d5"}.fa-wpforms:before{content:"\f298"}.fa-cloudversify:before{content:"\f385"}.fa-usps:before{content:"\f7e1"}.fa-megaport:before{content:"\f5a3"}.fa-magento:before{content:"\f3c4"}.fa-spotify:before{content:"\f1bc"}.fa-optin-monster:before{content:"\f23c"}.fa-fly:before{content:"\f417"}.fa-aviato:before{content:"\f421"}.fa-itunes:before{content:"\f3b4"}.fa-cuttlefish:before{content:"\f38c"}.fa-blogger:before{content:"\f37c"}.fa-flickr:before{content:"\f16e"}.fa-viber:before{content:"\f409"}.fa-soundcloud:before{content:"\f1be"}.fa-digg:before{content:"\f1a6"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-letterboxd:before{content:"\e62d"}.fa-symfony:before{content:"\f83d"}.fa-maxcdn:before{content:"\f136"}.fa-etsy:before{content:"\f2d7"}.fa-facebook-messenger:before{content:"\f39f"}.fa-audible:before{content:"\f373"}.fa-think-peaks:before{content:"\f731"}.fa-bilibili:before{content:"\e3d9"}.fa-erlang:before{content:"\f39d"}.fa-x-twitter:before{content:"\e61b"}.fa-cotton-bureau:before{content:"\f89e"}.fa-dashcube:before{content:"\f210"}.fa-42-group:before,.fa-innosoft:before{content:"\e080"}.fa-stack-exchange:before{content:"\f18d"}.fa-elementor:before{content:"\f430"}.fa-pied-piper-square:before,.fa-square-pied-piper:before{content:"\e01e"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-palfed:before{content:"\f3d8"}.fa-superpowers:before{content:"\f2dd"}.fa-resolving:before{content:"\f3e7"}.fa-xbox:before{content:"\f412"}.fa-searchengin:before{content:"\f3eb"}.fa-tiktok:before{content:"\e07b"}.fa-facebook-square:before,.fa-square-facebook:before{content:"\f082"}.fa-renren:before{content:"\f18b"}.fa-linux:before{content:"\f17c"}.fa-glide:before{content:"\f2a5"}.fa-linkedin:before{content:"\f08c"}.fa-hubspot:before{content:"\f3b2"}.fa-deploydog:before{content:"\f38e"}.fa-twitch:before{content:"\f1e8"}.fa-ravelry:before{content:"\f2d9"}.fa-mixer:before{content:"\e056"}.fa-lastfm-square:before,.fa-square-lastfm:before{content:"\f203"}.fa-vimeo:before{content:"\f40a"}.fa-mendeley:before{content:"\f7b3"}.fa-uniregistry:before{content:"\f404"}.fa-figma:before{content:"\f799"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-dropbox:before{content:"\f16b"}.fa-instagram:before{content:"\f16d"}.fa-cmplid:before{content:"\e360"}.fa-upwork:before{content:"\e641"}.fa-facebook:before{content:"\f09a"}.fa-gripfire:before{content:"\f3ac"}.fa-jedi-order:before{content:"\f50e"}.fa-uikit:before{content:"\f403"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-phabricator:before{content:"\f3db"}.fa-ussunnah:before{content:"\f407"}.fa-earlybirds:before{content:"\f39a"}.fa-trade-federation:before{content:"\f513"}.fa-autoprefixer:before{content:"\f41c"}.fa-whatsapp:before{content:"\f232"}.fa-slideshare:before{content:"\f1e7"}.fa-google-play:before{content:"\f3ab"}.fa-viadeo:before{content:"\f2a9"}.fa-line:before{content:"\f3c0"}.fa-google-drive:before{content:"\f3aa"}.fa-servicestack:before{content:"\f3ec"}.fa-simplybuilt:before{content:"\f215"}.fa-bitbucket:before{content:"\f171"}.fa-imdb:before{content:"\f2d8"}.fa-deezer:before{content:"\e077"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-jira:before{content:"\f7b1"}.fa-docker:before{content:"\f395"}.fa-screenpal:before{content:"\e570"}.fa-bluetooth:before{content:"\f293"}.fa-gitter:before{content:"\f426"}.fa-d-and-d:before{content:"\f38d"}.fa-microblog:before{content:"\e01a"}.fa-cc-diners-club:before{content:"\f24c"}.fa-gg-circle:before{content:"\f261"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-yandex:before{content:"\f413"}.fa-readme:before{content:"\f4d5"}.fa-html5:before{content:"\f13b"}.fa-sellsy:before{content:"\f213"}.fa-sass:before{content:"\f41e"}.fa-wirsindhandwerk:before,.fa-wsh:before{content:"\e2d0"}.fa-buromobelexperte:before{content:"\f37f"}.fa-salesforce:before{content:"\f83b"}.fa-octopus-deploy:before{content:"\e082"}.fa-medapps:before{content:"\f3c6"}.fa-ns8:before{content:"\f3d5"}.fa-pinterest-p:before{content:"\f231"}.fa-apper:before{content:"\f371"}.fa-fort-awesome:before{content:"\f286"}.fa-waze:before{content:"\f83f"}.fa-cc-jcb:before{content:"\f24b"}.fa-snapchat-ghost:before,.fa-snapchat:before{content:"\f2ab"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-rust:before{content:"\e07a"}.fa-wix:before{content:"\f5cf"}.fa-behance-square:before,.fa-square-behance:before{content:"\f1b5"}.fa-supple:before{content:"\f3f9"}.fa-webflow:before{content:"\e65c"}.fa-rebel:before{content:"\f1d0"}.fa-css3:before{content:"\f13c"}.fa-staylinked:before{content:"\f3f5"}.fa-kaggle:before{content:"\f5fa"}.fa-space-awesome:before{content:"\e5ac"}.fa-deviantart:before{content:"\f1bd"}.fa-cpanel:before{content:"\f388"}.fa-goodreads-g:before{content:"\f3a9"}.fa-git-square:before,.fa-square-git:before{content:"\f1d2"}.fa-square-tumblr:before,.fa-tumblr-square:before{content:"\f174"}.fa-trello:before{content:"\f181"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-get-pocket:before{content:"\f265"}.fa-perbyte:before{content:"\e083"}.fa-grunt:before{content:"\f3ad"}.fa-weebly:before{content:"\f5cc"}.fa-connectdevelop:before{content:"\f20e"}.fa-leanpub:before{content:"\f212"}.fa-black-tie:before{content:"\f27e"}.fa-themeco:before{content:"\f5c6"}.fa-python:before{content:"\f3e2"}.fa-android:before{content:"\f17b"}.fa-bots:before{content:"\e340"}.fa-free-code-camp:before{content:"\f2c5"}.fa-hornbill:before{content:"\f592"}.fa-js:before{content:"\f3b8"}.fa-ideal:before{content:"\e013"}.fa-git:before{content:"\f1d3"}.fa-dev:before{content:"\f6cc"}.fa-sketch:before{content:"\f7c6"}.fa-yandex-international:before{content:"\f414"}.fa-cc-amex:before{content:"\f1f3"}.fa-uber:before{content:"\f402"}.fa-github:before{content:"\f09b"}.fa-php:before{content:"\f457"}.fa-alipay:before{content:"\f642"}.fa-youtube:before{content:"\f167"}.fa-skyatlas:before{content:"\f216"}.fa-firefox-browser:before{content:"\e007"}.fa-replyd:before{content:"\f3e6"}.fa-suse:before{content:"\f7d6"}.fa-jenkins:before{content:"\f3b6"}.fa-twitter:before{content:"\f099"}.fa-rockrms:before{content:"\f3e9"}.fa-pinterest:before{content:"\f0d2"}.fa-buffer:before{content:"\f837"}.fa-npm:before{content:"\f3d4"}.fa-yammer:before{content:"\f840"}.fa-btc:before{content:"\f15a"}.fa-dribbble:before{content:"\f17d"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-internet-explorer:before{content:"\f26b"}.fa-stubber:before{content:"\e5c7"}.fa-telegram-plane:before,.fa-telegram:before{content:"\f2c6"}.fa-old-republic:before{content:"\f510"}.fa-odysee:before{content:"\e5c6"}.fa-square-whatsapp:before,.fa-whatsapp-square:before{content:"\f40c"}.fa-node-js:before{content:"\f3d3"}.fa-edge-legacy:before{content:"\e078"}.fa-slack-hash:before,.fa-slack:before{content:"\f198"}.fa-medrt:before{content:"\f3c8"}.fa-usb:before{content:"\f287"}.fa-tumblr:before{content:"\f173"}.fa-vaadin:before{content:"\f408"}.fa-quora:before{content:"\f2c4"}.fa-square-x-twitter:before{content:"\e61a"}.fa-reacteurope:before{content:"\f75d"}.fa-medium-m:before,.fa-medium:before{content:"\f23a"}.fa-amilia:before{content:"\f36d"}.fa-mixcloud:before{content:"\f289"}.fa-flipboard:before{content:"\f44d"}.fa-viacoin:before{content:"\f237"}.fa-critical-role:before{content:"\f6c9"}.fa-sitrox:before{content:"\e44a"}.fa-discourse:before{content:"\f393"}.fa-joomla:before{content:"\f1aa"}.fa-mastodon:before{content:"\f4f6"}.fa-airbnb:before{content:"\f834"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-buy-n-large:before{content:"\f8a6"}.fa-gulp:before{content:"\f3ae"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-strava:before{content:"\f428"}.fa-ember:before{content:"\f423"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-teamspeak:before{content:"\f4f9"}.fa-pushed:before{content:"\f3e1"}.fa-wordpress-simple:before{content:"\f411"}.fa-nutritionix:before{content:"\f3d6"}.fa-wodu:before{content:"\e088"}.fa-google-pay:before{content:"\e079"}.fa-intercom:before{content:"\f7af"}.fa-zhihu:before{content:"\f63f"}.fa-korvue:before{content:"\f42f"}.fa-pix:before{content:"\e43a"}.fa-steam-symbol:before{content:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(/lib/fontawesome/webfonts/fa-regular-400.woff2) format("woff2")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(/lib/fontawesome/webfonts/fa-solid-900.woff2) format("woff2")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(/lib/fontawesome/webfonts/fa-brands-400.woff2) format("woff2")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(/lib/fontawesome/webfonts/fa-solid-900.woff2) format("woff2")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(/lib/fontawesome/webfonts/fa-regular-400.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/lib/fontawesome/webfonts/fa-solid-900.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/lib/fontawesome/webfonts/fa-brands-400.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/lib/fontawesome/webfonts/fa-regular-400.woff2) format("woff2");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(/lib/fontawesome/webfonts/fa-v4compatibility.woff2) format("woff2");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
/* ===== source: /lib/fontawesome/css/fa-subset.css ===== */
/* Font Awesome subset faces (2026-08-15). Same families as all.min.css, declared AFTER
 * it with unicode-range limited to the glyphs this application uses, sourced from the
 * subset woff2 files (156 kB -> 20 kB solid). The browser serves inventoried glyphs from
 * the subset; any glyph outside the ranges falls back to the ORIGINAL faces above and
 * lazy-loads the full font only then - an uninventoried icon can never render as tofu.
 * Regenerate with scripts/qa/fa-subset (fa_subset2.py + fa_css.py) whenever icons are
 * added; the parity/visual pass covers drift. */
@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/lib/fontawesome/webfonts/fa-brands-400-subset.woff2) format("woff2");unicode-range:U+23,U+25,U+2B,U+3F,U+E098,U+E09A,U+E0BB,U+E0E3,U+E2CA,U+E473,U+E494,U+E4BA,U+E4BD,U+E4D4,U+E4D8,U+E4E8,U+E522,U+E55D,U+E560,U+E5A0-E5A1,U+F002,U+F005,U+F007,U+F009-F00E,U+F010-F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F023-F024,U+F02B-F02C,U+F02F-F031,U+F034,U+F03A,U+F03E,U+F044,U+F047,U+F04B-F04D,U+F053-F054,U+F057-F05B,U+F05E,U+F060-F063,U+F065-F066,U+F068,U+F06A,U+F06E,U+F070-F071,U+F073-F075,U+F077-F078,U+F07B-F07C,U+F080,U+F084-F086,U+F08B,U+F08D-F08E,U+F093,U+F095,U+F09C,U+F0A1,U+F0AD-F0AE,U+F0B0-F0B1,U+F0C0-F0C1,U+F0C3,U+F0C5-F0C9,U+F0CB,U+F0D7,U+F0DA-F0DE,U+F0E0,U+F0E2,U+F0E7-F0E8,U+F0EB-F0EE,U+F0F3,U+F102-F103,U+F110-F111,U+F11E,U+F121,U+F126-F127,U+F12E,U+F133,U+F13E,U+F140-F142,U+F149,U+F15B-F15C,U+F160,U+F164-F165,U+F176,U+F185-F186,U+F188,U+F19C,U+F1AB,U+F1AD,U+F1B9,U+F1C0-F1C6,U+F1C8-F1C9,U+F1D8,U+F1DA,U+F1DE,U+F1E6,U+F1EB-F1EC,U+F1F6,U+F1F8,U+F200-F201,U+F204-F205,U+F21B,U+F233-F235,U+F241,U+F246,U+F24E,U+F252,U+F256,U+F271,U+F273,U+F27A,U+F2A0,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2C2,U+F2D0,U+F2DB,U+F2EA,U+F2ED,U+F2F1-F2F2,U+F2F9,U+F302-F304,U+F31C,U+F337,U+F35D,U+F362-F363,U+F387,U+F390,U+F3BF,U+F3C1,U+F3C5,U+F3CD,U+F3DD,U+F3E5,U+F3ED,U+F422,U+F424,U+F466,U+F468-F469,U+F46D,U+F4AD,U+F4D7,U+F4DF,U+F4FC-F4FD,U+F4FF-F500,U+F502,U+F505-F508,U+F51E,U+F521,U+F53C,U+F53F,U+F542,U+F544-F545,U+F560,U+F56C-F571,U+F573,U+F58D-F58E,U+F5B0,U+F5C7,U+F5CA,U+F5E1,U+F5E4,U+F5FD,U+F61F,U+F625,U+F658,U+F65E,U+F674,U+F6DD,U+F6E2,U+F72B,U+F783,U+F7A4,U+F7F3,U+F83E,U+F885}
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(/lib/fontawesome/webfonts/fa-regular-400-subset.woff2) format("woff2");unicode-range:U+23,U+25,U+2B,U+3F,U+E098,U+E09A,U+E0BB,U+E0E3,U+E2CA,U+E473,U+E494,U+E4BA,U+E4BD,U+E4D4,U+E4D8,U+E4E8,U+E522,U+E55D,U+E560,U+E5A0-E5A1,U+F002,U+F005,U+F007,U+F009-F00E,U+F010-F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F023-F024,U+F02B-F02C,U+F02F-F031,U+F034,U+F03A,U+F03E,U+F044,U+F047,U+F04B-F04D,U+F053-F054,U+F057-F05B,U+F05E,U+F060-F063,U+F065-F066,U+F068,U+F06A,U+F06E,U+F070-F071,U+F073-F075,U+F077-F078,U+F07B-F07C,U+F080,U+F084-F086,U+F08B,U+F08D-F08E,U+F093,U+F095,U+F09C,U+F0A1,U+F0AD-F0AE,U+F0B0-F0B1,U+F0C0-F0C1,U+F0C3,U+F0C5-F0C9,U+F0CB,U+F0D7,U+F0DA-F0DE,U+F0E0,U+F0E2,U+F0E7-F0E8,U+F0EB-F0EE,U+F0F3,U+F102-F103,U+F110-F111,U+F11E,U+F121,U+F126-F127,U+F12E,U+F133,U+F13E,U+F140-F142,U+F149,U+F15B-F15C,U+F160,U+F164-F165,U+F176,U+F185-F186,U+F188,U+F19C,U+F1AB,U+F1AD,U+F1B9,U+F1C0-F1C6,U+F1C8-F1C9,U+F1D8,U+F1DA,U+F1DE,U+F1E6,U+F1EB-F1EC,U+F1F6,U+F1F8,U+F200-F201,U+F204-F205,U+F21B,U+F233-F235,U+F241,U+F246,U+F24E,U+F252,U+F256,U+F271,U+F273,U+F27A,U+F2A0,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2C2,U+F2D0,U+F2DB,U+F2EA,U+F2ED,U+F2F1-F2F2,U+F2F9,U+F302-F304,U+F31C,U+F337,U+F35D,U+F362-F363,U+F387,U+F390,U+F3BF,U+F3C1,U+F3C5,U+F3CD,U+F3DD,U+F3E5,U+F3ED,U+F422,U+F424,U+F466,U+F468-F469,U+F46D,U+F4AD,U+F4D7,U+F4DF,U+F4FC-F4FD,U+F4FF-F500,U+F502,U+F505-F508,U+F51E,U+F521,U+F53C,U+F53F,U+F542,U+F544-F545,U+F560,U+F56C-F571,U+F573,U+F58D-F58E,U+F5B0,U+F5C7,U+F5CA,U+F5E1,U+F5E4,U+F5FD,U+F61F,U+F625,U+F658,U+F65E,U+F674,U+F6DD,U+F6E2,U+F72B,U+F783,U+F7A4,U+F7F3,U+F83E,U+F885}
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(/lib/fontawesome/webfonts/fa-solid-900-subset.woff2) format("woff2");unicode-range:U+23,U+25,U+2B,U+3F,U+E098,U+E09A,U+E0BB,U+E0E3,U+E2CA,U+E473,U+E494,U+E4BA,U+E4BD,U+E4D4,U+E4D8,U+E4E8,U+E522,U+E55D,U+E560,U+E5A0-E5A1,U+F002,U+F005,U+F007,U+F009-F00E,U+F010-F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F023-F024,U+F02B-F02C,U+F02F-F031,U+F034,U+F03A,U+F03E,U+F044,U+F047,U+F04B-F04D,U+F053-F054,U+F057-F05B,U+F05E,U+F060-F063,U+F065-F066,U+F068,U+F06A,U+F06E,U+F070-F071,U+F073-F075,U+F077-F078,U+F07B-F07C,U+F080,U+F084-F086,U+F08B,U+F08D-F08E,U+F093,U+F095,U+F09C,U+F0A1,U+F0AD-F0AE,U+F0B0-F0B1,U+F0C0-F0C1,U+F0C3,U+F0C5-F0C9,U+F0CB,U+F0D7,U+F0DA-F0DE,U+F0E0,U+F0E2,U+F0E7-F0E8,U+F0EB-F0EE,U+F0F3,U+F102-F103,U+F110-F111,U+F11E,U+F121,U+F126-F127,U+F12E,U+F133,U+F13E,U+F140-F142,U+F149,U+F15B-F15C,U+F160,U+F164-F165,U+F176,U+F185-F186,U+F188,U+F19C,U+F1AB,U+F1AD,U+F1B9,U+F1C0-F1C6,U+F1C8-F1C9,U+F1D8,U+F1DA,U+F1DE,U+F1E6,U+F1EB-F1EC,U+F1F6,U+F1F8,U+F200-F201,U+F204-F205,U+F21B,U+F233-F235,U+F241,U+F246,U+F24E,U+F252,U+F256,U+F271,U+F273,U+F27A,U+F2A0,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2C2,U+F2D0,U+F2DB,U+F2EA,U+F2ED,U+F2F1-F2F2,U+F2F9,U+F302-F304,U+F31C,U+F337,U+F35D,U+F362-F363,U+F387,U+F390,U+F3BF,U+F3C1,U+F3C5,U+F3CD,U+F3DD,U+F3E5,U+F3ED,U+F422,U+F424,U+F466,U+F468-F469,U+F46D,U+F4AD,U+F4D7,U+F4DF,U+F4FC-F4FD,U+F4FF-F500,U+F502,U+F505-F508,U+F51E,U+F521,U+F53C,U+F53F,U+F542,U+F544-F545,U+F560,U+F56C-F571,U+F573,U+F58D-F58E,U+F5B0,U+F5C7,U+F5CA,U+F5E1,U+F5E4,U+F5FD,U+F61F,U+F625,U+F658,U+F65E,U+F674,U+F6DD,U+F6E2,U+F72B,U+F783,U+F7A4,U+F7F3,U+F83E,U+F885}
@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(/lib/fontawesome/webfonts/fa-brands-400-subset.woff2) format("woff2");unicode-range:U+23,U+25,U+2B,U+3F,U+E098,U+E09A,U+E0BB,U+E0E3,U+E2CA,U+E473,U+E494,U+E4BA,U+E4BD,U+E4D4,U+E4D8,U+E4E8,U+E522,U+E55D,U+E560,U+E5A0-E5A1,U+F002,U+F005,U+F007,U+F009-F00E,U+F010-F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F023-F024,U+F02B-F02C,U+F02F-F031,U+F034,U+F03A,U+F03E,U+F044,U+F047,U+F04B-F04D,U+F053-F054,U+F057-F05B,U+F05E,U+F060-F063,U+F065-F066,U+F068,U+F06A,U+F06E,U+F070-F071,U+F073-F075,U+F077-F078,U+F07B-F07C,U+F080,U+F084-F086,U+F08B,U+F08D-F08E,U+F093,U+F095,U+F09C,U+F0A1,U+F0AD-F0AE,U+F0B0-F0B1,U+F0C0-F0C1,U+F0C3,U+F0C5-F0C9,U+F0CB,U+F0D7,U+F0DA-F0DE,U+F0E0,U+F0E2,U+F0E7-F0E8,U+F0EB-F0EE,U+F0F3,U+F102-F103,U+F110-F111,U+F11E,U+F121,U+F126-F127,U+F12E,U+F133,U+F13E,U+F140-F142,U+F149,U+F15B-F15C,U+F160,U+F164-F165,U+F176,U+F185-F186,U+F188,U+F19C,U+F1AB,U+F1AD,U+F1B9,U+F1C0-F1C6,U+F1C8-F1C9,U+F1D8,U+F1DA,U+F1DE,U+F1E6,U+F1EB-F1EC,U+F1F6,U+F1F8,U+F200-F201,U+F204-F205,U+F21B,U+F233-F235,U+F241,U+F246,U+F24E,U+F252,U+F256,U+F271,U+F273,U+F27A,U+F2A0,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2C2,U+F2D0,U+F2DB,U+F2EA,U+F2ED,U+F2F1-F2F2,U+F2F9,U+F302-F304,U+F31C,U+F337,U+F35D,U+F362-F363,U+F387,U+F390,U+F3BF,U+F3C1,U+F3C5,U+F3CD,U+F3DD,U+F3E5,U+F3ED,U+F422,U+F424,U+F466,U+F468-F469,U+F46D,U+F4AD,U+F4D7,U+F4DF,U+F4FC-F4FD,U+F4FF-F500,U+F502,U+F505-F508,U+F51E,U+F521,U+F53C,U+F53F,U+F542,U+F544-F545,U+F560,U+F56C-F571,U+F573,U+F58D-F58E,U+F5B0,U+F5C7,U+F5CA,U+F5E1,U+F5E4,U+F5FD,U+F61F,U+F625,U+F658,U+F65E,U+F674,U+F6DD,U+F6E2,U+F72B,U+F783,U+F7A4,U+F7F3,U+F83E,U+F885}
@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(/lib/fontawesome/webfonts/fa-solid-900-subset.woff2) format("woff2");unicode-range:U+23,U+25,U+2B,U+3F,U+E098,U+E09A,U+E0BB,U+E0E3,U+E2CA,U+E473,U+E494,U+E4BA,U+E4BD,U+E4D4,U+E4D8,U+E4E8,U+E522,U+E55D,U+E560,U+E5A0-E5A1,U+F002,U+F005,U+F007,U+F009-F00E,U+F010-F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F023-F024,U+F02B-F02C,U+F02F-F031,U+F034,U+F03A,U+F03E,U+F044,U+F047,U+F04B-F04D,U+F053-F054,U+F057-F05B,U+F05E,U+F060-F063,U+F065-F066,U+F068,U+F06A,U+F06E,U+F070-F071,U+F073-F075,U+F077-F078,U+F07B-F07C,U+F080,U+F084-F086,U+F08B,U+F08D-F08E,U+F093,U+F095,U+F09C,U+F0A1,U+F0AD-F0AE,U+F0B0-F0B1,U+F0C0-F0C1,U+F0C3,U+F0C5-F0C9,U+F0CB,U+F0D7,U+F0DA-F0DE,U+F0E0,U+F0E2,U+F0E7-F0E8,U+F0EB-F0EE,U+F0F3,U+F102-F103,U+F110-F111,U+F11E,U+F121,U+F126-F127,U+F12E,U+F133,U+F13E,U+F140-F142,U+F149,U+F15B-F15C,U+F160,U+F164-F165,U+F176,U+F185-F186,U+F188,U+F19C,U+F1AB,U+F1AD,U+F1B9,U+F1C0-F1C6,U+F1C8-F1C9,U+F1D8,U+F1DA,U+F1DE,U+F1E6,U+F1EB-F1EC,U+F1F6,U+F1F8,U+F200-F201,U+F204-F205,U+F21B,U+F233-F235,U+F241,U+F246,U+F24E,U+F252,U+F256,U+F271,U+F273,U+F27A,U+F2A0,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2C2,U+F2D0,U+F2DB,U+F2EA,U+F2ED,U+F2F1-F2F2,U+F2F9,U+F302-F304,U+F31C,U+F337,U+F35D,U+F362-F363,U+F387,U+F390,U+F3BF,U+F3C1,U+F3C5,U+F3CD,U+F3DD,U+F3E5,U+F3ED,U+F422,U+F424,U+F466,U+F468-F469,U+F46D,U+F4AD,U+F4D7,U+F4DF,U+F4FC-F4FD,U+F4FF-F500,U+F502,U+F505-F508,U+F51E,U+F521,U+F53C,U+F53F,U+F542,U+F544-F545,U+F560,U+F56C-F571,U+F573,U+F58D-F58E,U+F5B0,U+F5C7,U+F5CA,U+F5E1,U+F5E4,U+F5FD,U+F61F,U+F625,U+F658,U+F65E,U+F674,U+F6DD,U+F6E2,U+F72B,U+F783,U+F7A4,U+F7F3,U+F83E,U+F885}
@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(/lib/fontawesome/webfonts/fa-regular-400-subset.woff2) format("woff2");unicode-range:U+23,U+25,U+2B,U+3F,U+E098,U+E09A,U+E0BB,U+E0E3,U+E2CA,U+E473,U+E494,U+E4BA,U+E4BD,U+E4D4,U+E4D8,U+E4E8,U+E522,U+E55D,U+E560,U+E5A0-E5A1,U+F002,U+F005,U+F007,U+F009-F00E,U+F010-F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F023-F024,U+F02B-F02C,U+F02F-F031,U+F034,U+F03A,U+F03E,U+F044,U+F047,U+F04B-F04D,U+F053-F054,U+F057-F05B,U+F05E,U+F060-F063,U+F065-F066,U+F068,U+F06A,U+F06E,U+F070-F071,U+F073-F075,U+F077-F078,U+F07B-F07C,U+F080,U+F084-F086,U+F08B,U+F08D-F08E,U+F093,U+F095,U+F09C,U+F0A1,U+F0AD-F0AE,U+F0B0-F0B1,U+F0C0-F0C1,U+F0C3,U+F0C5-F0C9,U+F0CB,U+F0D7,U+F0DA-F0DE,U+F0E0,U+F0E2,U+F0E7-F0E8,U+F0EB-F0EE,U+F0F3,U+F102-F103,U+F110-F111,U+F11E,U+F121,U+F126-F127,U+F12E,U+F133,U+F13E,U+F140-F142,U+F149,U+F15B-F15C,U+F160,U+F164-F165,U+F176,U+F185-F186,U+F188,U+F19C,U+F1AB,U+F1AD,U+F1B9,U+F1C0-F1C6,U+F1C8-F1C9,U+F1D8,U+F1DA,U+F1DE,U+F1E6,U+F1EB-F1EC,U+F1F6,U+F1F8,U+F200-F201,U+F204-F205,U+F21B,U+F233-F235,U+F241,U+F246,U+F24E,U+F252,U+F256,U+F271,U+F273,U+F27A,U+F2A0,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2C2,U+F2D0,U+F2DB,U+F2EA,U+F2ED,U+F2F1-F2F2,U+F2F9,U+F302-F304,U+F31C,U+F337,U+F35D,U+F362-F363,U+F387,U+F390,U+F3BF,U+F3C1,U+F3C5,U+F3CD,U+F3DD,U+F3E5,U+F3ED,U+F422,U+F424,U+F466,U+F468-F469,U+F46D,U+F4AD,U+F4D7,U+F4DF,U+F4FC-F4FD,U+F4FF-F500,U+F502,U+F505-F508,U+F51E,U+F521,U+F53C,U+F53F,U+F542,U+F544-F545,U+F560,U+F56C-F571,U+F573,U+F58D-F58E,U+F5B0,U+F5C7,U+F5CA,U+F5E1,U+F5E4,U+F5FD,U+F61F,U+F625,U+F658,U+F65E,U+F674,U+F6DD,U+F6E2,U+F72B,U+F783,U+F7A4,U+F7F3,U+F83E,U+F885}
@font-face{font-family:"FontAwesome";font-display:block;src:url(/lib/fontawesome/webfonts/fa-solid-900-subset.woff2) format("woff2");unicode-range:U+23,U+25,U+2B,U+3F,U+E098,U+E09A,U+E0BB,U+E0E3,U+E2CA,U+E473,U+E494,U+E4BA,U+E4BD,U+E4D4,U+E4D8,U+E4E8,U+E522,U+E55D,U+E560,U+E5A0-E5A1,U+F002,U+F005,U+F007,U+F009-F00E,U+F010-F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F023-F024,U+F02B-F02C,U+F02F-F031,U+F034,U+F03A,U+F03E,U+F044,U+F047,U+F04B-F04D,U+F053-F054,U+F057-F05B,U+F05E,U+F060-F063,U+F065-F066,U+F068,U+F06A,U+F06E,U+F070-F071,U+F073-F075,U+F077-F078,U+F07B-F07C,U+F080,U+F084-F086,U+F08B,U+F08D-F08E,U+F093,U+F095,U+F09C,U+F0A1,U+F0AD-F0AE,U+F0B0-F0B1,U+F0C0-F0C1,U+F0C3,U+F0C5-F0C9,U+F0CB,U+F0D7,U+F0DA-F0DE,U+F0E0,U+F0E2,U+F0E7-F0E8,U+F0EB-F0EE,U+F0F3,U+F102-F103,U+F110-F111,U+F11E,U+F121,U+F126-F127,U+F12E,U+F133,U+F13E,U+F140-F142,U+F149,U+F15B-F15C,U+F160,U+F164-F165,U+F176,U+F185-F186,U+F188,U+F19C,U+F1AB,U+F1AD,U+F1B9,U+F1C0-F1C6,U+F1C8-F1C9,U+F1D8,U+F1DA,U+F1DE,U+F1E6,U+F1EB-F1EC,U+F1F6,U+F1F8,U+F200-F201,U+F204-F205,U+F21B,U+F233-F235,U+F241,U+F246,U+F24E,U+F252,U+F256,U+F271,U+F273,U+F27A,U+F2A0,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2C2,U+F2D0,U+F2DB,U+F2EA,U+F2ED,U+F2F1-F2F2,U+F2F9,U+F302-F304,U+F31C,U+F337,U+F35D,U+F362-F363,U+F387,U+F390,U+F3BF,U+F3C1,U+F3C5,U+F3CD,U+F3DD,U+F3E5,U+F3ED,U+F422,U+F424,U+F466,U+F468-F469,U+F46D,U+F4AD,U+F4D7,U+F4DF,U+F4FC-F4FD,U+F4FF-F500,U+F502,U+F505-F508,U+F51E,U+F521,U+F53C,U+F53F,U+F542,U+F544-F545,U+F560,U+F56C-F571,U+F573,U+F58D-F58E,U+F5B0,U+F5C7,U+F5CA,U+F5E1,U+F5E4,U+F5FD,U+F61F,U+F625,U+F658,U+F65E,U+F674,U+F6DD,U+F6E2,U+F72B,U+F783,U+F7A4,U+F7F3,U+F83E,U+F885}
@font-face{font-family:"FontAwesome";font-display:block;src:url(/lib/fontawesome/webfonts/fa-brands-400-subset.woff2) format("woff2");unicode-range:U+23,U+25,U+2B,U+3F,U+E098,U+E09A,U+E0BB,U+E0E3,U+E2CA,U+E473,U+E494,U+E4BA,U+E4BD,U+E4D4,U+E4D8,U+E4E8,U+E522,U+E55D,U+E560,U+E5A0-E5A1,U+F002,U+F005,U+F007,U+F009-F00E,U+F010-F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F023-F024,U+F02B-F02C,U+F02F-F031,U+F034,U+F03A,U+F03E,U+F044,U+F047,U+F04B-F04D,U+F053-F054,U+F057-F05B,U+F05E,U+F060-F063,U+F065-F066,U+F068,U+F06A,U+F06E,U+F070-F071,U+F073-F075,U+F077-F078,U+F07B-F07C,U+F080,U+F084-F086,U+F08B,U+F08D-F08E,U+F093,U+F095,U+F09C,U+F0A1,U+F0AD-F0AE,U+F0B0-F0B1,U+F0C0-F0C1,U+F0C3,U+F0C5-F0C9,U+F0CB,U+F0D7,U+F0DA-F0DE,U+F0E0,U+F0E2,U+F0E7-F0E8,U+F0EB-F0EE,U+F0F3,U+F102-F103,U+F110-F111,U+F11E,U+F121,U+F126-F127,U+F12E,U+F133,U+F13E,U+F140-F142,U+F149,U+F15B-F15C,U+F160,U+F164-F165,U+F176,U+F185-F186,U+F188,U+F19C,U+F1AB,U+F1AD,U+F1B9,U+F1C0-F1C6,U+F1C8-F1C9,U+F1D8,U+F1DA,U+F1DE,U+F1E6,U+F1EB-F1EC,U+F1F6,U+F1F8,U+F200-F201,U+F204-F205,U+F21B,U+F233-F235,U+F241,U+F246,U+F24E,U+F252,U+F256,U+F271,U+F273,U+F27A,U+F2A0,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2C2,U+F2D0,U+F2DB,U+F2EA,U+F2ED,U+F2F1-F2F2,U+F2F9,U+F302-F304,U+F31C,U+F337,U+F35D,U+F362-F363,U+F387,U+F390,U+F3BF,U+F3C1,U+F3C5,U+F3CD,U+F3DD,U+F3E5,U+F3ED,U+F422,U+F424,U+F466,U+F468-F469,U+F46D,U+F4AD,U+F4D7,U+F4DF,U+F4FC-F4FD,U+F4FF-F500,U+F502,U+F505-F508,U+F51E,U+F521,U+F53C,U+F53F,U+F542,U+F544-F545,U+F560,U+F56C-F571,U+F573,U+F58D-F58E,U+F5B0,U+F5C7,U+F5CA,U+F5E1,U+F5E4,U+F5FD,U+F61F,U+F625,U+F658,U+F65E,U+F674,U+F6DD,U+F6E2,U+F72B,U+F783,U+F7A4,U+F7F3,U+F83E,U+F885}
@font-face{font-family:"FontAwesome";font-display:block;src:url(/lib/fontawesome/webfonts/fa-regular-400-subset.woff2) format("woff2");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc;unicode-range:U+23,U+25,U+2B,U+3F,U+E098,U+E09A,U+E0BB,U+E0E3,U+E2CA,U+E473,U+E494,U+E4BA,U+E4BD,U+E4D4,U+E4D8,U+E4E8,U+E522,U+E55D,U+E560,U+E5A0-E5A1,U+F002,U+F005,U+F007,U+F009-F00E,U+F010-F013,U+F015,U+F017,U+F019,U+F01C,U+F021,U+F023-F024,U+F02B-F02C,U+F02F-F031,U+F034,U+F03A,U+F03E,U+F044,U+F047,U+F04B-F04D,U+F053-F054,U+F057-F05B,U+F05E,U+F060-F063,U+F065-F066,U+F068,U+F06A,U+F06E,U+F070-F071,U+F073-F075,U+F077-F078,U+F07B-F07C,U+F080,U+F084-F086,U+F08B,U+F08D-F08E,U+F093,U+F095,U+F09C,U+F0A1,U+F0AD-F0AE,U+F0B0-F0B1,U+F0C0-F0C1,U+F0C3,U+F0C5-F0C9,U+F0CB,U+F0D7,U+F0DA-F0DE,U+F0E0,U+F0E2,U+F0E7-F0E8,U+F0EB-F0EE,U+F0F3,U+F102-F103,U+F110-F111,U+F11E,U+F121,U+F126-F127,U+F12E,U+F133,U+F13E,U+F140-F142,U+F149,U+F15B-F15C,U+F160,U+F164-F165,U+F176,U+F185-F186,U+F188,U+F19C,U+F1AB,U+F1AD,U+F1B9,U+F1C0-F1C6,U+F1C8-F1C9,U+F1D8,U+F1DA,U+F1DE,U+F1E6,U+F1EB-F1EC,U+F1F6,U+F1F8,U+F200-F201,U+F204-F205,U+F21B,U+F233-F235,U+F241,U+F246,U+F24E,U+F252,U+F256,U+F271,U+F273,U+F27A,U+F2A0,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2C2,U+F2D0,U+F2DB,U+F2EA,U+F2ED,U+F2F1-F2F2,U+F2F9,U+F302-F304,U+F31C,U+F337,U+F35D,U+F362-F363,U+F387,U+F390,U+F3BF,U+F3C1,U+F3C5,U+F3CD,U+F3DD,U+F3E5,U+F3ED,U+F422,U+F424,U+F466,U+F468-F469,U+F46D,U+F4AD,U+F4D7,U+F4DF,U+F4FC-F4FD,U+F4FF-F500,U+F502,U+F505-F508,U+F51E,U+F521,U+F53C,U+F53F,U+F542,U+F544-F545,U+F560,U+F56C-F571,U+F573,U+F58D-F58E,U+F5B0,U+F5C7,U+F5CA,U+F5E1,U+F5E4,U+F5FD,U+F61F,U+F625,U+F658,U+F65E,U+F674,U+F6DD,U+F6E2,U+F72B,U+F783,U+F7A4,U+F7F3,U+F83E,U+F885}

/* ===== source: /lib/flatpickr/flatpickr.min.css ===== */
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
/* ===== source: /lib/jquery-timepicker/jquery.timepicker.min.css ===== */
.ui-timepicker-wrapper {
	overflow-y: auto;
	max-height: 150px;
	width: auto;
	background: #fff;
	border: 1px solid #ddd;
	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	outline: none;
	z-index: 10052;
	margin: 0;
}

.ui-timepicker-wrapper .ui-timepicker-list li {
    padding-right: 20px;
}

.ui-timepicker-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-timepicker-duration {
	margin-left: 5px; color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
	color: #888;
}

.ui-timepicker-list li {
	padding: 3px 0 3px 5px;
	cursor: pointer;
	white-space: nowrap;
	color: #000;
	list-style: none;
	margin: 0;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
	background: #fff; color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
	background: #1980EC; color: #fff;
}

li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
	color: #ccc;
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	color: #888;
	cursor: default;
}

.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	background: #f2f2f2;
}

/* ===== source: /fonts/dm-sans/dm-sans.css ===== */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/dm-sans/DM-Sans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/dm-sans/DM-Sans-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/dm-sans/DM-Sans-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/dm-sans/DM-Sans-Bold.woff2') format('woff2');
}

/* ===== source: /fonts/manrope/manrope.css ===== */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/manrope/Manrope-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/manrope/Manrope-Latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== source: /fonts/ibm-plex-sans/ibm-plex-sans.css ===== */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans/IBM-Plex-Sans-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans/IBM-Plex-Sans-Latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== source: /fonts/ibm-plex-mono/ibm-plex-mono.css ===== */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2') format('woff2');
}

/* ===== source: /fonts/source-sans-3/source-sans-3.css ===== */
/* Metric-compatible fallback (instant-dashboards D2, 2026-08-16). Until the
   woff2 arrives, text renders in Arial SCALED to Source Sans 3's advance widths
   (empirically calibrated: SS3 = 92.7% of Arial at 400, 91.9% at 700 on the LT
   dashboard strings), with SS3's hhea line metrics. The swap then changes pixels,
   not layout — the /Dashboard/My overview strip collapsing 102→46 px on font
   arrival was the page's whole CLS (0.23). */
@font-face {
    font-family: 'Source Sans 3 Fallback';
    font-weight: 100 500;
    src: local('Arial');
    size-adjust: 92.7%;
    ascent-override: 102.4%;
    descent-override: 40%;
    line-gap-override: 0%;
}
/* Bold runs measurably narrower vs Arial Bold (91.9% on the dashboard strip
   strings) — a shared 92.5% left a 0.6% error that still flipped borderline
   wraps on swap (the /Dashboard/My overview strip, CLS 0.238). */
@font-face {
    font-family: 'Source Sans 3 Fallback';
    font-weight: 600 900;
    src: local('Arial Bold'), local('Arial');
    size-adjust: 91.9%;
    ascent-override: 102.4%;
    descent-override: 40%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    /* optional (2026-08-16): per-string SS3/Arial width ratios scatter
       0.979-1.034, so NO size-adjust keeps borderline flex-wraps stable
       across a mid-view swap. Both faces are preloaded (layout head); when
       one still loses the first-paint race, render this page view in the
       metric fallback and swap NEVER moves layout. */
    font-display: optional;
    src: url('/fonts/source-sans-3/Source-Sans-3-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    /* optional (2026-08-16): per-string SS3/Arial width ratios scatter
       0.979-1.034, so NO size-adjust keeps borderline flex-wraps stable
       across a mid-view swap. Both faces are preloaded (layout head); when
       one still loses the first-paint race, render this page view in the
       metric fallback and swap NEVER moves layout. */
    font-display: optional;
    src: url('/fonts/source-sans-3/Source-Sans-3-Latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== source: /fonts/oswald/oswald.css ===== */
/* Oswald (condensed display) — bundled for the landing-hero "WELCOME / TO THE BEST PLAN BEE"
   caps (#403). The hero CSS declared 'Oswald' but no condensed face was bundled, so it fell back
   to a plain sans-serif. Variable font (weight 200-700) split into latin + latin-ext (LT
   diacritics). SIL OFL. Downloaded from Google Fonts (v57). */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('/fonts/oswald/Oswald-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('/fonts/oswald/Oswald-Latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== source: /fonts/archivo-narrow/archivo-narrow.css ===== */
/* Archivo Narrow 600 — the login screen's campaign title.
   
   The brandbook display face is Field Gothic No.25 Demi XXCond, which is Adobe-Fonts-only and
   cannot be self-hosted without a separate licence. Archivo Narrow 600 is the approved free
   stand-in (SIL OFL) and is already the landing page's display face, so the two public-facing
   surfaces — landing and login — now share one face.
   
   Split latin / latin-ext exactly like the bundled Oswald: latin-ext is what carries
   ą č ę ė į š ų ū ž, and a latin-only subset renders Lithuanian as tofu. */
@font-face {
    font-family: 'Archivo Narrow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/archivo-narrow/Archivo-Narrow-600-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo Narrow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/archivo-narrow/Archivo-Narrow-600-Latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== source: /css/assistant.css ===== */
/* ── Insurance Bee brandmark ──────────────────────────────────────────────
   The assistant used a generic FontAwesome robot. It is our own product with our own mark, so
   the launcher, the drawer title and the working indicator now all show the real Insurance Bee
   symbol (Pages/Shared/_BeeMark.cshtml), alive rather than static.

   Palette straight from the guidelines (p17) — these are the ONLY colours the mark animates
   through, which is what "animated in brand colours" has to mean if it is to stay on-brand. */
:root {
    --bee-yellow: #F8A900;
    --bee-orange: #F47421;
    --bee-off-white: #EAE7D8;
    --bee-dark: #201B16;
}

.bee-mark {
    width: 1em;
    height: 1em;
    display: block;
    overflow: visible;
    /* transform-box: the wing/antenna transforms below use percentage origins, which resolve
       against the SVG viewport rather than the element's own box without this — the classic way
       an SVG part animation flies off its own mark. */
    color: inherit;
}
.bee-mark g {
    transform-box: fill-box;
    transform-origin: center;
}

/* The wings beat, and they beat OUTWARD from the body centre rather than each from its own
   middle, so the mark reads as one insect instead of two independent shapes. */
.bee-wing--left { transform-origin: 100% 50%; }
.bee-wing--right { transform-origin: 0% 50%; }
.bee-mark .bee-wing {
    transform-box: fill-box;
    animation: beeWingBeat 2.6s ease-in-out infinite;
}
@keyframes beeWingBeat {
    0%, 72%, 100% { transform: scaleX(1); }
    78% { transform: scaleX(.86); }
    84% { transform: scaleX(1.04); }
    90% { transform: scaleX(.94); }
}

/* A slow sway on the antennae — the small movement that stops a logo from looking frozen. */
.bee-mark .bee-antennae { animation: beeAntennaeSway 5.2s ease-in-out infinite; }
@keyframes beeAntennaeSway {
    0%, 100% { transform: rotate(-1.5deg); }
    50% { transform: rotate(1.5deg); }
}

/* Stripes carry the colour: each bar crosses from brand yellow to brand orange on its own
   offset, so the abdomen ripples instead of flashing. */
.bee-mark .bee-stripes path {
    animation: beeStripeGlow 3.4s ease-in-out infinite;
}
.bee-mark .bee-stripes path:nth-child(2) { animation-delay: .28s; }
.bee-mark .bee-stripes path:nth-child(3) { animation-delay: .56s; }
@keyframes beeStripeGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* Motion is decoration here; anyone who has asked the OS to stop it gets a still brandmark. */
@media (prefers-reduced-motion: reduce) {
    .bee-mark .bee-wing,
    .bee-mark .bee-antennae,
    .bee-mark .bee-stripes path,
    .bee-mark { animation: none !important; }
}

/* ── Assistant Drawer (layout integration) ── */
.assistant-fab {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform .15s, box-shadow .15s;
}
.assistant-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.assistant-fab.hidden { display: none; }

/* 5C (polish plan 2026-08-25): the launcher IS the official bee — white mark
   on the brand-orange circle. STILL by default: the perpetual colour breathing
   and the mark's own idle wing/antennae/stripe loops are retired here; motion
   now belongs to the bounded attention cue below, owned by ONE orchestrator
   (assistant.js). */
.assistant-fab {
    background: var(--bee-orange);
}
.assistant-fab .bee-mark {
    width: 30px;
    height: 30px;
    color: #fff;
}
.assistant-fab .bee-mark .bee-wing,
.assistant-fab .bee-mark .bee-antennae,
.assistant-fab .bee-mark .bee-stripes path {
    animation: none;
}

/* Greeting halo (.has-greeting, on while the greeting card is visible): a slow
   soft breathe in the same brand yellow, so the card and the launcher read as one
   invitation. Declared before .is-attention — the one-shot ping wins by source
   order while it runs, then the breathe resumes. Removed with the card. */
.assistant-fab.has-greeting::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 3px solid var(--bee-yellow);
    border-radius: 50%;
    pointer-events: none;
    animation: beeGreetingHalo 2.6s ease-in-out infinite;
}
@keyframes beeGreetingHalo {
    0%, 100% { opacity: .22; transform: scale(.92); }
    50% { opacity: .65; transform: scale(1.08); }
}

/* Attention cue (.is-attention, applied for 0.8–1.2s by the orchestrator):
   a restrained brand-yellow halo + a brief wing beat. No numeric badge, no
   red/error colour — deliberately distinct from unread semantics. */
.assistant-fab.is-attention::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 3px solid var(--bee-yellow);
    border-radius: 50%;
    pointer-events: none;
    animation: beeAttentionHalo .95s ease-out 1 both;
}
.assistant-fab.is-attention::before {
    content: "";
    position: absolute;
    inset: -12px;
    border: 2px solid color-mix(in srgb, var(--bee-yellow) 72%, transparent);
    border-radius: 50%;
    pointer-events: none;
    animation: beeAttentionHaloOuter .95s .08s ease-out 1 both;
}
.assistant-fab.is-attention { animation: beeAttentionHop .95s ease-in-out 1; }
.assistant-fab.is-attention .bee-mark .bee-wing {
    animation: beeAttentionWing 1s ease-in-out 1;
}
@keyframes beeAttentionHalo {
    0% { opacity: 0; transform: scale(.85); }
    30% { opacity: .85; }
    100% { opacity: 0; transform: scale(1.22); }
}
@keyframes beeAttentionWing {
    0%, 100% { transform: scaleX(1); }
    25% { transform: scaleX(.78); }
    50% { transform: scaleX(1.06); }
    75% { transform: scaleX(.88); }
}

/* Small marks stay STILL.
   A 22-24px badge next to a drawer title never animates (owner call,
   2026-08-14) — the bee inside the mini badge is a still silhouette. */
.assistant-fab-mini,
.ask-ai-mark {
    animation: none !important;
}
.assistant-fab-mini .bee-mark {
    width: 14px;
    height: 14px;
    color: #fff;
}
.assistant-fab-mini .bee-mark .bee-wing,
.assistant-fab-mini .bee-mark .bee-antennae,
.assistant-fab-mini .bee-mark .bee-stripes path {
    animation: none !important;
}

/* 5C greeting — compact tooltip-like card anchored immediately left of the
   FAB. position:fixed: it can never reflow content. Sits one step under the
   FAB's z-index so the launcher stays clickable, far below modals/drawers. */
.assistant-greeting {
    position: fixed;
    right: 88px;
    bottom: 84px;
    z-index: 1049;
    display: flex;
    align-items: flex-start;
    gap: 2px;
    max-width: min(360px, calc(100vw - 120px));
    min-width: 285px;
    padding: 7px 7px 10px 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--bee-orange, #F47421) 40%, var(--border));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--bee-orange, #F47421) 22%, transparent),
                0 8px 24px rgba(0, 0, 0, .14);
    animation: assistantGreetingIn .65s cubic-bezier(.34,1.4,.44,1);
}
.assistant-greeting[hidden] { display: none; }
.assistant-greeting-text {
    border: 0;
    background: none;
    padding: 8px 2px 8px 12px;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.assistant-greeting-text:hover { color: var(--accent-orange-deep, var(--bee-orange)); }
.assistant-greeting-label,
.assistant-greeting-body { display: block; }
.assistant-greeting-label {
    margin-bottom: 2px;
    color: var(--primary, #F47421);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.assistant-greeting-body { font-size: 14px; font-weight: 550; }
.assistant-greeting-close {
    flex: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.assistant-greeting-close:hover { background: var(--bg); color: var(--text); }
.assistant-greeting-sound {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
}
.assistant-greeting-sound:hover { background: var(--bg); color: var(--primary); }
.assistant-greeting-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    transform-origin: left center;
    background: linear-gradient(90deg, #14b8a6, var(--primary, #F47421));
    animation: assistantGreetingProgress 10s linear both;
}
@keyframes assistantGreetingProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes assistantGreetingIn {
    from { opacity: 0; transform: translateY(12px) scale(.88); }
    to { opacity: 1; transform: none; }
}
html[data-theme="dark"] .assistant-greeting {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
    /* The still bee remains visible; every attention motion is disabled. The
       greeting appears/disappears without transition. */
    .assistant-fab,
    .assistant-fab-mini,
    .assistant-greeting,
    .assistant-fab.has-greeting::after,
    .assistant-fab.is-attention::before,
    .assistant-fab.is-attention::after,
    .assistant-fab.is-attention .bee-mark .bee-wing,
    .assistant-greeting-progress { animation: none !important; }
    .assistant-fab.has-greeting::after,
    .assistant-fab.is-attention::before,
    .assistant-fab.is-attention::after { display: none; }
}

/* D8 — compact form of the FAB used beside the "AI asistentas" title. Same orange circle and
   brand bee so the drawer is visibly the same feature as the launcher. Non-interactive: the
   header row itself is not a button, so it carries aria-hidden and the title keeps the
   accessible name. */
.assistant-fab-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    flex: none;
    vertical-align: middle;
    margin-right: 2px;
}
/* Dark theme keeps the same orange — it is the brand affordance, not a surface colour. */
html[data-theme="dark"] .assistant-fab-mini { color: #fff; }

/* WPF-18 (P5-33): the FAB (z-1050) must never float over the dashboard
   add-widget drawer (z-900) — while that drawer is open the editor stamps
   body.dashboard-widget-drawer-open and the FAB steps aside. */
body.dashboard-widget-drawer-open .assistant-fab {
    visibility: hidden;
    pointer-events: none;
}

/* Drawer overlay */
.assistant-drawer-overlay {
    position: fixed;
    inset: 0;
    /* Restrained: this is a focus cue, not a modal scrim. The page stays readable. */
    background: rgba(32, 27, 22, .16);
    z-index: 1060;
    opacity: 0;
    /* Inert by default. The state owner flips pointer-events to `auto` ONLY while the
       page is actually dimmed (owner decision 2026-08-27: an outside click closes just
       then, because what is under the pointer is a backdrop rather than content). In the
       docked and floating modes it stays inert so clicks, wheel, selection and form input
       all reach the page — which is the entire reason for shrinking the drawer. */
    pointer-events: none;
    transition: opacity .2s ease;
}
/* HIVE-756 W7: the veil is RETIRED. The window never dims the page and an outside
   click always belongs to the page; the element remains only as a morph layer. */
.assistant-drawer-overlay.open { opacity: 0; }

/* Docked at the mid-screen detent: the page is a working surface, so no dim at all. */
body[data-assistant-state="docked"] .assistant-drawer-overlay {
    opacity: 0;
}

/* Drawer panel */
.assistant-drawer {
    --hive-drawer-width: var(--assistant-drawer-width, 460px);
    position: fixed;
    top: 0;
    /* Closed offset must track the ACTUAL width: the shared HIVE-618 chrome
       (.hive-drawer--wide) widens this drawer to 460px, so a hardcoded -400px
       left a 60px on-screen sliver that swallowed clicks underneath it. */
    right: calc(-1 * min(var(--hive-drawer-width, 400px), 100vw));
    width: 400px;
    max-width: 100vw;
    height: var(--hive-drawer-height, 100vh);
    max-height: 100vh;
    background: var(--bg, #fff);
    z-index: 1070;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
    transition: right .25s ease;
}
.assistant-drawer.open { right: 0; }

/* Closed = GONE. The free-rectangle engine writes inline left/top/width, which
   makes the historical “right: -width slides it off-screen” fallback inert
   (inline left + width beat the stylesheet right). Without this rule the close
   morph finished and the window POPPED BACK fully visible over the page (owner
   report 2026-08-30: “closing it reopens the window and shows fab”). Guarded on
   :not([data-assistant-boot]) so the pre-paint boot can still paint the restored
   window before assistant.js re-adds .open at DOMContentLoaded. */
html:not([data-assistant-boot]) .assistant-drawer:not(.open) {
    visibility: hidden;
    pointer-events: none;
}

/* Reduced height parks it bottom-right as a floating console. The page around it is
   fully live — the backdrop is inert in this mode, so every click lands on the page.
   `top: auto` matters: the panel is anchored to the BOTTOM so shortening it pulls the
   top edge down toward the corner rather than leaving it hanging from the header. */
.assistant-drawer.is-floating {
    top: auto;
    bottom: 16px;
    border-radius: var(--radius, 12px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
}
.assistant-drawer.is-floating.open { right: 16px; }

/* ── FAB morph ───────────────────────────────────────────────────────────────
   Opening grows the panel out of the FAB and closing contracts it back. The origin
   is written by JS from the FAB's measured centre so it still lines up when the FAB
   is relocated (mobile, claim pages). Transform is used rather than `right` during
   the morph because animating `right` cannot scale or anchor to a point. */
.assistant-drawer.is-morphing {
    transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
    transform-origin: var(--assistant-morph-origin, calc(100% - 46px) calc(100% - 100px));
}
body[data-assistant-state="opening"] .assistant-drawer.is-morphing,
body[data-assistant-state="closing"] .assistant-drawer.is-morphing {
    /* Collapsed toward the FAB: small, faded, anchored at the launcher. */
    transform: scale(.6);
    opacity: 0;
}
body[data-assistant-state="open"] .assistant-drawer.is-morphing,
body[data-assistant-state="docked"] .assistant-drawer.is-morphing {
    transform: none;
    opacity: 1;
}

/* While collapsing past the dock detent the panel follows the pointer and fades. */
.assistant-drawer.is-collapse-preview {
    transition: none;
    opacity: var(--assistant-drawer-fade, 1);
}

/* The outgoing surface must stop taking input the instant a transition starts, so a
   fast double-click cannot hit both the FAB and the drawer. */
body[data-assistant-state="opening"] .assistant-fab,
body[data-assistant-state="open"] .assistant-fab,
body[data-assistant-state="moving"] .assistant-fab,
body[data-assistant-state="resizing"] .assistant-fab {
    pointer-events: none;
    opacity: 0;
    transform: scale(.6);
}
.assistant-fab {
    transition: opacity .18s ease, transform .18s ease;
}
body[data-assistant-state="closing"] .assistant-drawer,
body[data-assistant-state="opening"] .assistant-drawer {
    pointer-events: none;
}

/* ── Mid-edge proximity grip ─────────────────────────────────────────────────
   Hidden at rest so it never decorates the page. Its hit zone is deliberately
   larger than its paint so it is reachable without being visible, and narrow
   enough not to block the page outside that strip. */
.assistant-drawer-grip {
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 56px;
    border-radius: 10px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e7e1d6);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    /* Both axes drag now, so the cursor says so rather than promising only sideways. */
    cursor: move;
    opacity: 0;
    transition: opacity .2s ease, border-color .15s ease;
    z-index: 4;
    touch-action: none;
}
.assistant-drawer-grip span {
    display: block;
    width: 8px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--primary, #F47421);
    opacity: .75;
}

/* The middle of the handle has to say it moves up and down as well as sideways, or the
   height gesture is undiscoverable — the bars alone read as a sideways-only affordance.
   Chevrons above and below the bars, drawn from the same colour, no extra assets. */
.assistant-drawer-grip .assistant-grip-chevron {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--primary, #F47421);
    border-bottom: 1.5px solid var(--primary, #F47421);
    border-radius: 1px;
    opacity: .75;
    background: none;
}
.assistant-drawer-grip .assistant-grip-chevron--up { transform: rotate(-135deg); margin-bottom: 1px; }
.assistant-drawer-grip .assistant-grip-chevron--down { transform: rotate(45deg); margin-top: 1px; }

/* Taller, so three zones fit without crowding. */
.assistant-drawer-grip { height: 84px; }
.assistant-drawer-grip.is-near,
.assistant-drawer-grip.is-dragging,
.assistant-drawer-grip:focus-visible {
    opacity: 1;
}
.assistant-drawer-grip.is-dragging,
.assistant-drawer-grip:focus-visible {
    border-color: var(--primary, #F47421);
}
.assistant-drawer-grip:focus-visible {
    outline: 2px solid var(--primary, #F47421);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    /* Preserve state order and focus movement; drop the morph itself. */
    .assistant-drawer.is-morphing,
    .assistant-fab {
        transition: none !important;
    }
    body[data-assistant-state="opening"] .assistant-drawer.is-morphing,
    body[data-assistant-state="closing"] .assistant-drawer.is-morphing {
        transform: none;
    }
}

.assistant-drawer-resize {
    position: absolute;
    inset: 0 auto 0 -6px;
    width: 12px;
    cursor: ew-resize;
    z-index: 3;
    touch-action: none;
}
.assistant-drawer-resize::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    width: 2px;
    height: 48px;
    border-radius: 2px;
    background: transparent;
    transform: translateY(-50%);
    transition: background .15s;
}
.assistant-drawer-resize:hover::after,
.assistant-drawer-resize:focus-visible::after,
.assistant-drawer-resize.is-resizing::after { background: var(--bee-orange, #F47421); }
.assistant-drawer-resize:focus-visible { outline: 2px solid var(--focus-indicator, #f47421); outline-offset: -2px; }
body.assistant-drawer-is-resizing { cursor: ew-resize; user-select: none; }

.assistant-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    flex-shrink: 0;
}
.assistant-drawer-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    /* At companion widths the row tightens: the title never wraps — the scope
       chip is the flexible part and gives way first (ellipsis). */
    white-space: nowrap;
    flex-shrink: 0;
}
.assistant-drawer-header .drawer-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: var(--drawer-bug-gutter, 44px);
}
.assistant-drawer-header .drawer-actions button,
.assistant-drawer-header .drawer-actions a {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    text-decoration: none;
}
.assistant-drawer-header .drawer-actions button:hover,
.assistant-drawer-header .drawer-actions a:hover { background: var(--surface, #f3f4f6); }

/* ── Shared transcript + input styles ── */
.ai-transcript-shell {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
}
.assistant-transcript {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assistant-welcome {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary, #6b7280);
}
/* The empty state carries the brandmark at full size — this is the one place the mark has room
   for its line work, so it is the bee rather than a generic robot illustration. The wrapper keeps
   its original box; the inline SVG defaults to 1em and must be sized explicitly or it renders at
   text height inside an 80px slot. */
.assistant-welcome-icon {
    width: 92px;
    height: 92px;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bee-yellow, #F8A900);
}
.assistant-welcome-icon .bee-mark { width: 88px; height: 88px; }
/* Slow colour drift between the two brand tones — an empty state is the calmest surface in the
   product and should not pulse. */
.assistant-welcome-icon { animation: beeWelcomeTint 9s ease-in-out infinite; }
@keyframes beeWelcomeTint {
    0%, 100% { color: var(--bee-yellow, #F8A900); }
    50% { color: var(--bee-orange, #F47421); }
}
@media (prefers-reduced-motion: reduce) {
    .assistant-welcome-icon { animation: none; }
}

/* Functional robot sits in an orange chip so it remains legible on the yellow Ask-AI button. */
.ask-ai-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bee-orange, #F47421);
    color: #fff;
    vertical-align: middle;
}
.ask-ai-mark .fa-robot { font-size: 11px; }
.assistant-welcome h2 { font-size: 18px; margin: 0 0 8px; color: var(--text, #111827); }
.assistant-welcome p { font-size: 13px; margin: 0; }

.assistant-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
}
.assistant-msg.user {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.assistant-msg.assistant {
    align-self: flex-start;
    background: var(--surface, #f3f4f6);
    color: var(--text, #111827);
    border-bottom-left-radius: 4px;
}
.assistant-msg.assistant p { margin: 0 0 8px; }
.assistant-msg.assistant p:last-child { margin-bottom: 0; }
.assistant-msg.assistant code {
    background: rgba(0,0,0,.06);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 12.5px;
}

/* Answer tables inside the drawer.
   2026-08-01: a ranking answer ("didžiausia žala pagal sumą") returns 6-7
   columns, and the old rules made that unreadable — `table-layout: fixed` with
   a 35% first column left ~33px for each remaining column, and `break-word`
   then shattered every header into one character per line ("Žal os nr.",
   "Su ma") and split amounts across lines ("1 064 794, 00").

   Fixed by letting the table scroll horizontally inside the message instead of
   being crushed into the drawer width: `display: block` + `overflow-x` makes
   the table its own scroll container (column alignment is preserved by the
   anonymous table box), auto layout sizes columns to their content, and a
   min-width floor stops narrow columns breaking words per character.
   CSS-only on purpose: the streaming renderer builds the <table> node itself
   (ai-chat-utils.js), so there is no reliable place to add a wrapper element. */
.assistant-table,
.ai-chat-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 12px;
    margin: 6px 0;
}
/* 2026-08-01: the scroll container works, but overlay scrollbars paint nothing
   until a drag starts, so a wide table reads as CLIPPED. Chromium only paints
   a persistent scrollbar via ::-webkit-scrollbar — and IGNORES those rules
   when the standard scrollbar-width/scrollbar-color properties are also set,
   so the standard pair must stay Firefox-only. */
.assistant-table::-webkit-scrollbar,
.ai-chat-table::-webkit-scrollbar { height: 8px; background: transparent; }
.assistant-table::-webkit-scrollbar-thumb,
.ai-chat-table::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-secondary, #6b7280) 45%, transparent);
    border-radius: 4px;
}
@supports not selector(::-webkit-scrollbar) {
    .assistant-table,
    .ai-chat-table {
        scrollbar-width: thin;
        scrollbar-color: var(--text-secondary, #6b7280) transparent;
    }
}
.assistant-table th,
.assistant-table td,
.ai-chat-table th,
.ai-chat-table td {
    border: 1px solid var(--border, #e5e7eb);
    padding: 4px 6px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}
.assistant-table :is(th, td):has(> code:only-child),
.ai-chat-table :is(th, td):has(> code:only-child) {
    white-space: nowrap;
    overflow-wrap: normal;
}
.assistant-table th {
    background: rgba(0,0,0,.04);
    font-weight: 600;
}
.assistant-table tr:hover td {
    background: rgba(0,0,0,.02);
}

/* Shared message action bar: copy + feedback (+ technical details where allowed). */
.ai-message-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 6px;
    opacity: .68;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}
.ai-message-time {
    margin-top: 6px;
    color: var(--text-secondary, #6b7280);
    font-size: 11px;
    line-height: 1.25;
}
.assistant-msg.user .ai-message-time { color: rgba(255,255,255,.78); }
.ai-message-time[hidden] { display: none; }
.assistant-msg:hover > .ai-message-actions,
.assistant-msg:focus-within > .ai-message-actions,
.claim-ai-msg:hover > .ai-message-actions,
.claim-ai-msg:focus-within > .ai-message-actions,
.ai-message-actions.has-feedback-form,
.ai-message-actions.has-status,
.ai-message-actions:hover {
    opacity: 1;
}
.ai-message-action-button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    padding: 0;
    font-size: 11px;
    border-radius: 7px;
}
.ai-message-action-button:hover {
    color: var(--text, #111827);
    background: rgba(0,0,0,.06);
    border-color: var(--border, #d1d5db);
}

/* Trace modal */
.trace-modal {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trace-modal .modal-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
}
.trace-modal-content {
    position: relative;
    background: var(--bg, #fff);
    border-radius: 10px;
    width: 600px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.trace-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.trace-modal-header h4 {
    margin: 0;
    font-size: 14px;
}
.trace-modal-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-secondary);
    padding: 4px;
}
.trace-modal-body {
    padding: 12px 16px;
    overflow-y: auto;
    font-size: 13px;
}
.trace-item {
    margin-bottom: 12px;
}
.trace-item:last-child {
    margin-bottom: 0;
}
.trace-header {
    font-weight: 600;
    margin-bottom: 6px;
}
.trace-latency {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 12px;
}
.trace-section {
    margin-bottom: 8px;
}
.trace-section strong {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.trace-section pre {
    margin: 0;
    padding: 8px 10px;
    font-size: 11px;
    background: var(--surface, #f8f8f8);
    border-radius: 6px;
    overflow-x: auto;
    max-height: 200px;
    white-space: pre-wrap;
    word-break: break-all;
}

.assistant-typing {
    align-self: flex-start;
    display: flex;
    padding: 12px 16px;
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
    font-style: italic;
}
.ai-working-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-working-bee {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    object-fit: contain;
    animation: aiWorkingBeeHover 1.5s ease-in-out infinite;
}
@keyframes aiWorkingBeeHover {
    0%, 100% { transform: translateY(1px); }
    50% { transform: translateY(-2px); }
}
/* While the assistant is working the mark is the status: the bee hovers, and its wings beat at
   roughly three times the idle rate. The colour cycle is what makes it read as "busy" rather
   than "decorative" — it is the same brandmark, just working. */
svg.ai-working-bee {
    color: var(--bee-yellow);
    animation: aiWorkingBeeHover 1.5s ease-in-out infinite,
               beeWorkingColour 2.2s ease-in-out infinite;
}
svg.ai-working-bee .bee-wing { animation-duration: .9s; }
svg.ai-working-bee .bee-stripes path { animation-duration: 1.4s; }
@keyframes beeWorkingColour {
    0%, 100% { color: var(--bee-yellow); }
    50% { color: var(--bee-orange); }
}
@media (prefers-reduced-motion: reduce) {
    svg.ai-working-bee { animation: none; color: var(--bee-yellow); }
}
.ai-thinking-label {
    opacity: 1;
    transition: opacity 180ms ease;
}
.ai-thinking-label.is-changing {
    opacity: 0;
}
.assistant-tool-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
    font-style: italic;
}
.assistant-tool-indicator i { font-size: 11px; }
.assistant-msg-content { min-height: 0; }

.ai-artifact {
    margin-top: .75rem;
    border: 1px solid var(--component-border, #d9dee7);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface, #fff);
    color: var(--text-primary, #172033);
}
.ai-artifact-title {
    padding: .7rem .85rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent-orange, #F47421) 12%, transparent);
    border-bottom: 1px solid var(--component-border, #d9dee7);
}
.ai-artifact-table-wrap { max-width: 100%; overflow: auto; }
.ai-artifact-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ai-artifact-table th,
.ai-artifact-table td {
    padding: .55rem .7rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--component-border, #e8ebf0);
    white-space: pre-line;
}
.ai-artifact-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2, #f7f8fa);
    font-weight: 650;
}
.ai-artifact-table tr.is-different td {
    background: color-mix(in srgb, var(--accent-orange, #F47421) 7%, transparent);
}
.ai-artifact-table tbody tr:last-child td { border-bottom: 0; }
html[data-theme="dark"] .ai-artifact {
    background: var(--surface, #191919);
    color: var(--text, #f2f2f2);
    border-color: var(--component-border, #3a3a3a);
}
html[data-theme="dark"] .ai-artifact-table th { background: var(--surface-2, #242424); }
.ai-feedback { color:var(--text-secondary,#6b7280); font-size:12px; }
.ai-feedback-actions { display:inline-flex; align-items:center; gap:2px; }
.ai-feedback-button:hover { color:var(--accent-orange, #F47421); border-color:currentColor; }
.ai-feedback-button.is-active {
    color:var(--accent-orange, #F47421);
    border-color:currentColor;
    background:color-mix(in srgb, var(--accent-orange, #F47421) 12%, transparent);
}
.ai-feedback-button:disabled {
    cursor:not-allowed;
    opacity:.72;
}
.ai-feedback-sent-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    color:var(--accent-orange, #F47421);
    font-size:9px;
}
.ai-feedback-form {
    flex:1 0 100%;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    padding-top:4px;
}
.ai-feedback-form textarea {
    flex:1 0 100%;
    min-height:58px;
    resize:vertical;
    border:1px solid var(--border,#d1d5db);
    border-radius:8px;
    padding:8px 10px;
    background:var(--input-bg,var(--surface,#fff));
    color:var(--text,#111827);
    font:inherit;
    line-height:1.4;
    box-sizing:border-box;
}
.ai-feedback-form textarea:focus-visible {
    outline:none;
    border-color:var(--primary, #F47421);
    box-shadow:0 0 0 2px var(--focus-ring,rgba(232,120,10,.32));
}
html[data-theme="dark"] .ai-feedback-form textarea:focus-visible {
    outline:none !important;
    border-color:var(--focus-indicator) !important;
    box-shadow:0 0 0 2px var(--focus-ring) !important;
}
.ai-feedback-form-actions {
    flex:1 0 100%;
    display:flex;
    justify-content:flex-end;
    gap:6px;
}
.ai-feedback-submit,
.ai-feedback-cancel {
    min-height:32px;
    padding:0 11px;
    border-radius:7px;
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
}
.ai-feedback-submit {
    border:1px solid var(--primary, #F47421);
    background:var(--primary, #F47421);
    color:var(--on-primary,#fff);
}
.ai-feedback-cancel {
    border:1px solid var(--border,#d1d5db);
    background:var(--surface,#fff);
    color:var(--text,#111827);
}
.ai-feedback-submit:disabled,
.ai-feedback-cancel:disabled { opacity:.55; cursor:not-allowed; }
.ai-feedback-cancel:hover { background:var(--bg,#f3f4f6); }
.ai-feedback-confirmation { color:var(--success,#15803d); }
.ai-feedback-error { flex-basis:100%; color:var(--danger,#b91c1c); }
.ai-stream-rendered { display: contents; }
.ai-ink {
    animation: aiInkFadeIn 250ms ease-out both;
}
@keyframes aiInkFadeIn {
    from { opacity: .4; }
    to { opacity: 1; }
}
.ai-stream-skeleton {
    display: inline-block;
    margin-left: 5px;
    color: transparent;
    background: linear-gradient(90deg, currentColor 20%, var(--accent-orange, #F47421) 50%, currentColor 80%);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    opacity: .5;
    letter-spacing: 1px;
    animation: aiStreamSkeletonShimmer 1.2s linear infinite;
}
@keyframes aiStreamSkeletonShimmer {
    from { background-position: 200% 0; }
    to { background-position: -20% 0; }
}
.ai-write-cursor {
    display: inline-flex;
    margin-left: 4px;
    color: currentColor;
    font-size: .8em;
    vertical-align: .02em;
    transform: rotate(40deg);
    transform-origin: center;
    animation: aiWriteCursorBob .9s ease-in-out infinite;
}
@keyframes aiWriteCursorBob {
    0%, 100% { transform: rotate(40deg) translateY(0); }
    50% { transform: rotate(40deg) translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-ink { animation: none; }
    .ai-stream-skeleton { display: none; animation: none; }
    .ai-write-cursor { animation: none; transform: rotate(40deg); }
    .ai-working-bee { animation: none; transform: none; }
    .ai-thinking-label { transition: none; }
    .ai-message-actions,
    .ai-scroll-latest { transition: none; }
}

.assistant-input-area {
    padding: 8px 12px;
    border-top: 1px solid var(--border, #e5e7eb);
    flex-shrink: 0;
}
.assistant-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface, #f3f4f6);
    border-radius: 10px;
    min-height: 44px;
    padding: 4px 6px 4px 8px;
    box-sizing: border-box;
}
.assistant-input-wrapper textarea {
    flex: 1;
    align-self: center;
    height: 34px;
    min-height: 34px;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    margin: 0;
    padding: 7px 4px;
    box-sizing: border-box;
    overflow-y: hidden;
    font-size: 13.5px;
    line-height: 20px;
    max-height: 120px;
    font-family: inherit;
    color: var(--text, #111827);
}
.assistant-send-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    transition: opacity .15s;
}
.assistant-send-btn:disabled { opacity: .4; cursor: not-allowed; }

.assistant-cancel-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: var(--danger-color, #b42318);
    background: color-mix(in srgb, currentColor 12%, transparent);
    cursor: pointer;
}

.ai-scroll-latest {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 3;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text, #111827);
    box-shadow: 0 3px 12px rgba(0,0,0,.14);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.ai-scroll-latest[hidden] { display: none; }
.ai-scroll-latest:hover { border-color: var(--primary, #F47421); color: var(--primary-text, #9a4c00); }

@media (hover: none), (pointer: coarse) {
    .ai-message-actions {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Full-page layout ── */
/* Only the transcript (and the convo list) scroll — never the page (owner 2026-08-15).
   Measured on TEST: .main-content (overflow:auto) carried 131px of scrollable slack
   because the fullpage guessed the viewport chrome as 60px while the real box is
   main-content's padded area. Bind to the PARENT box instead: hide main-content's
   scrolling on this page and fill its content box + the cancelled 24px padding
   exactly, so the sidebar and input stay fixed and the wheel only moves messages. */
.main-content:has(.assistant-fullpage) {
    overflow: hidden;
    /* Absolute inset fill: flex and percentage sizing both under-filled here (the flexed
       child measured 132px short of its only container — likely line-box interference from
       the negative-margin cancellation). An absolutely positioned child against the padded
       box is deterministic: edge to edge, no guessed chrome heights, no margin algebra. */
    position: relative;
}
.assistant-fullpage {
    position: absolute;
    inset: 0;
    display: flex;
    margin: 0;
}
.assistant-sidebar {
    width: 280px;
    border-right: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    background: var(--surface, #f9fafb);
    flex-shrink: 0;
}
.assistant-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.assistant-sidebar-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.assistant-sidebar-actions { display: flex; align-items: center; gap: 6px; }
.assistant-new-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.assistant-convo-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.assistant-convo-item {
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text, #111827);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.assistant-convo-item:hover { background: var(--border, #e5e7eb); }
.assistant-convo-item.active { background: var(--primary); color: #fff; }
.assistant-convo-item .convo-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.assistant-convo-item .convo-delete {
    opacity: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 12px;
    padding: 2px 4px;
}
.assistant-convo-item:hover .convo-delete { opacity: .6; }

.assistant-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .assistant-drawer { width: 100vw; right: -100vw; }
    .assistant-fullpage { flex-direction: column; }
    .assistant-sidebar { width: 100%; height: 160px; border-right: none; border-bottom: 1px solid var(--border); }
}
@media (max-width: 1099px) {
    .assistant-drawer-resize { display: none; }
}

/* Compact claim mode is driven by measured workspace width and may activate
   well above the phone breakpoint (for example with the expanded app rail at
   945px). The claim already exposes its own AI entry point, so the global FAB
   must stay out of the form/sheet at every compact workspace width. */
body.claim-merged-bar-page.claim-compact-workspace .assistant-fab {
    display: none !important;
}

/* =============================================================================
   DARK ASSISTANT / FLOATING CHROME (2026-07-13)
   ============================================================================= */
html[data-theme="dark"] .assistant-drawer-overlay {
    background: var(--overlay-bg);
    backdrop-filter: blur(2px);
}
html[data-theme="dark"] :where(.assistant-drawer, .assistant-sidebar, .trace-modal-content) {
    background: var(--surface);
    color: var(--text);
}
html[data-theme="dark"] .assistant-drawer {
    border-left: 1px solid var(--component-border);
    box-shadow: -10px 0 32px rgba(0, 0, 0, .68);
}
html[data-theme="dark"] :where(
    .assistant-drawer-header,
    .assistant-input-area,
    .assistant-sidebar,
    .assistant-sidebar-header,
    .trace-modal-header,
    .assistant-table th,
    .assistant-table td,
    .ai-chat-table th,
    .ai-chat-table td
) {
    border-color: var(--component-border);
}
html[data-theme="dark"] .assistant-input-wrapper {
    background: var(--input-bg);
    border: 1px solid var(--control-border);
}
html[data-theme="dark"] .assistant-input-wrapper:focus-within {
    border-color: var(--focus-indicator);
    box-shadow: 0 0 0 3px rgba(255, 196, 92, .20);
}
html[data-theme="dark"] .assistant-input-wrapper textarea {
    color: var(--text);
}
html[data-theme="dark"] .assistant-input-wrapper textarea::placeholder {
    color: var(--placeholder-text);
    opacity: 1;
}
html[data-theme="dark"] :where(
    .assistant-fab,
    .assistant-send-btn,
    .assistant-new-btn,
    .assistant-msg.user,
    .assistant-convo-item.active
) {
    color: var(--on-primary);
}
html[data-theme="dark"] .assistant-fab {
    border: 1px solid #f8a900;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .62);
}
html[data-theme="dark"] .assistant-fab:hover {
    box-shadow: 0 7px 24px rgba(0, 0, 0, .72), 0 0 0 3px rgba(248, 169, 0, .20);
}
html[data-theme="dark"] .assistant-msg.assistant {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--component-border);
}
html[data-theme="dark"] .assistant-msg.assistant code,
html[data-theme="dark"] .trace-section pre {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--component-border);
}
html[data-theme="dark"] :where(.assistant-table th, .ai-chat-table th) {
    background: var(--surface-3);
}
html[data-theme="dark"] :where(.assistant-table tr:hover td, .ai-chat-table tr:hover td) {
    background: var(--hover-bg);
}
html[data-theme="dark"] .assistant-convo-item:hover {
    background: var(--hover-bg);
}
html[data-theme="dark"] :where(
    .assistant-drawer-header .drawer-actions button,
    .assistant-drawer-header .drawer-actions a,
    .ai-message-action-button,
    .trace-modal-header button
) {
    color: var(--text-secondary);
}
html[data-theme="dark"] :where(
    .assistant-drawer-header .drawer-actions button,
    .assistant-drawer-header .drawer-actions a,
    .ai-message-action-button
):hover {
    background: var(--surface-3);
    color: var(--text);
}

/* ── Shared markdown rendering (used by FAB assistant and the claim chat drawer) ── */
.ai-chat-table { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.ai-chat-table th, .ai-chat-table td { border: 1px solid var(--border, #e5e7eb); padding: 4px 8px; text-align: left; }
.ai-chat-table th { background: rgba(0,0,0,0.04); font-weight: 600; }
.ai-chat-heading { margin: 10px 0 4px 0; font-weight: 600; line-height: 1.25; }
h1.ai-chat-heading { font-size: 16px; }
h2.ai-chat-heading { font-size: 15px; }
h3.ai-chat-heading, h4.ai-chat-heading,
h5.ai-chat-heading, h6.ai-chat-heading { font-size: 14px; }
.ai-chat-list { margin: 4px 0 6px 20px; padding: 0; }
.ai-chat-list li { margin: 2px 0; }
/* Shared by the streamed DOM (class added in the smd token hook) and the final
   renderMarkdown output, so the done-time replace causes no spacing reflow. */
.ai-chat-p { margin: 0 0 7px 0; }
.ai-chat-p:last-child { margin-bottom: 0; }
.ai-chat-pre {
    background: rgba(0, 0, 0, 0.045);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 6px 0;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.45;
}
.ai-chat-pre code { background: none; padding: 0; white-space: pre; }
/* Assistant answers may link to a page or a claim inside this app (owner 2026-09-02). The renderer only
   ever emits an anchor for a same-origin app path, so these styles never dress an external target. Brand
   orange on hover marks them as ours; the resting state stays readable against the message ground. */
.ai-chat-link {
    color: var(--primary-text, #B44C09);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    border-radius: 3px;
    transition: color .15s ease, background-color .15s ease;
}

.ai-chat-link:hover,
.ai-chat-link:focus-visible {
    color: var(--primary, #ef7d22);
    background: var(--primary-light, rgba(244, 116, 33, .12));
    text-decoration-thickness: 2px;
}

.ai-chat-link:focus-visible {
    outline: 2px solid var(--primary, #ef7d22);
    outline-offset: 2px;
}

.ai-chat-code-panel {
    margin: 8px 0;
    overflow: hidden;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface, #fff) 94%, #000 6%);
}
.ai-chat-code-panel figcaption {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
}
.ai-chat-code-panel .ai-chat-pre {
    margin: 0;
    border: 0;
    border-radius: 0;
    max-height: 420px;
}
html[data-theme="dark"] .ai-chat-pre { background: rgba(255, 255, 255, 0.06); }
.ai-chat-quote {
    border-left: 3px solid var(--border, #e5e7eb);
    margin: 6px 0;
    padding: 2px 0 2px 10px;
    color: var(--text-secondary, #6b7280);
}

/* ── Assistant mobile overflow fix (post-rollout, 2026-06-07) ─────────────────
   .assistant-fullpage uses margin:-24px to cancel .main-content's 24px padding,
   but that padding drops to 16px at <=576px → the -24px overshoots by 8px each
   side (contained mc≈8). Match the narrow-phone padding. This file loads after
   the global dark CSS (and is re-linked on the Assistant page), so the fix is
   source-order-robust. @media-gated → desktop unchanged; light + dark. */
@media (max-width: 576px) {
    .assistant-fullpage {
        margin-left: -16px;
        margin-right: -16px;
    }
}

/* main-content padding steps 16px (<=576) / 20px (577-768) / 24px (>768); the
   base margin:-24px only matches >768. Match the 20px tier so the full-bleed
   doesn't overshoot by 4px at the tablet breakpoint. */
@media (min-width: 577px) and (max-width: 768px) {
    .assistant-fullpage {
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* Mobile: the assistant FAB (52px @ bottom:80px) can cover form/filter controls
   on dense screens. Shrink to 44px and tuck it into the very bottom-right corner
   so it clears the active control area. Light + dark; @media-gated. */
@media (max-width: 576px) {
    .assistant-fab {
        width: 44px;
        height: 44px;
        bottom: 16px;
        right: 16px;
        font-size: 17px;
    }
}

/* Mobile dense-page guard: a fixed FAB inevitably overlaps full-width form/filter
   controls that scroll under it. On claim create/edit/details (which also have
   their own in-claim AI drawer) and report pages, hide the global FAB at phone
   widths so it never covers date inputs, dropdowns, or filter controls. Desktop
   keeps it. */
@media (max-width: 768px) {
    body.claim-merged-bar-page .assistant-fab,
    body:has(.report-page) .assistant-fab,
    body:has(.claims-wizard-layout) .assistant-fab {
        display: none !important;
    }
}


/* ── Narrow viewports keep exactly what they had (owner decision 2026-08-27) ─────────
   Resizing is a pointer gesture on a large screen; on a phone the assistant is open or
   closed. Below the breakpoint the grip is not rendered at all and the panel is the
   full-screen drawer it has always been — which is also why the existing 390px
   containment assertions keep passing untouched. */
@media (max-width: 899px) {
    .assistant-drawer-grip { display: none !important; }
    .assistant-drawer,
    .assistant-drawer.is-floating {
        top: 0;
        bottom: auto;
        height: 100vh;
        border-radius: 0;
    }
    .assistant-drawer.is-floating.open { right: 0; }
}


/* ── HIVE-756: the assistant WINDOW ──────────────────────────────────────────
   JS owns the rectangle (left/top/width/height inline). These rules make the
   inline geometry win over the drawer-era right/height anchoring. */
.assistant-drawer.is-window,
.assistant-drawer.is-window.open {
    right: auto;
    bottom: auto;
    max-height: calc(100vh - 32px);
    border-radius: var(--radius, 12px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
    border: 1px solid var(--border, #DDD8C7);
}
/* The bug-launcher lane matters only where the header can actually sit under the
   top-right launcher: the companion dock and the phone panel. A floating window's
   header is wherever the user parked it, so the reserved 44px would just read as
   the icon buttons stopping short of the window's own edge. */
.assistant-drawer.is-window { --drawer-bug-gutter: 0px; }

/* ── Pre-paint continuity boot (html[data-assistant-boot]) ─────────────────
   The head boot script stamps the attribute + rect vars from storage, so a
   restored window is ALREADY on screen at first paint — no pop-in, no morph
   replay. assistant-drawer-state.js applies the real classes silently
   (open({instant:true})) and removes the attribute. */
html[data-assistant-boot] .assistant-drawer {
    display: flex;
    transition: none !important;
    animation: none !important;
}
html[data-assistant-boot] .assistant-fab {
    opacity: 0;
    pointer-events: none;
}
/* The /Assistant full page IS the assistant — no launcher, no window doubles. */
html[data-assistant-fullpage] .assistant-fab,
html[data-assistant-fullpage] .assistant-greeting { display: none !important; }
html[data-assistant-boot="floating"] .assistant-drawer {
    --drawer-bug-gutter: 0px;
    --hive-drawer-width: var(--ab-w, 460px);
    left: var(--ab-x, auto);
    top: var(--ab-y, auto);
    width: var(--ab-w, 460px);
    height: var(--ab-h, 50vh);
    right: auto;
    bottom: auto;
    max-height: calc(100vh - 32px);
    border-radius: var(--radius, 12px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
    border: 1px solid var(--border, #DDD8C7);
}
html[data-assistant-boot="companion"] .assistant-drawer {
    --hive-drawer-width: var(--ab-w, 380px);
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
    width: var(--ab-w, 380px);
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-left: 1px solid var(--border, #DDD8C7);
    box-shadow: -4px 0 20px rgba(0, 0, 0, .12);
}
.assistant-drawer.is-window .assistant-drawer-header { cursor: grab; }
.assistant-drawer.is-window[data-moving] .assistant-drawer-header { cursor: grabbing; }

/* Companion (WP6): docked to the right edge at full height; the page reflows
   beside it via the gutter on <html data-assistant-companion>. */
.assistant-drawer.is-companion,
.assistant-drawer.is-companion.open {
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-left: 1px solid var(--border, #DDD8C7);
    box-shadow: -4px 0 20px rgba(0, 0, 0, .12);
}
/* Closed means GONE in companion mode too — the docked geometry above would
   otherwise keep the panel pinned on screen after the ✕ (the morph still plays:
   .open stays through the closing transition and drops only at its end). */
.assistant-drawer.is-companion:not(.open) { display: none; }
html[data-assistant-companion] .main-content {
    margin-right: var(--assistant-gutter, 0px);
}
@keyframes beeAttentionHaloOuter {
    0% { opacity: 0; transform: scale(.7); }
    35% { opacity: .65; }
    100% { opacity: 0; transform: scale(1.34); }
}
@keyframes beeAttentionHop {
    0%, 100% { transform: translateY(0) rotate(0); }
    28% { transform: translateY(-10px) rotate(-5deg); }
    58% { transform: translateY(2px) rotate(3deg); }
}
.assistant-fab-unseen {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #14b8a6;
    border: 2px solid var(--surface, #fff);
    box-shadow: 0 1px 5px rgba(15, 118, 110, .45);
}
.assistant-fab-unseen[hidden] { display: none; }

/* In-place fullscreen mode. The previous floating rectangle or companion width
   remains in the state store and is restored exactly by the same button/Escape. */
.assistant-drawer.is-maximized,
.assistant-drawer.is-maximized.open {
    position: fixed;
    inset: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh;
    border-radius: 0;
    z-index: 1082;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}
.assistant-drawer.is-maximized .assistant-window-handle { display: none; }

/* The eight handles. Invisible at rest; the grip line fades in on approach. */
.assistant-window-handle { position: absolute; z-index: 6; }
.assistant-window-handle--n  { top: -5px; left: 14px; right: 14px; height: 10px; cursor: ns-resize; }
.assistant-window-handle--s  { bottom: -5px; left: 14px; right: 14px; height: 10px; cursor: ns-resize; }
.assistant-window-handle--w  { left: -5px; top: 14px; bottom: 14px; width: 10px; cursor: ew-resize; }
.assistant-window-handle--e  { right: -5px; top: 14px; bottom: 14px; width: 10px; cursor: ew-resize; }
.assistant-window-handle--nw { top: -5px; left: -5px; width: 18px; height: 18px; cursor: nwse-resize; }
.assistant-window-handle--ne { top: -5px; right: -5px; width: 18px; height: 18px; cursor: nesw-resize; }
.assistant-window-handle--sw { bottom: -5px; left: -5px; width: 18px; height: 18px; cursor: nesw-resize; }
.assistant-window-handle--se { bottom: -5px; right: -5px; width: 18px; height: 18px; cursor: nwse-resize; }
.assistant-window-handle::after {
    content: "";
    position: absolute;
    border-radius: 20px;
    background: var(--text-secondary, #66605A);
    opacity: 0;
    transition: opacity .13s ease;
}
.assistant-window-handle--n::after,
.assistant-window-handle--s::after { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 3px; }
.assistant-window-handle--w::after,
.assistant-window-handle--e::after { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 36px; }
.assistant-window-handle--nw::after,
.assistant-window-handle--ne::after,
.assistant-window-handle--sw::after,
.assistant-window-handle--se::after { inset: 5px; border-radius: 3px; }
.assistant-window-handle:hover::after,
.assistant-window-handle.is-active::after,
.assistant-window-handle:focus-visible::after { opacity: .55; }
.assistant-window-handle:focus-visible { outline: 2px solid var(--primary, #F47421); outline-offset: 1px; }
/* Companion: only the left edge resizes; the other handles retire quietly. */
.assistant-drawer.is-companion .assistant-window-handle:not(.assistant-window-handle--w) { display: none; }

/* The scope chip is retired (owner 2026-08-29): the transcript's own content
   names the claim, and the assistant follows the page. */

/* Segmented mode switch — floating/docked plus the adjacent maximize toggle. */
.assistant-mode-switch {
    display: flex;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    margin-right: 4px;
}
.assistant-mode-switch button {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    width: 28px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.assistant-mode-switch button + button { border-left: 1px solid var(--border, #e5e7eb); }
.assistant-mode-switch button:hover { background: var(--surface, #f3f4f6); }
.assistant-mode-switch button.is-active {
    background: color-mix(in srgb, var(--primary, #F47421) 14%, transparent);
    color: var(--primary, #F47421);
}

/* Drag-to-dock preview: a soft strip on the right edge while the drag hovers it. */
body.assistant-dock-preview::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 12px;
    background: color-mix(in srgb, var(--primary, #F47421) 35%, transparent);
    border-left: 2px solid var(--primary, #F47421);
    z-index: 1069;
    pointer-events: none;
}

/* WP4: the bee carries the thread mark — a quiet dot, no motion (5C owns motion). */
.assistant-fab.has-thread::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--surface, #FFFDF8);
    border: 3px solid var(--primary, #F47421);
}

/* WP3: the earlier-messages divider button at the top of a windowed transcript. */
.assistant-older-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 8px auto;
    padding: 7px 10px;
    border: 1px dashed var(--border, #DDD8C7);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #66605A);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.assistant-older-btn:hover { border-color: var(--primary, #F47421); color: var(--primary, #F47421); }

/* WP2: message-shaped skeletons while a restored thread hydrates. */
.assistant-skeleton {
    height: 36px;
    border-radius: 12px;
    margin: 8px 12px;
    background: linear-gradient(90deg, var(--surface, #f5f2ea), rgba(0,0,0,.05), var(--surface, #f5f2ea));
    background-size: 200% 100%;
    animation: assistant-skeleton-sheen 1.1s linear infinite;
}
.assistant-skeleton--right { width: 45%; margin-left: auto; }
.assistant-skeleton--left { width: 62%; }
@keyframes assistant-skeleton-sheen { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .assistant-skeleton { animation: none; }
}

/* Below the desktop threshold the window rules do not exist: the stylesheet's
   full-screen drawer takes over and JS adds no geometry. */
@media (max-width: 899px) {
    .assistant-window-handle { display: none; }
    .assistant-mode-switch { display: none; }
}

/* ── Ambient context strip (owner 2026-08-30, mockup 1) ────────────────────
   One slim line: what the assistant „sees“ on this page. First summary line
   rides inline (single line, ellipsis); the card below carries the rest. */
/* [hidden] must WIN over the class display (the documented trap — an empty
   separator strip rendered on every non-claim page, owner 2026-08-31). */
.assistant-context-strip[hidden],
.assistant-context-card[hidden] { display: none !important; }

.assistant-context-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 14px;
    border: 0;
    border-bottom: 1px solid var(--border, #e7e1d6);
    background: color-mix(in srgb, var(--primary, #F47421) 6%, var(--surface, #fff));
    color: var(--text-secondary, #6d635a);
    font-size: 12.3px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.assistant-context-strip:not(.has-summary) { cursor: default; }
.assistant-context-strip b { color: var(--text, #201B16); font-weight: 650; flex-shrink: 0; }
.assistant-context-chip {
    flex-shrink: 0;
    background: color-mix(in srgb, var(--primary, #F47421) 14%, var(--surface, #fff));
    color: var(--primary, #F47421);
    border-radius: 999px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
}
.assistant-context-line { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.assistant-context-chevron { margin-left: auto; flex-shrink: 0; color: var(--primary, #F47421); font-weight: 700; }
.assistant-context-card {
    padding: 9px 14px 11px;
    border-bottom: 1px solid var(--border, #e7e1d6);
    background: color-mix(in srgb, var(--primary, #F47421) 6%, var(--surface, #fff));
    color: var(--text, #201B16);
    font-size: 12.6px;
    line-height: 1.5;
}
.assistant-context-meta { color: var(--text-secondary, #6d635a); margin-bottom: 4px; }
.assistant-context-gen { color: var(--text-secondary, #6d635a); font-size: 11.3px; margin-top: 6px; }


/* ── Report-chart artifacts (owner 2026-08-29) ────────────────────────────── */
.ai-artifact-chart {
    padding: 10px 12px;
    /* Inside a flex transcript a card must never compress into its own
       overflow:hidden — the legend/basis line would be the first casualties. */
    flex-shrink: 0;
    width: 100%;
}
/* A bubble holding an artifact takes the full lane, so resizing the window
   reflows the card instead of the fixed-px SVG pinning the bubble's width. */
.assistant-msg:has(.ai-artifact) { width: 85%; max-width: 85%; }
.ai-chart-host { width: 100%; }
/* Chart cards drop the banded title of the table artifacts: inside the flex
   head row the band hugs the text and reads as a stray highlight box. */
.ai-artifact-chart .ai-artifact-title {
    background: none;
    border-bottom: 0;
    padding: 2px 0;
    font-size: .92rem;
}
.ai-artifact-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.ai-artifact-chart-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-chart-action {
    border: 1px solid var(--border, #e5e7eb);
    background: none;
    color: var(--text-secondary, #6b7280);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.ai-chart-action:hover { border-color: var(--primary, #F47421); color: var(--primary, #F47421); }
.ai-chart-action.is-active {
    background: color-mix(in srgb, var(--primary, #F47421) 12%, transparent);
    border-color: var(--primary, #F47421);
    color: var(--primary, #F47421);
}
.ai-chart-host { min-height: 120px; }
.ai-chart-host-modal { min-height: 320px; }
.ai-artifact-chart-note {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
}
.ai-artifact-chart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-top: 6px;
}
.ai-chart-deeplink { color: var(--primary, #F47421); text-decoration: none; }
.ai-chart-deeplink:hover { text-decoration: underline; }
.ai-artifact-chart-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ai-chart-suggest-pill {
    border: 1px solid var(--border, #e5e7eb);
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.ai-chart-suggest-pill:hover {
    border-color: var(--primary, #F47421);
    color: var(--primary, #F47421);
    background: color-mix(in srgb, var(--primary, #F47421) 8%, transparent);
}

/* The labeled shimmer while claim_aggregate runs (Q1). */
.ai-report-shimmer {
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--surface, #f9fafb);
}
.ai-report-shimmer-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}
.ai-report-shimmer-bar,
.ai-report-shimmer-chart {
    border-radius: 6px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text-secondary, #6b7280) 10%, transparent) 25%,
        color-mix(in srgb, var(--text-secondary, #6b7280) 22%, transparent) 50%,
        color-mix(in srgb, var(--text-secondary, #6b7280) 10%, transparent) 75%);
    background-size: 200% 100%;
    animation: aiReportShimmer 1.4s linear infinite;
}
.ai-report-shimmer-bar { height: 12px; width: 55%; margin-bottom: 8px; }
.ai-report-shimmer-chart { height: 120px; }
@keyframes aiReportShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-report-shimmer-bar, .ai-report-shimmer-chart { animation: none; }
}

/* Above the assistant WINDOW (z 1070) AND the maximized drawer (z 1082) — the
   shared .modal-overlay layer sits at 1000, so the enlarged chart opened BEHIND
   the window (owner 2026-08-30). Because the modal is visibly on top, Escape
   closes it first: the drawer's keydown handler defers to any open shared modal.
   Sized as a large bounded dialog (owner pick: ~1200×800, viewport-capped). */
.assistant-chart-modal { z-index: 1090; }
.assistant-chart-modal-content {
    width: min(1200px, calc(100vw - 48px));
    max-width: min(1200px, calc(100vw - 48px));
    height: min(800px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
}
.assistant-chart-modal-body {
    padding: 12px 16px 16px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.assistant-chart-modal-body .ai-chart-host-modal { flex: 1; min-height: 0; }

@media (max-width: 899px) {
    .ai-chart-host { max-height: 240px; }
    .assistant-chart-modal-content { width: calc(100vw - 16px); height: calc(100vh - 16px); }
}
/* The modal host must never inherit the in-transcript height cap. */
.assistant-chart-modal .ai-chart-host { max-height: none; }


/* Clarification options: the type only, as small clickable text — a soft shimmer
   sweep marks them as actionable (owner 2026-08-30). */
.ai-clarify-options { margin-top: 6px; gap: 10px; }
.ai-clarify-pill {
    border: 0;
    background: linear-gradient(100deg,
        var(--primary, #F47421) 40%,
        color-mix(in srgb, var(--primary, #F47421) 35%, #fff) 50%,
        var(--primary, #F47421) 60%);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 2px;
    cursor: pointer;
    animation: aiClarifyShimmer 2.4s linear infinite;
}
.ai-clarify-pill:hover { text-decoration: underline; animation-play-state: paused; }
@keyframes aiClarifyShimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-clarify-pill { animation: none; background: none; color: var(--primary, #F47421); }
}
.assistant-stream-error .assistant-msg-content {
    color: var(--danger-color, #b42318);
}

.assistant-stream-diagnostic {
    display: block;
    margin: .35rem 0;
    color: var(--text-muted, #667085);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}