/* =====================================================
   Kartivo Brand Tokens — Shared Layer
   Version 1.0

   Single source of truth for marketing + app + admin.
   Derived from site.css --kv-* system and extended for
   logged-in surfaces (nav, sidebar, tables, status).

   Load order: app.min.css → bootstrap → kv-tokens.css → style.min.css
   This file OVERRIDES legacy variables and bridges Bootstrap
   classes to the --kv-* brand system.
   ===================================================== */

/* ── 1. Core Brand Tokens ─────────────────────────────
   Canonical values — same as site.css :root block.
   Repeated here so app shell has them without site.css.
   ──────────────────────────────────────────────────── */
:root {
    /* Primary */
    --kv-primary: #4f46e5;
    --kv-primary-hover: #4338ca;
    --kv-primary-light: #eef2ff;
    --kv-primary-border: #e0e7ff;
    --kv-primary-rgb: 79, 70, 229;

    /* Accent */
    --kv-violet: #7c3aed;
    --kv-violet-rgb: 124, 58, 237;

    /* Neutrals */
    --kv-text-primary: #0f172a;
    --kv-text-secondary: #1e293b;
    --kv-text-body: #475569;
    --kv-text-muted: #94a3b8;
    --kv-border: #e2e8f0;
    --kv-bg-page: #f8fafc;
    --kv-bg-card: #ffffff;
    --kv-bg-section: #f1f5f9;

    /* Semantic */
    --kv-success: #22c55e;
    --kv-success-rgb: 34, 197, 94;
    --kv-success-hover: #16a34a;
    --kv-success-bg: #ecfdf5;
    --kv-success-border: #bbf7d0;
    --kv-danger: #ef4444;
    --kv-danger-rgb: 239, 68, 68;
    --kv-danger-hover: #dc2626;
    --kv-danger-bg: #fef2f2;
    --kv-danger-border: #fecaca;
    --kv-warning: #f59e0b;
    --kv-warning-rgb: 245, 158, 11;
    --kv-warning-hover: #d97706;
    --kv-warning-bg: #fffbeb;
    --kv-warning-border: #fde68a;
    --kv-info: #0ea5e9;
    --kv-info-rgb: 14, 165, 233;
    --kv-info-hover: #0284c7;
    --kv-info-bg: #f0f9ff;
    --kv-info-border: #bae6fd;

    /* Layout */
    --kv-radius: 8px;
    --kv-radius-sm: 6px;
    --kv-radius-lg: 12px;
    --kv-radius-xl: 16px;
    --kv-radius-pill: 9999px;
    --kv-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --kv-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --kv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --kv-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
    --kv-transition: 0.15s ease;

    /* Typography */
    --kv-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --kv-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --kv-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* ── App-specific extensions ────────────────────── */

    /* Spacing scale */
    --kv-sp-1: 4px;
    --kv-sp-2: 8px;
    --kv-sp-3: 12px;
    --kv-sp-4: 16px;
    --kv-sp-5: 20px;
    --kv-sp-6: 24px;
    --kv-sp-8: 32px;
    --kv-sp-10: 40px;
    --kv-sp-12: 48px;

    /* Nav/Sidebar */
    --kv-navbar-height: 64px;
    --kv-sidebar-width: 260px;
    --kv-sidebar-collapsed: 72px;
    --kv-sidebar-bg: #ffffff;
    --kv-sidebar-border: #f0f0f3;
    --kv-sidebar-text: #6b7280;
    --kv-sidebar-active: var(--kv-primary);
    --kv-sidebar-active-bg: rgba(79, 70, 229, 0.08);

    /* Table densities */
    --kv-table-row-height: 52px;
    --kv-table-compact-height: 40px;
    --kv-table-header-bg: #fafbfc;
    --kv-table-header-color: var(--kv-text-muted);
    --kv-table-border: #f0f0f3;
    --kv-table-hover: #f8fafc;
    --kv-table-stripe: #fafbfc;

    /* Status colors (operational) */
    --kv-status-active: #22c55e;
    --kv-status-active-bg: #ecfdf5;
    --kv-status-pending: #f59e0b;
    --kv-status-pending-bg: #fffbeb;
    --kv-status-inactive: #94a3b8;
    --kv-status-inactive-bg: #f1f5f9;
    --kv-status-error: #ef4444;
    --kv-status-error-bg: #fef2f2;

    /* Focus & disabled */
    --kv-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.15);
    --kv-disabled-opacity: 0.55;

    /* ── Legacy variable bridge ─────────────────────
       Remap old variable names to --kv-* values so
       existing CSS that references them gets the new brand.
       ─────────────────────────────────────────────── */
    --primary-color: var(--kv-primary);
    --primary-hover-color: var(--kv-primary-hover);
    --btn-primary-color: var(--kv-primary);
    --secondary-color: var(--kv-text-primary);
    --tertiary-color: var(--kv-text-secondary);
    --text-color: var(--kv-text-muted);
    --second-color: var(--kv-text-primary);
    --hover-color: var(--kv-text-body);
    --text-dark-1: var(--kv-text-primary);
    --text-dark-2: var(--kv-text-secondary);
    --text-dark-3: var(--kv-text-primary);
    --text-light-1: var(--kv-text-body);
    --text-light-2: var(--kv-text-muted);
    --light-color: var(--kv-bg-page);
    --navbar-height: var(--kv-navbar-height);
    --sidebar-width: var(--kv-sidebar-width);
    --sidebar-collapsed-width: var(--kv-sidebar-collapsed);
}


/* ── 2. Base Typography ───────────────────────────── */
body {
    font-family: var(--kv-font-body);
    color: var(--kv-text-secondary);
    background-color: var(--kv-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    color: var(--kv-text-primary);
    font-family: var(--kv-font-display);
}


/* ── 3. Buttons ───────────────────────────────────── */
.btn {
    font-family: var(--kv-font-body);
    font-weight: 500;
    border-radius: var(--kv-radius);
    transition: all var(--kv-transition);
}

.btn-primary {
    background: var(--kv-primary);
    border-color: var(--kv-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--kv-primary-hover) !important;
    border-color: var(--kv-primary-hover) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
.btn-primary:focus {
    box-shadow: var(--kv-focus-ring) !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--kv-primary);
    border-color: var(--kv-primary);
    opacity: var(--kv-disabled-opacity);
}

.btn-secondary {
    background: var(--kv-bg-section);
    border-color: var(--kv-border);
    color: var(--kv-text-secondary);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--kv-border);
    border-color: var(--kv-border);
    color: var(--kv-text-primary);
}

.btn-success {
    background-color: var(--kv-success);
    border-color: var(--kv-success);
    color: #fff;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--kv-success-hover);
    border-color: var(--kv-success-hover);
}

.btn-danger {
    background: var(--kv-danger);
    border-color: var(--kv-danger);
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus {
    background: var(--kv-danger-hover);
    border-color: var(--kv-danger-hover);
}

.btn-warning {
    background: var(--kv-warning);
    border-color: var(--kv-warning);
    color: #fff;
}
.btn-warning:hover,
.btn-warning:focus {
    background: var(--kv-warning-hover);
    border-color: var(--kv-warning-hover);
}

.btn-info {
    background: var(--kv-info);
    border-color: var(--kv-info);
    color: #fff;
}
.btn-info:hover,
.btn-info:focus {
    background: var(--kv-info-hover);
    border-color: var(--kv-info-hover);
}

.btn-light {
    background: var(--kv-bg-section);
    border-color: var(--kv-border);
    color: var(--kv-text-body);
}
.btn-light:hover,
.btn-light:focus {
    background: var(--kv-border);
    color: var(--kv-text-secondary);
}

.btn-outline-primary {
    color: var(--kv-primary) !important;
    border-color: var(--kv-primary) !important;
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--kv-primary) !important;
    color: #fff !important;
}

.btn-outline-danger {
    color: var(--kv-danger) !important;
    border-color: var(--kv-danger);
}
.btn-outline-danger:hover {
    color: #fff !important;
    background-color: var(--kv-danger);
}

.btn-outline-success {
    color: var(--kv-success) !important;
    border-color: var(--kv-success);
}
.btn-outline-success:hover {
    color: #fff !important;
    background-color: var(--kv-success);
}

/* Semantic text colors */
.text-primary { color: var(--kv-primary) !important; }
.text-success { color: var(--kv-success) !important; }
.text-danger  { color: var(--kv-danger) !important; }
.text-warning { color: var(--kv-warning) !important; }
.text-info    { color: var(--kv-info) !important; }
.text-muted   { color: var(--kv-text-muted) !important; }


/* ── 4. Cards ─────────────────────────────────────── */
.card {
    background: var(--kv-bg-card);
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius-lg);
    box-shadow: var(--kv-shadow-xs);
    margin-bottom: var(--kv-sp-5);
}

.card-body {
    padding: var(--kv-sp-6);
}

.card .card-header {
    padding: var(--kv-sp-4) var(--kv-sp-6);
    border-bottom: 1px solid var(--kv-border);
    background: transparent;
    min-height: auto;
}

.card .card-header .card-title,
.card .card-header .card-title .card-label {
    color: var(--kv-text-primary);
    font-family: var(--kv-font-display);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.card .card-footer {
    padding: var(--kv-sp-4) var(--kv-sp-6);
    border-top: 1px solid var(--kv-border);
    background: transparent;
}

.card-title {
    color: var(--kv-text-primary);
    font-size: 16px;
    font-weight: 600;
}

.card-transparent {
    box-shadow: none !important;
    background: transparent;
    border-color: transparent;
}


/* ── 5. Form Controls ─────────────────────────────── */
.form-control {
    font-family: var(--kv-font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--kv-text-secondary);
    background-color: #fff;
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius);
    padding: 10px 14px;
    min-height: 42px;
    transition: border-color var(--kv-transition), box-shadow var(--kv-transition);
}

.form-control:focus {
    background-color: #fff;
    border-color: var(--kv-primary);
    color: var(--kv-text-secondary);
    box-shadow: var(--kv-focus-ring) !important;
}

.form-control::placeholder {
    color: var(--kv-text-muted);
    font-weight: 400;
}

.form-control-sm {
    font-size: 13px;
    min-height: 34px !important;
    padding: 6px 10px;
    border-radius: var(--kv-radius-sm);
}

.form-select {
    font-family: var(--kv-font-body);
    font-size: 14px;
    color: var(--kv-text-secondary);
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius);
    min-height: 42px;
    padding: 10px 14px;
}

.form-select:focus {
    border-color: var(--kv-primary);
    box-shadow: var(--kv-focus-ring);
}

.form-group label,
label {
    font-size: 13px;
    font-weight: 500;
    color: var(--kv-text-secondary);
    margin-bottom: 6px;
}

/* Select2 alignment */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--kv-border) !important;
    border-radius: var(--kv-radius) !important;
    background-color: #fff !important;
    min-height: 42px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--kv-primary-light) !important;
    color: var(--kv-primary) !important;
}


/* ── 6. Tables ────────────────────────────────────── */
.table {
    font-size: 14px;
    color: var(--kv-text-secondary);
}

.table tr {
    border-bottom: 1px solid var(--kv-table-border);
}

.table tr:last-child {
    border-bottom: 0;
}

.table th {
    background: var(--kv-table-header-bg);
    color: var(--kv-table-header-color);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--kv-border) !important;
    white-space: nowrap;
}

.table td {
    padding: 12px 16px;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: var(--kv-table-hover);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--kv-table-stripe);
}


/* ── 7. Badges ────────────────────────────────────── */
.badge {
    font-family: var(--kv-font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--kv-radius-pill);
    letter-spacing: 0.3px;
}

.badge-success,
.bg-success { background-color: var(--kv-success) !important; }

.badge-danger,
.bg-danger { background-color: var(--kv-danger) !important; }

.badge-warning,
.bg-warning {
    background-color: var(--kv-warning) !important;
    color: #fff !important;
}

.badge-info,
.bg-info { background-color: var(--kv-info) !important; }

/* Soft badge variants (preferred for status indicators) */
.badge.bg-success.bg-opacity-10 { background-color: var(--kv-success-bg) !important; color: var(--kv-success) !important; }
.badge.bg-danger.bg-opacity-10  { background-color: var(--kv-danger-bg) !important; color: var(--kv-danger) !important; }
.badge.bg-warning.bg-opacity-10 { background-color: var(--kv-warning-bg) !important; color: var(--kv-warning) !important; }
.badge.bg-info.bg-opacity-10    { background-color: var(--kv-info-bg) !important; color: var(--kv-info) !important; }


/* ── 8. Navbar ────────────────────────────────────── */
.navbar-bg {
    background: var(--kv-bg-card);
    box-shadow: none;
    border-bottom: 1px solid var(--kv-border);
    height: var(--kv-navbar-height);
    padding: 0 var(--kv-sp-6);
}

.navbar {
    height: var(--kv-navbar-height);
}

.nav-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--kv-radius);
    background: var(--kv-bg-section);
    border: 1px solid var(--kv-border);
    color: var(--kv-text-body);
    font-size: 15px;
    transition: all var(--kv-transition);
    cursor: pointer;
}

.nav-action-btn:hover {
    background: var(--kv-bg-card);
    border-color: var(--kv-primary);
    color: var(--kv-primary);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12);
}

.nav-action-btn--warning:hover {
    border-color: var(--kv-warning);
    color: var(--kv-warning);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.nav-action-btn--support:hover {
    border-color: var(--kv-primary);
    color: var(--kv-primary);
}

.nav-divider {
    width: 1px;
    height: 28px;
    background: var(--kv-border);
    margin: 0 var(--kv-sp-2);
}

.app-header-separator {
    border-bottom: 1px solid var(--kv-border);
}


/* ── 9. Toasts ────────────────────────────────────── */
.toast {
    font-family: var(--kv-font-body);
    border-radius: var(--kv-radius);
    padding: 14px 40px 14px 16px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--kv-shadow-md);
}

.toast.toast_name_1 {
    background: var(--kv-primary);
    border: none;
    color: #fff;
}

.toast.toast_name_2 {
    background: var(--kv-danger);
    border: none;
    color: #fff;
}

.toast a {
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.toast a:hover {
    color: #fff;
}


/* ── 10. Alerts ───────────────────────────────────── */
.alert {
    border-radius: var(--kv-radius);
    font-size: 14px;
}

.alert-success {
    background-color: var(--kv-success-bg);
    border-color: var(--kv-success-border);
    color: var(--kv-success-hover);
}

.alert-danger {
    background-color: var(--kv-danger-bg);
    border-color: var(--kv-danger-border);
    color: var(--kv-danger-hover);
}

.alert-warning {
    background-color: var(--kv-warning-bg);
    border-color: var(--kv-warning-border);
    color: var(--kv-warning-hover);
}

.alert-info {
    background-color: var(--kv-info-bg);
    border-color: var(--kv-info-border);
    color: var(--kv-info-hover);
}


/* ── 11. Modals ───────────────────────────────────── */
.modal-content {
    border-radius: var(--kv-radius-lg);
    border: 1px solid var(--kv-border);
    box-shadow: var(--kv-shadow-lg);
}

.modal-header {
    padding: var(--kv-sp-5) var(--kv-sp-6);
    border-bottom: 1px solid var(--kv-border);
}

.modal-header .modal-title {
    font-family: var(--kv-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--kv-text-primary);
}

.modal-body {
    padding: var(--kv-sp-6);
}

.modal-footer {
    padding: var(--kv-sp-4) var(--kv-sp-6);
    border-top: 1px solid var(--kv-border);
}


/* ── 12. Pagination ───────────────────────────────── */
.page-item.active .page-link {
    background-color: var(--kv-primary);
    border-color: var(--kv-primary);
}

.page-link {
    color: var(--kv-text-body);
    border-radius: var(--kv-radius-sm);
}

.page-link:hover {
    color: var(--kv-primary);
    background-color: var(--kv-primary-light);
    border-color: var(--kv-primary-border);
}


/* ── 13. Sidebar token bridge ─────────────────────── */
.sidebar {
    background: var(--kv-sidebar-bg);
    border-right: 1px solid var(--kv-sidebar-border);
    width: var(--kv-sidebar-width);
}

.sidebar-link {
    color: var(--kv-sidebar-text);
    font-size: 13.5px;
    font-weight: 400;
}

.sidebar-link:hover {
    color: var(--kv-primary);
}

.sidebar-nav .sidebar-item.active > .sidebar-link {
    color: var(--kv-sidebar-active);
    background: var(--kv-sidebar-active-bg);
}

.sidebar-nav .sidebar-item.active > .sidebar-link i {
    color: var(--kv-sidebar-active);
}


/* ── 14. User dropdown ────────────────────────────── */
.user-dropdow {
    color: var(--kv-text-secondary);
}

.user-dropdow .user-name {
    color: var(--kv-text-secondary);
    font-weight: 500;
}

.user-dropdown-menu {
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius-lg);
    box-shadow: var(--kv-shadow-lg);
    padding: var(--kv-sp-2) 0;
}

.dropdown-user-header {
    padding: var(--kv-sp-3) var(--kv-sp-4);
}

.dropdown-user-name {
    color: var(--kv-text-primary);
    font-weight: 600;
}

.dropdown-user-email {
    color: var(--kv-text-muted);
    font-size: 12px;
}

.dropdown-item {
    font-size: 13px;
    color: var(--kv-text-body);
    padding: 8px 16px;
    border-radius: 0;
}

.dropdown-item:hover {
    background-color: var(--kv-primary-light);
    color: var(--kv-primary);
}

.dropdown-item i {
    width: 20px;
    margin-right: 8px;
    color: var(--kv-text-muted);
}

.dropdown-item:hover i {
    color: var(--kv-primary);
}

.dropdown-item--logout {
    color: var(--kv-danger);
}

.dropdown-item--logout i {
    color: var(--kv-danger);
}


/* ── 15. Utility overrides ────────────────────────── */
.label-primary {
    background: var(--kv-primary-light);
    color: var(--kv-primary);
    border-color: var(--kv-primary-border);
}

/* DataTables alignment */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--kv-primary) !important;
    border-color: var(--kv-primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--kv-primary-light) !important;
    border-color: var(--kv-primary-border) !important;
    color: var(--kv-primary) !important;
}

/* Search results */
.search_result {
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius);
    box-shadow: var(--kv-shadow-md);
}


/* ── 16. KPI / Stat Icon Utilities ────────────────── */
/* Icon accent squares used in dashboard, projects, funnels */
.kv-icon-blue    { background: var(--kv-info-bg);    color: var(--kv-info); }
.kv-icon-green   { background: var(--kv-success-bg); color: var(--kv-success); }
.kv-icon-purple  { background: #faf5ff;              color: #8b5cf6; }
.kv-icon-amber   { background: var(--kv-warning-bg); color: var(--kv-warning); }
.kv-icon-red     { background: var(--kv-danger-bg);  color: var(--kv-danger); }
.kv-icon-indigo  { background: var(--kv-primary-light); color: var(--kv-primary); }

/* Standard icon box sizing */
.kv-icon-box {
    width: 42px; height: 42px;
    border-radius: var(--kv-radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}

.kv-icon-box-sm {
    width: 36px; height: 36px;
    border-radius: var(--kv-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}


/* ── 17. KPI Card ─────────────────────────────────── */
.kv-kpi-card {
    background: var(--kv-bg-card);
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius-lg);
    padding: var(--kv-sp-5);
    transition: transform var(--kv-transition), box-shadow var(--kv-transition);
}

.kv-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--kv-shadow-md);
}

.kv-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--kv-text-primary);
    font-family: var(--kv-font-display);
    line-height: 1.2;
}

.kv-kpi-label {
    font-size: 12px;
    color: var(--kv-text-muted);
    font-weight: 500;
    margin-top: 2px;
}


/* ── 18. Filter Bar ───────────────────────────────── */
.kv-filter-bar {
    background: var(--kv-bg-card);
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius-lg);
    padding: var(--kv-sp-3) var(--kv-sp-4);
    display: flex;
    align-items: center;
    gap: var(--kv-sp-3);
    flex-wrap: wrap;
}

.kv-filter-input {
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius);
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--kv-font-body);
    color: var(--kv-text-secondary);
    background: var(--kv-bg-card);
    transition: border-color var(--kv-transition);
}

.kv-filter-input:focus {
    border-color: var(--kv-primary);
    outline: none;
    box-shadow: var(--kv-focus-ring);
}

.kv-filter-input::placeholder { color: var(--kv-text-muted); }

.kv-filter-select {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--kv-radius);
    border: 1px solid var(--kv-border);
    background: var(--kv-bg-card);
    color: var(--kv-text-body);
    cursor: pointer;
}

.kv-filter-select:focus { outline: none; border-color: var(--kv-primary); }


/* ── 19. Tabs / Pills ─────────────────────────────── */
.kv-tab {
    padding: 6px 14px;
    border-radius: var(--kv-radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--kv-text-body);
    background: var(--kv-bg-section);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--kv-transition);
}

.kv-tab:hover { background: var(--kv-border); }
.kv-tab.active { background: var(--kv-primary); color: #fff; border-color: var(--kv-primary); }

.kv-tab-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--kv-radius-pill);
    background: rgba(0, 0, 0, 0.08);
    margin-left: 4px;
}

.kv-tab.active .kv-tab-count { background: rgba(255, 255, 255, 0.2); }


/* ── 20. Section/Page Headers ─────────────────────── */
.kv-page-title {
    font-family: var(--kv-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--kv-text-primary);
    margin: 0;
}

.kv-page-subtitle {
    font-size: 13px;
    color: var(--kv-text-muted);
    margin-top: 2px;
}

.kv-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--kv-text-secondary);
    margin-bottom: var(--kv-sp-3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kv-section-title i { color: var(--kv-text-muted); font-size: 13px; }


/* ── 21. Empty States ─────────────────────────────── */
.kv-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--kv-bg-card);
    border-radius: var(--kv-radius-xl);
    border: 2px dashed var(--kv-border);
}

.kv-empty-icon {
    width: 80px; height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--kv-primary-light), var(--kv-primary-border));
    margin: 0 auto var(--kv-sp-5);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    color: var(--kv-primary);
}

.kv-empty h4 {
    font-size: 18px; font-weight: 700;
    color: var(--kv-text-secondary);
    margin-bottom: var(--kv-sp-2);
}

.kv-empty p {
    font-size: 14px;
    color: var(--kv-text-body);
    max-width: 400px;
    margin: 0 auto var(--kv-sp-6);
    line-height: 1.6;
}


/* ── 22. Action Buttons (icon-only, card toolbars) ── */
.kv-action-btn {
    width: 30px; height: 30px;
    border-radius: var(--kv-radius-sm);
    border: 1px solid var(--kv-border);
    background: var(--kv-bg-card);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--kv-text-muted);
    font-size: 12px;
    transition: all var(--kv-transition);
}

.kv-action-btn:hover { background: var(--kv-bg-section); color: var(--kv-text-secondary); }
.kv-action-btn.danger:hover { background: var(--kv-danger-bg); color: var(--kv-danger); border-color: var(--kv-danger-border); }
.kv-action-btn.primary:hover { background: var(--kv-primary-light); color: var(--kv-primary); border-color: var(--kv-primary-border); }


/* ── 23. Rank Badges (funnel leaderboards) ────────── */
.kv-rank-1 { background: var(--kv-warning-bg); color: var(--kv-warning-hover); }
.kv-rank-2 { background: var(--kv-bg-section); color: var(--kv-text-body); }
.kv-rank-3 { background: #fed7aa; color: #c2410c; }


/* ── 24. Standardized Table ───────────────────────── */
.kv-table-wrap {
    background: var(--kv-bg-card);
    border-radius: var(--kv-radius-lg);
    border: 1px solid var(--kv-border);
    overflow: hidden;
}

.kv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.kv-table thead th {
    background: var(--kv-table-header-bg);
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--kv-table-header-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--kv-border);
    white-space: nowrap;
}

.kv-table tbody tr {
    border-bottom: 1px solid var(--kv-table-border);
    transition: background 0.1s;
}

.kv-table tbody tr:last-child { border-bottom: 0; }
.kv-table tbody tr:hover { background: var(--kv-table-hover); }

.kv-table td {
    padding: 12px 16px;
    vertical-align: middle;
    color: var(--kv-text-secondary);
}


/* ── 25. Description / Info Boxes ─────────────────── */
.kv-desc-box {
    background: var(--kv-bg-page);
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius);
    padding: var(--kv-sp-3) var(--kv-sp-4);
    font-size: 13px;
    color: var(--kv-text-body);
}


/* ── 26. Funnel Flow Diagram Tokens ───────────────── */
.kv-node-primary  { border-color: var(--kv-primary); }
.kv-node-success  { border-color: var(--kv-success); }
.kv-node-warning  { border-color: var(--kv-warning); }
.kv-node-muted    { border-color: var(--kv-border); }

.kv-branch-label {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--kv-radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kv-branch-purchased { background: var(--kv-success-bg); color: var(--kv-success-hover); }
.kv-branch-declined  { background: var(--kv-warning-bg); color: var(--kv-warning-hover); }


/* ── 27. Hero Gradient (shared across modules) ────── */
.kv-hero {
    background: linear-gradient(135deg, var(--kv-primary) 0%, var(--kv-violet) 100%);
    border-radius: var(--kv-radius-xl);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.kv-hero::before {
    content: '';
    position: absolute;
    top: -60%; right: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.kv-hero h2 {
    color: #fff !important;
    font-family: var(--kv-font-display);
}


/* ── 28. Text Utility Classes ─────────────────────── */
.kv-text-primary   { color: var(--kv-text-primary) !important; }
.kv-text-secondary { color: var(--kv-text-secondary) !important; }
.kv-text-body      { color: var(--kv-text-body) !important; }
.kv-text-muted     { color: var(--kv-text-muted) !important; }
.kv-text-brand     { color: var(--kv-primary) !important; }
.kv-text-success   { color: var(--kv-success) !important; }
.kv-text-danger    { color: var(--kv-danger) !important; }
.kv-text-warning   { color: var(--kv-warning) !important; }

.kv-bg-page    { background: var(--kv-bg-page) !important; }
.kv-bg-card    { background: var(--kv-bg-card) !important; }
.kv-bg-section { background: var(--kv-bg-section) !important; }


/* ── 29. Loader / Spinner ─────────────────────────── */
.kv-spinner {
    border: 3px solid var(--kv-bg-section);
    border-top: 3px solid var(--kv-primary);
    border-radius: 50%;
    animation: kv-spin 0.8s linear infinite;
}

@keyframes kv-spin { to { transform: rotate(360deg); } }