/* ================================================ */
/*  WHITE LABEL THEME SYSTEM - OPTIMIZED          */
/*  Semantic, accessible color system              */
/*  WCAG AA compliant contrast ratios             */
/* ================================================ */

/* ===== ROOT THEME VARIABLES ===== */
:root {
    /* ===== LIGHT THEME PALETTE (WCAG AA Compliant) ===== */
    /* Backgrounds - Neutral hierarchy */
    --light-bg-primary: #ffffff;           /* Main page background */
    --light-bg-secondary: #f8f9fa;         /* Card backgrounds */
    --light-bg-tertiary: #e9ecef;          /* Hover states, subtle sections */
    --light-bg-accent: #f0f4f8;            /* Highlighted areas */
    --light-bg-elevated: #ffffff;          /* Elevated surfaces (modals, dropdowns) */

    /* Text - Proper contrast ratios */
    --light-text-primary: #0f172a;         /* Headings, important text (15.8:1 on white) */
    --light-text-secondary: #475569;       /* Body text, descriptions (8.6:1 on white) */
    --light-text-tertiary: #64748b;        /* Muted text, captions (4.9:1 on white) */
    --light-text-disabled: #94a3b8;        /* Disabled states (2.8:1 - decorative only) */

    /* Interactive Elements */
    --light-accent-primary: #2563eb;       /* Primary actions (4.5:1 contrast) */
    --light-accent-primary-hover: #1e40af; /* Hover state */
    --light-accent-primary-active: #1e3a8a; /* Active state */
    --light-accent-secondary: #7c3aed;     /* Secondary actions */
    --light-accent-secondary-hover: #6d28d9;
    --light-accent-secondary-active: #5b21b6;

    /* Success, Warning, Error - Status colors */
    --light-success: #10b981;              /* Success messages */
    --light-warning: #f59e0b;              /* Warnings */
    --light-error: #ef4444;                /* Errors */
    --light-info: #3b82f6;                 /* Info messages */

    /* Borders & Dividers */
    --light-border-primary: #e2e8f0;       /* Standard borders */
    --light-border-secondary: #cbd5e1;     /* Emphasized borders */
    --light-border-focus: #2563eb;         /* Focus rings */

    /* Shadows - Depth hierarchy */
    --light-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --light-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --light-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08);
    --light-shadow-xl: 0 20px 50px rgba(15, 23, 42, 0.10);
    --light-glow: 0 0 20px rgba(37, 99, 235, 0.15);

    /* Gradients */
    --light-gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --light-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(124, 58, 237, 0.04) 100%);
    --light-gradient-fade: linear-gradient(180deg, transparent 0%, #ffffff 100%);
    --light-surface-gradient-1: linear-gradient(145deg, #fafbfc 0%, #ffffff 100%);
    --light-surface-gradient-2: linear-gradient(145deg, #f1f5f9 0%, #f8f9fa 100%);

    /* ===== DARK THEME PALETTE (WCAG AA Compliant) ===== */
    /* Backgrounds - Dark hierarchy */
    --dark-bg-primary: #0f172a;            /* Main page background */
    --dark-bg-secondary: #1e293b;          /* Card backgrounds */
    --dark-bg-tertiary: #334155;           /* Hover states */
    --dark-bg-accent: #475569;             /* Highlighted areas */
    --dark-bg-elevated: #1e293b;           /* Elevated surfaces */

    /* Text - High contrast for dark backgrounds */
    --dark-text-primary: #f8fafc;          /* Headings (17.1:1 on dark-bg-primary) */
    --dark-text-secondary: #e2e8f0;        /* Body text (13.4:1 on dark-bg-primary) */
    --dark-text-tertiary: #cbd5e1;         /* Muted text (9.2:1 on dark-bg-primary) */
    --dark-text-disabled: #94a3b8;         /* Disabled states */

    /* Interactive Elements - High visibility */
    --dark-accent-primary: #CBFC02;        /* Lime - high contrast */
    --dark-accent-primary-hover: #d4ff1a;  /* Lighter on hover */
    --dark-accent-primary-active: #a8cc02; /* Darker on active */
    --dark-accent-secondary: #FD8500;      /* Orange */
    --dark-accent-secondary-hover: #ff9a2e;
    --dark-accent-secondary-active: #e57700;

    /* Status colors - Dark mode optimized */
    --dark-success: #34d399;
    --dark-warning: #fbbf24;
    --dark-error: #f87171;
    --dark-info: #60a5fa;

    /* Borders & Dividers */
    --dark-border-primary: rgba(226, 232, 240, 0.1);
    --dark-border-secondary: rgba(226, 232, 240, 0.15);
    --dark-border-focus: #CBFC02;

    /* Shadows - Deeper for dark mode */
    --dark-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --dark-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);
    --dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.8);
    --dark-shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.85);
    --dark-glow: 0 0 40px rgba(203, 252, 2, 0.25);

    /* Gradients */
    --dark-gradient-primary: linear-gradient(135deg, #CBFC02 0%, #FD8500 100%);
    --dark-gradient-soft: linear-gradient(135deg, rgba(203, 252, 2, 0.15) 0%, rgba(253, 133, 0, 0.08) 100%);
    --dark-gradient-fade: linear-gradient(180deg, transparent 0%, #0f172a 100%);
    --dark-surface-gradient-1: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --dark-surface-gradient-2: linear-gradient(145deg, #334155 0%, #1e293b 100%);

    /* ===== ACTIVE THEME VARIABLES (Default to Light) ===== */
    /* Backgrounds */
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --bg-tertiary: var(--light-bg-tertiary);
    --bg-accent: var(--light-bg-accent);
    --bg-elevated: var(--light-bg-elevated);

    /* Text */
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-tertiary: var(--light-text-tertiary);
    --text-disabled: var(--light-text-disabled);

    /* Interactive */
    --accent-primary: var(--light-accent-primary);
    --accent-primary-hover: var(--light-accent-primary-hover);
    --accent-primary-active: var(--light-accent-primary-active);
    --accent-secondary: var(--light-accent-secondary);
    --accent-secondary-hover: var(--light-accent-secondary-hover);
    --accent-secondary-active: var(--light-accent-secondary-active);

    /* Status */
    --color-success: var(--light-success);
    --color-warning: var(--light-warning);
    --color-error: var(--light-error);
    --color-info: var(--light-info);

    /* Borders */
    --border-primary: var(--light-border-primary);
    --border-secondary: var(--light-border-secondary);
    --border-focus: var(--light-border-focus);
    /* Legacy support */
    --border-color: var(--light-border-primary);

    /* Shadows */
    --shadow-sm: var(--light-shadow-sm);
    --shadow-md: var(--light-shadow-md);
    --shadow-lg: var(--light-shadow-lg);
    --shadow-xl: var(--light-shadow-xl);
    --glow-effect: var(--light-glow);

    /* Gradients */
    --gradient-primary: var(--light-gradient-primary);
    --gradient-soft: var(--light-gradient-soft);
    --gradient-fade: var(--light-gradient-fade);
    --surface-gradient-1: var(--light-surface-gradient-1);
    --surface-gradient-2: var(--light-surface-gradient-2);
}

/* ===== ADMIN PANEL EXCLUSION ===== */
/* Prevent theme system from affecting admin panel */
/* Admin pages have data-admin-panel="true" attribute on body */

/* ===== DARK THEME CLASS OVERRIDE ===== */
body.theme-dark:not([data-admin-panel="true"]) {
    /* Backgrounds */
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    --bg-accent: var(--dark-bg-accent);
    --bg-elevated: var(--dark-bg-elevated);

    /* Text */
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: var(--dark-text-tertiary);
    --text-disabled: var(--dark-text-disabled);
    /* Legacy support */
    --text-muted: var(--dark-text-tertiary);

    /* Interactive */
    --accent-primary: var(--dark-accent-primary);
    --accent-primary-hover: var(--dark-accent-primary-hover);
    --accent-primary-active: var(--dark-accent-primary-active);
    --accent-secondary: var(--dark-accent-secondary);
    --accent-secondary-hover: var(--dark-accent-secondary-hover);
    --accent-secondary-active: var(--dark-accent-secondary-active);

    /* Status */
    --color-success: var(--dark-success);
    --color-warning: var(--dark-warning);
    --color-error: var(--dark-error);
    --color-info: var(--dark-info);

    /* Borders */
    --border-primary: var(--dark-border-primary);
    --border-secondary: var(--dark-border-secondary);
    --border-focus: var(--dark-border-focus);
    --border-color: var(--dark-border-primary); /* Legacy */

    /* Shadows */
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
    --shadow-lg: var(--dark-shadow-lg);
    --shadow-xl: var(--dark-shadow-xl);
    --glow-effect: var(--dark-glow);

    /* Gradients */
    --gradient-primary: var(--dark-gradient-primary);
    --gradient-soft: var(--dark-gradient-soft);
    --gradient-fade: var(--dark-gradient-fade);
    --surface-gradient-1: var(--dark-surface-gradient-1);
    --surface-gradient-2: var(--dark-surface-gradient-2);
}

/* ===== DOT PATTERN SYSTEM (Theme-aware) ===== */
.dot-pattern::before,
.dot-pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle at 2px 2px,
        var(--border-color) 1px,
        transparent 0
    );
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 1;
}

/* Light theme: subtle dots */
body:not(.theme-dark) .dot-pattern::before,
body:not(.theme-dark) .dot-pattern::after {
    opacity: 0.3;
}

/* Dark theme: more visible dots */
body.theme-dark .dot-pattern::before,
body.theme-dark .dot-pattern::after {
    opacity: 0.6;
}

/* ===== GLOW EFFECTS (Theme-aware) ===== */
.glow-top-left::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -15%;
    width: 60%;
    height: 80%;
    background: radial-gradient(
        circle at center,
        color-mix(in srgb, var(--accent-primary) 15%, transparent) 0%,
        color-mix(in srgb, var(--accent-primary) 8%, transparent) 30%,
        transparent 70%
    );
    filter: blur(60px);
    animation: pulse-glow 8s ease-in-out infinite;
    z-index: 0;
}

.glow-bottom-right::after {
    content: "";
    position: absolute;
    bottom: -20%;
    right: -15%;
    width: 60%;
    height: 80%;
    background: radial-gradient(
        circle at center,
        color-mix(in srgb, var(--accent-secondary) 15%, transparent) 0%,
        color-mix(in srgb, var(--accent-secondary) 8%, transparent) 30%,
        transparent 70%
    );
    filter: blur(60px);
    animation: pulse-glow 8s ease-in-out infinite;
    z-index: 0;
}

/* Reduce glow intensity on mobile */
@media (max-width: 768px) {
    .glow-top-left::before,
    .glow-bottom-right::after {
        opacity: 0.5;
    }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* ===== COMMON COMPONENTS ===== */

/* Card Component */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    padding: 1.5rem;
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

.card.with-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-soft);
    opacity: 0.6;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.card.with-gradient:hover::after {
    opacity: 0.8;
}

.card > * {
    position: relative;
    z-index: 2;
}

/* Button Component */
.btn-primary {
    background: var(--gradient-primary);
    color: #000000;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--glow-effect);
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
}

/* Badge/Pill Component */
.badge {
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    color: var(--accent-primary);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-block;
}

.badge-secondary {
    background: color-mix(in srgb, var(--accent-secondary) 15%, transparent);
    color: var(--accent-secondary);
    border-color: color-mix(in srgb, var(--accent-secondary) 30%, transparent);
}

/* Icon Container */
.icon-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-effect);
}

/* Input Fields */
.input-field {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
}

.input-field:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

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

/* Light theme specific input adjustments */
body:not(.theme-dark) .input-field {
    background: #ffffff;
}

/* Dark theme specific input adjustments */
body.theme-dark .input-field {
    background: var(--bg-tertiary);
}

/* ===== TABLE COMPONENT ===== */
.table-wrapper {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.table-header {
    background: var(--surface-gradient-1);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.table-row {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    transition: background 0.2s ease;
}

.table-row:hover {
    background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
}

.table-row:last-child {
    border-bottom: none;
}

/* ===== TEXT UTILITIES ===== */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-primary-color {
    color: var(--accent-primary);
}

.text-secondary-color {
    color: var(--accent-secondary);
}

/* ===== ANIMATIONS ===== */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }

/* ================================================ */
/*  SEMANTIC UTILITY CLASSES                       */
/*  Use these instead of Tailwind colors           */
/* ================================================ */

/* ===== BACKGROUND UTILITIES ===== */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-accent { background-color: var(--bg-accent) !important; }
.bg-elevated { background-color: var(--bg-elevated) !important; }

/* Surface backgrounds with gradients */
.bg-surface-1 { background: var(--surface-gradient-1) !important; }
.bg-surface-2 { background: var(--surface-gradient-2) !important; }

/* ===== TEXT COLOR UTILITIES ===== */
/* Primary text - headings, important content */
.text-primary { color: var(--text-primary) !important; }
/* Secondary text - body copy, descriptions */
.text-secondary { color: var(--text-secondary) !important; }
/* Tertiary text - captions, labels, muted content */
.text-tertiary { color: var(--text-tertiary) !important; }
.text-muted { color: var(--text-tertiary) !important; } /* Alias for backwards compatibility */
/* Disabled text */
.text-disabled { color: var(--text-disabled) !important; }

/* ===== INTERACTIVE COLORS ===== */
/* Primary accent - main CTAs, important actions */
.text-accent-primary { color: var(--accent-primary) !important; }
.bg-accent-primary { background-color: var(--accent-primary) !important; }
.border-accent-primary { border-color: var(--accent-primary) !important; }

/* Secondary accent - secondary actions */
.text-accent-secondary { color: var(--accent-secondary) !important; }
.bg-accent-secondary { background-color: var(--accent-secondary) !important; }
.border-accent-secondary { border-color: var(--accent-secondary) !important; }

/* ===== STATUS COLORS ===== */
.text-success { color: var(--color-success) !important; }
.bg-success { background-color: var(--color-success) !important; }
.border-success { border-color: var(--color-success) !important; }

.text-warning { color: var(--color-warning) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.border-warning { border-color: var(--color-warning) !important; }

.text-error { color: var(--color-error) !important; }
.bg-error { background-color: var(--color-error) !important; }
.border-error { border-color: var(--color-error) !important; }

.text-info { color: var(--color-info) !important; }
.bg-info { background-color: var(--color-info) !important; }
.border-info { border-color: var(--color-info) !important; }

/* ===== BORDER UTILITIES ===== */
.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }
.border-focus { border-color: var(--border-focus) !important; }
/* Standard border shorthand */
.border-standard { border: 1px solid var(--border-primary) !important; }
.border-standard-2 { border: 2px solid var(--border-primary) !important; }

/* Legacy support */
.border-color { border-color: var(--border-primary) !important; }

/* ===== TAILWIND COLOR OVERRIDES FOR THEME SUPPORT ===== */
/* These ensure Tailwind utility classes respect the white label theme */
/* IMPORTANT: These only apply to PUBLIC PAGES, NOT admin panel */

/* Force Tailwind text-white to use theme text color (public pages only) */
body:not([data-admin-panel="true"]) .text-white {
    color: var(--text-primary) !important;
}

/* Force Tailwind gray text colors to use theme colors (public pages only) */
body:not([data-admin-panel="true"]) .text-gray-100,
body:not([data-admin-panel="true"]) .text-gray-200,
body:not([data-admin-panel="true"]) .text-gray-300 {
    color: var(--text-secondary) !important;
}

body:not([data-admin-panel="true"]) .text-gray-400,
body:not([data-admin-panel="true"]) .text-gray-500,
body:not([data-admin-panel="true"]) .text-gray-600 {
    color: var(--text-muted) !important;
}

/* Force Tailwind background colors to use theme (public pages only) */
body:not([data-admin-panel="true"]) .bg-white {
    background-color: var(--bg-primary) !important;
}

body:not([data-admin-panel="true"]) .bg-gray-50,
body:not([data-admin-panel="true"]) .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
}

body:not([data-admin-panel="true"]) .bg-gray-200,
body:not([data-admin-panel="true"]) .bg-gray-300 {
    background-color: var(--bg-tertiary) !important;
}

/* Border colors (public pages only) */
body:not([data-admin-panel="true"]) .border-white {
    border-color: var(--border-color) !important;
}

body:not([data-admin-panel="true"]) .border-gray-200,
body:not([data-admin-panel="true"]) .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Map blue colors to accent-primary for theme consistency (public pages only) */
body:not([data-admin-panel="true"]) .text-blue-400,
body:not([data-admin-panel="true"]) .text-blue-500,
body:not([data-admin-panel="true"]) .text-blue-600 {
    color: var(--accent-primary) !important;
}

body:not([data-admin-panel="true"]) .bg-blue-500,
body:not([data-admin-panel="true"]) .bg-blue-600 {
    background-color: var(--accent-primary) !important;
}

body:not([data-admin-panel="true"]) .border-blue-500,
body:not([data-admin-panel="true"]) .border-blue-600 {
    border-color: var(--accent-primary) !important;
}

/* Map purple colors to accent-secondary for theme consistency (public pages only) */
body:not([data-admin-panel="true"]) .text-purple-400,
body:not([data-admin-panel="true"]) .text-purple-500,
body:not([data-admin-panel="true"]) .text-purple-600 {
    color: var(--accent-secondary) !important;
}

body:not([data-admin-panel="true"]) .bg-purple-500,
body:not([data-admin-panel="true"]) .bg-purple-600 {
    background-color: var(--accent-secondary) !important;
}

body:not([data-admin-panel="true"]) .border-purple-500,
body:not([data-admin-panel="true"]) .border-purple-600 {
    border-color: var(--accent-secondary) !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .card {
        padding: 1rem;
        border-radius: 1rem;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.625rem 1.25rem;
        font-size: 0.8125rem;
    }
}