/* ==========================================================================
   HoReCa POS - Modern Gourmet Bistro & SaaS Design System
   User Palette:
     - #f5fbef (Mint Whisper / Clean Pearl Page Background)
     - #4cb963 (Vibrant Emerald / Primary Brand & Action)
     - #503d42 (Espresso Plum / High Contrast Headings & Dark Text)
     - #7067cf (Iris Violet / Royal Interactive Accent)
     - #c06e52 (Warm Terracotta / Warm Accents & Status)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --brand-bg:         #f5fbef;
    --brand-green:      #4cb963;
    --brand-dark:       #503d42;
    --brand-violet:     #7067cf;
    --brand-terracotta: #c06e52;

    /* Light Theme (Crisp, Natural Gourmet Light) */
    --bg-page:          #f5fbef;
    --bg-surface:       #ffffff;
    --bg-subtle:        #edf5eb;
    --border-color:     #dce8d6;
    --border-subtle:    #eaf2e8;
    --text-main:        #503d42;
    --text-muted:       #725f64;
    --text-faint:       #938086;

    /* Semantic Accents mapped to User Palette */
    --sol-cyan:         #7067cf;
    --sol-green:        #4cb963;
    --sol-yellow:       #c06e52;
    --sol-orange:       #c06e52;
    --sol-red:          #d94848;
    --sol-violet:       #7067cf;
    --sol-blue:         #5c53b8;
    --sol-magenta:      #7067cf;
}

.dark {
    /* Dark Theme (Deep Espresso Plum Luxury) */
    --bg-page:          #1c1416;
    --bg-surface:       #2b1f23;
    --bg-subtle:        #37292e;
    --border-color:     #453439;
    --border-subtle:    #3b2b30;
    --text-main:        #f5fbef;
    --text-muted:       #c2b3b7;
    --text-faint:       #8c7b80;
}

/* Global Typography & Reset */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background-color: var(--bg-page);
    color: var(--text-main);
    transition: background-color 0.2s ease, color 0.2s ease;
    letter-spacing: -0.01em;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
}

/* Modern Card Surfaces */
.bg-solar-base2,
[class*="bg-solar-base2"] {
    background-color: var(--bg-surface);
}

.bg-solar-base3,
[class*="bg-solar-base3"] {
    background-color: var(--bg-subtle);
}

.dark .bg-solar-base03,
.dark [class*="dark:bg-solar-base03"] {
    background-color: var(--bg-page) !important;
}

.dark .bg-solar-base02,
.dark [class*="dark:bg-solar-base02"] {
    background-color: var(--bg-surface) !important;
}

/* Modern Border Overrides matching User Palette */
[class*="border-[#d6cebe]"],
[class*="border-\[\#d6cebe\]"] {
    border-color: var(--border-color) !important;
}

[class*="border-[#d6cebe]/"],
[class*="border-\[\#d6cebe\]/"] {
    border-color: rgba(220, 232, 214, 0.6) !important;
}

.dark [class*="dark:border-[#0d4e5f]"],
.dark [class*="dark:border-\[\#0d4e5f\]"] {
    border-color: var(--border-color) !important;
}

.dark [class*="dark:border-[#0d4e5f]/"],
.dark [class*="dark:border-\[\#0d4e5f\]/"] {
    border-color: rgba(69, 52, 57, 0.6) !important;
}

/* Modern Elevation Shadows */
.shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(80, 61, 66, 0.05);
}

.shadow-sm,
.shadow-md {
    box-shadow: 0 4px 12px -2px rgba(80, 61, 66, 0.06), 0 2px 6px -2px rgba(80, 61, 66, 0.04);
}

.shadow-lg,
.shadow-2xl {
    box-shadow: 0 12px 32px -4px rgba(80, 61, 66, 0.12), 0 4px 12px -2px rgba(80, 61, 66, 0.06);
}

.dark .shadow-xs,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-2xl {
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35);
}

/* Modern Interactive Buttons */
button, .btn {
    font-family: inherit;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

button:active:not(:disabled),
.btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* Glassmorphism Header */
header.sticky {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* W3C & MDN Standard Scrollbars (CSS Scrollbars Module Level 1) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* Fallback for legacy WebKit browsers */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Flat Card Borders */
.flat-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Animations */
@keyframes urgent-pulse {
    0%, 100% { border-color: var(--brand-terracotta); box-shadow: 0 0 0 0 rgba(192, 110, 82, 0.4); }
    50% { border-color: var(--brand-terracotta); box-shadow: 0 0 0 4px rgba(192, 110, 82, 0.15); }
}

.urgent-ticket {
    animation: urgent-pulse 2s infinite;
}

@keyframes pin-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.pin-shake {
    animation: pin-shake 0.35s ease-in-out;
}

/* Responsive Viewport & Safe Area Insets for Mobile/Firefox */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

@supports (padding: env(safe-area-inset-left)) {
    header {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

@media (max-width: 1279px) {
    header .max-w-7xl {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0.75rem));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0.75rem));
    }
}