@charset "UTF-8";

/**

 * QLVT Pro V8 - Design System Variables

 * ═══════════════════════════════════════════════════════════════════════════

 * Modern SaaS-grade Design System with Light/Dark Theme Support

 * Optimized for Transport Management Systems

 * ═══════════════════════════════════════════════════════════════════════════

 */

/* =============================================================================

   🔤 GOOGLE FONTS - MODERN TYPOGRAPHY

   ============================================================================= */

/* Google Fonts loaded via <link> in index.html — no duplicate @import needed */

/* =============================================================================

   🎨 LIGHT THEME (DEFAULT)

   ============================================================================= */

:root {

    /* ─────────────────────────────────────────────────────────────────────────

       PRIMARY COLORS - Teal/Cyan for Transportation Industry (Trust & Reliability)

       ───────────────────────────────────────────────────────────────────────── */

    --primary-50: #ecfeff;

    --primary-100: #cffafe;

    --primary-200: #a5f3fc;

    --primary-300: #67e8f9;

    --primary-400: #22d3ee;

    --primary-500: #06b6d4;    /* Main Primary */

    --primary-600: #0891b2;

    --primary-700: #0e7490;

    --primary-800: #155e75;

    --primary-900: #164e63;

    --primary: #0891b2;

    --primary-rgb: 8, 145, 178;

    --primary-light: #22d3ee;

    --primary-dark: #0e7490;

    --primary-alpha: rgba(8, 145, 178, 0.12);

    --primary-alpha-strong: rgba(8, 145, 178, 0.25);

    /* ─────────────────────────────────────────────────────────────────────────

       ACCENT COLORS - Vibrant Orange for CTAs and Highlights

       ───────────────────────────────────────────────────────────────────────── */

    --accent-50: #fff7ed;

    --accent-100: #ffedd5;

    --accent-200: #fed7aa;

    --accent-300: #fdba74;

    --accent-400: #fb923c;

    --accent-500: #f97316;

    --accent-600: #ea580c;

    --accent-700: #c2410c;

    --accent: #f97316;

    --accent-light: #fb923c;

    --accent-dark: #ea580c;

    /* ─────────────────────────────────────────────────────────────────────────

       SEMANTIC COLORS - Status & Feedback

       ───────────────────────────────────────────────────────────────────────── */

    /* Success - Green */

    --success-50: #f0fdf4;

    --success-100: #dcfce7;

    --success-200: #bbf7d0;

    --success-300: #86efac;

    --success-400: #4ade80;

    --success-500: #22c55e;

    --success-600: #16a34a;

    --success-700: #15803d;

    --success: #16a34a;

    --success-light: #4ade80;

    --success-dark: #15803d;

    --success-alpha: rgba(22, 163, 74, 0.12);

    /* Warning - Amber */

    --warning-50: #fffbeb;

    --warning-100: #fef3c7;

    --warning-200: #fde68a;

    --warning-300: #fcd34d;

    --warning-400: #fbbf24;

    --warning-500: #f59e0b;

    --warning-600: #d97706;

    --warning-700: #b45309;

    --warning: #d97706;

    --warning-light: #fbbf24;

    --warning-dark: #b45309;

    --warning-alpha: rgba(217, 119, 6, 0.12);

    /* Danger - Red */

    --danger-50: #fef2f2;

    --danger-100: #fee2e2;

    --danger-200: #fecaca;

    --danger-300: #fca5a5;

    --danger-400: #f87171;

    --danger-500: #ef4444;

    --danger-600: #dc2626;

    --danger-700: #b91c1c;

    --danger: #dc2626;

    --danger-light: #f87171;

    --danger-dark: #b91c1c;

    --danger-alpha: rgba(220, 38, 38, 0.12);

    /* Info - Blue */

    --info-50: #eff6ff;

    --info-100: #dbeafe;

    --info-200: #bfdbfe;

    --info-300: #93c5fd;

    --info-400: #60a5fa;

    --info-500: #3b82f6;

    --info-600: #2563eb;

    --info-700: #1d4ed8;

    --info: #2563eb;

    --info-light: #60a5fa;

    --info-dark: #1d4ed8;

    --info-alpha: rgba(37, 99, 235, 0.12);

    /* Purple - Special/Premium */

    --purple-50: #faf5ff;

    --purple-100: #f3e8ff;

    --purple-200: #e9d5ff;

    --purple-300: #d8b4fe;

    --purple-400: #c084fc;

    --purple-500: #a855f7;

    --purple-600: #9333ea;

    --purple-700: #7c3aed;

    --purple: #8b5cf6;

    --purple-light: #a78bfa;

    --purple-dark: #7c3aed;

    --purple-alpha: rgba(139, 92, 246, 0.12);

    /* Emerald - Revenue/Profit */

    --emerald-50: #ecfdf5;

    --emerald-100: #d1fae5;

    --emerald-200: #a7f3d0;

    --emerald-300: #6ee7b7;

    --emerald-400: #34d399;

    --emerald-500: #10b981;

    --emerald-600: #059669;

    --emerald-700: #047857;

    --emerald: #10b981;

    --emerald-light: #34d399;

    --emerald-dark: #059669;

    --emerald-alpha: rgba(16, 185, 129, 0.12);

    /* Rose - Critical Alerts */

    --rose-50: #fff1f2;

    --rose-100: #ffe4e6;

    --rose-200: #fecdd3;

    --rose-300: #fda4af;

    --rose-400: #fb7185;

    --rose-500: #f43f5e;

    --rose-600: #e11d48;

    --rose-700: #be123c;

    --rose: #f43f5e;

    --rose-light: #fb7185;

    --rose-dark: #e11d48;

    --rose-alpha: rgba(244, 63, 94, 0.12);

    /* ─────────────────────────────────────────────────────────────────────────

       NEUTRAL COLORS - Grays for Backgrounds & Text

       ───────────────────────────────────────────────────────────────────────── */

    --gray-50: #f9fafb;

    --gray-100: #f3f4f6;

    --gray-200: #e5e7eb;

    --gray-300: #d1d5db;

    --gray-400: #9ca3af;

    --gray-500: #6b7280;

    --gray-600: #4b5563;

    --gray-700: #374151;

    --gray-800: #1f2937;

    --gray-900: #111827;

    --gray-950: #030712;

    /* ─────────────────────────────────────────────────────────────────────────

       BACKGROUND COLORS - Light Mode

       ───────────────────────────────────────────────────────────────────────── */

    --bg-body: #f0f4f8;

    --bg-primary: #ffffff;

    --bg-secondary: #f8fafc;

    --bg-tertiary: #f1f5f9;

    --bg-elevated: #ffffff;

    --bg-hover: rgba(8, 145, 178, 0.06);

    --bg-active: rgba(8, 145, 178, 0.1);

    --bg-subtle: #e2e8f0;

    /* Input backgrounds */

    --bg-input: #ffffff;

    --bg-input-hover: #f8fafc;

    --bg-input-focus: #ffffff;

    --bg-input-disabled: #f1f5f9;

    /* ─────────────────────────────────────────────────────────────────────────

       TEXT COLORS - Light Mode

       ───────────────────────────────────────────────────────────────────────── */

    --text-primary: #0f172a;        /* Enhanced contrast - WCAG AA compliant */

    --text-secondary: #334155;      /* Improved readability */

    --text-tertiary: #475569;       /* Better visibility */

    --text-muted: #64748b;          /* Sufficient contrast for secondary info */

    --text-disabled: #94a3b8;

    --text-inverse: #ffffff;

    --text-link: #0369a1;           /* High contrast blue */

    --text-link-hover: #075985;

    /* Input text */

    --text-input: #0f172a;

    --text-placeholder: #94a3b8;

    /* ─────────────────────────────────────────────────────────────────────────

       BORDER COLORS - Light Mode

       ───────────────────────────────────────────────────────────────────────── */

    --border-light: #e2e8f0;

    --border: #cbd5e1;

    --border-dark: #94a3b8;

    --border-focus: #0891b2;

    --border-input: #cbd5e1;        /* More visible input borders */

    --border-input-hover: #94a3b8;  /* Clearer hover state */

    --border-input-focus: #0891b2;

    /* ─────────────────────────────────────────────────────────────────────────

       SHADOWS - Light Mode (Subtle & Professional)

       ───────────────────────────────────────────────────────────────────────── */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);

    --shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.08), 0 3px 7px -3px rgba(0, 0, 0, 0.05);

    --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.04);

    --shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.12), 0 10px 20px -5px rgba(0, 0, 0, 0.04);

    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Colored shadows */

    --shadow-primary: 0 4px 14px rgba(8, 145, 178, 0.25);

    --shadow-success: 0 4px 14px rgba(22, 163, 74, 0.25);

    --shadow-danger: 0 4px 14px rgba(220, 38, 38, 0.25);

    --shadow-warning: 0 4px 14px rgba(217, 119, 6, 0.25);

    /* Focus ring */

    --ring-offset: 2px;

    --ring-color: rgba(8, 145, 178, 0.35);

    --ring-offset-color: #ffffff;

    /* ─────────────────────────────────────────────────────────────────────────

       SPACING SYSTEM - Consistent Scale

       ───────────────────────────────────────────────────────────────────────── */

    --space-0: 0;

    --space-px: 1px;

    --space-0-5: 0.125rem;  /* 2px */

    --space-1: 0.25rem;     /* 4px */

    --space-1-5: 0.375rem;  /* 6px */

    --space-2: 0.5rem;      /* 8px */

    --space-2-5: 0.625rem;  /* 10px */

    --space-3: 0.75rem;     /* 12px */

    --space-3-5: 0.875rem;  /* 14px */

    --space-4: 1rem;        /* 16px */

    --space-5: 1.25rem;     /* 20px */

    --space-6: 1.5rem;      /* 24px */

    --space-7: 1.75rem;     /* 28px */

    --space-8: 2rem;        /* 32px */

    --space-9: 2.25rem;     /* 36px */

    --space-10: 2.5rem;     /* 40px */

    --space-12: 3rem;       /* 48px */

    --space-14: 3.5rem;     /* 56px */

    --space-16: 4rem;       /* 64px */

    --space-20: 5rem;       /* 80px */

    --space-24: 6rem;       /* 96px */

    /* Legacy spacing (backwards compatibility) */

    --space-xs: var(--space-1);

    --space-sm: var(--space-2);

    --space-md: var(--space-4);

    --space-lg: var(--space-6);

    --space-xl: var(--space-8);

    --space-2xl: var(--space-12);

    /* ─────────────────────────────────────────────────────────────────────────

       BORDER RADIUS - Soft, Modern Edges

       ───────────────────────────────────────────────────────────────────────── */

    --radius-none: 0;

    --radius-sm: 0.25rem;    /* 4px */

    --radius: 0.5rem;        /* 8px */

    --radius-md: 0.625rem;   /* 10px */

    --radius-lg: 0.75rem;    /* 12px */

    --radius-xl: 1rem;       /* 16px */

    --radius-2xl: 1.25rem;   /* 20px */

    --radius-3xl: 1.5rem;    /* 24px */

    --radius-full: 9999px;

    /* ─────────────────────────────────────────────────────────────────────────

       TYPOGRAPHY - Modern Font Stack

       ───────────────────────────────────────────────────────────────────────── */

    /* Font Families */

    --font-sans: 'Be Vietnam Pro', 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;

    --font-heading: 'Be Vietnam Pro', 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    --font-display: 'Be Vietnam Pro', 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace;

    /* Font Sizes */

    --text-xs: 0.75rem;      /* 12px */

    --text-sm: 0.875rem;     /* 14px */

    --text-base: 1rem;       /* 16px */

    --text-lg: 1.125rem;     /* 18px */

    --text-xl: 1.25rem;      /* 20px */

    --text-2xl: 1.5rem;      /* 24px */

    --text-3xl: 1.875rem;    /* 30px */

    --text-4xl: 2.25rem;     /* 36px */

    --text-5xl: 3rem;        /* 48px */

    /* Font Weights */

    --font-light: 300;

    --font-normal: 400;

    --font-medium: 500;

    --font-semibold: 600;

    --font-bold: 700;

    --font-extrabold: 800;

    /* Line Heights */

    --leading-none: 1;

    --leading-tight: 1.25;

    --leading-snug: 1.375;

    --leading-normal: 1.5;

    --leading-relaxed: 1.625;

    --leading-loose: 2;

    /* Letter Spacing */

    --tracking-tighter: -0.05em;

    --tracking-tight: -0.025em;

    --tracking-normal: 0;

    --tracking-wide: 0.025em;

    --tracking-wider: 0.05em;

    --tracking-widest: 0.1em;

    /* ─────────────────────────────────────────────────────────────────────────

       TRANSITIONS & ANIMATIONS

       ───────────────────────────────────────────────────────────────────────── */

    --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Easing Functions */

    --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-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ─────────────────────────────────────────────────────────────────────────

       LAYOUT & STRUCTURE

       ───────────────────────────────────────────────────────────────────────── */

    --sidebar-width: 240px;

    --sidebar-collapsed-width: 72px;

    --header-height: 64px;

    --content-max-width: 1440px;

    /* Z-Index Scale */

    --z-dropdown: 100;

    --z-sticky: 200;

    --z-fixed: 300;

    --z-modal-backdrop: 400;

    --z-modal: 500;

    --z-popover: 600;

    --z-tooltip: 700;

    --z-toast: 800;

    --z-max: 9999;

    /* ─────────────────────────────────────────────────────────────────────────

       COMPONENT-SPECIFIC TOKENS

       ───────────────────────────────────────────────────────────────────────── */

    /* Cards */

    --card-bg: var(--bg-primary);

    --card-border: var(--border-light);

    --card-shadow: var(--shadow);

    --card-radius: var(--radius-xl);

    --card-padding: var(--space-6);

    /* Buttons */

    --btn-radius: var(--radius-md);

    --btn-height-sm: 32px;

    --btn-height: 40px;

    --btn-height-lg: 48px;

    /* Inputs */

    --input-height-sm: 32px;

    --input-height: 40px;

    --input-height-lg: 48px;

    --input-radius: var(--radius);

    --input-border-width: 1.5px;

    /* Modal */

    --modal-bg: var(--bg-primary);

    --modal-border: var(--border);

    --modal-radius: var(--radius-2xl);

    --modal-shadow: var(--shadow-2xl);

    --modal-backdrop: rgba(0, 0, 0, 0.5);

    --modal-backdrop-blur: 4px;

    /* Tables */

    --table-header-bg: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);

    --table-header-text: #ffffff;

    --table-row-hover: var(--bg-hover);

    --table-border: var(--border-light);

    /* Scrollbar */

    --scrollbar-width: 8px;

    --scrollbar-track: var(--bg-tertiary);

    --scrollbar-thumb: var(--gray-400);

    --scrollbar-thumb-hover: var(--gray-500);

    /* ─────────────────────────────────────────────────────────────────────────

       GRADIENT PRESETS - Standardized Gradients

       ───────────────────────────────────────────────────────────────────────── */

    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);

    --gradient-primary: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);

    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);

    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    --gradient-danger: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);

    --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

    --gradient-hero: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #8b5cf6 100%);

    --gradient-dark: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    /* ─────────────────────────────────────────────────────────────────────────

       GLASSMORPHISM TOKENS

       ───────────────────────────────────────────────────────────────────────── */

    --glass-bg: rgba(255, 255, 255, 0.75);

    --glass-border: rgba(255, 255, 255, 0.2);

    --glass-blur: blur(16px) saturate(180%);

    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* ─────────────────────────────────────────────────────────────────────────

       COLORED SHADOWS - Accent Glow Effects

       ───────────────────────────────────────────────────────────────────────── */

    --shadow-emerald: 0 4px 14px rgba(16, 185, 129, 0.25);

    --shadow-purple: 0 4px 14px rgba(139, 92, 246, 0.25);

    --shadow-rose: 0 4px 14px rgba(244, 63, 94, 0.25);

    --shadow-info: 0 4px 14px rgba(59, 130, 246, 0.25);

}

/* =============================================================================
   DARK THEME — Premium Deep Navy Palette
   ============================================================================= */

[data-theme="dark"],
.dark-mode,
body:not([data-theme="light"]):not(.light-mode) {
    --bg-body: #080d1a;
    --bg-primary: #0f172a;
    --bg-secondary: #1a2332;
    --bg-tertiary: #1e293b;
    --bg-elevated: #1b2436;
    --bg-hover: rgba(34, 211, 238, 0.08);
    --bg-active: rgba(34, 211, 238, 0.12);
    --bg-subtle: #253245;
    --bg-input: rgba(30, 41, 59, 0.8);
    --bg-input-hover: rgba(30, 41, 59, 0.9);
    --bg-input-focus: rgba(30, 41, 59, 1);
    --bg-input-disabled: rgba(15, 23, 42, 0.4);

    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-disabled: #64748b;
    --text-inverse: #0f172a;
    --text-link: #67e8f9;
    --text-link-hover: #22d3ee;
    --text-input: #f1f5f9;
    --text-placeholder: rgba(148, 163, 184, 0.5);

    --border-light: rgba(148, 163, 184, 0.1);
    --border: rgba(148, 163, 184, 0.15);
    --border-dark: rgba(148, 163, 184, 0.2);
    --border-focus: #22d3ee;
    --border-input: rgba(148, 163, 184, 0.2);
    --border-input-hover: rgba(148, 163, 184, 0.3);
    --border-input-focus: rgba(34, 211, 238, 0.6);

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.3), 0 4px 10px -2px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 14px rgba(34, 211, 238, 0.2);
    --ring-color: rgba(34, 211, 238, 0.25);
    --ring-offset-color: #0f172a;

    --card-bg: rgba(15, 22, 41, 0.72);
    --card-border: rgba(148, 163, 184, 0.08);
    --table-header-bg: rgba(10, 14, 26, 0.6);
    --table-header-text: rgba(148, 163, 184, 0.8);
    --table-row-hover: rgba(34, 211, 238, 0.03);
    --table-border: rgba(148, 163, 184, 0.03);
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(148, 163, 184, 0.12);
    --scrollbar-thumb-hover: rgba(148, 163, 184, 0.25);

    /* Dark mode glassmorphism */
    --glass-bg: rgba(15, 22, 41, 0.6);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-blur: blur(20px) saturate(180%);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* Dark mode colored shadows (glow effects) */
    --shadow-emerald: 0 4px 20px rgba(16, 185, 129, 0.2);
    --shadow-purple: 0 4px 20px rgba(139, 92, 246, 0.2);
    --shadow-rose: 0 4px 20px rgba(244, 63, 94, 0.2);
    --shadow-primary: 0 4px 20px rgba(6, 182, 212, 0.2);
}

/* =============================================================================
   TYPOGRAPHY UTILITIES
   ============================================================================= */

.mono, .font-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   SELECT DROPDOWN ARROW
   ============================================================================= */

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8.5L1 3.5h10L6 8.5z' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 32px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}