/* ============================================================
   VOCATECH PORTAL SHELL v4 (2026-04)
   New app chrome: fixed left sidebar + sticky topbar + content area.
   Loaded after every existing CSS so it can override layout.
   Scoped under .v4-app wrapper so it cannot affect legacy pages
   that haven't been wrapped yet.
   ============================================================ */

:root {
    --v4-brand: #F89939;
    --v4-brand-hover: #EC8526;
    --v4-brand-light: #FBB26A;
    --v4-brand-dark: #D97E1F;
    --v4-brand-glow: rgba(248, 153, 57, 0.25);
    --v4-brand-soft: rgba(240, 160, 48, 0.08);

    --v4-navy: #0E2749;
    --v4-ink: #071525;
    --v4-text: #0E2749;
    --v4-text-secondary: #455470;
    --v4-text-muted: #7D90A6;

    /* Aligned to the body background enforced by style_override.css
       (body:not(#reports) { background: #F3F5F8 !important } line 4083).
       Keeping --v4-surface in sync means body and .v4-app render as
       one continuous canvas — no "two nearly-identical grays" seam. */
    --v4-surface: #F3F5F8;
    --v4-surface-alt: #ECEEF4;
    --v4-surface-warm: #FBF8F3;
    --v4-card: #FFFFFF;

    --v4-border: #DFE3EC;
    --v4-border-light: #ECEEF3;

    /* Sidebar matches the card surface so the shell reads as one
       continuous pane; the subtle right-border + content bg behind
       provide the separation. */
    --v4-sidebar-bg: #FFFFFF;
    --v4-sidebar-border: #ECEEF3;
    --v4-sidebar-collapsed: 64px;

    --v4-green: #10b981;
    --v4-green-soft: #d1fae5;
    --v4-blue: #3b82f6;
    --v4-blue-soft: #dbeafe;
    --v4-amber: #f59e0b;
    --v4-amber-soft: #fef3c7;
    --v4-red: #ef4444;
    --v4-red-soft: #fee2e2;

    /* Sharp/angular radii — pointy corners read as modern (2026-04-20) */
    --v4-radius-sm: 3px;
    --v4-radius: 4px;
    --v4-radius-lg: 6px;
    --v4-radius-xl: 8px;

    --v4-shadow-sm: 0 1px 2px rgba(7, 21, 37, 0.04);
    --v4-shadow: 0 1px 2px rgba(7, 21, 37, 0.04), 0 1px 3px rgba(7, 21, 37, 0.03);
    --v4-shadow-card-hover: 0 20px 40px -20px rgba(7, 21, 37, 0.12);
    --v4-shadow-panel: 0 24px 64px -16px rgba(7, 21, 37, 0.18);

    --v4-sidebar-width: 210px;
    --v4-topbar-height: 64px;
    --v4-content-max: 1200px;
}

/* ===== Font & base ===== */
body.v4-body,
body.v4-body button,
body.v4-body input,
body.v4-body select,
body.v4-body textarea {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', 'Lato', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.v4-body {
    background: var(--v4-surface) !important;
    color: var(--v4-text);
    margin: 0;
    overflow-x: hidden;
}

/* Hide the legacy .header (old hamburger pill) when v4 is active */
body.v4-body > .container-box > .header {
    display: none !important;
}
body.v4-body > .container-box > .header + * { margin-top: 0; }

/* Remove the legacy min-width constraint when v4 is active */
body.v4-body .container-box {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   APP LAYOUT — Full-height sidebar + topbar only over content
   (Linear / Height / Vercel pattern)
   ============================================================ */
.v4-app {
    display: grid;
    grid-template-columns: var(--v4-sidebar-width) 1fr;
    grid-template-rows: 1fr;
    min-height: 100vh;
    background: var(--v4-surface);
}
body.v4-body {
    display: block;
}
#v4-app > .v4-body {
    display: grid;
    grid-template-columns: var(--v4-sidebar-width) 1fr;
    grid-column: 1 / -1;
    min-height: 100vh;
}
/* v4-collapsed class is no longer used — kept as no-op for backward compat */
.v4-app.v4-collapsed { grid-template-columns: var(--v4-sidebar-width) 1fr; }
.v4-app.v4-collapsed .v4-sidebar { width: var(--v4-sidebar-width); }

/* ============================================================
   SIDEBAR — full-height column (top of page to bottom)
   ============================================================ */
.v4-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: var(--v4-sidebar-width);
    background: var(--v4-sidebar-bg);
    border-right: none;
    /* Subtle right-edge shadow so the sidebar reads as a panel floating
       on top of the canvas, not a flat flush-joined column. Very soft. */
    box-shadow: 1px 0 3px rgba(14, 39, 73, 0.04),
                2px 0 8px -4px rgba(14, 39, 73, 0.04);
    display: flex;
    flex-direction: column;
    z-index: 30;
    overflow-y: auto;
    overflow-x: hidden;
    grid-row: 1;
    grid-column: 1;
}

/* Hide the notifications bell for now — not wired yet, adds visual clutter */
.v4-topbar .v4-topbar-btn[aria-label="Notifications"],
.v4-topbar button.v4-topbar-btn { display: none !important; }

/* Sidebar brand — logo at the top of the sidebar, full Vocatech wordmark.
   Nudged left (12px left padding) + no bottom divider line. */
.v4-sidebar-brand {
    display: flex;
    align-items: center;          /* vertically center the logo in the 64px band */
    justify-content: flex-start;
    padding: 0 12px 0 18px;        /* push the wordmark inward from the sidebar edge */
    height: 64px;
    box-sizing: border-box;
    text-decoration: none !important;
    border-bottom: 1px solid var(--v4-sidebar-border);
    flex-shrink: 0;
}
.v4-sidebar-brand img {
    max-height: 32px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

/* Sidebar head — company context. By default sits at the top; v4-sidebar-head-bottom
   moves it to sit just above the collapse-toggle footer for a cleaner layout
   (Dashboard stays the first nav item). */
.v4-sidebar-head {
    padding: 14px 12px 6px;
    flex-shrink: 0;
}
.v4-sidebar-head-bottom {
    padding: 10px 12px 8px;
    border-top: 1px solid var(--v4-sidebar-border);
    margin-top: auto;
}
.v4-sidebar-company {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    background: var(--v4-card);
    border: 1px solid var(--v4-sidebar-border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: default;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(14, 39, 73, 0.03);
    text-align: left;
    font-family: inherit;
}
/* Collapsed sidebar: hide text, keep icon centered */
.v4-app.v4-collapsed .v4-sidebar-head {
    padding: 10px 8px 6px;
}
.v4-app.v4-collapsed .v4-sidebar-company {
    padding: 6px;
    justify-content: center;
}

.v4-sidebar-nav {
    flex: 1;
    padding: 12px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Group header (small caps, muted) */
.v4-nav-section-header {
    font-size: 10.5px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #97A5BA;
    padding: 14px 13px 6px;
    white-space: nowrap;
    overflow: hidden;
    background: transparent;
}
.v4-nav-section-header:first-child { padding-top: 6px; }
.v4-sidebar-nav.has-section-headers .v4-nav-section-divider {
    display: none;
}
.v4-app.v4-collapsed .v4-nav-section-header {
    opacity: 0;
    height: 14px;
    padding: 6px 0 0;
    pointer-events: none;
}

/* Legacy divider (kept for back-compat, now hidden when section headers used) */
.v4-nav-section-divider {
    height: 1px;
    background: var(--v4-sidebar-border);
    margin: 10px 10px;
    opacity: 0.7;
}

/* Sidebar footer: collapse toggle — full-width, labeled, discoverable */
.v4-sidebar-foot {
    padding: 10px 12px 14px;
    border-top: 1px solid var(--v4-sidebar-border);
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    flex-shrink: 0;
}
.v4-app.v4-collapsed .v4-sidebar-foot { padding: 10px 8px 14px; justify-content: center; }

.v4-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 9px 14px;
    border-radius: var(--v4-radius-sm);
    color: var(--v4-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.1s;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}
.v4-nav-item::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background 0.15s;
}
.v4-nav-item:hover {
    background: var(--v4-surface);
    color: var(--v4-navy);
    text-decoration: none;
}
.v4-nav-item.is-active {
    background: var(--v4-brand-soft);
    color: var(--v4-navy);
    font-weight: 600;
}
.v4-nav-item.is-active::before {
    background: var(--v4-brand);
}
/* Collapsed state — icons only */
.v4-app.v4-collapsed .v4-nav-item {
    padding: 10px 0;
    justify-content: center;
    gap: 0;
}
.v4-app.v4-collapsed .v4-nav-item-label {
    display: none;
}
.v4-app.v4-collapsed .v4-nav-item::before {
    left: 0;
    height: 20px;
    width: 2px;
    border-radius: 0 2px 2px 0;
}
.v4-nav-item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--v4-text-muted);
    transition: color 0.15s;
}
.v4-nav-item:hover .v4-nav-item-icon {
    color: var(--v4-text-secondary);
}
.v4-nav-item.is-active .v4-nav-item-icon {
    color: var(--v4-brand);
}
.v4-nav-item-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}
.v4-nav-item-label { flex: 1; }

/* ============================================================
   TOPBAR — only over the content area (sidebar is to the left, full height)
   ============================================================ */
.v4-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    grid-row: 1;
    grid-column: 2;
}

.v4-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #FFFFFF;
    border-bottom: 1px solid var(--v4-border-light);
    height: var(--v4-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 20px 0 20px;
    gap: 14px;
    flex-shrink: 0;
}

.v4-topbar-spacer { flex: 1; }

.v4-search {
    position: relative;
    width: 320px;
    max-width: 35%;
}
.v4-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v4-text-muted);
    pointer-events: none;
}
.v4-search-icon svg { width: 16px; height: 16px; }
.v4-search-input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 38px;
    background: var(--v4-surface-alt);
    border: 1px solid transparent;
    border-radius: var(--v4-radius);
    font-family: inherit;
    font-size: 14px;
    color: var(--v4-text);
    transition: all 0.15s;
}
.v4-search-input::placeholder { color: var(--v4-text-muted); }
.v4-search-input:focus {
    outline: none;
    background: white;
    border-color: var(--v4-brand);
    box-shadow: 0 0 0 3px var(--v4-brand-glow);
}

.v4-topbar-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--v4-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.v4-topbar-btn:hover {
    background: var(--v4-surface-alt);
    color: var(--v4-navy);
}
.v4-topbar-btn svg { width: 18px; height: 18px; }
.v4-topbar-btn .v4-dot {
    position: absolute;
    top: 7px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v4-brand);
    border: 2px solid white;
}

.v4-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--v4-navy);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--v4-border);
    padding: 0;
    font-family: inherit;
    outline: none;
}
.v4-avatar:hover {
    box-shadow: 0 0 0 2px var(--v4-border);
}

/* Avatar dropdown menu */
.v4-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.v4-avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--v4-card);
    border: 1px solid var(--v4-border);
    border-radius: 4px;
    box-shadow: 0 12px 28px -8px rgba(14, 39, 73, 0.2);
    padding: 6px;
    z-index: 60;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.v4-avatar-wrap.is-open .v4-avatar-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.v4-avatar-menu-head {
    padding: 10px 12px 10px 12px;
    border-bottom: 1px solid var(--v4-border-light);
    margin-bottom: 4px;
}
.v4-avatar-menu-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--v4-navy);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v4-avatar-menu-email {
    font-size: 11px;
    color: var(--v4-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v4-avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--v4-text);
    text-decoration: none !important;
    border-radius: 3px;
    font-weight: 500;
    transition: background 0.1s;
    cursor: pointer;
}
.v4-avatar-menu-item:hover {
    background: var(--v4-surface);
    color: var(--v4-navy);
}
.v4-avatar-menu-item svg {
    width: 16px;
    height: 16px;
    color: var(--v4-text-muted);
    flex-shrink: 0;
}
.v4-avatar-menu-item.v4-avatar-menu-logout {
    color: var(--v4-red);
}
.v4-avatar-menu-item.v4-avatar-menu-logout:hover {
    background: #fef2f2;
    color: var(--v4-red);
}
.v4-avatar-menu-item.v4-avatar-menu-logout svg { color: var(--v4-red); }
.v4-avatar-menu-divider {
    height: 1px;
    background: var(--v4-border-light);
    margin: 4px 0;
}

/* =========================================================================
   Sidebar footer — logout ICON (no text label) + company name on one row.
   The icon-in-the-corner convention is universal enough that a first-time
   user recognises it as "sign out" without a caption. Hovering the icon
   shows a native tooltip for confirmation.
   ========================================================================= */
.v4-sidebar-head-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
}
.v4-sidebar-logout-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--v4-text-muted);
    text-decoration: none !important;
    transition: background 0.12s, color 0.12s;
}
.v4-sidebar-logout-icon svg,
.v4-sidebar-logout-icon img {
    width: 16px;
    height: 16px;
    display: block;
    transition: opacity 0.12s;
}
.v4-sidebar-logout-icon:hover {
    background: #fef2f2;
}
.v4-sidebar-logout-icon:hover img { opacity: 0.75; }
.v4-sidebar-footer-company {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v4-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
/* Collapsed sidebar: keep the icon visible, hide the company text. */
.v4-app.v4-collapsed .v4-sidebar-head-bottom { justify-content: center; }
.v4-app.v4-collapsed .v4-sidebar-footer-company { display: none; }
.v4-avatar .v4-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--v4-green);
    border: 2px solid white;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.v4-content {
    flex: 1;
    padding: 14px 24px 40px;
    min-width: 0;
    max-width: var(--v4-content-max);
    width: 100%;
}
@media (min-width: 1600px) {
    .v4-content { padding: 18px 32px 52px; }
}

/* =============================================================
   COMPANIES LIST (master/admin landing)
   Keep disabled/missing companies hidden by default (Bootstrap 4
   drops the legacy .hidden rule so we own it here). The search
   input stays active — users rely on it. Clicking a company row
   now lands on the dashboard, not legacy settings.
   ============================================================= */
body.v4-body .setting_section .company.hidden,
body.v4-body .setting_section div.form-group.hidden,
body.v4-body .companys_section .hidden {
    display: none !important;
}
/* When "Show Disabled" toggles them visible, dim them a bit so they're
   obviously different from active companies */
body.v4-body .setting_section .company.missing:not(.hidden) {
    opacity: 0.55;
}

/* Top-alignment normalizer — every page's first element sits flush to the
   top of the content area, the way the Dashboard greeting does. Kills
   stray margin-top from legacy page headers, bootstrap rows, h1/h2, etc. */
body.v4-body .v4-content > *:first-child,
body.v4-body .v4-content > *:first-child > *:first-child,
body.v4-body .v4-content > *:first-child > *:first-child > *:first-child {
    margin-top: 0 !important;
}
body.v4-body .v4-content > .container,
body.v4-body .v4-content > .container-fluid,
body.v4-body .v4-content > .main_container,
body.v4-body .v4-content > .row,
body.v4-body .v4-content > form {
    padding-top: 0 !important;
}

/* ============================================================
   GENERIC TOKEN OVERRIDES FOR LEGACY CONTENT
   When a legacy page (accordion, settings, reports) renders inside
   .v4-content, these pick up the refreshed palette automatically.
   ============================================================ */
/* .setting_section is a semantic wrapper; the visible card is the
   inner .setting_box (on AA/HG/CC/Extension/Settings pages). Keep
   the outer transparent so we don't get double-framing. Pages that
   have no inner card apply their own background via page-specific CSS. */
body.v4-body .setting_section {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 10px !important;
}
body.v4-body .setting_section > .setting_box,
body.v4-body .setting_section > .extension > .setting_box {
    background: var(--v4-card) !important;
    border: 1px solid var(--v4-border-light) !important;
    border-radius: 4px !important;
    box-shadow: var(--v4-shadow-sm) !important;
    overflow: hidden !important;
}
body.v4-body .btn-primary,
body.v4-body .btn.btn-blue,
body.v4-body .btn_primary {
    background: var(--v4-navy) !important;
    border-color: var(--v4-navy) !important;
    border-radius: var(--v4-radius-sm) !important;
    font-weight: 600;
}
body.v4-body .btn-warning {
    background: var(--v4-brand) !important;
    border-color: var(--v4-brand) !important;
    color: white !important;
    border-radius: var(--v4-radius-sm) !important;
    font-weight: 600;
}
body.v4-body .form-control:focus,
body.v4-body select:focus,
body.v4-body input:focus,
body.v4-body textarea:focus {
    border-color: var(--v4-brand) !important;
    box-shadow: 0 0 0 3px var(--v4-brand-glow) !important;
    outline: none;
}
body.v4-body a { transition: color 0.15s; }
body.v4-body a:not(.v4-nav-item):not(.v4-sidebar-company):hover {
    color: var(--v4-brand);
}
body.v4-body [style*="f89939"],
body.v4-body [style*="F89939"] {
    color: var(--v4-brand) !important;
}

/* ============================================================
   MOBILE
   ============================================================ */
.v4-mobile-menu-btn {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: var(--v4-radius-sm);
    background: transparent;
    border: 1px solid var(--v4-border);
    color: var(--v4-navy);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.v4-mobile-menu-btn svg { width: 18px; height: 18px; }
.v4-sidebar-close { display: none; }

@media (max-width: 900px) {
    .v4-body { grid-template-columns: 1fr; }
    .v4-sidebar {
        position: fixed;
        top: var(--v4-topbar-height);
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--v4-shadow-panel);
        z-index: 40;
    }
    .v4-sidebar.is-open { transform: translateX(0); }
    .v4-mobile-menu-btn { display: inline-flex; }
    .v4-search { display: none; }
    .v4-content { padding: 16px 14px 40px; }
    .v4-sidebar-close {
        display: flex;
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--v4-surface-alt);
        border: none;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   LOGIN PAGE BRAND ACCENT
   Scoped to body:not(.v4-body) so it only applies on pages that
   skip the v4 shell (login is the main one). On every other page
   the .setting_section.form_container is the standard edit-page
   card and must NOT get an orange accent bar.
   ============================================================ */
body:not(.v4-body) .form_container .form-control:focus {
    border-color: var(--v4-brand) !important;
    box-shadow: 0 0 0 3px var(--v4-brand-glow) !important;
}

/* Orange accent bar on top of the login card only */
body:not(.v4-body) .setting_section.form_container {
    position: relative;
    overflow: visible;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
body:not(.v4-body) .setting_section.form_container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--v4-brand), var(--v4-brand-dark));
    border-radius: 0 0 4px 4px;
}

/* Login button: keep navy fill but add a brand glow on hover */
body:not(.v4-body) .form_container .btn-save:hover,
body:not(.v4-body) .form_container .btn-save.g-recaptcha:hover {
    box-shadow: 0 6px 18px -6px rgba(14, 39, 73, 0.5), 0 0 0 3px var(--v4-brand-glow) !important;
}

/* ============================================================
   LEGACY CONTENT HARDENING inside .v4-content
   Defensive overrides so pages built for full-width still render
   usably inside the new narrower content area. Applied generically;
   individual pages can still override.
   ============================================================ */

/* Tables — horizontal scroll rather than cramming */
body.v4-body .v4-content .table-responsive {
    overflow-x: auto;
}
body.v4-body .v4-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
body.v4-body .v4-content table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--v4-text-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--v4-border-light);
    background: transparent;
}
body.v4-body .v4-content table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--v4-border-light);
    color: var(--v4-text);
}

/* Setting sections — override the legacy min(90%, 1320px) + 18px radius
   rule in style_override.css so edit-page cards align with the v4-content
   edge (matching the list pages). Outer padding is ZERO so the inline
   44px h5.toggle_header inside is the full collapsed height — matching
   the ~45px list-page row height. When expanded, inner form_section
   provides its own padding. */
body.v4-body .v4-content .setting_section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    border: 1px solid var(--v4-border-light) !important;
    border-radius: var(--v4-radius) !important;
    background: var(--v4-card) !important;
    box-shadow: var(--v4-shadow-sm) !important;
    overflow: hidden !important;
}
body.v4-body .v4-content .setting_section:hover {
    border-color: var(--v4-border) !important;
}
body.v4-body .v4-content .setting_section > .setting_box {
    padding: 0 !important;
}

/* Tighten the collapsed-header row height to match list rows (~44px) */
body.v4-body .v4-content .setting_section h5 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--v4-navy) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
body.v4-body .v4-content .setting_section h5 .toggle_header,
body.v4-body .v4-content .setting_section h5 .header-toggler {
    min-height: 44px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Expanded form_section — give it breathing room so fields don't touch edges */
body.v4-body .v4-content .setting_section .form_section:not(.hidden) {
    padding: 8px 18px 16px !important;
}
body.v4-body .v4-content .setting_section .form_section:not(.hidden) .form-group.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Strip legacy auto horizontal margins from any intermediate wrappers */
body.v4-body .v4-content > div,
body.v4-body .v4-content > section,
body.v4-body .v4-content > form,
body.v4-body .v4-content > aside,
body.v4-body .v4-content #auto_attendant_app,
body.v4-body .v4-content #hunt_group_app,
body.v4-body .v4-content #call_center_app,
body.v4-body .v4-content #extension_app {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}
body.v4-body .v4-content .setting_section h5 {
    margin: 0;
    padding: 14px 0;
}
/* Save / Cancel / Delete button row on edit pages — tighten spacing */
body.v4-body .v4-content .action_buttons {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.v4-body .v4-content .form_container .form_section {
    max-width: 100%;
}

/* Section header togglers — cleaner look with the new tokens */
body.v4-body .v4-content .header-toggler {
    font-weight: 600;
    color: var(--v4-navy);
}
body.v4-body .v4-content .header-toggler:hover {
    color: var(--v4-brand);
}

/* Forms */
body.v4-body .v4-content .form-control:not(.text_to_convert):not(#greeting_select_dropdown):not(.voice_select):not(.tts_language_select):not(.greeting-select-dropdown),
body.v4-body .v4-content input[type="text"]:not(.v4-search-input):not([name="add_new_greeting_input"]),
body.v4-body .v4-content input[type="email"],
body.v4-body .v4-content input[type="password"],
body.v4-body .v4-content input[type="number"],
body.v4-body .v4-content select:not(#greeting_select_dropdown):not(.voice_select):not(.tts_language_select):not(.greeting-select-dropdown):not([name="add_new_greeting_select"]),
body.v4-body .v4-content textarea:not(.text_to_convert) {
    border-radius: var(--v4-radius-sm) !important;
    border: 1px solid var(--v4-border) !important;
}

/* ============================================================
   REPORTS PAGE — strip the Vue header-v3's duplicate logo + nav,
   keep only the slotted reports-search controls inside our topbar
   ============================================================ */

/* The Vue header-v3 renders <div class="container-box"> with a logo,
   nav, and the reports-search in a slot. We hide the logo + nav and
   flatten the container so the search/date/filter controls sit
   naturally inside our new topbar. */
body.v4-body #header_app > .container-box,
body.v4-body #header_app > .container-box > .header,
body.v4-body #header_app .navbar,
body.v4-body #header_app .navbar-light {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex;
    align-items: center;
    flex: 1;
}

/* Duplicate brand logo from header-v3 */
body.v4-body #header_app .reports-navbar-brand,
body.v4-body #header_app .navbar-brand {
    display: none !important;
}

/* Duplicate hamburger toggle from header-v3 */
body.v4-body #header_app .navbar-toggler {
    display: none !important;
}

/* Duplicate side-nav links + company panel from header-v3 */
body.v4-body #header_app .navbar-collapse,
body.v4-body #header_app #navbarSupportedContent {
    display: none !important;
}

/* Keep the slotted reports-search controls visible and spaced */
body.v4-body #header_app > .container-box > .header > .navbar > *:not(.navbar-brand):not(.navbar-toggler):not(.navbar-collapse) {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Reports page: the topbar's own search/filter placeholder is redundant
   when the Vue component already provides its own; hide ours */
body.v4-body[id="reports"] .v4-topbar > .v4-search {
    display: none;
}

/* Reports page — vertical rhythm.
   ------------------------------------------------------------------
   Previously tried margin-based fixes. Kept failing because the PHP
   template renders dozens of HTML comments + whitespace text nodes
   between the major sections, and each of those contributes ~1-2px
   of ghost height when the parent is display: block. Margin-collapsing
   across those phantom text nodes also behaves unpredictably.
   ------------------------------------------------------------------
   Real fix: switch the wrapper to display: flex. Text nodes / HTML
   comments become anonymous flex items with zero height when they
   contain only whitespace. We can then control the gap between
   children exactly with `row-gap`.
   ------------------------------------------------------------------
   Target: very tight spacing the user asked for — no empty gap around
   the icon bar. 0 between everything is too tight (live-bar touches
   tile-bar which touches icons which touch logs), so use a uniform
   6px row-gap: small enough to feel tight, big enough to read clean.
   Live-bar gets an extra margin-bottom to give 12px before the tiles
   (breathing room into the content). */
body.v4-body[id="reports"] .v4-content > div:has(> .call_stats),
body.v4-body[id="reports"] .v4-content > div:has(> .call-logs-section) {
    display: flex !important;
    flex-direction: column !important;
    /* Zero wrapper gap — the icon buttons' OWN 1px padding is what provides
       the visible 1px between the SVG icons and the tile/log edges. Earlier
       we were double-counting (row-gap 1 + button padding 1 = 2px visible). */
    row-gap: 0 !important;
}
/* Zero all inter-section margins so only live-bar's margin-bottom controls
   the gap between live bar and the tiles. */
body.v4-body[id="reports"] .v4-content .live-bar-section,
body.v4-body[id="reports"] .v4-content .call_stats,
body.v4-body[id="reports"] .v4-content .call_stats + .container-box,
body.v4-body[id="reports"] .v4-content .call-logs-section {
    margin: 0 !important;
}
/* Legacy reports.css puts margin-bottom: 10px on .stats-row. That creates
   10px of dead space INSIDE .call_stats between the visible stat-card
   bottom and the section's outer edge. With our row-gap: 0, that phantom
   10px was the entire "wait it's more than 1px" issue. Zero it. */
body.v4-body[id="reports"] .v4-content .call_stats .stats-row {
    margin-bottom: 0 !important;
}
/* .call_stats section also has padding-top: 18px, which doubles with the
   live-bar margin-bottom (18) to produce a 36px visible gap from live bar
   to the stat card top. Kill it. Needs the #reports id selector to beat
   reports.css's `body#reports .call_stats { padding-top: 18px !important }`
   which has higher specificity than a pure class chain. */
body#reports.v4-body .v4-content .call_stats,
body.v4-body#reports .v4-content .call_stats {
    padding-top: 0 !important;
}
/* Same for the live bar: reports.css blanket-sets padding-top: 18 on both
   .live-bar-section AND .call_stats. We want live-bar to keep its internal
   padding (it's a stand-alone card), so no change needed there — only the
   stats section's pad-top is the problem. */
/* The call log table opens with a .day_spacer row that's ~23px tall of
   completely empty space — useful between distinct day groups further down,
   but an orphan before the first day of rows. Collapse the FIRST spacer
   only so the visible icon bottom sits 1px above the first real call row. */
body.v4-body[id="reports"] .v4-content .call-logs-section tbody tr.day_spacer:first-child {
    display: none !important;
}
/* Formula (user's ask): live-bar → tiles gap = icon_height + 2.
   Measured live: the visible SVG icons are 16px, each icon button has 1px
   padding around the SVG, so the icon BAR renders at 18px. Using the
   VISIBLE icon size (16), live → tiles = 16 + 1 + 1 = 18. */
body.v4-body[id="reports"] .v4-content .live-bar-section {
    margin-bottom: 18px !important;
}

/* Reports — expanded call-journey panel: kill the horizontal scroll on the
   segments table wrapper.

   Legacy reports.css defines this default:

     .segments_table_wrapper {
         width: 70%;
         margin-left: 150px;
         padding-left: 10px;
         border-left: 1px solid #e3e5e6;
     }

   Inside the v4 shell that means the expanded-row panel is a full
   ~160px narrower than its container AND pushed 150px to the right —
   so when a segment has an audio player (natural width ~264px) the
   segments table's content can't fit inside the wrapper and a
   horizontal scrollbar pops up on the row, *exactly* the "you have
   that scrolling it shouldn't be there" symptom from the screenshots.

   The legacy 150px margin is too wide for the v4 shell (pushed content
   off-screen), but the journey should still be visibly indented — the
   expanded segments sit "inside" their parent call row as a nested
   view, so a small left indent reads as the journey stepping inward.
   40px gives that visual cue without eating into the audio player's
   natural width.

   Also: the .table-responsive class drops `overflow-x: auto` on the
   wrapper. Per the CSS overflow spec, when EITHER axis is non-visible
   the other axis' `visible` computes to `auto` — so even with
   `overflow-y: visible !important`, the browser was still painting
   a native vertical scrollbar (the "up arrow / thumb with dots /
   down arrow" pattern) because overflow-x stayed `auto`. The only
   way to guarantee zero scrollbars is to set BOTH axes to the same
   non-auto value. Use `overflow: hidden` — scrollWidth was measured
   equal to clientWidth on every wrapper (no real horizontal content
   overflow in practice), and the parent `.segments_table_container`
   td already has `overflow: hidden` so nothing bleeds into adjacent
   rows either way. Clean, no scrollbars, no artifacts. */
body.v4-body[id="reports"] .v4-content .segments_table_wrapper {
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    margin-left: 40px !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    /* Drop the legacy 1px left border (`#e3e5e6`) — with the 40px
       indent + audio player on the right, that border falls right
       on top of the segment-icon column (measured: border at x=294,
       icons at x=291), visibly cutting a faint vertical line
       through every icon. The indent alone already separates the
       expanded segment journey from its parent row. */
    border-left: 0 !important;
}
body.v4-body[id="reports"] .v4-content .segments_table_wrapper > table,
body.v4-body[id="reports"] .v4-content .segments_table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* Reports — kill every source of stray horizontal scroll.
   ------------------------------------------------------------------
   Legacy reports.css has three width traps that bite inside the
   v4 shell (where the sidebar already takes 210px):

     (1) body { min-width: 712px }  — forces the viewport to never
         be narrower than 712px, which creates a horizontal scrollbar
         on smaller or half-maximized windows.
     (2) .segments_table_wrapper.raw_call_section { width: 89vw }  —
         89vw is relative to the VIEWPORT, not the content column, so
         the expanded-call panel always runs 210px wider than the
         content container on desktop, producing both a horizontal
         scrollbar AND a visible slice past the right edge where the
         row icons live (the "chops into the icons" symptom).
     (3) .table-responsive wrapping .call_table  — Bootstrap adds
         overflow-x: auto by default, which surfaces a second
         horizontal scrollbar whenever any inner cell exceeds the
         wrapper (e.g. the Ext 112 segment row with a wide audio
         player).

   Scoped overrides — only for the v4 reports page so we don't touch
   the legacy /reports_v2 path. */
body.v4-body[id="reports"] {
    min-width: 0 !important;
}
body.v4-body[id="reports"] .v4-content .segments_table_wrapper.raw_call_section {
    width: 100% !important;
    max-width: 100% !important;
}
/* The previous pass used `overflow-x: clip` here, which did kill the
   horizontal scrollbar — but the side effect was that the rightmost
   cells (the pin / notes / permalink icons in .last_cell) got visually
   chopped off at the wrapper's right edge. The real root cause of the
   overflow is inside the table itself, not in the wrapper:

       reports.css line 55:  .call_table td { white-space: nowrap; }

   That `nowrap` forces the segments-summary column (td rendered by
   call_report_section.component.js with inline `style="width:100px;"`)
   to expand to fit the full unwrapped "(H)201 (A)903 (A)901 ..." list,
   which on busy extensions balloons that cell to 200+px and pushes
   last_cell off the right edge. Long remote_name values do the same.

   Fix the root cause instead of clipping the symptom: let the two
   variable-length columns wrap so the inline 100px / our 110px
   max-width actually kick in, and tighten the cell padding a touch
   so the table comfortably fits inside the v4 content column on
   normal desktop widths. Keep Bootstrap's overflow-x: auto default
   as a graceful fallback for very narrow windows. */
body.v4-body[id="reports"] .v4-content .table-responsive.call_table_wrapper {
    overflow-x: auto;
    overflow-y: visible;
}
body.v4-body[id="reports"] .v4-content .call_table.outer-table {
    max-width: 100% !important;
    table-layout: auto;
}
/* Trim default 11px 12px cell padding → 11px 6px so all 10 cells give
   back ~120px of horizontal real estate to the table's min-content. */
body.v4-body[id="reports"] .v4-content .call_table.outer-table tr.call_row > td {
    padding: 11px 6px !important;
}
/* Segments-summary cell — identified by the Vue component's inline
   `style="width: 100px;"`. The Vue/JS side already truncates this
   list to 4 items (see formatSegments() in reports.js — appends
   " ..." past 4), so we know the worst-case string is roughly
   `(X)NNN  (X)NNN  (X)NNN  (X)NNN  ...` ≈ 35-40 chars. Give the
   cell enough width to fit that on ONE line, then let overflow:
   hidden + text-overflow: ellipsis handle anything longer (e.g.
   Remote segments without a number). The previous rule forced
   word-break: break-word inside max-width: 100px, which was what
   was fracturing "(H)201(A)903" onto a second line. */
body.v4-body[id="reports"] .v4-content .call_table.outer-table tr.call_row > td[style*="width: 100px"] {
    white-space: nowrap !important;
    word-break: normal !important;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Remote-name cell (3rd td in the row: after toggle + direction icons).
   Long names like "Perlstein Salamon & Assoc." inflate the row the
   same way the segments list does. */
body.v4-body[id="reports"] .v4-content .call_table.outer-table tr.call_row > td:nth-child(3) {
    white-space: normal !important;
    word-break: break-word;
    max-width: 110px;
}
/* Keep the icons cell rigidly right-aligned and never wrapped — three
   little icons shouldn't stack vertically when the column happens to
   get a few pixels of extra slack. */
body.v4-body[id="reports"] .v4-content .call_table.outer-table tr.call_row > td.last_cell {
    white-space: nowrap !important;
    padding: 11px 8px !important;
}
/* Decorative timeline line sits on the FIRST cell of each segment row
   (position: absolute; top: 26px; height: 47px). On rows where the
   segments table doesn't stretch the full wrapper width, the line sticks
   out 1–2px past the right edge of the visible content because the
   container's overflow was visible. Containing it here removes the
   stray line artifact the user was seeing. */
body.v4-body[id="reports"] .v4-content .segments_table_container {
    overflow: hidden !important;
}
/* Hide the vertical connector line rendered via :before on segment
   rows (`.segment_cell.first.line` — legacy reports.css line ~33).
   It was rendering as a faint 2px × 47px bar between the segment
   icons; the icons themselves already communicate the journey, and
   the connector line reads as visual noise at the v4 shell's density.
   Using content: none disables the pseudo-element entirely. */
body.v4-body[id="reports"] .v4-content .segments_table .segment_cell.first.line:before,
body.v4-body[id="reports"] .v4-content .segments_table .segment_cell.first.line::before {
    content: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* If any legacy page wraps content in .container-box, flatten it */
body.v4-body .v4-content .container-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* Heavy h1/h2 inside legacy pages (but not inside v4-specific surfaces
   that set their own color, like the navy AI Insight panel). */
body.v4-body .v4-content h1,
body.v4-body .v4-content h2 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--v4-navy);
}
body.v4-body .v4-content .v4-insight h1,
body.v4-body .v4-content .v4-insight h2 {
    color: #ffffff;
}

/* ============================================================
   V4 LIST PAGE — shared layout for Extensions, Auto Attendants,
   Hunt Groups, Call Centers, Phones, Integrations, Schedules, etc.
   ============================================================ */
.v4-list {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.v4-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.v4-list-title {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.v4-list-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--v4-brand-soft);
    color: var(--v4-brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.v4-list-title-icon svg { width: 20px; height: 20px; }
.v4-list-title-text h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--v4-navy);
    letter-spacing: -0.4px;
    line-height: 1.15;
}
.v4-list-title-text .v4-list-count {
    font-size: 13px;
    color: var(--v4-text-muted);
    font-weight: 500;
    margin-top: 2px;
}
.v4-list-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--v4-brand);
    color: white !important;
    border: none;
    border-radius: var(--v4-radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 8px 20px -8px rgba(240, 160, 48, 0.45);
    transition: all 0.15s;
    white-space: nowrap;
}
.v4-list-cta:hover {
    background: var(--v4-brand-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(240, 160, 48, 0.55);
    color: white !important;
}
.v4-list-cta svg { width: 16px; height: 16px; }

.v4-list-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--v4-card);
    border: 1px solid var(--v4-border-light);
    border-radius: var(--v4-radius) var(--v4-radius) 0 0;
    border-bottom: none;
}
.v4-list-filter {
    position: relative;
    flex: 1;
    max-width: 340px;
}
.v4-list-filter svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v4-text-muted);
    width: 15px;
    height: 15px;
    pointer-events: none;
}
.v4-list-filter input {
    width: 100%;
    height: 36px;
    padding: 0 14px 0 36px;
    background: var(--v4-surface-alt);
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--v4-text);
    outline: none;
    transition: all 0.15s;
}
.v4-list-filter input::placeholder { color: var(--v4-text-muted); }
.v4-list-filter input:focus {
    background: white;
    border-color: var(--v4-brand);
    box-shadow: 0 0 0 3px var(--v4-brand-glow);
}
.v4-list-toolbar-spacer { flex: 1; }
.v4-list-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--v4-surface-alt);
    color: var(--v4-text-secondary);
    border: 1px solid var(--v4-border-light);
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.v4-list-export:hover {
    background: var(--v4-brand-soft);
    color: var(--v4-brand-dark);
    border-color: var(--v4-brand);
    text-decoration: none;
}
.v4-list-export svg { width: 14px; height: 14px; flex-shrink: 0; }
.v4-list-toolbar-meta {
    font-size: 12px;
    color: var(--v4-text-muted);
    padding-right: 6px;
}

.v4-list-table-wrap {
    background: var(--v4-card);
    border: 1px solid var(--v4-border-light);
    border-radius: 0 0 var(--v4-radius) var(--v4-radius);
    overflow: hidden;
    box-shadow: var(--v4-shadow-sm);
}
.v4-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.v4-list-table th {
    text-align: left;
    padding: 12px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--v4-text-muted);
    border-bottom: 1px solid var(--v4-border-light);
    background: var(--v4-surface);
    white-space: nowrap;
}
.v4-list-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--v4-border-light);
    color: var(--v4-text);
    vertical-align: middle;
}
.v4-list-table tr:last-child td { border-bottom: none; }
.v4-list-table tbody tr {
    transition: background 0.1s;
    cursor: pointer;
}
.v4-list-table tbody tr:hover td { background: var(--v4-surface); }

.v4-list-primary {
    display: flex;
    align-items: center;
    gap: 12px;
}
.v4-list-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--v4-surface-alt);
    color: var(--v4-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.v4-list-avatar.v4-avatar-brand {
    background: var(--v4-brand-soft);
    color: var(--v4-brand-dark);
}
.v4-list-avatar.v4-avatar-navy {
    background: var(--v4-navy);
    color: white;
}
.v4-list-primary-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.v4-list-primary-title {
    font-weight: 600;
    color: var(--v4-navy);
    line-height: 1.2;
}
.v4-list-primary-sub {
    font-size: 12px;
    color: var(--v4-text-muted);
    margin-top: 2px;
}
.v4-list-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--v4-surface-alt);
    color: var(--v4-text-secondary);
    white-space: nowrap;
}
.v4-list-badge.v4-badge-green {
    background: var(--v4-green-soft);
    color: var(--v4-green);
}
.v4-list-badge.v4-badge-blue {
    background: var(--v4-blue-soft);
    color: var(--v4-blue);
}
.v4-list-badge.v4-badge-amber {
    background: var(--v4-amber-soft);
    color: #b45309;
}
.v4-list-badge.v4-badge-red {
    background: var(--v4-red-soft);
    color: var(--v4-red);
}
.v4-list-badge.v4-badge-brand {
    background: var(--v4-brand-soft);
    color: var(--v4-brand-dark);
}

.v4-list-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    opacity: 0.7;
    transition: opacity 0.1s;
}
.v4-list-table tr:hover .v4-list-actions { opacity: 1; }
.v4-list-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--v4-text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none !important;
}
.v4-list-action:hover {
    background: var(--v4-surface-alt);
    color: var(--v4-brand-dark);
}
.v4-list-action svg { width: 15px; height: 15px; }

.v4-list-empty {
    padding: 80px 40px;
    text-align: center;
    background: var(--v4-card);
    border: 1px solid var(--v4-border-light);
    border-radius: var(--v4-radius);
    box-shadow: var(--v4-shadow-sm);
    color: var(--v4-text-muted);
}
.v4-list-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--v4-surface-alt);
    color: var(--v4-text-muted);
    margin-bottom: 16px;
}
.v4-list-empty-icon svg { width: 24px; height: 24px; }
.v4-list-empty h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--v4-navy);
}
.v4-list-empty p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    max-width: 420px;
    display: inline-block;
}
.v4-list-empty .v4-list-cta { margin-top: 18px; }

/* Row hidden by filter */
.v4-list-table tr.v4-hidden { display: none; }