/* ==========================================================================
   Antigravity Light Premium Redesign System v3.0 (Vercel/Stripe Reference Style)
   ========================================================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. Design Tokens & Variables
   ========================================================================== */
:root {
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Light Premium Palette */
    --bg-canvas: #f8fafc;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #f1f5f9;
    --bg-active: #eef2ff; /* selected sidebar background */
    
    /* Neon Indigo Accent Colors */
    --color-primary: #4f46e5;
    --color-primary-hover: #3730a3;
    
    /* Stats Card Metric Colors */
    --orders-bg: #e0e7ff;
    --orders-color: #4f46e5;
    --earnings-bg: #dcfce7;
    --earnings-color: #15803d;
    --vendors-bg: #fef3c7;
    --vendors-color: #b45309;
    --clients-bg: #e0f2fe;
    --clients-color: #0369a1;
    
    /* Text Hierarchy */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-inactive: #94a3b8;
    
    /* Borders & Shadows */
    --border-light: #e2e8f0;
    --border-card: #f1f5f9;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   2. Core Canvas & Global Styling
   ========================================================================== */
html,
body,
.bg-gray-50,
.bg-slate-50,
.bg-gray-100 {
    font-family: var(--font-primary) !important;
    background-color: var(--bg-canvas) !important;
    background-image: none !important;
    color: var(--text-secondary) !important;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    min-height: 100vh;
}

/* Text Overrides for high contrast */
h1, h2, h3, h4, h5, h6,
.text-gray-800,
.text-gray-900,
.text-slate-900 {
    font-family: var(--font-heading) !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
}

.text-gray-700,
.text-slate-700 {
    color: var(--text-secondary) !important;
}

.text-gray-500,
.text-gray-600,
.text-slate-600,
.text-slate-500 {
    color: var(--text-muted) !important;
}

/* Premium Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-canvas);
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==========================================================================
   3. Sidebar Overhaul (Solid White, Rounded Active Pill)
   ========================================================================== */
aside.bg-primary-500 {
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-light) !important;
    box-shadow: none !important;
}

aside .bg-primary-800 {
    background-color: #f8fafc !important; /* submenu container background inset */
    border-radius: 8px !important;
    margin: 4px 16px !important;
    padding: 4px 0 !important;
}

/* Sidebar logo branding header */
aside a.items-center {
    border-bottom: 1px solid var(--border-light) !important;
    padding-bottom: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    padding-left: 1.5rem !important;
}
aside a.items-center img {
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}
aside a.items-center p {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
}
/* Version tag pill styling */
aside a.items-center span.text-gray-200,
aside a.items-center p.text-gray-200 {
    background-color: var(--orders-bg) !important;
    color: var(--orders-color) !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    border: 1px solid rgba(79, 70, 229, 0.15) !important;
    display: inline-block !important;
    margin-top: 2px !important;
}

/* Menu items */
aside a, aside p {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    margin: 2px 14px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
}

/* Hover State */
aside a:hover, aside p:hover {
    color: var(--text-primary) !important;
    background-color: #f1f5f9 !important;
    transform: none !important;
}

/* Group Headers formatting */
aside ul li span.text-xxs,
aside ul li p.text-xxs {
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding-left: 28px !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.4rem !important;
    display: inline-block !important;
}

/* Active Sidebar Menu Item (Pill style matching Reference Image) */
aside li.relative span.absolute.left-0 {
    display: none !important; /* Hide left stripe completely */
}

aside a.text-white,
aside a[class*="text-white"],
aside a.active-item,
aside a.text-primary-500 {
    background-color: var(--bg-active) !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}
aside a.text-white svg,
aside a[class*="text-white"] svg,
aside a.active-item svg,
aside a.text-primary-500 svg {
    color: var(--color-primary) !important;
}

/* Submenu items list styling */
aside .bg-primary-800 a {
    margin: 2px 8px !important;
    padding: 8px 12px !important;
    font-size: 0.825rem !important;
    color: var(--text-muted) !important;
}
aside .bg-primary-800 a:hover {
    color: var(--text-primary) !important;
    background-color: #e2e8f0 !important;
}

/* ==========================================================================
   4. Top Header & Search Bar
   ========================================================================== */
header.bg-white {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: none !important;
}

/* Search input field */
header input {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: var(--text-secondary) !important;
    border-radius: 9999px !important; /* pill format */
    padding: 8px 16px 8px 40px !important;
    font-size: 0.85rem !important;
    width: 260px !important;
}
header input:focus {
    background-color: #ffffff !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

/* User profile avatar borders */
header img.rounded-full {
    border: 2px solid #e2e8f0 !important;
}

/* ==========================================================================
   5. Clean White Cards & Reference Metrics (Total Orders, Earnings...)
   ========================================================================== */
.bg-white,
.bg-slate-50,
.shadow-sm,
.shadow {
    background-color: var(--bg-card) !important;
    background-image: none !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--card-shadow) !important;
    border-radius: 16px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bg-white:hover,
.bg-slate-50:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 16px -6px rgba(0, 0, 0, 0.03) !important;
    border-color: #cbd5e1 !important;
}

/* Stats Card Specific Overrides (Indigo, Green, Orange, Sky Icons) */
.grid.mt-10 > div:nth-child(1) svg,
.grid.mt-10 > div:nth-child(1) .text-primary-600 {
    color: var(--orders-color) !important;
}
.grid.mt-10 > div:nth-child(1) .bg-opacity-10 {
    background-color: var(--orders-bg) !important;
    color: var(--orders-color) !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

.grid.mt-10 > div:nth-child(2) svg,
.grid.mt-10 > div:nth-child(2) .text-primary-600 {
    color: var(--earnings-color) !important;
}
.grid.mt-10 > div:nth-child(2) .bg-opacity-10 {
    background-color: var(--earnings-bg) !important;
    color: var(--earnings-color) !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

.grid.mt-10 > div:nth-child(3) svg,
.grid.mt-10 > div:nth-child(3) .text-primary-600 {
    color: var(--vendors-color) !important;
}
.grid.mt-10 > div:nth-child(3) .bg-opacity-10 {
    background-color: var(--vendors-bg) !important;
    color: var(--vendors-color) !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

.grid.mt-10 > div:nth-child(4) svg,
.grid.mt-10 > div:nth-child(4) .text-primary-600 {
    color: var(--clients-color) !important;
}
.grid.mt-10 > div:nth-child(4) .bg-opacity-10 {
    background-color: var(--clients-bg) !important;
    color: var(--clients-color) !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

/* ==========================================================================
   6. Primary Buttons (Indigo Glow Style)
   ========================================================================== */
.btn-primary,
button.bg-primary-600,
.bg-blue-600,
button[type="submit"],
.bg-primary-500.text-white {
    background: var(--color-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.btn-primary:hover,
button.bg-primary-600:hover,
.bg-blue-600:hover,
button[type="submit"]:hover {
    background: var(--color-primary-hover) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
    transform: none !important;
}

/* ==========================================================================
   7. Form Inputs & Select Boxes
   ========================================================================== */
input, 
select, 
textarea,
.choices__inner,
.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

input:focus, 
select:focus, 
textarea:focus,
.choices__inner:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
    background-color: #ffffff !important;
}

/* ==========================================================================
   8. Tables & Badges
   ========================================================================== */
table {
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
}

tr {
    background-color: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01) !important;
    border-radius: 8px !important;
}

tr:hover {
    background-color: #f8fafc !important;
    transform: none !important;
}

th {
    background-color: #f8fafc !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

td {
    border-bottom: 1px solid #f1f5f9 !important;
    color: var(--text-secondary) !important;
}

/* Status Badges */
.badge,
span.bg-emerald-500,
span.bg-blue-500,
span.bg-orange-500,
span.bg-purple-500,
span.bg-red-500 {
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.bg-emerald-500, .bg-green-500 {
    background-color: var(--earnings-bg) !important;
    color: var(--earnings-color) !important;
}

.bg-blue-500 {
    background-color: var(--clients-bg) !important;
    color: var(--clients-color) !important;
}

.bg-orange-500, .bg-yellow-500 {
    background-color: var(--vendors-bg) !important;
    color: var(--vendors-color) !important;
}

.bg-red-500, .bg-rose-500 {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
}

/* ==========================================================================
   9. Auth Layout Overrides (White Cards, Slate Background)
   ========================================================================== */
.min-h-screen.p-6.bg-gray-50,
.min-h-screen.bg-slate-50 {
    background-color: var(--bg-canvas) !important;
    background-image: none !important;
}

.min-h-screen .bg-white.rounded-lg.shadow-xl,
main.min-h-screen .rounded-lg.bg-white {
    background-color: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.02) !important;
    border-radius: 12px !important;
}

.min-h-screen section.relative .bg-slate-950 {
    background-color: #0f172a !important;
    opacity: 0.5 !important;
}

.min-h-screen label {
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   10. Installer Overrides
   ========================================================================== */
.master {
    background-color: var(--bg-canvas) !important;
    background-image: none !important;
}

.master .box {
    background-color: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--card-shadow) !important;
    border-radius: 12px !important;
    color: var(--text-secondary) !important;
}

.master .header__title {
    color: var(--text-primary) !important;
}

.master .step__item {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--text-muted) !important;
}

.master .step__item.active {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ==========================================================================
   11. ApexCharts text contrast
   ========================================================================== */
svg text, svg tspan {
    fill: var(--text-muted) !important;
}
svg line, svg path.apexcharts-xaxis-tick, svg path.apexcharts-ycrosshair {
    stroke: #e2e8f0 !important;
}