/* ADAC POS - design tokens (v2 redesign) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* === Brand === */
    --c-primary:       #0F2540;   /* deep navy, premium */
    --c-primary-dark:  #081729;
    --c-primary-light: #1B3D63;
    --c-primary-fg:    #FFFFFF;

    --c-accent:        #F26B4D;   /* coral CTA - warm pop */
    --c-accent-dark:   #DD4B2C;
    --c-accent-fg:     #FFFFFF;

    --c-secondary:     #FFB627;
    --c-secondary-fg:  #0F2540;

    /* === Neutrals (warm, off-white) === */
    --c-bg:            #F6F4F0;
    --c-bg-soft:       #EDEAE3;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #FAFAF7;
    --c-text:          #1A2333;
    --c-text-soft:     #475569;
    --c-text-muted:    #8194AA;
    /* Testo "primario" (titoli modal, prezzi, link, numerini in evidenza).
       In light mode = navy brand. In dark mode → ridefinito a sky-blue per restare leggibile su navy. */
    --c-text-primary:  var(--c-primary);
    --c-border:        #E5E1D8;
    --c-border-strong: #C9C2B3;
    --c-overlay:       rgba(15, 37, 64, 0.55);

    /* === Status === */
    --c-success:       #10B981;
    --c-warning:       #F59E0B;
    --c-danger:        #EF4444;
    --c-info:          #3B82F6;

    /* === Stati tavolo (mappa) === */
    --c-table-free:        #10B981;   /* emerald */
    --c-table-free-dark:   #047857;
    --c-table-busy:        #F59E0B;   /* warm amber - "needs attention" not "alarm" */
    --c-table-busy-dark:   #B45309;
    --c-table-paid:        #3B82F6;   /* cool blue - done */
    --c-table-paid-dark:   #1D4ED8;
    --c-table-reserved:    #EC4899;   /* rose */
    --c-table-selected:    #8B5CF6;   /* violet */

    /* === Spacing scale === */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
    --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

    /* === Radii === */
    --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;
    --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

    /* === Shadows (a layered system) === */
    --sh-xs: 0 1px 2px rgba(15, 37, 64, .04);
    --sh-sm: 0 2px 4px rgba(15, 37, 64, .06), 0 1px 2px rgba(15, 37, 64, .04);
    --sh-md: 0 4px 12px rgba(15, 37, 64, .08), 0 2px 4px rgba(15, 37, 64, .04);
    --sh-lg: 0 12px 32px rgba(15, 37, 64, .12), 0 4px 8px rgba(15, 37, 64, .05);
    --sh-xl: 0 24px 64px rgba(15, 37, 64, .18), 0 8px 16px rgba(15, 37, 64, .08);
    --sh-inset: inset 0 1px 2px rgba(15, 37, 64, .06);

    /* === Typography === */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, 'JetBrains Mono', "SF Mono", Menlo, Consolas, monospace;

    /* === Animation === */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 0.12s;
    --t-base: 0.2s;
    --t-slow: 0.32s;

    /* === Layout === */
    --topbar-h: 56px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* === Dark mode === */
html[data-theme="dark"] {
    --c-primary:       #1B3D63;
    --c-primary-dark:  #0F2540;
    --c-primary-light: #2C5F84;
    --c-primary-fg:    #FFFFFF;
    /* Variante chiara di primary, da usare per testi su sfondi scuri (zone tab attiva, link, ecc.) */
    --c-primary-on-dark: #8BC0E8;

    --c-accent:        #FF8A6E;
    --c-accent-dark:   #F26B4D;

    --c-bg:            #0B1320;
    --c-bg-soft:       #131C2E;
    --c-surface:       #18233A;
    --c-surface-2:     #1F2C46;
    /* Testi: meno cast bluastro + bumpati per leggere bene su superfici colorate (chip, primary, accent) */
    --c-text:          #F8FAFC;
    --c-text-soft:     #E0E6EF;
    --c-text-muted:    #C2CDDD;
    /* In dark mode il navy "--c-primary" sparisce su superfici scure: il testo-primary diventa sky-blue. */
    --c-text-primary:  #8BC0E8;
    --c-border:        #2A3850;
    --c-border-strong: #3A4A66;
    --c-overlay:       rgba(0, 0, 0, 0.65);

    /* Status: piu' brillanti su sfondi scuri */
    --c-success:       #34D399;
    --c-warning:       #FBBF24;
    --c-danger:        #F87171;
    --c-info:          #60A5FA;

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .25);
    --sh-sm: 0 2px 4px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .2);
    --sh-md: 0 4px 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .25);
    --sh-lg: 0 12px 32px rgba(0, 0, 0, .55);
    --sh-xl: 0 24px 64px rgba(0, 0, 0, .65);

    --c-table-free:        #34D399;
    --c-table-busy:        #FBBF24;
    --c-table-paid:        #60A5FA;
}


html[data-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--c-bg-soft);
    color: var(--c-text);
    border-color: var(--c-border);
}
html[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.78); }

/* === Reset minimo === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font-family: var(--font-sans);
    color: var(--c-text);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01", "ss03";
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    line-height: 1.5;
    background: var(--c-bg);
    font-size: 15px;
    letter-spacing: -0.005em;
    overflow-x: hidden;
    max-width: 100vw;
    min-width: 0;
}

/* CRITICO: l'attributo HTML [hidden] deve sempre vincere su display:flex/inline-flex/etc. */
[hidden] { display: none !important; }
button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
input, textarea, select { font: inherit; color: inherit; }
img, svg { max-width: 100%; display: block; }
a { color: var(--c-text-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Hide scrollbar by default but keep scroll */
.scroll-x { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { height: 4px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =================================================================
 * PALETTE PREIMPOSTATE — selettore via data-palette su <html>
 * Default (acquario): navy + coral (definito sopra in :root)
 * Altre: trattoria (rosso caldo), bosco (verde), notte (viola), porto (azzurro)
 * ================================================================= */

/* Trattoria — rosso terracotta + giallo grano, calda mediterranea */
[data-palette="trattoria"] {
    --c-primary:       #8B2E2A;
    --c-primary-dark:  #6B1F1B;
    --c-primary-light: #A03832;
    --c-accent:        #E8A341;
    --c-accent-dark:   #C48526;
    --c-secondary:     #6B8E23;
    --c-secondary-fg:  #FFFFFF;
    --c-bg:            #FAF6F0;
    --c-bg-soft:       #F1EBE0;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #FBF7F1;
    --c-text:          #2C1810;
    --c-text-soft:     #5C4030;
    --c-border:        #E5D9C5;
    --c-border-strong: #C9B59A;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #8FAD63;
    --c-table-busy:    #E8A341;
    --c-table-paid:    #6B8E23;
}

/* Bosco — verde foresta + senape, naturale */
[data-palette="bosco"] {
    --c-primary:       #2D4A2B;
    --c-primary-dark:  #1F3520;
    --c-primary-light: #3D5E3B;
    --c-accent:        #D4A24C;
    --c-accent-dark:   #B6862F;
    --c-secondary:     #8B5A2B;
    --c-bg:            #F7F5F0;
    --c-bg-soft:       #EFEAE0;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #FAF8F3;
    --c-text:          #1A2014;
    --c-text-soft:     #3F4A35;
    --c-border:        #DBD5C5;
    --c-border-strong: #B8AE94;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #6B9F4F;
    --c-table-busy:    #D4A24C;
    --c-table-paid:    #4A7C59;
}

/* Notte — viola scuro + ciano, moderno locale serale */
[data-palette="notte"] {
    --c-primary:       #2C1B47;
    --c-primary-dark:  #1A0F2E;
    --c-primary-light: #3D2960;
    --c-accent:        #38D6E0;
    --c-accent-dark:   #1FA8B0;
    --c-secondary:     #E91E63;
    --c-bg:            #F5F3F8;
    --c-bg-soft:       #ECE7F2;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #FAF8FC;
    --c-text:          #1A0F2E;
    --c-text-soft:     #4A3E5C;
    --c-border:        #DCD3E6;
    --c-border-strong: #B8A8C9;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #38D6E0;
    --c-table-busy:    #E91E63;
    --c-table-paid:    #9D4EDD;
}

/* Porto — azzurro mare + corallo, fresca/marittima */
[data-palette="porto"] {
    --c-primary:       #1B4965;
    --c-primary-dark:  #0E2B3D;
    --c-primary-light: #2E6789;
    --c-accent:        #F26B4D;
    --c-accent-dark:   #DD4B2C;
    --c-secondary:     #62B6CB;
    --c-bg:            #F4F9FC;
    --c-bg-soft:       #E6EFF5;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #F8FBFD;
    --c-text:          #0F2540;
    --c-text-soft:     #3D5A6C;
    --c-border:        #D5E2EA;
    --c-border-strong: #A8BFCE;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #5FA8D3;
    --c-table-busy:    #F26B4D;
    --c-table-paid:    #1B4965;
}

/* Minimal — bianco/grigio/nero, alta gamma */
[data-palette="minimal"] {
    --c-primary:       #1A1A1A;
    --c-primary-dark:  #000000;
    --c-primary-light: #333333;
    --c-accent:        #D4AF37;
    --c-accent-dark:   #B8941F;
    --c-secondary:     #666666;
    --c-bg:            #FAFAFA;
    --c-bg-soft:       #F0F0F0;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #F7F7F7;
    --c-text:          #000000;
    --c-text-soft:     #404040;
    --c-border:        #E0E0E0;
    --c-border-strong: #BFBFBF;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #8FBC8F;
    --c-table-busy:    #C4A35A;
    --c-table-paid:    #6B7A8F;
}

/* Mediterraneo — terracotta + ocra + cream, premium calda. Default landing. */
[data-palette="mediterraneo"] {
    --c-primary:       #8B3A2B;
    --c-primary-dark:  #6B2A1E;
    --c-primary-light: #A24A38;
    --c-accent:        #D4A24C;
    --c-accent-dark:   #B6862F;
    --c-secondary:     #6B7B3F;
    --c-bg:            #FAF6F0;
    --c-bg-soft:       #F1ECE2;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #FBF7F1;
    --c-text:          #2B1810;
    --c-text-soft:     #5C4030;
    --c-border:        #E5D9C5;
    --c-border-strong: #C9B59A;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #6B7B3F;
    --c-table-busy:    #D4A24C;
    --c-table-paid:    #8B3A2B;
}

/* Pizzeria napoletana — rosso pomodoro + verde basilico + cream */
[data-palette="napoletana"] {
    --c-primary:       #C0392B;
    --c-primary-dark:  #962A1F;
    --c-primary-light: #D44B3B;
    --c-accent:        #2E7D32;
    --c-accent-dark:   #1B5E20;
    --c-secondary:     #F4D35E;
    --c-bg:            #FBF6EE;
    --c-bg-soft:       #F3ECDF;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #FBF8F2;
    --c-text:          #1F1410;
    --c-text-soft:     #4F362C;
    --c-border:        #E7DBC6;
    --c-border-strong: #C5AF8A;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #2E7D32;
    --c-table-busy:    #F4D35E;
    --c-table-paid:    #C0392B;
}

/* Steakhouse — burgundy + oro + crema, formale serale */
[data-palette="steakhouse"] {
    --c-primary:       #5C1F2E;
    --c-primary-dark:  #3E1320;
    --c-primary-light: #7A2C3E;
    --c-accent:        #C9A24C;
    --c-accent-dark:   #A6822E;
    --c-secondary:     #2A2018;
    --c-bg:            #F7F2EB;
    --c-bg-soft:       #ECE3D6;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #FAF6EF;
    --c-text:          #1A0F08;
    --c-text-soft:     #4A3528;
    --c-border:        #DECEB4;
    --c-border-strong: #B59B70;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #6B7B3F;
    --c-table-busy:    #C9A24C;
    --c-table-paid:    #5C1F2E;
}

/* Bistrot — aubergine + sage + bone, contemporaneo morbido */
[data-palette="bistrot"] {
    --c-primary:       #3D2438;
    --c-primary-dark:  #271622;
    --c-primary-light: #553450;
    --c-accent:        #B86F4C;
    --c-accent-dark:   #94522F;
    --c-secondary:     #8B9D7B;
    --c-bg:            #F4F0E9;
    --c-bg-soft:       #E9E3D6;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #FAF6EE;
    --c-text:          #1F1418;
    --c-text-soft:     #4A3640;
    --c-border:        #DDD3C0;
    --c-border-strong: #B5A488;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #8B9D7B;
    --c-table-busy:    #B86F4C;
    --c-table-paid:    #3D2438;
}

/* Costa — sage + sabbia + navy, mare/pesce */
[data-palette="costa"] {
    --c-primary:       #2E4E5C;
    --c-primary-dark:  #1B333F;
    --c-primary-light: #426978;
    --c-accent:        #E0A858;
    --c-accent-dark:   #B98432;
    --c-secondary:     #8FA897;
    --c-bg:            #F4F1EB;
    --c-bg-soft:       #E9E2D2;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #FAF7EF;
    --c-text:          #15252B;
    --c-text-soft:     #3D5660;
    --c-border:        #DACFB4;
    --c-border-strong: #ABA084;
    --c-text-primary:  var(--c-primary);
    --c-table-free:    #8FA897;
    --c-table-busy:    #E0A858;
    --c-table-paid:    #2E4E5C;
}