/* Google Fonts Import handled in HTML for performance */

/* =========================================
   1. CSS Variables & Theming
   ========================================= */
:root {
    /* Default Theme (Vibrant) */
    --color-primary: #6A4DFF;
    --color-primary-dark: #4325E8;
    --color-secondary: #EDEAFF;
    /* Lavanda claro */
    --color-background: #F4F4F9;
    /* Slightly cooler gray for freshness */
    --color-surface: #FFFFFF;
    --color-text-main: #1A1A1A;
    --color-text-muted: #52525B;
    /* Zinc-600, better contrast than #4A4A4A */
    --color-border: #E4E4E7;
    /* Zinc-200 */
    --shadow-color: 106, 77, 255;
    /* RGB for purple tinted shadows */

    /* Semantic Colors (POS) */
    --color-success: #10B981;
    /* Emerald-500, brighter/cleaner than #30C48D */
    --color-warning: #F59E0B;
    /* Amber-500, warm and clear */
    --color-danger: #EF4444;
    /* Red-500, standard accessible red */
    --color-info: #06B6D4;
    /* Cyan-500 */

    /* Fonts */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Theme: Dark (Night Mode) */
.theme-dark {
    --color-primary: #8B75FF;
    /* Lighter purple for better contrast against dark */
    --color-primary-dark: #6A4DFF;
    --color-secondary: #27272A;
    /* Zinc-800 */
    --color-background: #09090B;
    /* Zinc-950, very deep black */
    --color-surface: #18181B;
    /* Zinc-900 */
    --color-text-main: #FAFAFA;
    /* Zinc-50 */
    --color-text-muted: #A1A1AA;
    /* Zinc-400 */
    --color-border: #27272A;
    /* Zinc-800 */
    --shadow-color: 0, 0, 0;
    /* Pure black shadows for dark mode */
}

/* Theme: Elegant (Professional/High Contrast) */
.theme-elegant {
    --color-primary: #312E81;
    /* Indigo-900 - Very deep */
    --color-primary-dark: #1E1B4B;
    --color-secondary: #F3F4F6;
    /* Gray-100 */
    --color-background: #F8FAFC;
    /* Slate-50 */
    --color-surface: #FFFFFF;
    --color-text-main: #0F172A;
    /* Slate-900 */
    --color-text-muted: #475569;
    /* Slate-600 */
    /* Slate-300 */
    --shadow-color: 15, 23, 42;
    /* Slate shadow tint */
}

/* =========================================
   2. Shadow & Depth
   ========================================= */
.shadow-sm {
    box-shadow: 0 1px 3px 0 rgba(var(--shadow-color), 0.1), 0 1px 2px -1px rgba(var(--shadow-color), 0.1) !important;
}

.shadow {
    box-shadow: 0 4px 6px -1px rgba(var(--shadow-color), 0.1), 0 2px 4px -2px rgba(var(--shadow-color), 0.1) !important;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(var(--shadow-color), 0.1), 0 4px 6px -4px rgba(var(--shadow-color), 0.1) !important;
}

/* =========================================
   3. Base Styles
   ========================================= */
body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

a {
    text-decoration: none;
}

/* =========================================
   3. Bootstrap Overrides
   ========================================= */

/* Backgrounds */
.bg-light {
    background-color: var(--color-background) !important;
}

.bg-white {
    background-color: var(--color-surface) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-main) !important;
}

.bg-surface-secondary {
    background-color: var(--color-primary-dark) !important;
}

/* Specifically for header secondary strip */
#date-picker-row {
    background-color: var(--color-primary-dark) !important;
    transition: background-color 0.3s ease;
}

/* Elegant theme override for cleaner look */
.theme-elegant #date-picker-row {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--color-border);
}

.theme-elegant #date-picker-row input {
    background-color: #F1F5F9 !important;
    color: #334155 !important;
    border: 1px solid #CBD5E1 !important;
}

/* Dark theme override */
.theme-dark #date-picker-row {
    background-color: #000000 !important;
    /* Force black like main header */
    border-top: 1px solid #333 !important;
}

/* Text */
.text-primary {
    color: var(--color-primary) !important;
}

.text-dark {
    color: var(--color-text-main) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* POS Interaction Buttons */
.btn-success {
    background-color: var(--color-success);
    border: none;
}

.btn-warning {
    background-color: var(--color-warning);
    border: none;
    color: #1A1A1A;
}

.btn-danger {
    background-color: var(--color-danger);
    border: none;
}

.btn-info {
    background-color: var(--color-info);
    border: none;
    color: #fff;
}

/* Cards & Containers */
.card {
    background-color: var(--color-surface);
    color: var(--color-text-main);
    /* Ensure text color inherits correctly */
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.modal-content {
    background-color: var(--color-surface);
    color: var(--color-text-main);
}

.modal-header .btn-close {
    filter: invert(var(--dm-invert, 0));
}

.modal-title {
    color: var(--color-text-main);
}

.theme-dark {
    --dm-invert: 1;
}

.theme-dark .modal-content,
.theme-dark .card {
    border-color: #333;
}

/* Ensure form labels are visible */
.form-label,
.form-check-label,
.col-form-label {
    color: var(--color-text-main) !important;
}

.theme-dark .form-control,
.theme-dark .form-select {
    background-color: #2D2D2D;
    border-color: #444;
    color: #FFF;
}

.theme-dark .form-control:disabled,
.theme-dark .form-select:disabled {
    background-color: #1a1a1a;
    color: #888;
    /* Readable disabled text */
    border-color: #333;
}

.theme-dark .form-control:focus {
    background-color: #333;
    color: #FFF;
    border-color: var(--color-primary);
}

.theme-dark .input-group-text {
    background-color: #222;
    border-color: #444;
    color: #FFF;
}

.theme-dark .dropdown-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.theme-dark .dropdown-item {
    color: var(--color-text-main);
}

.theme-dark .dropdown-item:hover {
    background-color: var(--color-secondary);
}

/* Navbar */
/* Navbar - Always Dark Background / Light Text */
.navbar-dark.bg-primary {
    background-color: var(--color-primary-dark) !important;
}

.navbar-brand,
.navbar-text,
.navbar-nav .nav-link {
    color: #FFFFFF !important;
}

.theme-dark .navbar {
    border-bottom: 1px solid #333;
    background-color: #000000 !important;
    /* Force darker header in dark mode */
}

/* Form Controls General */
.form-control,
.form-select {
    border-radius: 8px;
    padding: 10px 12px;
}

.form-control:focus {
    box-shadow: 0 0 0 3px rgba(106, 77, 255, 0.25);
    border-color: var(--color-primary);
}

/* Specific Component Overrides */
/* #date-picker-row moved to top for theme overrides */

/* Nav Bottom (App-like feel) */
.navbar.fixed-bottom {
    background-color: var(--color-surface) !important;
    border-top-color: var(--color-border) !important;
    padding-bottom: env(safe-area-inset-bottom);
    /* iOS safe area */
}

.nav-link.nav-btn {
    color: var(--color-text-muted);
}

.nav-link.nav-btn.active {
    color: var(--color-primary) !important;
}

.nav-link.nav-btn.active i {
    transform: scale(1.1);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Floating Action Button */
#fab-create button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: none;
    transition: transform 0.2s;
}

#fab-create button:active {
    transform: scale(0.95);
}

/* Empty State Icons */
.empty-state i {
    color: var(--color-secondary) !important;
    /* Use lavender for soft empty states? Or maybe something darker. Let's stick to muted or info */
    color: #E0E0E0 !important;
    /* Default light gray */
}

.theme-dark .empty-state i {
    color: #333 !important;
}

/* Badge colors */
.bg-success {
    background-color: var(--color-success) !important;
}

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

.bg-secondary {
    background-color: #999 !important;
}

/* Standard secondary for badges */

/* Transitions */
button,
a,
.nav-link {
    transition: all 0.2s ease;
}

/* Theme: Nature */
.theme-nature {
    --color-primary: #10B981;
    /* Emerald-500 */
    --color-primary-dark: #059669;
    /* Emerald-600 */
    --color-secondary: #D1FAE5;
    /* Emerald-100 */
    --color-background: #ECFDF5;
    /* Emerald-50 */
    --color-surface: #FFFFFF;
    --color-text-main: #064E3B;
    /* Emerald-900 */
    --color-text-muted: #34D399;
    /* Emerald-400 */
    --color-border: #A7F3D0;
    /* Emerald-200 */
    --shadow-color: 16, 185, 129;
}

/* Theme: Pink (Peluqueria) */
.theme-pink {
    --color-primary: #EC4899;
    /* Pink-500 */
    --color-primary-dark: #DB2777;
    /* Pink-600 */
    --color-secondary: #FCE7F3;
    /* Pink-100 */
    --color-background: #FDF2F8;
    /* Pink-50 */
    --color-surface: #FFFFFF;
    --color-text-main: #831843;
    /* Pink-900 */
    --color-text-muted: #F472B6;
    /* Pink-400 */
    --color-border: #FBCFE8;
    /* Pink-200 */
    --shadow-color: 236, 72, 153;
}

/* Theme: Custom (Base) */
.theme-custom {
    --color-background: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-text-main: #1E293B;
    --color-border: #E2E8F0;
    --color-text-muted: #64748B;
    /* Primary injected via JS */
}

/* Theme: Ocean */
.theme-ocean {
    --color-primary: #3B82F6;
    /* Blue-500 */
    --color-primary-dark: #2563EB;
    /* Blue-600 */
    --color-secondary: #DBEAFE;
    /* Blue-100 */
    --color-background: #EFF6FF;
    /* Blue-50 */
    --color-surface: #FFFFFF;
    --color-text-main: #1E3A8A;
    /* Blue-900 */
    --color-text-muted: #60A5FA;
    /* Blue-400 */
    --color-border: #BFDBFE;
    /* Blue-200 */
    --shadow-color: 59, 130, 246;
}

/* Theme: Sunset */
.theme-sunset {
    --color-primary: #F97316;
    /* Orange-500 */
    --color-primary-dark: #EA580C;
    /* Orange-600 */
    --color-secondary: #FFEDD5;
    /* Orange-100 */
    --color-background: #FFF7ED;
    /* Orange-50 */
    --color-surface: #FFFFFF;
    --color-text-main: #7C2D12;
    /* Orange-900 */
    --color-text-muted: #FB923C;
    /* Orange-400 */
    --color-border: #FED7AA;
    /* Orange-200 */
    --shadow-color: 249, 115, 22;
}