/* ============================================================ Igea Club — tema "acqua" con chiaro/scuro Drop-in: sostituisce public/assets/css/app.css Il tema si attiva via attributo data-theme su ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;0,800;1,600;1,700&family=Inter:wght@400;500;600;700;800&display=swap'); /* ---- palette CHIARA (default) ---- */ :root { --bg: #eef6f8; --topbar: #ffffff; --surface: #ffffff; --surface-2: #f3f9fb; --border: #e1edf1; --text: #0f2730; --text-2: #243b44; --muted: #5b7884; --muted-2: #9bb3bc; --accent: #17b3c4; --accent-ink: #06262f; --good: #2f9e72; --bad: #e8624a; --warn: #b07d11; --band: linear-gradient(135deg, #eaf4f6, #dcedf1); --band-label: #5b7884; --band-num: #0f2730; --shadow: 0 1px 3px rgba(16, 40, 48, .06); --chip-bar-bg: #dcf0f3; --chip-bar-ink: #0e7c8c; --chip-rist-bg: #fbf0d9; --chip-rist-ink: #9a6700; --chip-cassa-bg: #dcefe5; --chip-cassa-ink: #2f7d5c; --chip-recep-bg: #dce9ef; --chip-recep-ink: #0b5e74; --chip-extra-bg: #e9e6f2; --chip-extra-ink: #5b4b8a; } /* ---- palette SCURA ---- */ :root[data-theme="dark"] { --bg: #0c2a35; --topbar: #08323f; --surface: #103744; --surface-2: #15414f; --border: #1c4e5e; --text: #ffffff; --text-2: #eaf6f8; --muted: #9fc3ce; --muted-2: #6f97a3; --accent: #17b3c4; --accent-ink: #06262f; --good: #5fd0a3; --bad: #ff8e76; --warn: #f0b429; --band: linear-gradient(135deg, #08323f, #0c4150); --band-label: #6f97a3; --band-num: #ffffff; --shadow: 0 1px 3px rgba(0, 0, 0, .25); --chip-bar-bg: #17b3c4; --chip-bar-ink: #06262f; --chip-rist-bg: #e8a83c; --chip-rist-ink: #3a2600; --chip-cassa-bg: #5fd0a3; --chip-cassa-ink: #06262f; --chip-recep-bg: #0b5e74; --chip-recep-ink: #ffffff; --chip-extra-bg: #7a6bb0; --chip-extra-ink: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow-x: hidden; /* no horizontal scroll on any page */ } body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; transition: background .25s, color .25s; } .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } h1, h2, h3, .brand { font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.01em; } /* ============ TOPBAR ============ */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 22px; background: var(--topbar); border-bottom: 1px solid var(--border); } .topbar .brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } /* Logo reale */ .brand-img { height: 34px; width: auto; display: block; /* tema chiaro: logo scuro su sfondo bianco — nessun filtro */ transition: filter .25s, opacity .15s; } /* tema scuro: logo invertito → bianco su sfondo scuro */ :root[data-theme="dark"] .brand-img { filter: invert(1) brightness(1.1); } .brand-logo-link:hover .brand-img { opacity: .8; } .topnav { display: flex; gap: 3px; flex-wrap: wrap; } .topnav a { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 9px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--muted); } .topnav a:hover { background: var(--surface-2); color: var(--text-2); } .topnav a.active { background: var(--accent); color: var(--accent-ink); } .topbar .spacer { margin-left: auto; } .topbar .tools { display: flex; align-items: center; gap: 12px; } .theme-toggle { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 3px; } .theme-toggle button { display: grid; place-items: center; width: 34px; height: 28px; border: none; border-radius: 6px; cursor: pointer; background: transparent; color: var(--muted); padding: 0; } :root:not([data-theme="dark"]) .theme-toggle button[data-set="light"], :root[data-theme="dark"] .theme-toggle button[data-set="dark"] { background: var(--accent); color: var(--accent-ink); } .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #e8a83c; color: #3a2600; } /* ============ LAYOUT MAIN ============ */ main.app { padding: 0; } .page { padding: 18px 22px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .page-head h1 { margin: 0; font-size: 22px; font-weight: 800; } .page-head .sub { font-size: 13px; color: var(--muted); margin-top: 3px; } /* ============ KPI ============ */ .kpi-band { padding: 18px 22px; background: var(--band); border-bottom: 1px solid var(--border); } .kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .kpi .label { font-size: 11.5px; color: var(--band-label); margin-bottom: 5px; } .kpi .value { font-size: 24px; font-weight: 800; color: var(--band-num); line-height: 1; } .kpi .value small { font-size: 13px; font-weight: 500; color: var(--band-label); } .kpi.is-good .value { color: var(--good); } .kpi.is-bad .value { color: var(--bad); } /* cards used by dashboard + altre viste */ .panel, .metric, .login-box, .product-button { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } .panel { padding: 18px; } .panel h2, .panel h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--text); } .panel .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .panel .panel-head h3 { margin: 0; } .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--good); } .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); } .grid-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; } .stack { display: flex; flex-direction: column; gap: 16px; } /* ============ FEED MOVIMENTI ============ */ .feed { display: flex; flex-direction: column; } .feed-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); } .feed-row:last-child { border-bottom: 0; } .feed-row .time { font-size: 12px; color: var(--muted); width: 42px; } .feed-row .desc { flex: 1; } .feed-row .desc b { font-size: 13.5px; font-weight: 600; color: var(--text-2); } .feed-row .desc span { font-size: 11.5px; color: var(--muted-2); } .feed-row .amt { font-size: 13.5px; font-weight: 700; color: var(--text); } .feed-row .amt.pos { color: var(--good); } .chip { font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px; white-space: nowrap; } .chip.bar { background: var(--chip-bar-bg); color: var(--chip-bar-ink); } .chip.ristorante { background: var(--chip-rist-bg); color: var(--chip-rist-ink); } .chip.cassa { background: var(--chip-cassa-bg); color: var(--chip-cassa-ink); } .chip.reception { background: var(--chip-recep-bg); color: var(--chip-recep-ink); } .chip.extra { background: var(--chip-extra-bg); color: var(--chip-extra-ink); } .status-badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; } .status-open { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } .status-paid { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); } .status-cancelled { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--muted); } /* mini barre incasso */ .bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; background: var(--accent); } .kv { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .kv .k { color: var(--muted); } .kv .v { font-weight: 700; color: var(--text); } /* search inline */ .searchbox { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; height: 42px; min-width: 220px; } .searchbox input { border: none; background: transparent; outline: none; color: var(--text); font: inherit; width: 100%; } .searchbox input::placeholder { color: var(--muted-2); } /* ============ VISTE ESISTENTI (preservate, ritematizzate) ============ */ .metric { padding: 16px; min-height: 96px; } .metric span { display: block; color: var(--muted); font-size: .9rem; } .metric strong { display: block; margin-top: 8px; font-size: 1.45rem; color: var(--text); } .metric.ok strong { color: var(--good); } .metric.danger strong { color: var(--bad); } .metric.warn strong { color: var(--warn); } .login-wrap { min-height: 90vh; display: grid; place-items: center; } .login-box { width: min(440px, 92vw); padding: 28px; } .login-box h1 { font-size: 1.7rem; } .quick-card { width: min(320px, 100%); } .balance { font-size: 2rem; font-weight: 700; color: var(--good); } .balance.open { color: var(--bad); } .product-grid, .places-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .product-button { padding: 12px; } .product-button span, .place span, .place small, .place em { display: block; } .place { border-radius: 10px; padding: 12px; border: 2px solid var(--border); background: var(--surface); } .place.disponibile { border-color: var(--good); } .place.prenotato { border-color: var(--warn); } .place.occupato { border-color: var(--bad); } .place.manutenzione, .place.bloccato { border-color: var(--muted); background: var(--surface-2); } /* tabelle Bootstrap dentro al tema */ .table { color: var(--text); } .table > :not(caption) > * > * { border-color: var(--border); } /* ============ RESPONSIVE ============ */ @media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .page, .kpi-band, .topbar { padding-left: 14px; padding-right: 14px; } .topnav { order: 3; width: 100%; overflow-x: auto; } .topbar .spacer { display: none; } } /* ============================================================ Mappa Lettini — layout fedele piantina, single-screen Le dimensioni dei lettini sono calibrate via JS con CSS custom properties: --seat-w, --seat-h, --seat-fs, --seat-gap, --umb-fs ============================================================ */ /* Valori default (overridati da JS al resize) */ :root { --seat-w: 42px; --seat-h: 27px; --seat-fs: 0.5rem; --seat-gap: 3px; --umb-fs: 1rem; } /* ── Pagina intera ── */ .lg-page { display: flex; flex-direction: column; height: calc(100dvh - 60px); /* 60px = altezza topbar globale */ overflow: hidden; padding: 6px 14px 4px; gap: 5px; box-sizing: border-box; } /* ── Barra superiore compatta ── */ .lg-topbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* Nav giorno */ .lg-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 1.1rem; line-height: 1; text-decoration: none; flex-shrink: 0; transition: background .15s; } .lg-nav-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .lg-date-input { width: auto !important; font-size: .82rem !important; } .lg-today-btn { font-size: .7rem; padding: 2px 8px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); text-decoration: none; flex-shrink: 0; } .lg-today-btn:hover { color: var(--text); background: var(--border); } /* Legenda — 3 fasi: Libero, Riservato, Pagato */ .lg-legend { display: flex; gap: 8px; align-items: center; } .ll-i { display: flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--muted); } .ll-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .ll-dot.ll-disp { background: var(--good); } .ll-dot.ll-pren { background: #e8a020; } .ll-dot.ll-occ { background: var(--accent); } .ll-sep { color: var(--muted-2); font-size: .7rem; padding: 0 1px; } /* Zoom controls */ .lg-zoom-ctrl { display: flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; flex-shrink: 0; } .lg-zoom-btn { background: none; border: none; padding: 0 4px; font-size: 1rem; font-weight: 700; color: var(--text); cursor: pointer; line-height: 1.2; } .lg-zoom-btn:hover { color: var(--accent); } .lg-zoom-val { font-size: .75rem; font-weight: 600; color: var(--muted); min-width: 36px; text-align: center; } .lg-zoom-reset { background: none; border: none; padding: 0 2px; font-size: .9rem; color: var(--muted-2); cursor: pointer; } .lg-zoom-reset:hover { color: var(--accent); } /* ── Corpo: mappa + sidebar fianco a fianco ── */ .lg-body { flex: 1; display: flex; gap: 0; overflow: hidden; min-height: 0; transition: padding-right .25s cubic-bezier(.4,0,.2,1); } .lg-body.sidebar-open { padding-right: 400px; } /* ── Contenitore mappa ── */ .lg-map { flex: 1; display: flex; justify-content: center; align-items: flex-start; overflow: auto; border-right: 1px solid var(--border); padding-right: 10px; } .lg-map-inner { display: flex; flex-direction: column; } /* Highlight lettino (dal clic sul chip del pannello) */ @keyframes seatPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(23,179,196,.6); } 50% { box-shadow: 0 0 0 8px rgba(23,179,196,0); } } .seat-highlight { outline: 3px solid var(--accent) !important; animation: seatPulse 0.6s ease 3; } /* ── Pannello prenotazioni ── */ .lg-panel { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow: hidden; min-width: 240px; } .lg-panel-section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; flex-shrink: 0; } .lg-panel-section.lg-panel-list { flex: 1; overflow-y: auto; flex-shrink: 1; } /* Form collassabile */ .lg-panel-form .lg-panel-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; font-size: .78rem; font-weight: 700; color: var(--accent); cursor: pointer; } .lg-panel-form .lg-panel-form-body { display: none; } .lg-panel-form.open .lg-panel-form-body { display: block; } .lg-toggle-icon { transition: transform .2s; } .lg-panel-form.open .lg-toggle-icon { transform: rotate(180deg); } /* Titolo pannello */ .lg-panel-title { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; } .lg-panel-date { color: var(--text); font-size: .78rem; } .res-count-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: .65rem; border-radius: 10px; padding: 1px 7px; } /* Empty state */ .lg-res-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0; color: var(--muted-2); font-size: .8rem; } /* ── Booking card ── */ .lg-booking-card { background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; transition: opacity .25s, transform .25s; } .lg-booking-card.res-s-confermata { border-left-color: #e8a020; } .lg-booking-card.res-s-attesa { border-left-color: var(--accent); } .lg-booking-card.res-s-completata { border-left-color: var(--good); } .lbc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 5px; } .lbc-customer { display: flex; flex-direction: column; } .lbc-name { font-size: .84rem; font-weight: 700; color: var(--text); } .lbc-code { font-size: .62rem; color: var(--muted-2); margin-top: 1px; } /* Status badge */ .lbc-status-badge { font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; } .lbc-status-badge.res-s-confermata { background: rgba(232,160,32,.18); color: #a06800; } .lbc-status-badge.res-s-attesa { background: rgba(23,179,196,.15); color: var(--accent); } .lbc-status-badge.res-s-completata { background: rgba(47,158,114,.15); color: var(--good); } :root[data-theme="dark"] .lbc-status-badge.res-s-confermata { color: #f0b429; } /* Dettagli riga */ .lbc-details { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; } .lbc-detail-item { display: flex; align-items: center; gap: 3px; font-size: .73rem; color: var(--muted); } /* Chip posti */ .lbc-seats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; } .lbc-seat-chip { font-size: .65rem; font-weight: 700; font-family: monospace; padding: 2px 6px; border-radius: 5px; background: rgba(232,160,32,.2); color: #a06800; border: 1px solid rgba(232,160,32,.4); cursor: pointer; transition: background .15s; } .lbc-seat-chip:hover { background: rgba(232,160,32,.4); } :root[data-theme="dark"] .lbc-seat-chip { color: #f0b429; border-color: rgba(232,160,32,.5); } .lbc-seats-none { font-size: .7rem; color: var(--muted-2); font-style: normal; margin-bottom: 7px; } /* Azioni */ .lbc-actions { display: flex; gap: 6px; justify-content: flex-end; } .lbc-btn { font-size: .7rem; padding: 3px 10px; border-radius: 6px; border: 1px solid; cursor: pointer; font-weight: 600; transition: background .15s, color .15s; } .lbc-btn-danger { border-color: var(--bad); color: var(--bad); background: transparent; } .lbc-btn-danger:hover { background: var(--bad); color: #fff; } /* ── Form nuova prenotazione ── */ .lg-panel-toggle-row { display: flex; align-items: center; justify-content: space-between; } .lg-panel-form-title { font-size: .78rem; font-weight: 700; color: var(--accent); } .lg-form-collapse-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .75rem; } /* Selezione lettino */ .form-sel-seat-label { display: flex; align-items: center; justify-content: space-between; font-size: .73rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; } .btn-sel-seat { font-size: .68rem; padding: 2px 8px; border-radius: 5px; background: rgba(23,179,196,.12); border: 1px solid rgba(23,179,196,.3); color: var(--accent); cursor: pointer; font-weight: 600; transition: background .15s; } .btn-sel-seat:hover { background: rgba(23,179,196,.25); } .sel-seat-display { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; } .sel-chip-x { background: none; border: none; padding: 0 0 0 3px; font-size: .7rem; cursor: pointer; opacity: .7; line-height: 1; } .sel-chip-x:hover { opacity: 1; color: var(--bad); } .sel-seat-clear { font-size: .65rem; color: var(--muted); background: none; border: none; cursor: pointer; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--border); margin-left: 2px; } .sel-seat-clear:hover { color: var(--bad); border-color: var(--bad); } .sel-seat-hint { font-size: .7rem; color: var(--accent); margin: 4px 0; font-style: italic; } /* Periodo */ .form-period-label { display: block; font-size: .73rem; font-weight: 600; color: var(--muted); margin-bottom: 3px; } /* Cursore speciale in modalità selezione mappa */ .map-select-mode { cursor: crosshair !important; } .map-select-mode .seat-libero { outline: 2px dashed var(--accent); outline-offset: 1px; } /* Lettino selezionato per il form (distinto dall'highlight pulsante) */ .seat-selected { outline: 3px solid var(--accent) !important; outline-offset: 1px; box-shadow: 0 0 0 5px rgba(23,179,196,.2); } /* ── Zone (Solarium / Ombrelloni) ── */ .lg-zone { flex-shrink: 0; } .lg-zone-lbl { font-size: .7rem; color: var(--muted); margin-bottom: 3px; padding-left: 22px; user-select: none; } /* ── File orizzontali Solarium ── */ .lg-row { display: flex; align-items: center; gap: 4px; margin-bottom: var(--seat-gap); } .lr-lbl { width: 18px; text-align: center; flex-shrink: 0; font-size: .6rem; font-weight: 800; color: var(--muted-2); } .lr-seats { display: flex; align-items: center; gap: var(--seat-gap); } .lr-seats-grid { display: grid; align-items: center; } /* ── Ombrellone ── */ .umb { font-size: var(--umb-fs); line-height: 1; user-select: none; flex-shrink: 0; } .umb-l { margin-right: 1px; } .umb-r { margin-left: 3px; } /* ── Corridoio ── */ .lg-corridor { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 3px 0; flex-shrink: 0; width: 100%; } .lg-corridor::before, .lg-corridor::after { content: ''; flex: 1; height: 1px; background: var(--border); min-width: 20px; max-width: 60px; } /* ── Layout Zona Ombrelloni ── */ .lg-ombrelloni { display: flex; align-items: flex-start; gap: calc(var(--seat-gap) * 5); } /* Blocco SINISTRO: 4 colonne verticali */ .lg-oml { display: flex; flex-direction: column; gap: var(--seat-gap); flex-shrink: 0; } .oml-row { display: flex; align-items: center; gap: var(--seat-gap); } .col-gap { width: calc(var(--seat-gap) * 3); flex-shrink: 0; } /* Blocco DESTRO: file sfasate in basso */ .lg-omr { display: flex; flex-direction: column; gap: var(--seat-gap); flex-shrink: 0; } /* Spacer = 3 righe del blocco sinistro per allineamento */ .omr-spacer { height: calc(3 * (var(--seat-h) + var(--seat-gap))); flex-shrink: 0; } .omr-isolated { display: flex; gap: var(--seat-gap); justify-content: flex-end; margin-bottom: var(--seat-gap); } .omr-row { display: flex; align-items: center; gap: var(--seat-gap); } /* ── Lettino (bottone) ── */ .seat { display: inline-flex; align-items: center; justify-content: center; width: var(--seat-w); height: var(--seat-h); border-radius: 4px; border: none; font-size: var(--seat-fs); font-weight: 800; letter-spacing: .03em; cursor: pointer; color: #fff; flex-shrink: 0; padding: 0; transition: transform .1s, box-shadow .1s; position: relative; } .seat:hover { transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,0,0,.22); z-index: 10; } .seat:active { transform: scale(1.07); } /* ── 3 stati lettino (rif. 3 nota 13/07/2026): Libero, Riservato, Pagato ── */ .seat-libero { background: var(--good); color: #fff; } .seat-riservato { background: #e8a020; color: #1c0e00; } .seat-pagato { background: var(--accent); color: #fff; } /* Retrocompatibilità con valori residui non più prodotti da nessuna query */ .seat-disponibile { background: var(--good); color: #fff; } .seat-prenotato { background: #e8a020; color: #1c0e00; } .seat-occupato { background: var(--bad); color: #fff; } .seat-manutenzione, .seat-bloccato, .seat-liberato, .seat-nd { background: var(--muted-2); opacity: .45; cursor: default; } .seat-manutenzione:hover, .seat-bloccato:hover, .seat-liberato:hover, .seat-nd:hover { transform: none; box-shadow: none; } /* ── Mappa full-width (senza pannello) ── */ .lg-map-full { border-right: none !important; padding-right: 0 !important; } /* ── Posti: mobile — toolbar affollata va in wrap, legenda diventa una striscia scorrevole ── */ @media (max-width: 860px) { .lg-page { padding: 6px 8px 4px; } .lg-topbar-right { flex-wrap: wrap; row-gap: 6px; } .lg-legend { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; } .lg-legend::-webkit-scrollbar { display: none; } .ll-i { flex-shrink: 0; } .res-sidebar { width: 100%; max-width: 100vw; } .lg-body.sidebar-open { padding-right: 0; } } /* ── Pulsante sidebar topbar ── */ .lg-sidebar-btn { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; position: relative; white-space: nowrap; } .lg-sidebar-btn:hover, .lg-sidebar-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .lg-sidebar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 10px; padding: 0 4px; background: var(--bad); color: #fff; font-size: .62rem; font-weight: 700; } .lg-sidebar-btn.active .lg-sidebar-badge { background: rgba(255,255,255,.3); } /* ── Sidebar prenotazioni ── */ .res-sidebar { position: fixed; top: 60px; right: 0; bottom: 0; width: 400px; max-width: 92vw; z-index: 910; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: -4px 0 24px rgba(0,0,0,.12); } .res-sidebar.open { transform: translateX(0); } .res-sidebar-hdr { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .res-sidebar-title { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .res-sidebar-date { color: var(--text); font-size: .82rem; } .res-sidebar-close { margin-left: auto; background: none; border: none; font-size: 1rem; color: var(--muted); cursor: pointer; padding: 0 2px; transition: color .15s; } .res-sidebar-close:hover { color: var(--bad); } .res-sidebar-body { flex: 1; overflow-y: auto; padding: 10px 12px; } /* Sidebar backdrop */ .sidebar-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.25); animation: fadeIn .2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Barra selezione lettini (overlay bottom) ── */ .seat-select-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 950; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 20px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 -3px 16px rgba(0,0,0,.2); font-size: .82rem; font-weight: 600; } .ssb-hint { flex: 1; } .ssb-count { background: rgba(255,255,255,.25); padding: 2px 10px; border-radius: 12px; font-size: .75rem; white-space: nowrap; } .ssb-btn { padding: 5px 14px; border-radius: 7px; border: none; font-size: .78rem; font-weight: 700; cursor: pointer; transition: opacity .15s; } .ssb-confirm { background: #fff; color: var(--accent); } .ssb-cancel { background: rgba(255,255,255,.2); color: #fff; } .ssb-btn:hover { opacity: .85; } /* ── Booking card edit button ── */ .lbc-btn-edit { border-color: var(--accent); color: var(--accent); background: transparent; } .lbc-btn-edit:hover { background: var(--accent); color: #fff; } /* ── Modal info lettino ── */ .lg-info-card { padding: .7rem .9rem; border-radius: .45rem; margin-top: .6rem; border-left: 3px solid; } .lg-info-occ { background: rgba(232,98,74,.1); border-color: var(--bad); } .lg-info-res { background: rgba(232,160,32,.1); border-color: #e8a020; } /* ============================================================ TOUCH / TABLET OPTIMIZATIONS Applied when primary input is a touch pointer (monitor touch, iPad, Android tablet). Minimum touch target: 44×44 px. ============================================================ */ @media (pointer: coarse) { /* Nav links — bigger tap target */ .topnav a { padding: 10px 14px; font-size: 14px; } /* Posti: la data nav e "Oggi" sono , non