:root {
    /* Primary */
    --primary:          #19174c;
    --primary-rgb:      25, 23, 76;
    --primary-light:    rgba(25, 23, 76, 0.12);
    --primary-mid:      rgba(25, 23, 76, 0.75);
    --primary-dark:     rgba(5, 3, 56, 1);

    /* Secondary */
    --secondary:        #F8A01D;
    --secondary-rgb:    248, 160, 29;
    --secondary-light:  rgba(248, 160, 29, 0.15);
    --secondary-dark:   rgba(228, 140, 9, 1);

    /* Typography */
    --font-family:      'Segoe UI', system-ui, sans-serif;

    /* Sidebar */
    --sidebar-bg:       var(--primary);
    --sidebar-text:     rgba(255,255,255,0.65);
    --sidebar-active:   var(--secondary);
    --sidebar-active-text: var(--primary);
    --sidebar-hover:    rgba(255,255,255,0.08);
    --sidebar-border:   rgba(255,255,255,0.08);

    /* Topbar */
    --topbar-bg:        #ffffff;
    --topbar-border:    #E8EAF0;

    /* Body */
    --body-bg:          #F4F6FA;
    --card-bg:          #ffffff;
    --card-border:      #E8EAF0;

    /* Text */
    --text-primary:     #1A2332;
    --text-secondary:   #5A6A7E;
    --text-muted:       #8A9BB0;

    /* Status colors */
    --danger:           #DC2626;
    --warning:          #D97706;
    --success:          #059669;
    --info:             #2563EB;
    --purple:           #7C3AED;

    /* Buttons */
    --btn-primary-bg:   var(--secondary);
    --btn-primary-text: var(--primary);
    --btn-secondary-bg: var(--primary);
    --btn-secondary-text: #ffffff;
}

/* Global font */
body, input, button, select, textarea {
    font-family: var(--font-family) !important;
}

/* Sidebar active state uses secondary color */
.nav-item.active {
    background: var(--secondary) !important;
    color: var(--primary) !important;
}

/* Primary buttons */
.btn-viscap {
    background: var(--secondary);
    color: var(--primary);
    border: none;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: var(--vc-radius-full);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    transition: transform var(--vc-duration-fast) var(--vc-ease-spring), background var(--vc-duration-fast) ease;
}
.btn-viscap:hover {
    background: var(--secondary-dark);
    color: var(--primary);
    transform: translateY(-1px);
}
.btn-viscap:active { transform: translateY(0) scale(0.97); }
.btn-viscap:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Links */
a.viscap-link { color: var(--secondary); }
a.viscap-link:hover { color: var(--secondary-dark); }

:root {
    /* Spacing scale (as used by the login.php redesign) */
    --vc-space-xs:  0.5rem;
    --vc-space-sm:  0.75rem;
    --vc-space-md:  1.05rem;
    --vc-space-lg:  1.75rem;
    --vc-space-xl:  2.25rem;
    --vc-space-2xl: 2.75rem;
    --vc-space-3xl: 3.25rem;

    /* Border-radius scale */
    --vc-radius-sm:   8px;
    --vc-radius-md:   12px;
    --vc-radius-lg:   20px;
    --vc-radius-xl:   26px;
    --vc-radius-full: 999px;

    /* Motion */
    --vc-ease-spring:    cubic-bezier(0.32, 0.72, 0, 1);
    --vc-duration-fast:  180ms;
    --vc-duration-base:  220ms;
    --vc-duration-slow:  260ms;
    --vc-duration-shell: 640ms;

    /* Shadows / elevation */
    --vc-shadow-ambient:        0 44px 90px -24px rgba(0,0,0,0.5);
    --vc-shadow-glow-secondary: 0 14px 28px -10px rgba(var(--secondary-rgb), 0.5);
    --vc-shadow-focus-ring:     0 0 0 3px rgba(var(--secondary-rgb), 0.18);
    --vc-shadow-hairline-top:   inset 0 1px 0 rgba(255,255,255,0.06);
    --vc-shadow-hairline-in:    inset 0 1px 1px rgba(255,255,255,0.05);

    /* Typography scale (on-dark auth surfaces) */
    --vc-fs-heading:     25px;
    --vc-fs-tagline:     1.7rem;
    --vc-fs-body:        13.5px;
    --vc-fs-label:       11px;
    --vc-fw-semibold:    600;
    --vc-fw-bold:        650;
    --vc-fw-heavy:       700;
    --vc-tracking-tight: -0.015em;
    --vc-tracking-label: 0.06em;

    /* On-dark surface text (white-on-navy opacity ramp, strongest to faintest) */
    --vc-ondark-heading:     #ffffff;
    --vc-ondark-text-1:      rgba(255,255,255,0.90);
    --vc-ondark-text-2:      rgba(255,255,255,0.58);
    --vc-ondark-text-3:      rgba(255,255,255,0.55);
    --vc-ondark-text-4:      rgba(255,255,255,0.48);
    --vc-ondark-text-5:      rgba(255,255,255,0.40);
    --vc-ondark-text-6:      rgba(255,255,255,0.32);
    --vc-ondark-text-7:      rgba(255,255,255,0.28);
    --vc-ondark-placeholder: rgba(255,255,255,0.22);

    /* On-dark surfaces + borders (glass panel backgrounds) */
    --vc-ondark-surface-1: rgba(255,255,255,0.015);
    --vc-ondark-surface-2: rgba(255,255,255,0.03);
    --vc-ondark-surface-3: rgba(255,255,255,0.045);
    --vc-ondark-surface-4: rgba(255,255,255,0.05);
    --vc-ondark-surface-5: rgba(255,255,255,0.055);
    --vc-ondark-surface-6: rgba(255,255,255,0.06);
    --vc-ondark-surface-7: rgba(255,255,255,0.08);
    --vc-ondark-border-1:  rgba(255,255,255,0.08);
    --vc-ondark-border-2:  rgba(255,255,255,0.09);
    --vc-ondark-border-3:  rgba(255,255,255,0.10);
    --vc-ondark-border-4:  rgba(255,255,255,0.15);

    /* Timeline event colors -- categorical scheme for request-detail.php's
       activity timeline (10 distinct event types). Centralized here so the
       hex values live in one place instead of scattered in page PHP. */
    --vc-tl-indigo: #6366F1;
    --vc-tl-blue:   #3B82F6;
    --vc-tl-purple: #8B5CF6;
    --vc-tl-green:  #10B981;
    --vc-tl-red:    #EF4444;
    --vc-tl-sky:    #0EA5E9;
    --vc-tl-amber:  #F59E0B;
    --vc-tl-gray:   #9CA3AF;
}

/* Visible keyboard focus everywhere -- was login.php-only, now global (Session 62) */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Respect reduced-motion preference everywhere, not just pages that remember to guard it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   .vc-auth-surface -- opt-in scope for the dark/glass 'auth
   family' look (login.php today; auditor-login.php, activate.php,
   forgot-password.php, 404.php are candidates to adopt it later).
   Everything below is scoped under this class so it cannot affect
   any page that doesn't explicitly opt in.
   ------------------------------------------------------------ */
.vc-auth-surface {
    padding: 7px;
    border-radius: var(--vc-radius-xl);
    background: var(--vc-ondark-surface-3);
    border: 1px solid var(--vc-ondark-border-2);
    box-shadow: var(--vc-shadow-ambient), var(--vc-shadow-hairline-top);
    animation: vc-shell-in var(--vc-duration-shell) var(--vc-ease-spring) both;
}
@keyframes vc-shell-in {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vc-alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.vc-auth-surface .form-control {
    background: var(--vc-ondark-surface-5);
    border: 1px solid var(--vc-ondark-border-3);
    border-radius: var(--vc-radius-md);
    color: #fff;
    font-size: 14.5px;
    padding: 0.72rem 1.05rem;
    transition: border-color var(--vc-duration-base) var(--vc-ease-spring),
                background var(--vc-duration-base) var(--vc-ease-spring),
                box-shadow var(--vc-duration-base) var(--vc-ease-spring);
}
.vc-auth-surface .form-control:focus {
    background: var(--vc-ondark-surface-7);
    border-color: var(--secondary);
    box-shadow: var(--vc-shadow-focus-ring);
    color: #fff;
    outline: none;
}
.vc-auth-surface .form-control::placeholder { color: var(--vc-ondark-placeholder); }
.vc-auth-surface .form-heading { font-size: var(--vc-fs-heading); font-weight: var(--vc-fw-bold); letter-spacing: var(--vc-tracking-tight); color: var(--vc-ondark-heading); margin: 0 0 7px; }
.vc-auth-surface .form-sub { font-size: var(--vc-fs-body); color: var(--vc-ondark-text-4); margin: 0 0 var(--vc-space-xl); }
.vc-auth-surface .form-hint { font-size: 11.5px; color: var(--vc-ondark-text-6); margin-top: 5px; }
.vc-auth-surface .form-label {
    display: block;
    font-size: var(--vc-fs-label);
    font-weight: var(--vc-fw-semibold);
    letter-spacing: var(--vc-tracking-label);
    text-transform: uppercase;
    color: var(--vc-ondark-text-3);
    margin-bottom: 7px;
}
.vc-auth-surface .pw-wrap { position: relative; }
.vc-auth-surface .pw-wrap .form-control { padding-right: 2.9rem; }
.vc-auth-surface .pw-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--vc-ondark-text-6);
    cursor: pointer; padding: 4px; font-size: 15px;
    border-radius: 6px; transition: color var(--vc-duration-fast) ease;
}
.vc-auth-surface .pw-toggle:hover { color: var(--secondary); }
.vc-auth-surface .alert-error,
.vc-auth-surface .alert-info {
    border-radius: 10px;
    font-size: var(--vc-fs-body);
    padding: 0.7rem 0.95rem;
    margin-bottom: 1.4rem;
    display: flex; align-items: flex-start; gap: 9px;
    animation: vc-alert-in var(--vc-duration-slow) var(--vc-ease-spring) both;
}
.vc-auth-surface .alert-error {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
    color: color-mix(in srgb, var(--danger) 65%, white 35%);
}
.vc-auth-surface .alert-info {
    background: var(--vc-ondark-surface-6);
    border: 1px solid var(--vc-ondark-border-4);
    color: var(--secondary);
}
.vc-auth-surface .alert-error i, .vc-auth-surface .alert-info i { flex-shrink: 0; margin-top: 1px; }
/* Standalone centered logo, for single-panel pages with no .logo-wrap header row (activate.php, forgot-password.php, 404.php, and the OTP/reset-verify pages -- 6 of 7 pages already used this exact size) */
.vc-auth-surface .form-logo { display: block; margin: 0 auto 24px; max-height: 56px; width: auto; }
/* 6-digit OTP entry -- modifier on top of .form-control */
.vc-auth-surface .otp-input { font-size: 24px; letter-spacing: 8px; text-align: center; font-weight: 700; }
/* Small uppercase label with a top rule, separating sections within one form (e.g. OTP from Set Password) */
.vc-auth-surface .section-divider {
    font-size: var(--vc-fs-label); font-weight: var(--vc-fw-semibold); letter-spacing: 0.5px;
    text-transform: uppercase; color: rgba(255,255,255,0.3);
    margin: 1.5rem 0 1rem; padding-top: 1rem;
    border-top: 1px solid var(--vc-ondark-border-1);
}
.vc-auth-surface .btn-login {
    width: 100%; background: var(--secondary);
    border: none; border-radius: var(--vc-radius-full);
    color: var(--primary); font-size: 14.5px;
    font-weight: var(--vc-fw-heavy); letter-spacing: 0.01em;
    padding: 0.8rem 1.4rem;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    cursor: pointer;
    transition: transform var(--vc-duration-slow) var(--vc-ease-spring),
                box-shadow var(--vc-duration-slow) var(--vc-ease-spring),
                opacity var(--vc-duration-fast) ease;
    margin-top: 0.75rem;
}
.vc-auth-surface .btn-login:hover {
    transform: translateY(-1px);
    box-shadow: var(--vc-shadow-glow-secondary);
}
.vc-auth-surface .btn-login:active { transform: translateY(0) scale(0.98); }
.vc-auth-surface .btn-login-icon {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.14);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0;
}
.vc-auth-surface .form-links { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
.vc-auth-surface .form-links a { color: var(--vc-ondark-text-5); font-size: 12.5px; text-decoration: none; transition: color var(--vc-duration-fast) ease; }
.vc-auth-surface .form-links a:hover { color: var(--secondary); }
.vc-auth-surface .divider { border: none; border-top: 1px solid var(--vc-ondark-border-1); margin: 2rem 0; }
.vc-auth-surface .register-cta { text-align: center; font-size: 13px; color: var(--vc-ondark-text-5); margin: 0; }
.vc-auth-surface .register-cta + .register-cta { margin-top: 10px; }
.vc-auth-surface .register-cta a { color: var(--vc-ondark-text-3); text-decoration: none; font-weight: 500; transition: color var(--vc-duration-fast) ease; }
.vc-auth-surface .register-cta a:hover { color: var(--secondary); }
.vc-auth-surface .version-indicator {
    font-size: var(--vc-fs-label); color: var(--vc-ondark-text-7);
    text-align: center; margin-top: auto; padding-top: 18px;
}
.vc-auth-surface .lang-switcher { display: flex; justify-content: center; gap: 10px; margin-bottom: var(--vc-space-lg); }
.vc-auth-surface .lang-btn {
    font-size: var(--vc-fs-label); font-weight: var(--vc-fw-semibold); letter-spacing: 0.03em;
    color: var(--vc-ondark-text-5);
    text-decoration: none; padding: 4px 10px;
    border-radius: var(--vc-radius-full); border: 1px solid transparent;
    transition: all var(--vc-duration-fast) ease;
}
.vc-auth-surface .lang-btn:hover, .vc-auth-surface .lang-btn.active {
    color: var(--secondary);
    border-color: var(--vc-ondark-border-4);
    background: var(--vc-ondark-surface-4);
}
.vc-auth-surface .back-link { text-align: center; font-size: 13px; color: var(--vc-ondark-text-5); margin: 0; }
.vc-auth-surface .back-link + .back-link { margin-top: 10px; }
.vc-auth-surface .back-link a { color: var(--vc-ondark-text-3); text-decoration: none; font-weight: 500; transition: color var(--vc-duration-fast) ease; }
.vc-auth-surface .back-link a:hover { color: var(--secondary); }
.vc-auth-surface .brand-logo { max-height: 46px; width: auto; margin-bottom: 18px; }
.vc-auth-surface .logo-wrap { display: flex; align-items: center; gap: 12px; }

/* ------------------------------------------------------------
   .vc-auth-bg -- opt-in scope for the full-bleed dark auth page
   background (gradient + grain). Added to <body>, independently
   of .vc-auth-surface (which scopes the card itself). Second
   consumer confirmed this generalizes cleanly (Session 63,
   auditor-login.php) -- promoted here instead of being copied a
   second time.
   ------------------------------------------------------------ */
.vc-auth-bg {
    margin: 0; min-height: 100dvh;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(var(--secondary-rgb), 0.09), transparent 60%),
        radial-gradient(900px 780px at 105% 105%, rgba(var(--primary-rgb), 0.5), transparent 55%),
        var(--primary);
    display: flex; align-items: center;
    justify-content: center; padding: 1.75rem;
    position: relative; overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.vc-auth-bg::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.035; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 380px) {
    .vc-auth-bg { padding: 1rem; }
}

/* ------------------------------------------------------------
   Light data-surface component layer (Session -- extracted from
   the dashboard.php redesign, mirroring how .vc-auth-surface was
   extracted from login.php). Unlike the auth layer, these classes
   are NOT wrapped in an opt-in scope container -- they're small,
   uniquely-named primitives (vc-stat-card, vc-panel, vc-row, tint
   helpers, badge refinement) meant to be dropped into any light
   staff/app page independently. Reuse these on future staff-page
   redesigns instead of reinventing stat tiles / list panels again.
   ------------------------------------------------------------ */
@keyframes vc-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Semantic tint helpers -- color-mix against the existing status vars
   so icon/avatar backgrounds never need hardcoded hex (Mandatory Rule 2). */
.vc-tint-danger  { background: color-mix(in srgb, var(--danger) 14%, white);  color: var(--danger); }
.vc-tint-warning { background: color-mix(in srgb, var(--warning) 14%, white); color: var(--warning); }
.vc-tint-info    { background: color-mix(in srgb, var(--info) 14%, white);    color: var(--info); }
.vc-tint-purple  { background: color-mix(in srgb, var(--purple) 14%, white);  color: var(--purple); }
.vc-tint-success { background: color-mix(in srgb, var(--success) 14%, white); color: var(--success); }
.vc-tint-gold    { background: var(--secondary-light); color: var(--secondary); }

/* Stat tile */
.vc-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--vc-radius-md);
    padding: var(--vc-space-md) var(--vc-space-md);
    display: flex; align-items: center; gap: var(--vc-space-sm);
    box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.04);
    transition: transform var(--vc-duration-base) var(--vc-ease-spring),
                box-shadow var(--vc-duration-base) var(--vc-ease-spring),
                border-color var(--vc-duration-base) var(--vc-ease-spring);
    animation: vc-fade-up var(--vc-duration-slow) var(--vc-ease-spring) both;
}
.vc-stat-row > div:nth-child(1) .vc-stat-card { animation-delay: 0ms; }
.vc-stat-row > div:nth-child(2) .vc-stat-card { animation-delay: 30ms; }
.vc-stat-row > div:nth-child(3) .vc-stat-card { animation-delay: 60ms; }
.vc-stat-row > div:nth-child(4) .vc-stat-card { animation-delay: 90ms; }
.vc-stat-row > div:nth-child(5) .vc-stat-card { animation-delay: 120ms; }
.vc-stat-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--secondary) 35%, var(--card-border));
    box-shadow: 0 14px 28px -18px rgba(var(--primary-rgb), 0.35);
}
.vc-stat-icon {
    width: 44px; height: 44px; border-radius: var(--vc-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
.vc-stat-num   { font-size: 27px; font-weight: var(--vc-fw-heavy); color: var(--text-primary); line-height: 1; letter-spacing: var(--vc-tracking-tight); font-variant-numeric: tabular-nums; }
.vc-stat-label { font-size: 11.5px; font-weight: var(--vc-fw-semibold); color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: var(--vc-tracking-label); }

/* Panel (list card with header) */
.vc-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--vc-radius-md);
    overflow: hidden; margin-bottom: var(--vc-space-lg);
    box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.03);
    animation: vc-fade-up var(--vc-duration-slow) var(--vc-ease-spring) both;
}
.vc-panel-header {
    padding: var(--vc-space-sm) var(--vc-space-lg);
    border-bottom: 1px solid var(--card-border);
    display: flex; align-items: center; justify-content: space-between;
}
.vc-panel-title {
    font-size: 13.5px; font-weight: var(--vc-fw-bold); color: var(--text-primary);
    display: flex; align-items: center; gap: var(--vc-space-xs); margin: 0;
}
.vc-panel-icon {
    width: 26px; height: 26px; border-radius: var(--vc-radius-sm);
    display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.vc-panel-count {
    font-size: 11px; font-weight: var(--vc-fw-bold); padding: 2px 8px;
    border-radius: var(--vc-radius-full); background: var(--body-bg); color: var(--text-secondary);
}
.vc-panel-link {
    font-size: 12px; color: var(--secondary); text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    transition: gap var(--vc-duration-fast) ease, color var(--vc-duration-fast) ease;
}
.vc-panel-link:hover { color: var(--primary); gap: 8px; }
.vc-panel-meta { font-size: 12px; color: var(--text-muted); }
.vc-empty-state { padding: var(--vc-space-2xl) var(--vc-space-lg); text-align: center; color: var(--text-muted); font-size: 13px; }
.vc-empty-state i { font-size: 26px; display: block; margin-bottom: var(--vc-space-xs); color: var(--text-muted); opacity: 0.6; }

/* Generic hoverable list row -- combine with page-specific content classes */
.vc-row {
    position: relative;
    display: flex; align-items: center; gap: var(--vc-space-sm);
    padding: var(--vc-space-sm) var(--vc-space-lg);
    border-bottom: 1px solid var(--card-border);
    transition: background var(--vc-duration-base) ease;
}
.vc-row:last-child { border-bottom: none; }
.vc-row:hover { background: var(--body-bg); }
.vc-row::before {
    content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
    border-radius: var(--vc-radius-full); background: var(--secondary);
    transform: scaleY(0); transform-origin: center;
    transition: transform var(--vc-duration-base) var(--vc-ease-spring);
}
.vc-row:hover::before { transform: scaleY(1); }

/* Badge refinement -- targets Bootstrap's existing .badge.bg-* classes
   (already emitted by status_badge() helpers) with no PHP changes. */
.badge {
    font-size: 10.5px !important; font-weight: var(--vc-fw-semibold) !important;
    letter-spacing: 0.02em; padding: 4px 9px !important;
    border-radius: var(--vc-radius-sm) !important;
}

/* ------------------------------------------------------------
   List/table page component layer -- extracted from the
   companies.php redesign. Reuse on clients.php, tasks.php,
   requests.php, audit_firms.php, users.php and any other
   filter-bar + data-table + pagination staff list page.
   ------------------------------------------------------------ */
.vc-filter-bar {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: var(--vc-radius-md); padding: var(--vc-space-md) var(--vc-space-lg);
    margin-bottom: var(--vc-space-lg);
    display: flex; gap: var(--vc-space-sm); align-items: end; flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.03);
}
.vc-filter-group { flex: 1; min-width: 160px; }
.vc-filter-bar label {
    font-size: var(--vc-fs-label); font-weight: var(--vc-fw-semibold); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: var(--vc-tracking-label); margin-bottom: 6px; display: block;
}
.vc-filter-bar input, .vc-filter-bar select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--card-border);
    border-radius: var(--vc-radius-sm); font-size: 13px; background: var(--body-bg);
    color: var(--text-primary); outline: none;
    transition: border-color var(--vc-duration-base) var(--vc-ease-spring), box-shadow var(--vc-duration-base) var(--vc-ease-spring);
}
.vc-filter-bar input:focus, .vc-filter-bar select:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.14); }
.vc-btn-filter {
    padding: 9px 22px; border-radius: var(--vc-radius-full); border: none;
    background: var(--secondary); color: var(--primary); font-size: 13px;
    font-weight: var(--vc-fw-bold); cursor: pointer; white-space: nowrap;
    transition: transform var(--vc-duration-fast) var(--vc-ease-spring), box-shadow var(--vc-duration-fast) var(--vc-ease-spring);
}
.vc-btn-filter:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(var(--secondary-rgb), 0.55); }
.vc-btn-filter:active { transform: translateY(0) scale(0.97); }
.vc-btn-clear {
    padding: 9px 18px; border-radius: var(--vc-radius-full);
    border: 1px solid var(--card-border); background: var(--card-bg);
    color: var(--text-secondary); font-size: 13px; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: border-color var(--vc-duration-fast) ease, color var(--vc-duration-fast) ease;
}
.vc-btn-clear:hover { border-color: var(--secondary); color: var(--secondary); }
.vc-toggle-group {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 0; cursor: pointer;
}
.vc-toggle-group input[type='checkbox'] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--secondary); }
.vc-toggle-group span { font-size: 13px; color: var(--text-secondary); user-select: none; }

/* Info banner -- extracted from settings.php redesign. */
.vc-info-banner {
    background: var(--body-bg); border: 1px solid var(--info); border-radius: var(--vc-radius-sm);
    padding: var(--vc-space-sm) var(--vc-space-md); margin: var(--vc-space-md) var(--vc-space-lg) 0;
    font-size: 12.5px; color: var(--text-secondary);
    display: flex; gap: var(--vc-space-xs); align-items: flex-start;
}
.vc-info-banner i { font-size: 15px; color: var(--info); flex-shrink: 0; margin-top: 1px; }
.vc-info-banner.warning { border-color: var(--warning); }
.vc-info-banner.warning i { color: var(--warning); }
.vc-info-banner.danger {
    background: color-mix(in srgb, var(--danger) 6%, white);
    border-color: color-mix(in srgb, var(--danger) 28%, white);
    color: color-mix(in srgb, var(--danger) 65%, black 15%);
}
.vc-info-banner.danger i { color: var(--danger); }
.vc-info-banner.danger a { color: var(--danger); font-weight: 600; }

/* ------------------------------------------------------------
   Detail/record page component layer -- extracted from the
   company-detail.php redesign. Reuse on client-detail.php,
   audit-firm-detail.php, request-detail.php, and any other
   breadcrumb + tabbed record page.
   ------------------------------------------------------------ */
.vc-breadcrumb-bar { padding: 10px var(--vc-space-lg); background: var(--card-bg); border-bottom: 1px solid var(--card-border); }
.vc-breadcrumb-bar a { font-size: 12px; color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color var(--vc-duration-fast) ease; }
.vc-breadcrumb-bar a:hover { color: var(--secondary); }

.vc-detail-header { background: var(--card-bg); border-bottom: 1px solid var(--card-border); padding: var(--vc-space-md) var(--vc-space-lg); }
.vc-detail-title { font-size: 21px; font-weight: var(--vc-fw-heavy); letter-spacing: var(--vc-tracking-tight); color: var(--text-primary); margin: 0; }
.vc-detail-meta { font-size: 12px; color: var(--text-muted); margin-top: 7px; display: flex; gap: var(--vc-space-md); flex-wrap: wrap; align-items: center; }
.vc-detail-meta span { display: flex; align-items: center; gap: 4px; }

.vc-tabs-bar { background: var(--card-bg); border-bottom: 1px solid var(--card-border); padding: 0 var(--vc-space-lg); display: flex; overflow-x: auto; scrollbar-width: none; }
.vc-tabs-bar::-webkit-scrollbar { display: none; }
.vc-tab-btn { padding: 12px 14px; font-size: 13px; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: color var(--vc-duration-fast) ease, border-color var(--vc-duration-fast) ease; flex-shrink: 0; }
.vc-tab-btn:hover { color: var(--text-primary); }
.vc-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--vc-fw-bold); }
.vc-tab-btn.locked { opacity: 0.35; pointer-events: none; cursor: not-allowed; }
.vc-tab-count { font-size: 10px; font-weight: var(--vc-fw-bold); padding: 1px 6px; border-radius: var(--vc-radius-full); background: var(--body-bg); color: var(--text-secondary); }

.vc-doc-subtabs-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--vc-space-md); }
.vc-doc-subtab {
    padding: 7px 14px; border-radius: var(--vc-radius-full); font-size: 12.5px; font-weight: 600;
    color: var(--text-secondary); background: var(--card-bg); border: 1px solid var(--card-border);
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
    transition: border-color var(--vc-duration-fast) ease, color var(--vc-duration-fast) ease, background var(--vc-duration-fast) ease;
}
.vc-doc-subtab:hover { border-color: var(--secondary); color: var(--secondary); }
.vc-doc-subtab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.vc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vc-space-sm); margin-bottom: var(--vc-space-md); }
.vc-info-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--vc-radius-sm); padding: var(--vc-space-sm) var(--vc-space-md); }
.vc-info-card.full { grid-column: span 2; }
.vc-info-label { font-size: var(--vc-fs-label); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--vc-tracking-label); margin-bottom: 5px; }
.vc-info-value { font-size: 14px; color: var(--text-primary); font-weight: 500; line-height: 1.4; }

.vc-people-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--vc-radius-sm); overflow: hidden; margin-bottom: var(--vc-space-md); }
.vc-people-header {
    padding: var(--vc-space-xs) var(--vc-space-md); border-bottom: 1px solid var(--card-border);
    font-size: 13px; font-weight: var(--vc-fw-bold); color: var(--text-primary);
    display: flex; align-items: center; gap: 8px; background: var(--body-bg);
}
.vc-people-row {
    display: flex; align-items: center; padding: var(--vc-space-sm) var(--vc-space-md);
    border-bottom: 1px solid var(--card-border); gap: var(--vc-space-sm);
    transition: background var(--vc-duration-base) ease;
}
.vc-people-row:last-child { border-bottom: none; }
.vc-people-row:hover { background: var(--body-bg); }
.vc-people-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.vc-people-avatar.sh { background: var(--secondary-light); color: var(--secondary); }
.vc-people-avatar.resigned { background: var(--body-bg); color: var(--text-muted); }
.vc-people-info { flex: 1; min-width: 0; }
.vc-people-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.vc-people-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.vc-people-right { text-align: right; flex-shrink: 0; }
.vc-people-date-label { font-size: 10px; color: var(--text-muted); }
.vc-people-date-val { font-size: 12px; color: var(--text-secondary); }

.vc-task-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--vc-radius-sm); overflow: hidden; margin-bottom: var(--vc-space-sm); }
.vc-task-row-item {
    display: flex; align-items: center; padding: var(--vc-space-sm) var(--vc-space-md);
    border-bottom: 1px solid var(--card-border); gap: var(--vc-space-sm);
    transition: background var(--vc-duration-base) ease;
}
.vc-task-row-item:last-child { border-bottom: none; }
.vc-task-row-item:hover { background: var(--body-bg); }
.vc-task-indicator { width: 4px; height: 38px; border-radius: var(--vc-radius-full); flex-shrink: 0; }
.vc-task-overdue .vc-task-indicator { background: var(--danger); }
.vc-task-duesoon .vc-task-indicator { background: var(--warning); }
.vc-task-upcoming .vc-task-indicator { background: var(--info); }
.vc-task-info-wrap { flex: 1; }
.vc-task-name-val { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.vc-task-period { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.vc-task-right { text-align: right; flex-shrink: 0; }
.vc-task-due-val { font-size: 12px; color: var(--text-secondary); }
.vc-task-stat-val { font-size: 11px; margin-top: 3px; }

.vc-badge-resigned {
    display: inline-block; padding: 2px 8px; border-radius: var(--vc-radius-sm);
    font-size: 10px; font-weight: 600;
    background: color-mix(in srgb, var(--danger) 14%, white); color: var(--danger);
    margin-left: 6px;
}

/* Generic panel body padding -- for panels whose content isn't a table/row list */
.vc-panel-body { padding: var(--vc-space-md) var(--vc-space-lg); }

/* Colored action button -- extracted from client-detail.php redesign.
   Reuse for account-action buttons on any detail page (activate,
   suspend, reactivate, review, etc). */
.vc-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: var(--vc-radius-full); border: 1px solid;
    font-size: 13px; font-weight: 600; cursor: pointer;
    text-decoration: none;
    transition: transform var(--vc-duration-fast) var(--vc-ease-spring), box-shadow var(--vc-duration-fast) var(--vc-ease-spring), opacity var(--vc-duration-fast) ease;
}
.vc-action-btn:hover { transform: translateY(-1px); }
.vc-action-btn:active { transform: translateY(0) scale(0.97); }
.vc-action-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.vc-action-btn.warning {
    background: color-mix(in srgb, var(--warning) 16%, white); color: color-mix(in srgb, var(--warning) 55%, black 25%);
    border-color: color-mix(in srgb, var(--warning) 35%, white);
}
.vc-action-btn.danger {
    background: color-mix(in srgb, var(--danger) 12%, white); color: color-mix(in srgb, var(--danger) 60%, black 20%);
    border-color: color-mix(in srgb, var(--danger) 28%, white);
}
.vc-action-btn.success {
    background: color-mix(in srgb, var(--success) 14%, white); color: color-mix(in srgb, var(--success) 55%, black 20%);
    border-color: color-mix(in srgb, var(--success) 30%, white);
}
.vc-action-btn.disabled {
    background: var(--body-bg); color: var(--text-muted);
    border-color: var(--card-border); cursor: not-allowed; opacity: 0.6;
}
.vc-action-btn.disabled:hover { transform: none; }
.vc-action-btn.neutral { background: var(--body-bg); color: var(--text-muted); border-color: var(--card-border); }

/* Small warning pill -- extracted from audit-firm-detail.php redesign. */
.vc-warn-label {
    display: inline-flex; align-items: center; gap: 5px;
    background: color-mix(in srgb, var(--warning) 16%, white); color: color-mix(in srgb, var(--warning) 55%, black 25%);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, white);
    border-radius: var(--vc-radius-sm); padding: 4px 10px; font-size: 12px; font-weight: 500;
}

table.vc-table { width: 100%; border-collapse: collapse; }
table.vc-table th {
    padding: 11px var(--vc-space-lg); font-size: var(--vc-fs-label); font-weight: var(--vc-fw-semibold);
    color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--vc-tracking-label);
    border-bottom: 1px solid var(--card-border); text-align: left; background: var(--body-bg);
}
table.vc-table td {
    padding: 13px var(--vc-space-lg); font-size: 13px; color: var(--text-primary);
    border-bottom: 1px solid var(--card-border); vertical-align: middle;
}
table.vc-table tr:last-child td { border-bottom: none; }
table.vc-table.vc-table-clickable tbody tr { cursor: pointer; transition: background var(--vc-duration-base) ease; }
table.vc-table.vc-table-clickable tbody tr:hover { background: var(--body-bg); }

.vc-status-pill {
    display: inline-block; padding: 3px 11px; border-radius: var(--vc-radius-full);
    font-size: 11px; font-weight: var(--vc-fw-semibold);
}
.vc-status-pill.vc-tint-success { background: color-mix(in srgb, var(--success) 16%, white); color: var(--success); }
.vc-status-pill.vc-neutral { background: var(--body-bg); color: var(--text-muted); }
.vc-status-reason-badge {
    display: inline-block; padding: 3px 10px; border-radius: var(--vc-radius-full);
    font-size: 11px; font-weight: var(--vc-fw-semibold); margin-left: 4px;
    background: var(--body-bg); color: var(--text-secondary);
    border: 1px solid var(--card-border);
}

.vc-pagination-bar {
    padding: var(--vc-space-sm) var(--vc-space-lg); border-top: 1px solid var(--card-border);
    display: flex; align-items: center; justify-content: space-between;
}
.vc-pagination-info { font-size: 12px; color: var(--text-muted); }
.vc-pagination-btns { display: flex; gap: 4px; }
.vc-pagination-btns a, .vc-pagination-btns span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    border-radius: var(--vc-radius-sm); font-size: 13px; text-decoration: none;
    border: 1px solid var(--card-border); color: var(--text-secondary);
    background: var(--card-bg); transition: all var(--vc-duration-fast) ease;
}
.vc-pagination-btns a:hover { border-color: var(--secondary); color: var(--secondary); transform: translateY(-1px); }
.vc-pagination-btns span.current {
    background: var(--primary); color: #fff; border-color: var(--primary); font-weight: var(--vc-fw-bold);
}
.vc-pagination-btns span.disabled { opacity: 0.4; cursor: default; }

/* Flash / alert banner -- reusable across any staff page with get_flash(). */
.vc-flash {
    padding: var(--vc-space-sm) var(--vc-space-md); border-radius: var(--vc-radius-sm);
    font-size: 13px; font-weight: 500; margin-bottom: var(--vc-space-md);
    display: flex; align-items: center; gap: var(--vc-space-xs);
    animation: vc-fade-up var(--vc-duration-slow) var(--vc-ease-spring) both;
}
.vc-flash.success { background: color-mix(in srgb, var(--success) 14%, white); color: color-mix(in srgb, var(--success) 65%, black 20%); border: 1px solid color-mix(in srgb, var(--success) 30%, white); }
.vc-flash.danger  { background: color-mix(in srgb, var(--danger) 12%, white);  color: color-mix(in srgb, var(--danger) 65%, black 20%);  border: 1px solid color-mix(in srgb, var(--danger) 28%, white); }
.vc-flash.warning { background: color-mix(in srgb, var(--warning) 14%, white); color: color-mix(in srgb, var(--warning) 60%, black 20%); border: 1px solid color-mix(in srgb, var(--warning) 30%, white); }
.vc-flash.info    { background: color-mix(in srgb, var(--info) 12%, white);    color: color-mix(in srgb, var(--info) 60%, black 15%);    border: 1px solid color-mix(in srgb, var(--info) 28%, white); }

/* Sortable table column header link -- extracted from tasks.php redesign. */
.vc-th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: color var(--vc-duration-fast) ease; }
.vc-th-sort:hover { color: var(--secondary); }
.vc-th-sort i { opacity: 0.7; }