@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   CSS Design System Variables
   ========================================================================== */
:root {
    /* Dark Mode (Default) Variables - Z-Axis Atelier Premium Palette */
    --bg-primary: #0e0e0e;
    --bg-secondary: #1a1a1a;
    --bg-card: #1a1a1a;
    --bg-widget: #252525;
    --bg-active: rgba(232, 201, 122, 0.08);
    
    --border-color: #252525;
    --border-subtle: rgba(37, 37, 37, 0.5);
    
    --text-primary: #f5f0e8;
    --text-secondary: #d4cfc6;
    --text-muted: #8a857c;
    
    --color-gold: #e8c97a; /* Light gold for high readability in dark theme */
    --color-gold-hover: #c9a84c;
    --bg-skeleton: #2d2d2d;
}

html.light-mode {
    /* Light Mode Variables */
    --bg-primary: #FAF9F6;
    --bg-secondary: #F2ECE4;
    --bg-card: #FFFFFF;
    --bg-widget: #F9F8F6;
    --bg-active: #EADFD3;
    
    --border-color: #E5DCD0;
    --border-subtle: rgba(229, 220, 208, 0.5);
    
    --text-primary: #1E1B1C;
    --text-secondary: #5C5651;
    --text-muted: #726B63;
    
    --color-gold: #8C6221; /* Rich deep gold for light theme */
    --color-gold-hover: #A07530;
    --bg-skeleton: #e0d9ce;
}

/* Hardcoded Tailwind Gold Class Dynamic Remappings */
.text-\[\#8C6221\], .text-\[\#A07530\] {
    color: var(--color-gold) !important;
}
.bg-\[\#8C6221\] {
    background-color: var(--color-gold) !important;
}
.border-\[\#8C6221\], .border-\[\#8C6221\]\/30 {
    border-color: var(--color-gold) !important;
}
.bg-\[\#8C6221\]\/10, .bg-\[\#8C6221\]\/15 {
    background-color: var(--bg-active) !important;
}

/* ==========================================================================
   Base Elements Overrides
   ========================================================================== */
body {
    font-family: 'Playfair Display', Georgia, serif !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6, .brand-font {
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* ==========================================================================
   Premium Components
   ========================================================================== */
/* Premium Gold Button (Z-axis Atelier Style) */
.btn-premium-gold {
    background-color: var(--color-gold) !important;
    color: #FFFFFF !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 0.375rem !important; /* rounded-md */
    transition: all 0.2s ease-in-out !important;
    border: 1px solid var(--color-gold) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-premium-gold:hover {
    background-color: var(--color-gold-hover) !important;
    border-color: var(--color-gold-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(140, 98, 33, 0.15);
}
.btn-premium-gold:active {
    transform: translateY(0);
}

/* Outline Button */
.btn-premium-outline {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 0.375rem !important; /* rounded-md */
    transition: all 0.2s ease-in-out !important;
    border: 1px solid var(--border-color) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-premium-outline:hover {
    background-color: var(--bg-secondary) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-gold) !important;
}

/* Danger Button */
.btn-premium-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 0.375rem !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-premium-danger:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Danger Badge */
.badge-premium-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    border-radius: 0.25rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
html.light-mode .badge-premium-danger {
    background-color: rgba(220, 38, 38, 0.08) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    color: #b91c1c !important;
}

/* Card layout wrapper */
.card-premium {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem !important; /* rounded-lg */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.card-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(140, 98, 33, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border-color: var(--color-gold) !important;
}
.card-premium-accent {
    border-left: 4px solid var(--color-gold) !important;
}

/* ==========================================================================
   Tailwind Framework Classes Overrides (Theme Mapping)
   ========================================================================== */

/* Background mappings */
.bg-slate-950 { background-color: var(--bg-primary) !important; }
.bg-slate-900 { background-color: var(--bg-secondary) !important; }
.bg-slate-850 { background-color: var(--bg-card) !important; }
.bg-slate-800 { background-color: var(--bg-widget) !important; }
.bg-slate-950\/40 { background-color: var(--border-subtle) !important; }
/* Opacity variants — map to solid theme colours so they render correctly in light mode */
.bg-slate-900\/60, .bg-slate-900\/80 { background-color: var(--bg-secondary) !important; }
.bg-slate-800\/60, .bg-slate-800\/80 { background-color: var(--bg-widget) !important; }
.bg-white { background-color: var(--bg-card) !important; }

/* Font color mappings */
.text-slate-100 { color: var(--text-primary) !important; }
.text-slate-200 { color: var(--text-primary) !important; }
.text-slate-300 { color: var(--text-secondary) !important; }
.text-slate-400 { color: var(--text-secondary) !important; }
.text-slate-500 { color: var(--text-muted) !important; }
.text-slate-600 { color: var(--text-muted) !important; }
.text-slate-700 { color: var(--text-muted) !important; }

/* Border color mappings */
.border-slate-900, .border-slate-800, .border-slate-700 {
    border-color: var(--border-color) !important;
}
.divide-slate-900\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-color) !important;
}

/* Form input overrides */
input[type="text"], input[type="number"], input[type="password"], input[type="file"], select, textarea {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 0.375rem !important; /* rounded-md */
}
input::placeholder {
    color: var(--text-muted) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--color-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(140, 98, 33, 0.15) !important;
    background-color: var(--bg-primary) !important;
}

/* ==========================================================================
   Flatten Roundness Overrides (Z-axis Aesthetics)
   ========================================================================== */
.rounded-3xl, .rounded-2xl, .rounded-xl {
    border-radius: 0.375rem !important; /* rounded-md */
}

/* Exceptions: keep tiny badges clean but rectangular */
.rounded-full:not(.status-dot):not(.user-avatar-circle):not(.animate-ping) {
    border-radius: 0.25rem !important; /* rounded-sm */
}

/* Active buttons / primary gold overrides */
.bg-indigo-600, .bg-violet-600, .bg-indigo-500, .bg-cyan-500, .bg-cyan-600 {
    background-color: var(--color-gold) !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 0.375rem !important;
}
.hover\:bg-indigo-500:hover, .hover\:bg-violet-500:hover, .hover\:bg-cyan-500:hover, .hover\:bg-cyan-600:hover {
    background-color: var(--color-gold-hover) !important;
}
.hover\:bg-slate-900:hover {
    background-color: var(--bg-secondary) !important;
}
.hover\:bg-slate-800:hover {
    background-color: var(--bg-widget) !important;
}
.text-indigo-400, .text-violet-400, .text-indigo-500, .text-cyan-400, .text-cyan-500 {
    color: var(--color-gold) !important;
}
.bg-indigo-500\/10, .bg-violet-500\/10, .bg-cyan-500\/10 {
    background-color: rgba(140, 98, 33, 0.1) !important;
}
.hover\:bg-indigo-500\/10:hover, .hover\:bg-violet-500\/10:hover, .hover\:bg-cyan-500\/10:hover {
    background-color: rgba(140, 98, 33, 0.15) !important;
}
.border-indigo-500\/20, .border-violet-500\/20, .border-cyan-500\/20 {
    border-color: rgba(140, 98, 33, 0.2) !important;
}
.border-indigo-500, .border-cyan-500 {
    border-color: var(--color-gold) !important;
}
.hover\:border-cyan-500\/60:hover {
    border-color: rgba(140, 98, 33, 0.6) !important;
}
.hover\:bg-cyan-500\/5:hover {
    background-color: rgba(140, 98, 33, 0.05) !important;
}
.focus\:border-cyan-500:focus {
    border-color: var(--color-gold) !important;
}
.shadow-cyan-500\/50, .shadow-indigo-500\/50 {
    box-shadow: 0 10px 15px -3px rgba(140, 98, 33, 0.3), 0 4px 6px -4px rgba(140, 98, 33, 0.3) !important;
}

/* Focus ring overrides to keep gold consistency */
.focus\:ring-indigo-500:focus, .focus\:ring-indigo-500\/50:focus, 
.focus\:ring-cyan-500:focus, .focus\:ring-blue-500:focus {
    --tw-ring-color: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
}

/* Glass panel overrides (white background, thin border, soft shadow) */
.glass, .glass-panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    border-radius: 0.375rem !important;
}

/* ==========================================================================
   Auxiliary / Animation Styles
   ========================================================================== */
/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary) !important;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color) !important;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold) !important;
}

/* Alert Blinking */
.device-blink-warning {
    animation: alertBlink 1.5s infinite;
}
@keyframes alertBlink {
    0%, 100% {
        background-color: rgba(249, 115, 22, 0.15) !important;
        border-color: rgba(249, 115, 22, 0.7) !important;
        box-shadow: 0 0 12px rgba(249, 115, 22, 0.2) !important;
    }
    50% {
        background-color: var(--bg-card);
        border-color: var(--border-color);
        box-shadow: none;
    }
}

/* Danger Alert Blinking (Under 5 minutes remaining - Faster Red) */
.device-blink-danger {
    animation: dangerBlink 0.8s infinite;
}
@keyframes dangerBlink {
    0%, 100% {
        background-color: rgba(239, 68, 68, 0.2) !important;
        border-color: rgba(239, 68, 68, 0.85) !important;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.35) !important;
    }
    50% {
        background-color: var(--bg-card);
        border-color: var(--border-color);
        box-shadow: none;
    }
}

/* Slide in notifications styling */
.slide-in {
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideIn {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Print Receipt & Reports Styling */
@media print {
    /* Force browser to render color backgrounds & graphics */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Hide all elements that should not be printed */
    .no-print, .no-print *, .print-exclude, .print-exclude * {
        display: none !important;
        visibility: hidden !important;
    }

    /* Ensure print-only elements are displayed */
    .print-only, .print-only * {
        display: block !important;
        visibility: visible !important;
    }

    /* Print area styling (for thermal receipts) - Preserved for checkout receipts */
    #printArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        color: #000 !important;
        background: #fff !important;
        visibility: visible !important;
    }
    #printArea, #printArea * {
        visibility: visible !important;
    }

    /* Reset heights, overflows and flex layouts during print to prevent page breaks cutoff */
    html, body, 
    .h-screen, 
    .min-h-screen, 
    .overflow-hidden, 
    .overflow-y-auto, 
    .flex-1,
    main,
    .print-area {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        position: static !important;
    }

    /* Base Print Colors (White paper background, dark navy text) */
    body, html, main, .print-area {
        color: #0f172a !important;
        background: #ffffff !important; /* Clean white background */
        font-family: 'Outfit', sans-serif !important;
    }

    /* Strip all border-radius from printing elements */
    .theme-bg-card, 
    .glass-panel,
    .print-logo-icon,
    .reports-net-profit-row,
    #section-staff-bill .bg-slate-800,
    .rounded,
    .rounded-sm,
    .rounded-md,
    .rounded-lg,
    .rounded-xl,
    .rounded-2xl,
    .rounded-3xl,
    .rounded-full {
        border-radius: 0px !important;
    }

    /* Print Header Container - High-End Corporate Style */
    .print-header-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 3px solid #0f172a !important;
        padding-bottom: 15px !important;
        margin-bottom: 30px !important;
        page-break-inside: avoid !important;
    }

    .print-header-brand {
        display: flex !important;
        flex-direction: column !important; /* Stack logo and title vertically */
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .print-logo-icon {
        width: 42px !important;
        height: 42px !important;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
        border-radius: 0px !important; /* No radius */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #d4a853 !important; /* Gold logo text */
        font-weight: 950 !important;
        font-size: 18px !important;
        letter-spacing: 0.05em !important;
        border: 2px solid #0f172a !important; /* Removed gold border */
    }

    .print-logo-img {
        max-height: 42px !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    .print-brand-title {
        font-size: 20px !important;
        font-weight: 900 !important;
        color: #0f172a !important;
        margin: 0 !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }

    .print-brand-subtitle {
        font-size: 8px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        margin: 2px 0 0 0 !important;
        letter-spacing: 0.1em !important;
    }

    .print-header-meta {
        text-align: right !important;
    }

    .print-report-title {
        font-size: 15px !important;
        font-weight: 850 !important;
        color: #8C6221 !important; /* Gold Accent */
        margin: 0 0 4px 0 !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
    }

    .print-meta-grid {
        font-size: 9px !important;
        color: #64748b !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
    }

    .print-meta-grid .label {
        font-weight: 700 !important;
        color: #475569 !important;
    }

    .print-meta-grid .val {
        font-weight: 600 !important;
        color: #0f172a !important;
    }

    /* Print Specific Grids to prevent single-column stacking */
    .print-grid-3col {
        display: grid !important;
        grid-template-cols: 1fr 2fr !important;
        gap: 20px !important;
        align-items: start !important;
    }

    .print-grid-shifts {
        display: grid !important;
        grid-template-cols: 2fr 1fr !important;
        gap: 20px !important;
        align-items: start !important;
    }

    /* KPI Summary Cards Grid */
    #section-kpis {
        display: grid !important;
        grid-template-cols: repeat(5, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 25px !important;
        page-break-inside: avoid !important;
    }

    /* KPI widgets styled beautifully - Simple minimal design with vertical dividers */
    .theme-bg-card {
        background: transparent !important;
        border: none !important;
        border-right: 1px solid #cbd5e1 !important; /* Vertical column divider */
        border-radius: 0px !important; /* No radius */
        padding: 5px 10px !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        page-break-inside: avoid !important;
        height: auto !important;
        position: relative !important;
    }

    .theme-bg-card:last-child {
        border-right: none !important; /* Remove divider for the last item */
    }

    /* Clean flat borders for all KPI cards - Reset borders for simple design */
    .kpi-card-revenue,
    .kpi-card-cogs,
    .kpi-card-gross,
    .kpi-card-staff,
    .kpi-profit-positive,
    .kpi-profit-negative {
        border: none !important;
        border-left: none !important;
    }

    .theme-bg-card span.uppercase, .theme-bg-card span.text-\[10px\] {
        font-size: 8px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        letter-spacing: 0.05em !important;
    }

    .theme-bg-card h3 {
        font-size: 16px !important;
        font-weight: 900 !important;
        margin: 4px 0 !important;
        color: #0f172a !important;
    }

    .theme-bg-card div.text-slate-500, .theme-bg-card .text-slate-500 {
        font-size: 8px !important;
        line-height: 1.2 !important;
        color: #94a3b8 !important;
        margin-top: auto !important;
    }

    /* Apply colors to numbers in KPI widgets */
    .kpi-card-cogs h3 { color: #d97706 !important; }
    .kpi-card-gross h3 { color: #15803d !important; }
    .kpi-card-staff h3 { color: #b91c1c !important; }
    .kpi-profit-positive h3 { color: #15803d !important; }
    .kpi-profit-negative h3 { color: #b91c1c !important; }

    /* Report Section Cards (glass-panel equivalents) */
    .glass-panel {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important; /* Clean gray border instead of gold */
        border-radius: 0px !important; /* No radius */
        padding: 20px !important;
        margin-bottom: 20px !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
    }

    .glass-panel h2 {
        font-size: 12px !important;
        font-weight: 850 !important;
        color: #0f172a !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        border-bottom: 2px solid #e2e8f0 !important;
        padding-bottom: 6px !important;
        margin-bottom: 12px !important;
    }

    /* Tables with styled headers */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 10px !important;
    }

    th {
        background-color: #0f172a !important; /* Dark Slate Header */
        color: #ffffff !important; /* White text */
        font-weight: 800 !important;
        text-transform: uppercase !important;
        font-size: 9px !important;
        letter-spacing: 0.05em !important;
        padding: 8px 10px !important;
        border: 1px solid #0f172a !important;
    }

    td {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #334155 !important;
        padding: 8px 10px !important;
        font-size: 10px !important;
    }

    tr:nth-child(even) td {
        background: #f8fafc !important; /* Zebra striping */
    }

    h2 {
        border-bottom: 2px solid #cbd5e1 !important;
        color: #0f172a !important;
        padding-bottom: 8px !important;
        font-weight: 850 !important;
    }

    /* Value highlights (forcing colors in print preview) */
    .text-emerald-400, .text-emerald-500, .text-success, .text-emerald-600 {
        color: #15803d !important; /* Darker emerald green for paper contrast */
        font-weight: 750 !important;
    }
    .text-rose-400, .text-rose-500, .text-danger, .text-rose-600 {
        color: #b91c1c !important; /* Darker red for paper contrast */
        font-weight: 750 !important;
    }
    .text-amber-400, .text-[#8C6221], .text-[#e8c97a], .text-amber-600 {
        color: #b45309 !important; /* Amber-gold contrast */
        font-weight: 750 !important;
    }

    /* Revenue Breakdown Items & Totals */
    #section-revenue .flex-1.space-y-3.5 {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    #section-revenue .flex.justify-between {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px dashed #e2e8f0 !important;
        padding-bottom: 6px !important;
    }

    /* Net profit high-contrast row box */
    .reports-net-profit-row {
        background: #f0fdf4 !important;
        border: 1px solid #bbf7d0 !important;
        border-radius: 0px !important; /* No radius */
        padding: 8px 12px !important;
        margin-top: 10px !important;
    }

    /* Staff Bill specific logs list */
    #section-staff-bill div.py-2.border-b {
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 8px 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    #section-staff-bill h4 {
        color: #334155 !important;
        font-weight: 700 !important;
        font-size: 10px !important;
        margin: 0 !important;
    }

    #section-staff-bill p {
        color: #64748b !important;
        font-size: 8px !important;
        margin: 2px 0 0 0 !important;
    }

    #section-staff-bill .bg-slate-800 {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #cbd5e1 !important;
        padding: 2px 6px !important;
        border-radius: 0px !important; /* No radius */
        font-size: 8px !important;
    }

    /* Fixed PDF Footer */
    .pdf-fixed-footer {
        display: block !important;
        border-top: 1px solid #cbd5e1 !important;
        color: #64748b !important;
        font-size: 9px !important;
        padding: 8px 0 !important;
        background: #f8fafc !important;
        text-align: center !important;
        page-break-inside: avoid !important;
    }
}

/* ==========================================================================
   Product Modal Premium Styles
   ========================================================================== */
.modal-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .modal-grid-container {
        grid-template-columns: 220px 1fr;
    }
}

/* Beveled premium inputs inside cards/modals for visual distinction */
.card-premium input[type="text"], 
.card-premium input[type="number"], 
.card-premium select {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    transition: all 0.15s ease-in-out !important;
}
.card-premium input[type="text"]:focus, 
.card-premium input[type="number"]:focus, 
.card-premium select:focus {
    background-color: var(--bg-primary) !important;
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 2px rgba(140, 98, 33, 0.15) !important;
}

/* Image Dropzone / Upload area */
.image-upload-zone {
    border: 2px dashed var(--border-color) !important;
    background-color: var(--bg-secondary) !important;
    border-radius: 0.375rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
    height: 100%;
    min-height: 220px;
    overflow: hidden;
}
.image-upload-zone:hover {
    border-color: var(--color-gold) !important;
    background-color: var(--bg-active) !important;
}
.image-upload-zone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.image-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}
.image-upload-zone:hover .image-upload-overlay {
    opacity: 1;
}

/* Valuation panel card */
.valuation-panel-premium {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 4px solid var(--color-gold) !important;
    border-radius: 0.375rem !important;
    padding: 0.875rem !important;
}

/* ==========================================================================
   Premium Sidebar Navigation Styles
   ========================================================================== */
.sidebar-container-premium {
    background-color: var(--bg-card) !important;
    border-right: 1px solid var(--border-color) !important;
}

.sidebar-brand-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.25rem 1.5rem 1.5rem 1.5rem !important; /* Top space added so logo doesn't touch the top */
    border-bottom: 1px solid var(--border-subtle) !important;
}

.sidebar-logo-badge {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-hover) 100%);
    box-shadow: 0 4px 12px rgba(140, 98, 33, 0.25);
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.3s ease;
}

.sidebar-logo-badge:hover {
    transform: rotate(5deg) scale(1.05);
}

.sidebar-badge-premium {
    font-size: 8px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    background-color: rgba(140, 98, 33, 0.1) !important;
    border: 1px solid rgba(140, 98, 33, 0.2) !important;
    color: var(--color-gold) !important;
    display: inline-block;
    margin-top: 0.25rem;
}

.sidebar-link-premium {
    margin: 0.3rem 0.75rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
    color: var(--text-secondary) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    border: 1px solid transparent !important;
}

.sidebar-link-premium svg {
    transition: transform 0.2s ease;
}

.sidebar-link-premium:hover {
    background-color: var(--bg-active) !important;
    color: var(--color-gold) !important;
}

.sidebar-link-premium:hover svg {
    transform: translateX(2px);
}

.sidebar-link-premium-active {
    background: linear-gradient(90deg, rgba(140, 98, 33, 0.12) 0%, rgba(140, 98, 33, 0.02) 100%) !important;
    color: var(--color-gold) !important;
    border-left: 3px solid var(--color-gold) !important;
    border-radius: 0 8px 8px 0 !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-right: 1px solid var(--border-subtle) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    font-weight: 700 !important;
    box-shadow: inset 1px 0 0 rgba(140, 98, 33, 0.4);
}

/* Premium Footer Styling */
.footer-premium {
    display: block !important;
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 1rem 0 !important;
    user-select: none !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    min-height: 42px !important;

    /* ADD THESE TWO LINES: */
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
}


/* ==========================================================================
   Active Session Device Card — Golden Theme (Dark & Light Mode)
   ========================================================================== */

/* Card container: DARK MODE — rich deep gold fill, bright border */
.device-active-card {
    border-color: #e8c97a !important;
    background-color: #1e1500 !important;
    box-shadow: 0 0 0 1px rgba(232, 201, 122, 0.5), 0 4px 28px rgba(232, 201, 122, 0.25) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.device-active-card:hover {
    box-shadow: 0 0 0 2px #e8c97a, 0 8px 40px rgba(232, 201, 122, 0.35) !important;
}

/* Status badge: ACTIVE — gold text on gold-tinted bg */
.device-active-badge {
    color: #e8c97a !important;
    background-color: rgba(232, 201, 122, 0.2) !important;
    border-color: rgba(232, 201, 122, 0.5) !important;
    font-weight: 800 !important;
}

/* Ambient glow overlay inside active cards — DARK MODE */
.device-active-glow {
    background: linear-gradient(135deg, rgba(232, 201, 122, 0.14) 0%, rgba(140, 98, 33, 0.22) 100%) !important;
}

/* Device label (station name) */
.device-active-label {
    color: #e8c97a !important;
    text-shadow: 0 0 12px rgba(232, 201, 122, 0.3);
}

/* Customer name under the label */
.device-active-customer {
    color: #c9a84c !important;
}

/* Sub-labels ("Remaining", "Bill Est.") */
.device-active-sublabel {
    color: #a88030 !important;
    opacity: 1;
    font-weight: 700 !important;
}

/* Timer countdown value */
.device-active-timer {
    color: #e8c97a !important;
    text-shadow: 0 0 10px rgba(232, 201, 122, 0.5);
    font-weight: 800 !important;
}

/* Bill estimate value */
.device-active-bill {
    color: #f5f0e8 !important;
    font-weight: 800 !important;
}

/* ---- LIGHT MODE overrides — darker, clearly golden/amber card ---- */
html.light-mode .device-active-card {
    background-color: #C9943A !important;
    border-color: #8C6221 !important;
    box-shadow: 0 0 0 2px rgba(140, 98, 33, 0.5), 0 4px 24px rgba(140, 98, 33, 0.3) !important;
}

html.light-mode .device-active-card:hover {
    background-color: #B8832E !important;
    box-shadow: 0 0 0 2px #8C6221, 0 8px 32px rgba(140, 98, 33, 0.4) !important;
}

html.light-mode .device-active-glow {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.08) 100%) !important;
}

html.light-mode .device-active-badge {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

html.light-mode .device-active-label {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

html.light-mode .device-active-customer {
    color: rgba(255,255,255,0.85) !important;
}

html.light-mode .device-active-sublabel {
    color: rgba(255,255,255,0.75) !important;
}

html.light-mode .device-active-timer {
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

html.light-mode .device-active-bill {
    color: #fff !important;
}

/* Theme-adaptive Developer Dashboard Badges */
.badge-dev-violet  { background-color: rgba(139, 92, 246, 0.1) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; color: #a78bfa !important; }
.badge-dev-amber   { background-color: rgba(245, 158, 11, 0.1) !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; }
.badge-dev-cyan    { background-color: rgba(6, 182, 212, 0.1) !important; border: 1px solid rgba(6, 182, 212, 0.2) !important; color: #22d3ee !important; }
.badge-dev-rose    { background-color: rgba(244, 63, 94, 0.1)   !important; border: 1px solid rgba(244, 63, 94, 0.2)   !important; color: #fb7185 !important; }
.badge-dev-emerald { background-color: rgba(16, 185, 129, 0.1) !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; }
.badge-dev-purple  { background-color: rgba(168, 85, 247, 0.1) !important; border: 1px solid rgba(168, 85, 247, 0.2) !important; color: #c084fc !important; }
.badge-dev-indigo  { background-color: rgba(79, 70, 229, 0.1)  !important; border: 1px solid rgba(79, 70, 229, 0.2)  !important; color: #818cf8 !important; }
.badge-dev-gold    { background-color: var(--bg-active)        !important; border: 1px solid rgba(140, 98, 33, 0.3)  !important; color: var(--color-gold) !important; }
.badge-dev-teal    { background-color: rgba(20, 184, 166, 0.1) !important; border: 1px solid rgba(20, 184, 166, 0.2) !important; color: #2dd4bf !important; }
.badge-dev-blue    { background-color: rgba(59, 130, 246, 0.1) !important; border: 1px solid rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; }
.badge-dev-pink    { background-color: rgba(236, 72, 153, 0.1) !important; border: 1px solid rgba(236, 72, 153, 0.2) !important; color: #f472b6 !important; }

html.light-mode .badge-dev-violet  { background-color: rgba(139, 92, 246, 0.08) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; color: #6d28d9 !important; }
html.light-mode .badge-dev-amber   { background-color: rgba(245, 158, 11, 0.08) !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; color: #b45309 !important; }
html.light-mode .badge-dev-cyan    { background-color: rgba(6, 182, 212, 0.08) !important; border: 1px solid rgba(6, 182, 212, 0.2) !important; color: #0891b2 !important; }
html.light-mode .badge-dev-rose    { background-color: rgba(244, 63, 94, 0.08)   !important; border: 1px solid rgba(244, 63, 94, 0.2)   !important; color: #e11d48 !important; }
html.light-mode .badge-dev-emerald { background-color: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; color: #047857 !important; }
html.light-mode .badge-dev-purple  { background-color: rgba(168, 85, 247, 0.08) !important; border: 1px solid rgba(168, 85, 247, 0.2) !important; color: #7e22ce !important; }
html.light-mode .badge-dev-indigo  { background-color: rgba(79, 70, 229, 0.08)  !important; border: 1px solid rgba(79, 70, 229, 0.2)  !important; color: #4338ca !important; }
html.light-mode .badge-dev-gold    { background-color: var(--bg-active)        !important; border: 1px solid rgba(140, 98, 33, 0.2)  !important; color: var(--color-gold) !important; }
html.light-mode .badge-dev-teal    { background-color: rgba(20, 184, 166, 0.08) !important; border: 1px solid rgba(20, 184, 166, 0.2) !important; color: #0f766e !important; }
html.light-mode .badge-dev-blue    { background-color: rgba(59, 130, 246, 0.08) !important; border: 1px solid rgba(59, 130, 246, 0.2) !important; color: #1d4ed8 !important; }
html.light-mode .badge-dev-pink    { background-color: rgba(236, 72, 153, 0.08) !important; border: 1px solid rgba(236, 72, 153, 0.2) !important; color: #be185d !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Portal Selector & Login Pages Theme Adaptive Mappings
   ───────────────────────────────────────────────────────────────────────────── */
.bg-\[\#FAF9F6\] {
    background-color: var(--bg-primary) !important;
}
.text-\[\#1E1B1C\] {
    color: var(--text-primary) !important;
}
.text-\[\#7A7570\] {
    color: var(--text-secondary) !important;
}
.border-\[\#E5DCD0\] {
    border-color: var(--border-color) !important;
}
.border-\[\#E5DCD0\]\/50 {
    border-color: var(--border-subtle) !important;
}
.bg-\[\#F2ECE4\]\/30 {
    background-color: var(--bg-active) !important;
}
.placeholder-\[\#969089\]::placeholder {
    color: var(--text-muted) !important;
}

/* ==========================================================================
   CSP Compliant Hover States
   ========================================================================== */
.category-edit-btn:hover,
.plan-edit-btn:hover,
.product-edit-btn:hover {
    background: var(--color-gold) !important;
    color: #fff !important;
    border-color: var(--color-gold) !important;
}
.category-delete-btn:hover,
.product-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
}
.category-new-card:hover {
    border-color: var(--color-gold) !important;
    background: rgba(140, 98, 33, 0.05) !important;
}
.category-new-card:hover .add-icon {
    border-color: var(--color-gold) !important;
    color: var(--color-gold) !important;
}
.category-new-card:hover .add-label {
    color: var(--color-gold) !important;
}
.modal-close-btn:hover {
    border-color: var(--color-gold) !important;
    color: var(--color-gold) !important;
}
.modal-delete-confirm-btn:hover {
    background: rgba(239, 68, 68, 0.22) !important;
}
.product-restock-btn:hover {
    background: rgba(140, 98, 33, 0.2) !important;
}
.clear-image-btn:hover {
    background: rgba(239, 68, 68, 0.16) !important;
}
.product-delete-confirm-btn:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Default States for Action Buttons */
.plan-edit-btn,
.category-edit-btn,
.product-edit-btn {
    flex: 1;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.3rem 0.5rem !important;
    border-radius: 0.25rem !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-widget) !important;
    color: var(--text-secondary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', sans-serif !important;
}

.category-delete-btn,
.product-delete-btn {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    padding: 0.3rem 0.45rem !important;
    border-radius: 0.25rem !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    color: #f87171 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-restock-btn {
    flex: 1;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.3rem 0.5rem !important;
    border-radius: 0.25rem !important;
    border: 1px solid rgba(140, 98, 33, 0.25) !important;
    background: rgba(140, 98, 33, 0.08) !important;
    color: #D4A853 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', sans-serif !important;
}

/* New Category Card Styling */
.category-new-card {
    aspect-ratio: 1/1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    border: 2px dashed var(--border-color) !important;
    border-radius: 0.5rem !important;
    background-color: transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Skeleton Screen Loader Styles
   ========================================================================== */
#skeleton-loader-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 18rem; /* Matches sidebar w-72 */
    z-index: 100;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
}

@media (max-width: 768px) {
    #skeleton-loader-overlay {
        left: 0;
    }
}

.skeleton-pulse {
    animation: skeleton-key-pulse 2.2s ease-in-out infinite;
}

@keyframes skeleton-key-pulse {
    0%, 100% {
        opacity: 0.98;
    }
    50% {
        opacity: 0.88;
    }
}

.skeleton-item,
.skeleton-title,
.skeleton-text,
.skeleton-text-sm,
.skeleton-circle,
.skeleton-circle-sm,
.skeleton-button,
.skeleton-badge,
.skeleton-image {
    position: relative;
    overflow: hidden;
}

.skeleton-item::after,
.skeleton-title::after,
.skeleton-text::after,
.skeleton-text-sm::after,
.skeleton-circle::after,
.skeleton-circle-sm::after,
.skeleton-button::after,
.skeleton-badge::after,
.skeleton-image::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.18) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: skeleton-shimmer 1.6s infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-item {
    background-color: var(--bg-skeleton) !important;
    border-radius: 0.375rem;
}

.skeleton-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.skeleton-title {
    height: 1.75rem;
    width: 200px;
    background-color: var(--bg-skeleton) !important;
    border-radius: 0.375rem;
}

.skeleton-text {
    height: 0.75rem;
    width: 100%;
    background-color: var(--bg-skeleton) !important;
    border-radius: 0.25rem;
}

.skeleton-text-sm {
    height: 0.6rem;
    width: 60%;
    background-color: var(--bg-skeleton) !important;
    border-radius: 0.25rem;
}

.skeleton-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--bg-skeleton) !important;
    flex-shrink: 0;
}

.skeleton-circle-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--bg-skeleton) !important;
    flex-shrink: 0;
}

.skeleton-button {
    height: 2.25rem;
    width: 100px;
    background-color: var(--bg-skeleton) !important;
    border-radius: 0.375rem;
}

.skeleton-badge {
    height: 1.25rem;
    width: 80px;
    background-color: var(--bg-skeleton) !important;
    border-radius: 9999px;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 1/1;
    background-color: var(--bg-skeleton) !important;
    border-radius: 0.375rem;
}