/* PREMIUM LOADING OVERLAY */
#premium-loading-overlay {
    animation: fadeInOverlay 0.4s var(--ease-smooth);
}

.animate-fade-in {
    animation: fadeInOverlay 0.4s var(--ease-smooth);
}

.animate-spin-slow {
    animation: spinSlow 2.2s linear infinite;
}

.animate-pulse {
    animation: pulseBar 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes spinSlow {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulseBar {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* End premium loading overlay */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===================================
   PREMIUM PARTNER PORTAL - DESIGN SYSTEM
   Version: 2.0.0
   =================================== */

:root {
    /*
     * PRIMARY BRAND COLORS
     * Source of truth: js/theme.js  (edit there to change the theme)
     * These values are overwritten at runtime by applyTheme() in theme.js.
     * They serve as CSS fallbacks only — do not edit them here directly.
     */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Secondary brand accent — blue (retained for compat) */
    --brand-blue-500: #3b82f6;
    --brand-blue-600: #2563eb;
    --brand-blue-700: #1d4ed8;

    /* Accents (used sparingly) */
    --accent-purple: #8b5cf6;
    --accent-gold: #f59e0b;
    --accent-emerald: #10b981;
    --accent-rose: #f43f5e;
    --accent-indigo: #6366f1;

    /* Surfaces & borders */
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --surface-sunken: #f1f5f9;
    --border-subtle: #eef1f4;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    /* Brand fills — also overwritten by applyTheme() from js/theme.js */
    --gradient-primary: linear-gradient(135deg, #10b981 0%, #1e40af 100%);
    --gradient-sidebar: #ffffff;
    --gradient-success: #16a34a;
    --gradient-premium: #2563eb;
    --gradient-dark: #0d1f5f;
    --gradient-glass: #ffffff;


    /* Shadows — subtle, modern */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-xl: 0 8px 24px rgba(16, 24, 40, 0.10);
    --shadow-2xl: 0 12px 32px rgba(16, 24, 40, 0.12);
    --shadow-glow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);

    /* Radius scale — tighter, modern */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-full: 9999px;

    /* Timing */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);

    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 450ms;
}

/* ===================================
   PREMIUM TYPOGRAPHY
   =================================== */

body {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'salt', 'liga', 'calt';
}

.font-display {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ===================================
   PREMIUM LOGIN PAGE
   =================================== */

#login-screen {
    background: var(--surface-muted);
    position: relative;
    overflow: hidden;
}

/* Subtle Dot Pattern */
#login-screen::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(100, 116, 139, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.6;
}

/* Login Card */
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow:
        0 0 40px 8px rgba(37, 99, 235, 0.12),
        0 0 100px 24px rgba(99, 102, 241, 0.07),
        var(--shadow-xl);
    border-radius: var(--radius-2xl);
    padding: 2.75rem;
    animation: floatIn 0.4s var(--ease-out) forwards;
    opacity: 0;
    position: relative;
    z-index: 1;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Login Inputs */
.login-input {
    transition: border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

.login-input:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* Login Button */
.login-button {
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
}

.login-button:hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-md);
}

.login-button:active {
    filter: brightness(0.88);
}

/* Microsoft Login Button */
.microsoft-login-button {
    background: white;
    border: 2px solid #e5e7eb;
    transition: all var(--duration-normal) var(--ease-smooth);
}

.microsoft-login-button:hover {
    border-color: var(--border-strong);
    background: var(--surface-sunken);
}

/* ===================================
   PREMIUM SIDEBAR — DARK FOREST GREEN
   =================================== */

.sidebar {
    background: var(--gradient-sidebar);
    border-right: 1px solid var(--border);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

/* Logo header bar */
.sidebar-logo-bar {
    border-bottom: 1px solid var(--border);
}

.sidebar-logo {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-800) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ---- BASE NAV LINK ---- */
.sidebar nav a {
    color: #6b7280 !important;
    transition:
        background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.16s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.16s ease;
    border-left: 3px solid transparent;
    position: relative;
    border-radius: 0 8px 8px 0;
    outline: none;
}

/* Accent bar */
.sidebar nav a::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, var(--primary-300), var(--primary-600));
    border-radius: 0 2px 2px 0;
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* SVG icon base */
.sidebar nav a svg {
    stroke: #9ca3af;
    transition: stroke 0.16s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

/* ---- PARENT ITEM HOVER ---- */
.sidebar nav > div > a:hover,
#nav-dashboard:hover {
    background-color: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

.sidebar nav > div > a:hover svg,
#nav-dashboard:hover svg {
    stroke: var(--primary-600);
    transform: scale(1.1);
}

.sidebar nav > div > a:hover::before,
#nav-dashboard:hover::before {
    transform: translateY(-50%) scaleY(0.5);
}

/* ---- ACTIVE / NAV-ACTIVE ---- */
.sidebar nav a.nav-active,
.sidebar nav a.active,
.sidebar nav a.bg-indigo-50 {
    background-color: var(--primary-50) !important;
    color: var(--primary-700) !important;
    font-weight: 600;
}

.sidebar nav a.nav-active::before,
.sidebar nav a.active::before,
.sidebar nav a.bg-indigo-50::before {
    transform: translateY(-50%) scaleY(1) !important;
}

.sidebar nav a.nav-active svg,
.sidebar nav a.active svg {
    stroke: var(--primary-600);
    transform: scale(1.05);
}

/* ---- SUBMENU ENTRANCE ANIMATION ---- */
#corepartners-submenu:not(.hidden),
#analytics-submenu:not(.hidden),
#marketing-submenu:not(.hidden),
#settings-submenu:not(.hidden) {
    animation: submenuReveal 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes submenuReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- SUBMENU ITEM BASE ---- */
.sidebar .space-y-1 a {
    color: #9ca3af !important;
    transition:
        background-color 0.14s ease,
        color 0.14s ease,
        transform 0.14s ease;
    border-left: 2px solid transparent;
    position: relative;
}

.sidebar .space-y-1 a::after {
    content: '';
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 50%;
    background: var(--primary-600);
    border-radius: 0 2px 2px 0;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- SUBMENU ITEM HOVER ---- */
.sidebar .space-y-1 a:hover {
    background-color: var(--primary-50) !important;
    color: var(--primary-700) !important;
    transform: translateX(2px);
}

.sidebar .space-y-1 a:hover::after {
    transform: translateY(-50%) scaleY(0.5);
}

/* ---- SUBMENU ITEM ACTIVE (set via JS Tailwind classes) ---- */
.sidebar .space-y-1 a.font-semibold,
.sidebar #analytics-submenu a.bg-purple-100,
.sidebar #analytics-submenu a.text-purple-700,
.sidebar #corepartners-submenu a.bg-gray-200,
.sidebar #settings-submenu a.bg-gray-200,
.sidebar #marketing-submenu a.bg-indigo-100 {
    background-color: var(--primary-50) !important;
    color: var(--primary-700) !important;
    font-weight: 600;
    transform: translateX(2px);
}

.sidebar .space-y-1 a.font-semibold::after,
.sidebar #analytics-submenu a.bg-purple-100::after,
.sidebar #corepartners-submenu a.bg-gray-200::after,
.sidebar #settings-submenu a.bg-gray-200::after,
.sidebar #marketing-submenu a.bg-indigo-100::after {
    transform: translateY(-50%) scaleY(1);
}

/* ---- CHEVRON TRANSITION ---- */
#corepartners-chevron,
#analytics-chevron,
#marketing-chevron,
#settings-chevron {
    stroke: #9ca3af;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.16s ease;
}

.sidebar nav > div > a:hover #corepartners-chevron,
.sidebar nav > div > a:hover #analytics-chevron,
.sidebar nav > div > a:hover #marketing-chevron,
.sidebar nav > div > a:hover #settings-chevron,
.sidebar nav a.nav-active #corepartners-chevron,
.sidebar nav a.nav-active #analytics-chevron,
.sidebar nav a.nav-active #marketing-chevron,
.sidebar nav a.nav-active #settings-chevron {
    stroke: var(--primary-600);
}

/* ---- FOCUS RING ---- */
.sidebar nav a:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: -2px;
    border-radius: 0 8px 8px 0;
}


/* ===================================
   THEME BRIDGE
   Maps hardcoded blue-* Tailwind utility
   classes to CSS custom properties so
   the entire UI repaints when
   --primary-* variables change.
   =================================== */

/* backgrounds */
.bg-blue-50  { background-color: var(--primary-50)  !important; }
.bg-blue-100 { background-color: var(--primary-100) !important; }
.bg-blue-200 { background-color: var(--primary-200) !important; }
.bg-blue-300 { background-color: var(--primary-300) !important; }
.bg-blue-400 { background-color: var(--primary-400) !important; }
.bg-blue-500 { background-color: var(--primary-500) !important; }
.bg-blue-600 { background-color: var(--primary-600) !important; }
.bg-blue-700 { background-color: var(--primary-700) !important; }
.bg-blue-800 { background-color: var(--primary-800) !important; }
.bg-blue-900 { background-color: var(--primary-900) !important; }

/* text */
.text-blue-50  { color: var(--primary-50)  !important; }
.text-blue-100 { color: var(--primary-100) !important; }
.text-blue-200 { color: var(--primary-200) !important; }
.text-blue-300 { color: var(--primary-300) !important; }
.text-blue-400 { color: var(--primary-400) !important; }
.text-blue-500 { color: var(--primary-500) !important; }
.text-blue-600 { color: var(--primary-600) !important; }
.text-blue-700 { color: var(--primary-700) !important; }
.text-blue-800 { color: var(--primary-800) !important; }
.text-blue-900 { color: var(--primary-900) !important; }

/* borders */
.border-blue-100 { border-color: var(--primary-100) !important; }
.border-blue-200 { border-color: var(--primary-200) !important; }
.border-blue-300 { border-color: var(--primary-300) !important; }
.border-blue-400 { border-color: var(--primary-400) !important; }
.border-blue-500 { border-color: var(--primary-500) !important; }
.border-blue-600 { border-color: var(--primary-600) !important; }
.border-blue-700 { border-color: var(--primary-700) !important; }

/* gradients */
.from-blue-50  { --tw-gradient-from: var(--primary-50)  !important; }
.from-blue-100 { --tw-gradient-from: var(--primary-100) !important; }
.from-blue-400 { --tw-gradient-from: var(--primary-400) !important; }
.from-blue-500 { --tw-gradient-from: var(--primary-500) !important; }
.from-blue-600 { --tw-gradient-from: var(--primary-600) !important; }
.from-blue-700 { --tw-gradient-from: var(--primary-700) !important; }
.to-blue-50  { --tw-gradient-to: var(--primary-50)  !important; }
.to-blue-100 { --tw-gradient-to: var(--primary-100) !important; }
.to-blue-400 { --tw-gradient-to: var(--primary-400) !important; }
.to-blue-500 { --tw-gradient-to: var(--primary-500) !important; }
.to-blue-600 { --tw-gradient-to: var(--primary-600) !important; }
.to-blue-700 { --tw-gradient-to: var(--primary-700) !important; }

/* ring / focus */
.ring-blue-300 { --tw-ring-color: var(--primary-300) !important; }
.ring-blue-500 { --tw-ring-color: var(--primary-500) !important; }

/* hover variants */
.hover\:bg-blue-50:hover  { background-color: var(--primary-50)  !important; }
.hover\:bg-blue-100:hover { background-color: var(--primary-100) !important; }
.hover\:bg-blue-600:hover { background-color: var(--primary-600) !important; }
.hover\:bg-blue-700:hover { background-color: var(--primary-700) !important; }
.hover\:bg-blue-800:hover { background-color: var(--primary-800) !important; }
.hover\:text-blue-600:hover { color: var(--primary-600) !important; }
.hover\:text-blue-700:hover { color: var(--primary-700) !important; }
.hover\:border-blue-400:hover { border-color: var(--primary-400) !important; }
.hover\:border-blue-500:hover { border-color: var(--primary-500) !important; }
.hover\:from-blue-600:hover { --tw-gradient-from: var(--primary-600) !important; }
.hover\:to-blue-700:hover   { --tw-gradient-to:   var(--primary-700) !important; }

/* focus variants */
.focus\:ring-blue-400:focus { --tw-ring-color: var(--primary-400) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--primary-500) !important; }
.focus\:border-blue-500:focus { border-color: var(--primary-500) !important; }

/* divide */
.divide-blue-200 > * + * { border-color: var(--primary-200) !important; }

/* ===================================
   THEME PICKER SWATCHES
   =================================== */

.theme-swatch-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.theme-swatch-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.theme-swatch-btn.active {
    border-color: white !important;
    box-shadow: 0 0 0 3px var(--swatch-color, #2563eb);
    transform: scale(1.1);
}
.theme-swatch-btn.active .theme-swatch-check {
    opacity: 1 !important;
}

/* ===================================
   PREMIUM HEADER
   =================================== */

header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

.search-input,
#search-input {
    transition: background-color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.search-input:focus,
#search-input:focus {
    background: var(--surface);
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Search Results Popover */
#search-results-popover {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: slideDown var(--duration-normal) var(--ease-out);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Buttons */
#help-tour-button,
#notification-bell {
    transition: all var(--duration-normal) var(--ease-smooth);
    padding: 0.5rem;
    border-radius: 10px;
}

#help-tour-button:hover,
#notification-bell:hover {
    background: var(--primary-50);
}

/* Notification Badge */
#notification-badge {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translate(50%, -50%) scale(1);
    }

    50% {
        transform: translate(50%, -50%) scale(1.1);
    }
}

/* Notification Popover */
#notification-popover {
    background: white !important;
    color: #1f2937 !important;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    animation: slideDown var(--duration-normal) var(--ease-out);
    /* Force to top in case other overlays exist */
    z-index: 99999 !important;
    position: absolute;
    pointer-events: auto !important;
}

#notification-popover * {
    color: inherit !important;
}

#notification-popover .bg-gray-100 {
    background: var(--surface-sunken) !important;
    color: #374151 !important;
}

#notification-popover .font-semibold,
#notification-popover .text-gray-700,
#notification-popover .text-gray-800 {
    color: #374151 !important;
}

#notification-popover .text-gray-600,
#notification-popover .text-gray-500 {
    color: #6b7280 !important;
}

#notification-popover button {
    color: inherit !important;
}

#notification-popover .text-indigo-600 {
    color: #4f46e5 !important;
}

#notification-popover .text-red-600 {
    color: #dc2626 !important;
}

#notification-popover li {
    color: #1f2937 !important;
}

#notification-popover li:hover {
    background: #f3f4f6 !important;
}

/* Ensure search inputs and suggestions are visible and above other content */
#search-input,
#contrib-partner-filter-input,
.search-input {
    color: #1f2937 !important;
    caret-color: #1f2937 !important;
}

/* Partner suggestions and partner-list popovers should float above modals/overlays */
#contrib-partner-suggestions,
#partner-list-popover {
    z-index: 100000 !important;
    background: white !important;
    pointer-events: auto !important;
}

#partner-list-popover {
    position: absolute;
}

#contrib-partner-filter-container {
    position: relative !important;
}

#contrib-partner-suggestions {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

/* Keep the main application shell from clipping floating popovers */
#main-app .flex-1.flex.flex-col {
    overflow: visible !important;
}

/* If any element layers are transparent and cover the header, make popovers higher priority */
.popover-force-top {
    z-index: 110000 !important;
}

/* Sign Out Button */
button[data-action="sign-out"] {
    background: #dc2626;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
    border-radius: var(--radius-md);
}

button[data-action="sign-out"]:hover {
    background: #b91c1c;
    box-shadow: var(--shadow-md);
}

/* ===================================
   PREMIUM CARDS
   =================================== */

.premium-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
}

.premium-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

/* Stat Cards */
.stat-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-slow) var(--ease-out);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Main Content Area */
#main-content {
    background: var(--surface-muted);
    position: relative;
}

/* ===================================
   PREMIUM BUTTONS
   =================================== */

.btn-premium {
    position: relative;
    transition: background-color var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth);
    border-radius: var(--radius-md);
}

/* Primary Button */
.btn-primary,
button.bg-indigo-600,
button.bg-indigo-500,
button.text-indigo-600:not([data-action="close-modal"]) {
    background: var(--gradient-primary) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth);
    border-radius: var(--radius-md);
    border: none;
}

.btn-primary:hover,
button.bg-indigo-600:hover,
button.bg-indigo-500:hover,
button.text-indigo-600:not([data-action="close-modal"]):hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-md);
}

/* Secondary Button */
.btn-secondary {
    background: var(--surface);
    color: var(--primary-700);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-smooth),
        border-color var(--duration-fast) var(--ease-smooth);
}

.btn-secondary:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
}

/* Action Buttons in Tables */
button[data-action="edit-partner"],
button[data-action="delete-partner"],
button[data-action="add-opportunity"],
button[data-action="edit-opportunity"],
button[data-action="delete-opportunity"],
button[data-action="add-cert-row"],
button[data-action="add-opportunity-row"],
button[data-action="toggle-product-dropdown"] {
    transition: all var(--duration-fast) var(--ease-smooth);
    border-radius: 8px;
}

button[data-action="edit-partner"]:hover,
button[data-action="add-opportunity"]:hover,
button[data-action="edit-opportunity"]:hover,
button[data-action="add-cert-row"]:hover,
button[data-action="add-opportunity-row"]:hover {
    background: var(--primary-50);
}

button[data-action="delete-partner"]:hover,
button[data-action="delete-opportunity"]:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Floating Action Buttons */
#chat-open-button {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-lg);
    transition: background-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
}

#chat-open-button:hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-xl);
}

/* ===================================
   PREMIUM TABLES
   =================================== */

.premium-table {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    background: var(--surface);
}

.premium-table thead {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
}

.premium-table thead th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: #64748b;
    padding: 0.875rem 1rem;
}

.premium-table tbody tr {
    transition: background-color var(--duration-fast) var(--ease-smooth);
    border-bottom: 1px solid var(--border-subtle);
}

.premium-table tbody tr:hover {
    background: var(--surface-muted);
}

/* Enhanced table styles for all tables */
table {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

table thead {
    background: var(--surface-sunken);
}

table tbody tr {
    transition: background-color var(--duration-fast) var(--ease-smooth);
}

table tbody tr:hover {
    background: var(--surface-muted);
}

/* Table action buttons */
table button {
    transition: background-color var(--duration-fast) var(--ease-smooth),
        color var(--duration-fast) var(--ease-smooth);
}

/* ===================================
   TABLE COLUMN RESIZING FIX
   Forces table-layout:fixed tables to 
   respect explicit column widths and
   clip content instead of expanding.
   =================================== */

/* For tables with table-layout: fixed, force cells to respect widths */
table.table-fixed,
table[style*="table-layout: fixed"] {
    table-layout: fixed !important;
    width: 100%;
}

/* Force all cells in fixed-layout tables to clip their content */
table.table-fixed th,
table.table-fixed td,
table[style*="table-layout: fixed"] th,
table[style*="table-layout: fixed"] td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
    /* max-width: 0 is the key trick - it forces cells to respect col widths */
    max-width: 0;
}

/* Ensure inner content in resizable cells also clips properly */
table.table-fixed th>*,
table.table-fixed td>*,
table[style*="table-layout: fixed"] th>*,
table[style*="table-layout: fixed"] td>* {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Specific fix for External Opportunities Table and similar resizable tables */
#external-opportunities-table th,
#external-opportunities-table td,
#masterListTable th,
#masterListTable td,
#partners-table th,
#partners-table td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 0;
}

/* Nested flex containers in cells should also clip */
#external-opportunities-table .flex,
#masterListTable .flex,
#partners-table .flex {
    min-width: 0;
    overflow: hidden;
}

/* Allow action column buttons to remain visible */
table.table-fixed td:last-child,
table.table-fixed th:last-child,
table[style*="table-layout: fixed"] td:last-child,
table[style*="table-layout: fixed"] th:last-child {
    overflow: visible !important;
    max-width: none;
}

/* Checkbox column (first child) should not be clipped */
table.table-fixed td:first-child,
table.table-fixed th:first-child,
table[style*="table-layout: fixed"] td:first-child,
table[style*="table-layout: fixed"] th:first-child {
    overflow: visible !important;
    max-width: none;
}

/* ===================================
   PREMIUM MODALS
   =================================== */

.modal-backdrop {
    background: rgba(15, 23, 42, 0.45);
    animation: fadeIn var(--duration-normal) var(--ease-out);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.premium-modal {
    animation: slideUp var(--duration-slow) var(--ease-out);
    box-shadow: var(--shadow-2xl);
    border-radius: var(--radius-2xl);
}

/* Enhanced Modal Styles */
#partner-modal>div,
#ai-modal>div,
#delete-modal>div,
#performance-modal>div,
#single-opportunity-modal>div,
#restore-modal>div,
#edit-certification-modal>div,
#delete-certification-modal>div,
#bulk-delete-progress-modal>div,
#import-preview-modal>div {
    animation: slideUp var(--duration-slow) var(--ease-out);
    box-shadow: var(--shadow-2xl);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Modal Headers */
#partner-modal h3,
#ai-modal h3,
#delete-modal h3,
#performance-modal h3,
#single-opportunity-modal h3,
#restore-modal h3,
#edit-certification-modal h3,
#delete-certification-modal h3,
#bulk-delete-progress-modal h3,
#import-preview-modal h3 {
    color: #0f172a;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Modal Form Inputs */
#partner-modal input,
#partner-modal select,
#performance-modal input,
#performance-modal select,
#single-opportunity-modal input,
#single-opportunity-modal select,
#edit-certification-modal input,
#edit-certification-modal select {
    transition: border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

#partner-modal input:focus,
#partner-modal select:focus,
#performance-modal input:focus,
#performance-modal select:focus,
#single-opportunity-modal input:focus,
#single-opportunity-modal select:focus,
#edit-certification-modal input:focus,
#edit-certification-modal select:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
    outline: none;
}

/* Modal Buttons */
#partner-modal button[type="submit"],
#performance-modal button[type="submit"],
#single-opportunity-modal button[type="submit"],
#edit-certification-modal button[type="submit"],
#bulk-delete-progress-modal button,
button[data-action="confirm-import"] {
    background: var(--gradient-primary);
    border: none;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
}

#partner-modal button[type="submit"]:hover,
#performance-modal button[type="submit"]:hover,
#single-opportunity-modal button[type="submit"]:hover,
#edit-certification-modal button[type="submit"]:hover,
button[data-action="confirm-import"]:hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-md);
}

/* Delete & Cancel Buttons */
#confirm-delete-button,
#confirm-delete-cert-button,
#confirm-restore-button {
    background: #dc2626;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
}

#confirm-delete-button:hover,
#confirm-delete-cert-button:hover,
#confirm-restore-button:hover {
    background: #b91c1c;
    box-shadow: var(--shadow-md);
}

button[data-action="close-modal"] {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    transition: background-color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
}

button[data-action="close-modal"]:hover {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
}

/* Delete Modal Warning Icons */
#delete-modal .bg-red-100,
#restore-modal .bg-red-100,
#delete-certification-modal .bg-red-100 {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* AI Modal Icon */
#ai-modal .bg-indigo-100 {
    background: var(--primary-50);
}

/* Progress Modal */
#bulk-delete-progress-bar {
    background: var(--gradient-primary);
    transition: width var(--duration-slow) var(--ease-smooth);
    border-radius: var(--radius-full);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   PREMIUM BADGES & STATUS
   =================================== */

.badge-premium {
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-success {
    background: var(--primary-50);
    color: var(--primary-700);
}

.badge-warning {
    background: #fef3c7;
    color: #b45309;
}

.badge-error {
    background: #fee2e2;
    color: #b91c1c;
}

/* ===================================
   LOADING STATES
   =================================== */

.spinner {
    border: 4px solid rgba(102, 126, 234, 0.1);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border-left-color: var(--primary-600);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ===================================
   PREMIUM SCROLLBAR
   =================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: content-box;
}

/* ===================================
   PREMIUM DASHBOARD ENHANCEMENTS
   =================================== */

/* Main content background */
#main-content {
    background: var(--surface-muted);
}

/* Enhanced stat cards on dashboard */
.grid>.bg-white {
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
}

.grid>.bg-white:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

/* Premium page headers */
h1,
h2,
h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Premium button styling for action buttons */
button.bg-indigo-600,
button.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-500 {
    background: var(--gradient-primary) !important;
    transition: background-color var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth);
    box-shadow: var(--shadow-sm);
}

button.bg-indigo-600:hover,
button.bg-indigo-500:hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-md);
}

/* Premium secondary buttons */
button.bg-white,
button.border-gray-300 {
    transition: background-color var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth);
}

button.bg-white:hover {
    box-shadow: var(--shadow-sm);
}

/* Premium table styling */
table {
    border-radius: 12px;
    overflow: visible;
    /* Allow column resizer handles to be visible */
}

/* Apply overflow to table wrapper if needed */
.overflow-x-auto {
    border-radius: 12px;
    overflow: auto;
}

table thead {
    background: var(--surface-sunken);
}

table thead th {
    position: relative;
    /* Ensure resizer handles are positioned correctly */
}

table tbody tr {
    transition: background-color var(--duration-fast) var(--ease-smooth);
}

table tbody tr:hover {
    background: var(--surface-muted);
}

/* Column resizer styling */
.col-resizer {
    /* Make handles wider and visible by default so users can always grab them */
    opacity: 1 !important;
    transition: opacity 0.12s ease, background 0.12s ease;
    background: rgba(16, 185, 129, 0.35) !important;
    cursor: col-resize;
    user-select: none;
    z-index: 2147483647 !important;
    width: 12px !important;
    right: -6px !important;
    /* overlap into adjacent column for easier grab */
    pointer-events: auto !important;
}

table thead th {
    position: relative;
    overflow: visible;
    /* Allow resizer to extend */
}

table thead th:hover .col-resizer {
    opacity: 1;
}

.col-resizer:hover {
    background: rgba(16, 185, 129, 0.7) !important;
    opacity: 1 !important;
}

.col-resizer:active {
    background: rgba(16, 185, 129, 0.85) !important;
}

/* Defensive: ensure resizer handles are always reachable and visible
   in case other styles set pointer-events or z-index on ancestors. */
.col-resizer {
    pointer-events: auto !important;
    z-index: 2147483647 !important;
}

/* Visual guide during resize */
.table-resize-guide {
    animation: guideGlow 1.5s ease-in-out infinite;
    z-index: 2147483647 !important;
    pointer-events: none !important;
}

@keyframes guideGlow {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* Premium popover styling */
#partner-list-popover {
    max-height: calc(100vh - 100px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    animation: popoverFadeIn 0.2s ease-out;
}

@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#partner-list-popover .overflow-y-auto {
    /* Custom scrollbar for popover content */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

#partner-list-popover .overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

#partner-list-popover .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

#partner-list-popover .overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

#partner-list-popover .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ===================================
   PREMIUM ONBOARDING TOUR STYLING
   =================================== */

/* Help button pulse animation */
#help-tour-button {
    position: relative;
}

#help-tour-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.25);
    transform: translate(-50%, -50%);
    animation: helpPulse 2s ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
}

@keyframes helpPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.5;
    }
}

/* Premium Driver.js styling */
.driver-popover-premium.driver-popover {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    max-width: 400px;
}

.driver-popover-premium .driver-popover-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d4ed8;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.driver-popover-premium .driver-popover-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 1rem;
}

.driver-popover-premium .driver-popover-progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.driver-popover-premium .driver-popover-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.driver-popover-premium button {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--duration-normal) var(--ease-smooth);
    border: none;
    cursor: pointer;
}

.driver-popover-premium .driver-popover-next-btn {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.driver-popover-premium .driver-popover-next-btn:hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-md);
}

.driver-popover-premium .driver-popover-prev-btn {
    background: white;
    color: #2563eb;
    border: 1px solid var(--primary-200);
}

.driver-popover-premium .driver-popover-prev-btn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.driver-popover-premium .driver-popover-close-btn {
    background: transparent;
    color: #9ca3af;
    padding: 0.5rem;
}

.driver-popover-premium .driver-popover-close-btn:hover {
    color: #6b7280;
    background: #f3f4f6;
}

/* Arrow styling */
.driver-popover-premium .driver-popover-arrow {
    border-color: white;
}

.driver-popover-premium .driver-popover-arrow-side-top {
    border-top-color: white;
}

.driver-popover-premium .driver-popover-arrow-side-bottom {
    border-bottom-color: white;
}

.driver-popover-premium .driver-popover-arrow-side-left {
    border-left-color: white;
}

.driver-popover-premium .driver-popover-arrow-side-right {
    border-right-color: white;
}

/* Overlay enhancement */
.driver-overlay {
    background: rgba(15, 23, 42, 0.7) !important;
}

/* Highlighted element enhancement */
.driver-active-element {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.55) !important;
    border-radius: var(--radius-md);
}

/* Animation for popover entrance */
.driver-popover-premium {
    animation: tourPopoverIn var(--duration-slow) var(--ease-out);
}

@keyframes tourPopoverIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Premium input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    transition: border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
    outline: none;
}

/* Premium search input */
#search-input {
    background: var(--surface-sunken);
    transition: background-color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        width var(--duration-normal) var(--ease-smooth);
    border: 1px solid var(--border);
}

#search-input:focus {
    background: var(--surface);
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
    width: 20rem !important;
}

/* Enhanced search results dropdown */
#search-results-popover {
    animation: searchDropdownSlideIn 0.2s var(--ease-out);
    transform-origin: top;
    position: fixed !important;
    z-index: 999999 !important;
}

@keyframes searchDropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Search result items */
.search-result-item {
    transition: background-color var(--duration-fast) var(--ease-smooth);
}

.search-result-item:hover {
    background: var(--surface-muted);
}

/* Highlighted search text */
mark {
    background: #fef08a;
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

/* Search clear button */
#search-clear-btn {
    transition: background-color var(--duration-fast) var(--ease-smooth),
        color var(--duration-fast) var(--ease-smooth);
}

#search-clear-btn:hover {
    color: #475569;
}

/* Keyboard shortcut kbd styling */
kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Premium notification badge */
#notification-badge {
    background: #dc2626;
    box-shadow: var(--shadow-sm);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: translate(50%, -50%) scale(1);
    }

    50% {
        transform: translate(50%, -50%) scale(1.1);
    }
}

/* Premium charts and visualizations */
canvas {
    border-radius: 12px;
}

/* Enhanced modal backdrop */
.modal-backdrop {
    background: rgba(15, 23, 42, 0.7);
}

/* Premium form labels */
label {
    font-weight: 500;
    color: #374151;
}

/* Premium shadows for elevated elements */
.shadow-lg,
.shadow-xl {
    box-shadow: var(--shadow-lg);
}

/* Premium border radius for cards */
.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

/* Status badges — flat tints */
.bg-green-100 {
    background: #d1fae5;
}

.bg-yellow-100 {
    background: #fef3c7;
}

.bg-red-100 {
    background: #fee2e2;
}

.bg-blue-100 {
    background: #dbeafe;
}

/* ===================================
   UTILITY CLASSES
   =================================== */

.glass-effect {
    background: var(--surface);
    border: 1px solid var(--border);
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Brand gradient surface — emerald → teal → deep blue */
.brand-gradient {
    background: var(--gradient-primary) !important;
}

.hover-lift {
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
}

.hover-lift:hover {
    box-shadow: var(--shadow-md);
}

.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-smooth);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow);
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {
    .login-card {
        padding: 2rem;
        border-radius: var(--radius-2xl);
    }

    .stat-value {
        font-size: 2rem;
    }
}

/* ===================================
   ACCESSIBILITY
   =================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

:focus-visible {
    outline: 3px solid var(--primary-400);
    outline-offset: 2px;
}

/* ===================================
   EXISTING STYLES (Preserved)
   =================================== */

.tab-button {
    @apply whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm;
}

.tab-button.active {
    @apply border-indigo-500 text-indigo-600;
}

.tab-button:not(.active) {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
}

.tab-button-sm {
    @apply relative -ml-px inline-flex items-center border bg-white px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10;
}

.tab-button-sm.active {
    /* Don't use a filled background for active state here — prefer border/text color.
       Use transparent background and let section-specific classes control color. */
    background-color: transparent !important;
    color: inherit;
    border-color: currentColor;
}

/* Dashboard metric/product tabs — styling delegated to .tab-btn / .tab-nav-on-gray */
/* These classes are kept as JS selectors only */
.dashboard-metric-tab,
.dashboard-product-tab {
    /* no overrides — .tab-btn handles all visual states */
}

/* Low Performers tabs: mirror the base tab styling so JS tab switching behaves consistently
   The template will add color classes like 'border-orange-600 text-orange-600' for active state. */
/* Dashboard low-performers tabs — styling delegated to .tab-btn / .tab-nav-on-gray */
.dashboard-low-performers-tab {
    /* no overrides — .tab-btn handles all visual states */
}

.form-checkbox:disabled {
    background-color: #e5e7eb;
    border-color: #d1d5db;
    cursor: not-allowed;
}

.form-checkbox:disabled:checked {
    background-color: #9ca3af;
    border-color: #9ca3af;
}

.rotate-180 {
    transform: rotate(180deg);
}

.resizable-chat {
    resize: both;
    overflow: auto;
    min-width: 250px;
    min-height: 300px;
    max-width: 80vw;
    max-height: 80vh;
}

/* ===================================
   PREMIUM PAGE TRANSITIONS & ENHANCEMENTS
   =================================== */

/* Page content fade-in */
#main-content>* {
    animation: fadeInUp 0.5s var(--ease-out) forwards;
    opacity: 0;
}

#main-content>*:nth-child(1) {
    animation-delay: 0.1s;
}

#main-content>*:nth-child(2) {
    animation-delay: 0.2s;
}

#main-content>*:nth-child(3) {
    animation-delay: 0.3s;
}

#main-content>*:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced form inputs across the app */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    transition: border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
    border-radius: var(--radius-md);
}

input[type="text"]:not(.login-input):focus,
input[type="email"]:not(.login-input):focus,
input[type="password"]:not(.login-input):focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
    outline: none;
}

/* Enhanced checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
    transition: all var(--duration-fast) var(--ease-smooth);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--gradient-primary);
    border-color: var(--primary-600);
}

/* Chat Widget & Popovers */
/* TEMPORARILY DISABLED - Chat widget not ready */
#chat-widget-container,
#chat-open-button,
#chat-window {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#chat-window {
    background: white;
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    animation: slideUp var(--duration-slow) var(--ease-out);
}

#chat-window .bg-indigo-600 {
    background: var(--gradient-primary) !important;
}

#chat-messages {
    background: var(--surface-muted);
}

#chat-input {
    border: 1px solid var(--border-strong);
    transition: border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
}

#chat-input:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* Toast Notifications */
#toast-container>div {
    background: white !important;
    color: #1f2937 !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    animation: slideInRight var(--duration-normal) var(--ease-out);
    padding: 1rem 1.5rem;
    font-weight: 600;
}

/* Toast success */
#toast-container>div.bg-green-500,
#toast-container>div.bg-blue-500 {
    background: #2563eb !important;
    color: white !important;
}

/* Toast error */
#toast-container>div.bg-red-500,
#toast-container>div.bg-red-600 {
    background: #dc2626 !important;
    color: white !important;
}

/* Toast warning */
#toast-container>div.bg-yellow-500,
#toast-container>div.bg-amber-500 {
    background: #d97706 !important;
    color: white !important;
}

/* Toast info */
#toast-container>div.bg-blue-500,
#toast-container>div.bg-indigo-500 {
    background: #2563eb !important;
    color: white !important;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Partner List Popover */
#partner-list-popover {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    animation: slideDown var(--duration-normal) var(--ease-out);
}

/* Loading screen enhancement */
#loading-screen {
    background: var(--surface-muted);
    position: relative;
}

/* Progressive Loading Container */
.loading-container {
    text-align: center;
    max-width: 420px;
    width: 92%;
    background: var(--surface);
    padding: 2rem 2.5rem 2.25rem;
    border-radius: var(--radius-2xl);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16), 0 4px 20px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15,23,42,0.04);
    border: 1px solid var(--border);
    position: relative;
    z-index: 1;
}

.loading-logo {
    margin-bottom: 1.75rem;
    display: flex;
    justify-content: center;
}

.loading-content {
    margin-top: 0;
}

.loading-stage {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.875rem;
    min-height: 1.5rem;
    letter-spacing: -0.01em;
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 0.875rem;
    position: relative;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb, #1d4ed8);
    border-radius: 9999px;
    width: 0%;
    transition: width 0.45s cubic-bezier(0, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.45);
}

.loading-detail {
    font-size: 0.8125rem;
    color: #64748b;
    margin-bottom: 0.25rem;
    min-height: 1.125rem;
}

.loading-stats {
    font-size: 0.6875rem;
    color: #94a3b8;
    font-family: monospace;
    min-height: 1rem;
}


/* Premium dividers */
hr {
    border: none;
    height: 1px;
    background: var(--border);
}

/* ===================================
   PREMIUM CHARTS & VISUALIZATIONS
   =================================== */

/* Chart containers */
.chart-container,
canvas {
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-smooth);
}

.chart-container:hover {
    box-shadow: var(--shadow-md);
}

/* Chart cards */
.chart-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
}

.chart-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

/* Chart titles */
.chart-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

/* Chart legends */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(209, 213, 219, 0.3);
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    transition: all var(--duration-fast) var(--ease-smooth);
}

.chart-legend-item:hover {
    color: #0f172a;
}

.chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: transform var(--duration-fast) var(--ease-smooth);
}

/* Chart tooltips */
.chartjs-tooltip {
    background: #ffffff !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem !important;
    font-family: 'Inter', sans-serif !important;
}

/* Stat cards in charts section */
.stat-card-chart {
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.stat-card-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-slow) var(--ease-out);
}

.stat-card-chart:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.stat-card-chart:hover::before {
    transform: scaleX(1);
}

.stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0.5rem 0;
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.stat-change-positive {
    background: #d1fae5;
    color: #047857;
}

.stat-change-negative {
    background: #fee2e2;
    color: #dc2626;
}

/* Progress bars in charts */
.chart-progress-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.chart-progress-fill {
    height: 100%;
    background: var(--primary-600);
    border-radius: var(--radius-full);
    transition: width 1s var(--ease-smooth);
    position: relative;
}

/* Chart grid customization */
.chart-grid-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Mini charts (sparklines) */
.mini-chart {
    height: 60px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.mini-chart canvas {
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* ===================================
   FLUID MOTION SYSTEM
   Corporate-grade: purposeful, calm,
   precise. No bounce in content areas.
   =================================== */

/* ---------- Refined timing tokens ---------- */
:root {
    --ease-decel:  cubic-bezier(0.00, 0.00, 0.20, 1.00); /* entrance */
    --ease-accel:  cubic-bezier(0.40, 0.00, 1.00, 1.00); /* exit     */
    --ease-standard: cubic-bezier(0.20, 0.00, 0.00, 1.00); /* default motion */
    --ease-expressive: cubic-bezier(0.34, 1.10, 0.64, 1); /* icon / swatch only */

    --dur-instant:  80ms;
    --dur-quick:   150ms;
    --dur-moderate: 240ms;
    --dur-gentle:  360ms;
    --dur-deliberate: 480ms;
}

/* ---------- Page / section transitions ---------- */
/*
   JS sets .section-entering on the incoming view right before it is shown,
   then removes the class after one animation frame.
   If JS doesn't manage it, the #main-content > * stagger still applies.
*/
.section-entering {
    animation: sectionEnter var(--dur-moderate) var(--ease-decel) both;
}

.section-leaving {
    animation: sectionLeave var(--dur-quick) var(--ease-accel) both;
    pointer-events: none;
}

@keyframes sectionEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@keyframes sectionLeave {
    from { opacity: 1; transform: translateY(0);   }
    to   { opacity: 0; transform: translateY(-4px); }
}

/* Tighten the existing fadeInUp on main-content children */
#main-content > * {
    animation-name: fadeInUp;
    animation-duration: var(--dur-moderate);
    animation-timing-function: var(--ease-decel);
    animation-fill-mode: both;
}

/* Stagger: keep existing delays but cap at 4 children so late items
   don't wait too long */
#main-content > *:nth-child(1) { animation-delay: 40ms;  }
#main-content > *:nth-child(2) { animation-delay: 90ms;  }
#main-content > *:nth-child(3) { animation-delay: 140ms; }
#main-content > *:nth-child(4) { animation-delay: 190ms; }

/* Reduced vertical travel — feels intentional, not theatrical */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ---------- Button micro-interactions ---------- */
/*
   Press: very slight scale-down gives tactile feedback.
   Hover: lift + shadow rather than brightness alone.
   Release: snaps back quickly (ease-decel).
*/
button,
[role="button"],
a.btn-primary,
a.btn-secondary {
    transition:
        background-color var(--dur-quick) var(--ease-standard),
        box-shadow       var(--dur-quick) var(--ease-standard),
        border-color     var(--dur-quick) var(--ease-standard),
        color            var(--dur-quick) var(--ease-standard),
        transform        var(--dur-instant) var(--ease-decel),
        filter           var(--dur-quick) var(--ease-standard);
    will-change: transform;
}

button:active,
[role="button"]:active {
    transform: scale(0.975);
    transition-duration: var(--dur-instant);
}

/* Primary action buttons get a subtle lift on hover */
.btn-primary:hover,
button.bg-indigo-600:hover,
button.bg-indigo-500:hover,
#partner-modal button[type="submit"]:hover,
#performance-modal button[type="submit"]:hover,
#single-opportunity-modal button[type="submit"]:hover,
#edit-certification-modal button[type="submit"]:hover,
button[data-action="confirm-import"]:hover,
.login-button:hover {
    transform: translateY(-1px);
    transition-duration: var(--dur-quick);
}

.btn-primary:active,
button.bg-indigo-600:active,
button.bg-indigo-500:active,
.login-button:active {
    transform: translateY(0) scale(0.975);
}

/* Destructive buttons */
#confirm-delete-button:hover,
#confirm-delete-cert-button:hover,
button[data-action="sign-out"]:hover {
    transform: translateY(-1px);
}

#confirm-delete-button:active,
#confirm-delete-cert-button:active,
button[data-action="sign-out"]:active {
    transform: scale(0.975);
}

/* ---------- Card hover — unified lift ---------- */
.premium-card,
.stat-card,
.stat-card-chart,
.chart-card,
.grid > .bg-white,
.hover-lift {
    transition:
        box-shadow    var(--dur-moderate) var(--ease-decel),
        border-color  var(--dur-moderate) var(--ease-decel),
        transform     var(--dur-moderate) var(--ease-decel);
    will-change: transform;
}

.premium-card:hover,
.stat-card:hover,
.stat-card-chart:hover,
.chart-card:hover,
.grid > .bg-white:hover,
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
}

/* ---------- Tab underline slide ---------- */
/*
   Wraps the active tab's border-bottom transition so it glides
   rather than snapping. Works with the existing .tab-button pattern.
*/
.tab-button {
    transition:
        color        var(--dur-quick) var(--ease-standard),
        border-color var(--dur-moderate) var(--ease-standard);
}

.dashboard-metric-tab,
.dashboard-product-tab,
.dashboard-low-performers-tab {
    transition:
        color        var(--dur-quick) var(--ease-standard),
        border-color var(--dur-moderate) var(--ease-standard),
        background   var(--dur-quick) var(--ease-standard);
}

/* ---------- Sidebar icon micro-animation ---------- */
/* Icons scale up on hover / active with an expressive curve */
.sidebar nav a svg {
    transition:
        stroke     var(--dur-quick) var(--ease-standard),
        transform  var(--dur-moderate) var(--ease-expressive);
}

.sidebar nav > div > a:hover svg,
#nav-dashboard:hover svg {
    transform: scale(1.12);
}

.sidebar nav a.nav-active svg,
.sidebar nav a.active svg {
    transform: scale(1.06);
}

/* ---------- Modal entrance refinement ---------- */
/*
   A composed animation: opacity + translate so the card
   feels like it settles into place rather than jumping.
*/
#partner-modal > div,
#ai-modal > div,
#delete-modal > div,
#performance-modal > div,
#single-opportunity-modal > div,
#restore-modal > div,
#edit-certification-modal > div,
#delete-certification-modal > div,
#bulk-delete-progress-modal > div,
#import-preview-modal > div {
    animation: modalSettle var(--dur-moderate) var(--ease-decel) both;
}

@keyframes modalSettle {
    from { opacity: 0; transform: translateY(12px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.modal-backdrop {
    animation: backdropFadeIn var(--dur-moderate) var(--ease-decel) both;
}

@keyframes backdropFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Popover & dropdown entrance ---------- */
#search-results-popover,
#notification-popover,
#partner-list-popover,
#contrib-partner-suggestions {
    animation: popoverEnter var(--dur-quick) var(--ease-decel) both;
    transform-origin: top center;
}

@keyframes popoverEnter {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

/* ---------- Toast slide-in ---------- */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0);    }
}

#toast-container > div {
    animation: slideInRight var(--dur-quick) var(--ease-decel) both;
}

/* ---------- Skeleton shimmer — organic wave ---------- */
.skeleton {
    background: linear-gradient(
        90deg,
        #f1f5f9 0%,
        #e8edf3 40%,
        #f1f5f9 80%
    );
    background-size: 300% 100%;
    animation: skeletonWave 1.8s ease-in-out infinite;
}

@keyframes skeletonWave {
    0%   { background-position: 200% center; }
    100% { background-position: -100% center; }
}

/* ---------- Notification badge — calm pulse ---------- */
#notification-badge {
    animation: badgePulse 3s var(--ease-standard) infinite;
}

@keyframes badgePulse {
    0%, 80%, 100% { transform: translate(50%, -50%) scale(1);    }
    40%            { transform: translate(50%, -50%) scale(1.15); }
}

/* ---------- Stat card top-bar reveal ---------- */
/* Already exists; keep it but use a smoother duration */
.stat-card::before,
.stat-card-chart::before {
    transition: transform var(--dur-moderate) var(--ease-decel);
}

/* ---------- Search input expand ---------- */
#search-input {
    transition:
        background-color var(--dur-quick)    var(--ease-standard),
        border-color     var(--dur-quick)    var(--ease-standard),
        box-shadow       var(--dur-quick)    var(--ease-standard),
        width            var(--dur-moderate) var(--ease-decel);
}

/* ---------- Focus rings ---------- */
:focus-visible {
    transition: outline-offset var(--dur-instant) var(--ease-decel),
                box-shadow     var(--dur-instant) var(--ease-decel);
}

/* ---------- Scrollbar — refined, narrower ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    background-clip: content-box;
    transition: background var(--dur-quick) var(--ease-standard);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: content-box;
}

/* ---------- Table row hover — smoother ---------- */
table tbody tr,
.premium-table tbody tr {
    transition: background-color var(--dur-quick) var(--ease-standard);
}

/* ---------- Submenu entrance ---------- */
#corepartners-submenu:not(.hidden),
#analytics-submenu:not(.hidden),
#marketing-submenu:not(.hidden),
#settings-submenu:not(.hidden) {
    animation: submenuReveal var(--dur-quick) var(--ease-decel) both;
}

@keyframes submenuReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ---------- Help pulse — subtler ---------- */
#help-tour-button::after {
    animation: helpRipple 2.8s var(--ease-accel) infinite;
}

@keyframes helpRipple {
    0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
    70%  { transform: translate(-50%, -50%) scale(1.6); opacity: 0;   }
    100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0;   }
}

/* ---------- Spinner — smooth ---------- */
.spinner {
    animation: smoothSpin 0.9s linear infinite;
}

@keyframes smoothSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ================================================================
   STANDARD TAB COMPONENT
   Primary:   .tab-pills / .tab-pill   — page-level navigation
   Secondary: .tab-boxed-nav / .tab-boxed-btn — nested sub-navigation
   Legacy:    .tab-nav / .tab-btn      — alias for primary (kept for compat)
   ================================================================ */

/* ── PRIMARY container — segmented control card (full-width row) ──── */
.tab-nav,
.tab-pills {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px;
    width: 100%;
    background: #f1f5f9;                     /* slate-100 */
    border: 1px solid #e2e8f0;               /* slate-200 */
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    scrollbar-width: thin;
}

.tab-nav::-webkit-scrollbar,
.tab-pills::-webkit-scrollbar,
.tab-boxed-nav::-webkit-scrollbar { height: 4px; }
.tab-nav::-webkit-scrollbar-thumb,
.tab-pills::-webkit-scrollbar-thumb,
.tab-boxed-nav::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.12); border-radius: 2px; }

/* ── SECONDARY container — folder-tab row ─────────────────────────── */
.tab-boxed-nav {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 0 4px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid #cbd5e1;       /* slate-300 — the "shelf" line */
    border-radius: 0;
    overflow-x: auto;
    max-width: 100%;
    margin-bottom: 0;
}

/* ── PRIMARY button — fills row evenly when space allows, never crowds labels ── */
.tab-btn,
.tab-pill {
    position: relative;
    flex: 1 1 0;
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 11px 22px;
    font-size: 0.9375rem;                    /* 15px — feels right under page heading */
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: #64748b;                          /* slate-500 */
    background: transparent;
    border: none;
    border-radius: 8px;
    margin: 0;
    cursor: pointer;
    transition: color 0.15s ease,
                background-color 0.15s ease,
                box-shadow 0.2s ease;
}

.tab-btn:hover,
.tab-pill:hover {
    color: #334155;                          /* slate-700 */
    background: rgba(255, 255, 255, 0.7);
}

/* PRIMARY active — floating white card with brand color text */
.tab-btn.active,
.tab-pill.active {
    color: var(--primary-700, #1d4ed8);
    background: #ffffff;
    font-weight: 600;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 2px 4px rgba(15, 23, 42, 0.04),
        inset 0 0 0 0.5px rgba(15, 23, 42, 0.04);
}

/* PRIMARY danger variant — Quarantine */
.tab-pill.tab-pill-danger.active {
    color: #b91c1c;
    box-shadow:
        0 1px 2px rgba(185, 28, 28, 0.08),
        0 2px 4px rgba(185, 28, 28, 0.08),
        inset 0 0 0 0.5px rgba(185, 28, 28, 0.12);
}

/* ── SECONDARY button — folder tab ────────────────────────────────── */
.tab-boxed-btn {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 9px 22px;
    font-size: 0.875rem;                     /* 14px */
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    color: #64748b;                          /* slate-500 */
    background: #f1f5f9;                     /* slate-100 — inactive folder */
    border: 1.5px solid #cbd5e1;             /* slate-300 */
    border-bottom: none;
    border-radius: 10px 10px 0 0;            /* rounded top corners only */
    margin: 0 0 -1.5px 0;                    /* overlap shelf line */
    cursor: pointer;
    transition: color 0.15s ease,
                background-color 0.15s ease,
                border-color 0.15s ease;
}

.tab-boxed-btn:hover {
    color: #334155;                          /* slate-700 */
    background: #e2e8f0;                     /* slate-200 */
}

/* Active tab — pops forward, white background "cuts through" the shelf line */
.tab-boxed-btn.active {
    color: var(--primary-700, #1d4ed8);
    background: #ffffff;
    font-weight: 600;
    border-color: #cbd5e1;
    z-index: 2;
    box-shadow: 0 -1px 3px rgba(15, 23, 42, 0.04);
}

.tab-boxed-btn.active:hover {
    background: #ffffff;
}

/* Optional accent — thin gradient strip along the top edge of active tab */
.tab-boxed-btn.active::before {
    content: '';
    position: absolute;
    top: -1.5px;
    left: -1.5px;
    right: -1.5px;
    height: 2.5px;
    background: var(--gradient-primary, linear-gradient(135deg, #10b981 0%, #1e40af 100%));
    border-radius: 10px 10px 0 0;
}

/* ── Focus ring for accessibility ────────────────────────────────── */
.tab-btn:focus-visible,
.tab-pill:focus-visible,
.tab-boxed-btn:focus-visible {
    outline: 2px solid var(--primary-500, #3b82f6);
    outline-offset: 2px;
}

/* ---------- Loading logo pulse — gentle ---------- */
.loading-logo {
    animation: logoBreathe 2.4s var(--ease-standard) infinite;
}

@keyframes logoBreathe {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%       { opacity: 0.65; transform: scale(0.97); }
}

/* ---------- Progress bar fill ---------- */
.progress-bar,
.chart-progress-fill {
    transition: width var(--dur-deliberate) var(--ease-decel);
}

/* ---------- Reduced-motion: always respected ---------- */
@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;
    }
}

/* Chart loading state */
.chart-loading {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted);
    border-radius: var(--radius-lg);
}

.chart-loading::after {
    content: '';
    width: 44px;
    height: 44px;
    border: 3px solid var(--border);
    border-top-color: var(--primary-600);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Chart empty state */
.chart-empty {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background: var(--surface-muted);
    border-radius: var(--radius-xl);
    padding: 2rem;
}

.chart-empty-icon {
    width: 64px;
    height: 64px;
    opacity: 0.5;
    margin-bottom: 1rem;
}

.chart-empty-text {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
}

/* Chart filters and controls */
.chart-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
}

.chart-control-button {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: white;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--duration-fast) var(--ease-smooth);
    cursor: pointer;
}

.chart-control-button:hover {
    border-color: var(--primary-400);
    color: var(--primary-700);
    background: var(--primary-50);
}

.chart-control-button.active {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

/* Responsive charts */
@media (max-width: 768px) {
    .chart-grid-card {
        grid-template-columns: 1fr;
    }

    .chart-container {
        padding: 0.75rem;
    }

    .stat-number {
        font-size: 1.75rem;
    }
}

/* High-specificity override: ensure dashboard tabs always use underline/border active style
   even if JS or other styles add bg-*- utility classes. This makes the Top Performers
   tabs match Top Products and Low Performers. */
.border-b>.dashboard-metric-tab.active,
.border-b>.dashboard-product-tab.active,
.border-b>.dashboard-low-performers-tab.active,
.dashboard-metric-tab.active[class*="bg-indigo"],
.dashboard-product-tab.active[class*="bg-purple"],
.dashboard-low-performers-tab.active[class*="bg-orange"],
.dashboard-metric-tab.active.bg-indigo-600,
.dashboard-metric-tab.active.bg-indigo-500,
.dashboard-metric-tab.active.bg-indigo-700,
.dashboard-product-tab.active.bg-purple-600,
.dashboard-low-performers-tab.active.bg-orange-600 {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: inherit !important;
    border-color: currentColor !important;
}

/* Legacy tab guards removed — dashboard tabs now use .tab-btn / .tab-nav-on-gray */

/* Explicit color hex fallbacks so the underline is always visible even if currentColor
   inheritance does not resolve correctly in some contexts. */
/* Stale per-tab color overrides removed — now handled by .tab-btn.active via CSS vars */

/* ===================================
   SANDBOX BUTTON FIX
   Ensure child elements don't capture clicks
   =================================== */
button[data-action] svg,
button[data-action] path,
button[data-action] span,
button[data-action] text {
    pointer-events: none !important;
}

/* ===================================
   TRAINING/ENABLEMENT PREMIUM DESIGN
   =================================== */

/* Smooth badge transitions */
.inline-flex.items-center.rounded-full {
    transition: all 0.3s var(--ease-in-out);
}

/* Add subtle scale on click */
.inline-flex.items-center.rounded-full:active {
    transform: scale(0.95);
}

/* Smooth color transitions */
.bg-green-100 {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-red-100 {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-green-200 {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-red-200 {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Summary card fade animations */
@keyframes fadeUpdate {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.attendance-card-update {
    animation: fadeUpdate 0.5s var(--ease-in-out);
}

/* Ultra-premium shadow for cards */
.shadow-3xl {
    box-shadow: var(--shadow-2xl);
}

/* Event summary card */
.event-summary-card {
    position: relative;
    overflow: hidden;
}

/* Smooth chevron rotation */
.event-chevron {
    transition: transform var(--duration-normal) var(--ease-out);
}

/* Card scale on hover - more subtle */
.event-summary-card {
    transform-origin: center;
    will-change: transform, box-shadow;
}

/* Premium scrollbar for detail lists */
.event-details-content ::-webkit-scrollbar {
    width: 6px;
}

.event-details-content ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.event-details-content ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    transition: background 0.3s;
}

.event-details-content ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Hover state for cards */
.event-summary-card:hover {
    filter: brightness(1.02);
}

/* Scale animation */
@keyframes scaleIn {
    from {
        transform: translateY(8px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.event-summary-card {
    animation: scaleIn var(--duration-slow) var(--ease-out);
}

/* Detail panel slide-in */
@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

.event-details-content:not(.hidden) {
    animation: slideDown 0.5s var(--ease-out);
}

/* ===================================
   ONBOARDING TOUR STYLES
   =================================== */

/* Onboarding Overlay - dims background */
.onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    animation: fadeIn 0.3s var(--ease-out);
}

/* Highlight element being explained */
.onboarding-highlight {
    position: relative;
    z-index: 9999;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(16, 185, 129, 0.55) !important;
    border-radius: var(--radius-md);
    transition: box-shadow 0.3s var(--ease-smooth);
}

/* Onboarding Tooltip */
.onboarding-tooltip {
    position: fixed;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    z-index: 10000;
    max-width: 400px;
    animation: tooltipSlide var(--duration-slow) var(--ease-out);
    border: 1px solid var(--border);
    padding: 0;
}

@keyframes tooltipSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tooltip positioning classes */
.onboarding-top {
    transform: translateY(-10px) !important;
}

.onboarding-bottom {
    transform: translateY(10px) !important;
}

.onboarding-left {
    transform: translateX(-10px) !important;
}

.onboarding-right {
    transform: translateX(10px) !important;
}

/* Tooltip Header */
.onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: var(--primary-50);
}

.onboarding-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-900);
    letter-spacing: -0.01em;
}

.onboarding-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--primary-600);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease-smooth);
}

.onboarding-close:hover {
    color: var(--primary-900);
}

/* Tooltip Content */
.onboarding-description {
    margin: 0;
    padding: 16px;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

/* Tooltip Actions */
.onboarding-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--primary-100);
    background: rgba(255, 255, 255, 0.5);
}

.btn-skip {
    flex: 1;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
}

.btn-skip:hover {
    background: #f8fafc;
    color: #475569;
    border-color: #cbd5e1;
}

.btn-next {
    flex: 1;
    padding: 8px 12px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s var(--ease-smooth),
        box-shadow 0.2s var(--ease-smooth);
    box-shadow: var(--shadow-sm);
}

.btn-next:hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-md);
}

/* Onboarding Completion Message */
.onboarding-completion-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    animation: popIn 0.4s var(--ease-out);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.completion-content {
    background: white;
    border-radius: var(--radius-2xl);
    padding: 32px;
    box-shadow: var(--shadow-2xl);
    max-width: 500px;
    text-align: center;
    border: 1px solid var(--border);
}

.completion-content h2 {
    margin: 0 0 12px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-900);
    letter-spacing: -0.02em;
}

.completion-content p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

.btn-primary {
    padding: 10px 24px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s var(--ease-smooth),
        box-shadow 0.2s var(--ease-smooth);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-md);
}

/* Tour Progress Indicator */
.onboarding-progress {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-600);
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-300);
    animation: pulse 2s ease-in-out infinite;
}

.progress-dot.active {
    background: var(--primary-600);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Fade animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ===================================
   AMOUNT PRIVACY MASK
   =================================== */
.amt-mask {
    display: inline-block;
    transition: filter 0.2s ease, color 0.2s ease;
}

body.mask-amounts .amt-mask {
    color: transparent !important;
    text-shadow: 0 0 8px rgba(100, 100, 100, 0.8);
    user-select: none;
    cursor: default;
}

/* Toggle button active state */
[data-action="toggle-amount-mask"].mask-active {
    background-color: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fecaca !important;
}

/* Hide PO columns from BSA tables */
body.hide-po .bsa-po-tile { display: none !important; }
body.hide-po .bsa-main-table thead th:nth-child(5),
body.hide-po .bsa-main-table thead th:nth-child(6),
body.hide-po .bsa-main-table tbody td:nth-child(5),
body.hide-po .bsa-main-table tbody td:nth-child(6),
body.hide-po .bsa-main-table tfoot td:nth-child(5),
body.hide-po .bsa-main-table tfoot td:nth-child(6) { display: none !important; }
body.hide-po .bsa-detail-table thead th:nth-child(4),
body.hide-po .bsa-detail-table thead th:nth-child(5),
body.hide-po .bsa-detail-table tbody td:nth-child(4),
body.hide-po .bsa-detail-table tbody td:nth-child(5) { display: none !important; }
[data-action="toggle-po-hidden"].po-hide-active {
    background-color: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fecaca !important;
}

/* ===================================
   CANONICAL COMPONENT VOCABULARY
   Shared classes the JS modules migrate
   to so every page uses one system.
   =================================== */
.ui-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
}

.ui-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

/* Subtle brand-tinted info panel */
.ui-panel {
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-lg);
}

/* Brand gradient header strip */
.ui-band {
    background: var(--gradient-primary);
    color: #ffffff;
}

.ui-band h1,
.ui-band h2,
.ui-band h3,
.ui-band p {
    color: #ffffff;
}

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: filter var(--duration-fast) var(--ease-smooth),
        background-color var(--duration-fast) var(--ease-smooth),
        border-color var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth);
}

.ui-btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    border: none;
    box-shadow: var(--shadow-sm);
}

.ui-btn-primary:hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-md);
}

.ui-btn-secondary {
    background: var(--surface);
    color: var(--primary-700);
    border: 1px solid var(--border-strong);
}

.ui-btn-secondary:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
}

.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--surface-sunken);
    color: #475569;
}

/* ===================================
   CROSS-MODULE COLOR NORMALIZATION
   Token-exact (~=) so 50 vs 500 never
   collide. Decorative purple/violet/
   fuchsia/pink/indigo are remapped to
   the emerald brand. Semantic red /
   green / amber / orange are preserved.
   =================================== */

/* Strong decorative fills -> brand gradient */
[class~="bg-purple-500"],
[class~="bg-purple-600"],
[class~="bg-purple-700"],
[class~="bg-violet-500"],
[class~="bg-violet-600"],
[class~="bg-violet-700"],
[class~="bg-fuchsia-500"],
[class~="bg-fuchsia-600"],
[class~="bg-pink-500"],
[class~="bg-pink-600"],
[class~="bg-indigo-500"],
[class~="bg-indigo-600"],
[class~="bg-indigo-700"] {
    background-image: var(--gradient-primary) !important;
    background-color: transparent !important;
}

/* Light decorative tints -> calm brand tint */
[class~="bg-purple-50"],
[class~="bg-purple-100"],
[class~="bg-violet-50"],
[class~="bg-violet-100"],
[class~="bg-fuchsia-50"],
[class~="bg-fuchsia-100"],
[class~="bg-pink-50"],
[class~="bg-pink-100"],
[class~="bg-indigo-50"],
[class~="bg-indigo-100"] {
    background-color: var(--primary-50) !important;
    background-image: none !important;
}

[class~="bg-purple-200"],
[class~="bg-violet-200"],
[class~="bg-pink-200"],
[class~="bg-indigo-200"] {
    background-color: var(--primary-100) !important;
}

/* Decorative text colors -> brand */
[class~="text-purple-500"],
[class~="text-purple-600"],
[class~="text-purple-700"],
[class~="text-purple-800"],
[class~="text-violet-600"],
[class~="text-violet-700"],
[class~="text-fuchsia-600"],
[class~="text-pink-600"],
[class~="text-pink-700"],
[class~="text-indigo-500"],
[class~="text-indigo-600"],
[class~="text-indigo-700"],
[class~="text-indigo-800"] {
    color: var(--primary-700) !important;
}

/* Decorative borders -> brand */
[class~="border-purple-100"],
[class~="border-purple-200"],
[class~="border-violet-100"],
[class~="border-violet-200"],
[class~="border-pink-100"],
[class~="border-pink-200"],
[class~="border-indigo-100"],
[class~="border-indigo-200"] {
    border-color: var(--primary-100) !important;
}

[class~="border-purple-300"],
[class~="border-purple-400"],
[class~="border-purple-500"],
[class~="border-purple-600"],
[class~="border-violet-500"],
[class~="border-pink-500"],
[class~="border-indigo-300"],
[class~="border-indigo-500"],
[class~="border-indigo-600"] {
    border-color: var(--primary-300) !important;
}

/* Vivid gradient from-stops -> brand gradient (overrides Tailwind stops) */
[class~="from-purple-400"],
[class~="from-purple-500"],
[class~="from-purple-600"],
[class~="from-purple-700"],
[class~="from-violet-500"],
[class~="from-violet-600"],
[class~="from-fuchsia-500"],
[class~="from-fuchsia-600"],
[class~="from-pink-500"],
[class~="from-pink-600"],
[class~="from-indigo-500"],
[class~="from-indigo-600"],
[class~="from-indigo-700"] {
    background-image: var(--gradient-primary) !important;
}

/* Light gradient panels -> flat calm brand tint */
[class~="from-purple-50"],
[class~="from-purple-100"],
[class~="from-violet-50"],
[class~="from-violet-100"],
[class~="from-fuchsia-50"],
[class~="from-pink-50"],
[class~="from-pink-100"],
[class~="from-indigo-50"],
[class~="from-indigo-100"] {
    background-image: none !important;
    background-color: var(--primary-50) !important;
}

/* Common decorative hover states -> brand */
[class~="hover:bg-purple-50"]:hover,
[class~="hover:bg-violet-50"]:hover,
[class~="hover:bg-pink-50"]:hover,
[class~="hover:bg-indigo-50"]:hover,
[class~="hover:bg-purple-100"]:hover,
[class~="hover:bg-indigo-100"]:hover {
    background-color: var(--primary-50) !important;
    background-image: none !important;
}

[class~="hover:bg-purple-600"]:hover,
[class~="hover:bg-purple-700"]:hover,
[class~="hover:bg-violet-600"]:hover,
[class~="hover:bg-pink-600"]:hover,
[class~="hover:bg-indigo-600"]:hover,
[class~="hover:bg-indigo-700"]:hover {
    filter: brightness(0.94);
}

[class~="hover:text-purple-700"]:hover,
[class~="hover:text-indigo-700"]:hover,
[class~="hover:text-purple-800"]:hover {
    color: var(--primary-800) !important;
}

/* ── Weekly BO Compliance Tracker — scroll-driven row focus ── */
tr.wbc-active-row > td {
    background-color: #eff6ff;
    transition: background-color 0.18s ease;
}
tr.wbc-active-row > td.sticky.left-0 {
    background-color: #dbeafe !important;
    box-shadow: inset 3px 0 0 var(--primary-500, #3b82f6);
}
tr.wbc-active-row > td.sticky.right-0 {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%) !important;
}
@keyframes wbc-summary-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.025); }
    100% { transform: scale(1); }
}
/* ============================================================================
   STANDARD TABLE  —  one professional design for every data table in the app.
   ----------------------------------------------------------------------------
   Usage:  add class "portal-table" to a <table>.
           Optionally wrap a STANDALONE table (one not already inside a card) in
           a <div class="portal-table-wrap"> for a rounded, bordered, scrollable
           container.  Modifiers: --compact (denser), --zebra (striped rows).

   Design: "Clean & minimal" — light slate header, roomy padding, horizontal
           separators only (no vertical gridlines), subtle neutral row-hover.

   Specificity note: structural properties (header chrome, padding, borders,
   font-size) are ENFORCED so they unify regardless of leftover Tailwind classes.
   Semantic properties that tables set intentionally — body text COLOUR and cell
   text-ALIGN — are left as low-specificity defaults (:where) so per-cell
   utilities (text-right, text-green-600, status colours, …) still win.
   ============================================================================ */
.portal-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow-x: auto;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}
.portal-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 13px;
}
.portal-table thead th {
    background: var(--primary-600, #2563eb);       /* solid band in the picked theme colour */
    color: #ffffff;                                /* white text for clear contrast on the band */
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    padding: 11px 16px;
    border-bottom: 1px solid var(--primary-700, #1d4ed8);
    white-space: nowrap;
    vertical-align: middle;
}
/* Header sub-text / icons that don't set their own colour inherit white on the band */
:where(.portal-table thead th *) { color: inherit; }
:where(.portal-table thead th) { text-align: left; }   /* default; utilities (text-center) win */
.portal-table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid #f1f5f9;    /* slate-100 — horizontal separators only */
    vertical-align: middle;
    font-size: 13px;
}
:where(.portal-table tbody td) { color: #334155; }     /* default; coloured cells keep their colour */
.portal-table tbody tr:last-child td { border-bottom: none; }
.portal-table tbody tr:hover td { background: var(--primary-50, #f8fafc); }
/* Vertical column separators (subtle) — translucent white on the themed header band,
   light grey between body cells; never after the last column. */
.portal-table thead th:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.22); }
.portal-table tbody td:not(:last-child) { border-right: 1px solid #eef2f7; }
.portal-table--zebra tbody tr:nth-child(even) td { background: #fcfcfd; }
.portal-table--zebra tbody tr:hover td { background: #f1f5f9; }
.portal-table--compact thead th,
.portal-table--compact tbody td { padding: 7px 12px; }

/* Column resize grab-handle — a thin zone on each header's right edge. The drag
   logic lives in js/portal-table-resize.js (delegated, zero-config). Defers to the
   legacy `.col-resizer` when a table is already instrumented by table-resizer.js. */
.portal-table thead th { position: relative; }
.portal-table thead th::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}
.portal-table thead th:hover::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45));
}
.portal-table thead th:has(.col-resizer)::after { display: none; }

/* Fixed layout applied (via JS class) the first time a column is resized, so explicit
   column widths are honored. Headers clip tidily; body cells keep their own wrapping. */
.portal-table.pt-fixed { table-layout: fixed; }
.portal-table.pt-fixed thead th { overflow: hidden; text-overflow: ellipsis; }

td.wbc-summary-pulse {
    animation: wbc-summary-pulse 0.35s cubic-bezier(0.34, 1.38, 0.64, 1);
}