/* ========================================================================== Reception Guest Manager — Tema Ingenious Holding Mobile-First, touch-friendly (target minimi 48px). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); :root { --blu-scuro: #14213d; --blu-medio: #1e3a6e; --blu-accento: #3567a6; --blu-accento-hover: #2a5590; --azzurro-chiaro: #e8eef8; --grigio-bg: #f4f6fb; --grigio-bordo: #e2e8f0; --grigio-testo: #64748b; --testo: #1e293b; --bianco: #ffffff; --verde: #16a34a; --rosso: #dc2626; --ombra: 0 4px 20px rgba(20, 33, 61, 0.08); --ombra-forte: 0 10px 40px rgba(20, 33, 61, 0.18); --raggio: 14px; /* Colore per titoli/testo in enfasi (storicamente coincidente con --blu-scuro in chiaro, ma --blu-scuro resta scuro anche in dark mode perché usato pure come sfondo di barre/header): va tenuto separato per poter schiarire solo il testo, non gli sfondi, in dark mode. */ --testo-forte: var(--blu-scuro); } /* ========================================================================== DARK MODE Attivato via attributo data-theme="dark" su (impostato da public/js/api.js, persistito in localStorage "reception_theme"), oppure automaticamente se il sistema operativo preferisce lo scuro e l'utente non ha ancora scelto esplicitamente un tema. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blu-medio: #9db9e8; --blu-accento: #5b93cf; --blu-accento-hover: #6fa3da; --azzurro-chiaro: #1b2942; --grigio-bg: #0c1220; --grigio-bordo: #2a3550; --grigio-testo: #98a7c2; --testo: #e6ebf3; --bianco: #141b2c; --verde: #34d399; --rosso: #f87171; --ombra: 0 4px 20px rgba(0, 0, 0, 0.5); --ombra-forte: 0 12px 40px rgba(0, 0, 0, 0.6); --testo-forte: #cfe0f7; } } :root[data-theme="dark"] { --blu-medio: #9db9e8; --blu-accento: #5b93cf; --blu-accento-hover: #6fa3da; --azzurro-chiaro: #1b2942; --grigio-bg: #0c1220; --grigio-bordo: #2a3550; --grigio-testo: #98a7c2; --testo: #e6ebf3; --bianco: #141b2c; --verde: #34d399; --rosso: #f87171; --ombra: 0 4px 20px rgba(0, 0, 0, 0.5); --ombra-forte: 0 12px 40px rgba(0, 0, 0, 0.6); --testo-forte: #cfe0f7; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--testo); background: var(--grigio-bg); -webkit-text-size-adjust: 100%; } /* --- Elementi touch-friendly ------------------------------------------- */ .btn, .form-control, .form-select, .nav-link, input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 48px; } .btn { font-weight: 600; border-radius: 10px; } .btn-lg { min-height: 54px; font-size: 1.05rem; } .form-select-sm, .form-control-sm, .btn-sm { min-height: 38px; } /* --- Checkbox e switch (dimensioni coerenti, layout orizzontale) -------- */ .form-check { display: flex; align-items: center; gap: 8px; padding-left: 0; min-height: 0; margin-bottom: 0; } .form-check + .form-check { margin-top: 8px; } .form-check .form-check-input { float: none; margin: 0; flex-shrink: 0; } .form-check .form-check-label { margin-bottom: 0; cursor: pointer; } .form-check-input[type="checkbox"], .form-check-input[type="radio"] { width: 1.15em; height: 1.15em; cursor: pointer; } .form-check-input:checked { background-color: var(--blu-accento); border-color: var(--blu-accento); } .form-check-input:focus { border-color: var(--blu-accento); box-shadow: 0 0 0 0.2rem rgba(53, 103, 166, 0.2); } .form-switch .form-check-input { width: 2.3em; height: 1.2em; } .col-check { width: 36px; text-align: center; } .btn-primary { background: var(--blu-accento); border-color: var(--blu-accento); } .btn-primary:hover, .btn-primary:focus { background: var(--blu-accento-hover); border-color: var(--blu-accento-hover); } .btn-dark { background: var(--blu-scuro); border-color: var(--blu-scuro); } .btn-outline-primary { color: var(--blu-accento); border-color: var(--blu-accento); } .btn-outline-primary:hover { background: var(--blu-accento); border-color: var(--blu-accento); } .text-blu { color: var(--testo-forte) !important; } .bg-blu { background: var(--blu-scuro) !important; } /* ====================================================================== PAGINE DI AUTENTICAZIONE (login / reset) ====================================================================== */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: linear-gradient(135deg, var(--blu-scuro) 0%, var(--blu-medio) 100%); } .auth-card { width: 100%; max-width: 420px; background: var(--bianco); border-radius: 20px; box-shadow: var(--ombra-forte); padding: 36px 30px; } .auth-logo { text-align: center; margin-bottom: 8px; } .auth-logo .logo-badge { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: var(--blu-scuro); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; } .auth-logo .login-logo { display: block; max-width: 260px; height: auto; margin: 0 auto 20px; } .auth-card h1 { font-size: 1.4rem; text-align: center; color: var(--testo-forte); margin: 0 0 4px; } .auth-card .subtitle { text-align: center; color: var(--grigio-testo); font-size: 0.92rem; margin-bottom: 26px; } .auth-card label { font-weight: 600; color: var(--blu-medio); } .auth-card .form-control { border-radius: 10px; } .auth-link { display: block; text-align: center; margin-top: 18px; color: var(--blu-accento); text-decoration: none; font-weight: 600; } .auth-link:hover { text-decoration: underline; } /* ====================================================================== LAYOUT APPLICAZIONE ====================================================================== */ .app-header { position: sticky; top: 0; z-index: 1030; background: var(--blu-scuro); color: #fff; box-shadow: var(--ombra); } .app-header .container-fluid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; /* a larghezze tablet i controlli vanno a capo invece di uscire dal bordo */ gap: 8px 12px; min-height: 64px; padding: 8px 16px; } .app-header .brand { min-width: 0; } /* consente al brand di comprimersi */ .app-header .brand span:not(.dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-header .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; } .app-header .brand .dot { width: 34px; height: 34px; border-radius: 9px; background: var(--blu-accento); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1rem; } .app-header .brand .dot .brand-logo { width: 100%; height: 100%; object-fit: contain; } .user-chip { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; } .user-chip .user-meta { text-align: right; line-height: 1.2; } .user-chip .user-meta strong { display: block; } .user-chip .user-meta span { color: #a8bcda; font-size: 0.8rem; } /* --- Toggle tema chiaro/scuro (header) ---------------------------------- */ .theme-switch { display: flex; align-items: center; gap: 6px; color: #cfe0f7; } .theme-switch i { font-size: 0.95rem; opacity: 0.4; transition: opacity 0.15s; } .theme-switch .bi-sun-fill { opacity: 1; } .theme-switch.is-dark .bi-sun-fill { opacity: 0.4; } .theme-switch.is-dark .bi-moon-stars-fill { opacity: 1; } .theme-switch .form-check { margin: 0 2px; } .theme-switch .form-check-input { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); } .theme-switch .form-check-input:checked { background-color: var(--blu-accento); border-color: var(--blu-accento); } .theme-switch .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); } /* Sui pannelli di autenticazione (senza header) il toggle è un pulsante fisso */ .theme-switch.theme-switch-floating { position: fixed; top: 16px; right: 16px; z-index: 1050; background: rgba(20, 33, 61, 0.55); backdrop-filter: blur(4px); padding: 6px 10px; border-radius: 999px; color: #fff; } .page { padding: 18px 16px 96px; max-width: min(1800px, 96vw); margin: 0 auto; } .page-title { font-size: 1.35rem; color: var(--testo-forte); font-weight: 600; letter-spacing: -0.01em; margin: 6px 0 18px; } /* --- Barra strumenti / filtri ----------------------------------------- */ .toolbar { background: var(--bianco); border: 1px solid var(--grigio-bordo); border-radius: var(--raggio); padding: 14px; box-shadow: var(--ombra); margin-bottom: 18px; } .bg-blu-soft { background: var(--azzurro-chiaro); border-color: var(--blu-accento); } .search-box { position: relative; } .search-box .form-control { padding-left: 42px; } .search-box .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--grigio-testo); } /* --- Tabs ------------------------------------------------------------- */ .tab-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .tab-bar button { border: 1px solid var(--grigio-bordo); background: var(--bianco); color: var(--blu-medio); border-radius: 999px; padding: 10px 18px; font-weight: 600; min-height: 44px; cursor: pointer; } .tab-bar button.active { background: var(--blu-scuro); color: #fff; border-color: var(--blu-scuro); } /* Link di navigazione verso il modulo timbrature, stile tab con accento */ .tab-bar .btn-tab-link { display: inline-flex; align-items: center; border: 1px solid var(--blu-accento); background: var(--azzurro-chiaro); color: var(--blu-accento); border-radius: 999px; padding: 10px 18px; font-weight: 600; min-height: 44px; text-decoration: none; } .tab-bar .btn-tab-link:hover { background: var(--blu-accento); color: #fff; } /* --- Module switch (navigazione di livello modulo: Presenti/Sale/Auto) - */ .module-switch { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .module-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--raggio); border: 1px solid var(--grigio-bordo); background: var(--bianco); color: var(--blu-medio); font-weight: 700; text-decoration: none; min-height: 48px; box-shadow: var(--ombra); transition: background .15s, color .15s, border-color .15s; } .module-switch a i { font-size: 1.15rem; } .module-switch a:hover { background: var(--azzurro-chiaro); } .module-switch a.active { background: var(--blu-scuro); border-color: var(--blu-scuro); color: #fff; } /* --- Hub (home post-login: scelta del modulo) ------------------------- */ .hub-welcome { margin-bottom: 22px; } .hub-welcome h1 { color: var(--testo-forte); font-weight: 700; margin: 0 0 4px; font-size: 1.6rem; } .hub-welcome p { color: var(--grigio-testo); margin: 0; } .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px; min-height: 168px; background: var(--bianco); border: 1px solid var(--grigio-bordo); border-radius: var(--raggio); box-shadow: var(--ombra); text-decoration: none; color: var(--testo); transition: transform .15s, box-shadow .15s, border-color .15s; } .hub-card:hover { transform: translateY(-3px); box-shadow: var(--ombra-forte); border-color: var(--blu-accento); } .hub-card .hub-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--azzurro-chiaro); color: var(--blu-accento); font-size: 1.7rem; } .hub-card h2 { font-size: 1.15rem; font-weight: 700; color: var(--testo-forte); margin: 0; } .hub-card p { font-size: .9rem; color: var(--grigio-testo); margin: 0; } .hub-card.admin .hub-icon { background: #fdecec; color: var(--rosso); } /* --- Tabella ospiti --------------------------------------------------- */ .data-card { background: var(--bianco); border: 1px solid var(--grigio-bordo); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; } .table { margin: 0; } .table thead th { background: var(--azzurro-chiaro); color: var(--testo-forte); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid var(--grigio-bordo); white-space: nowrap; padding: 10px 14px; position: relative; overflow: hidden; text-overflow: ellipsis; } /* --- Colonne ridimensionabili (admin.js: initColumnResize) ------------- */ .table.table-resizable { table-layout: fixed; } .col-resizer { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; margin-right: -4px; cursor: col-resize; user-select: none; touch-action: none; z-index: 2; } .col-resizer:hover, .col-resizer.is-resizing { background: rgba(53, 103, 166, 0.35); } .table tbody td { vertical-align: middle; padding: 9px 14px; font-size: 0.92rem; } .badge-doc { background: var(--azzurro-chiaro); color: var(--blu-medio); font-weight: 600; border-radius: 8px; padding: 5px 10px; font-size: 0.78rem; } .row-actions { display: flex; gap: 6px; flex-wrap: nowrap; } .row-actions .btn { min-height: 40px; padding: 6px 10px; } /* ---- Colonne ordinabili ------------------------------------------------ */ th[data-sort] { cursor: pointer; user-select: none; } th[data-sort]::after { content: ' \2195'; opacity: 0.3; font-size: 0.75em; } th[data-sort][data-sort-active="asc"]::after { content: ' \2191'; opacity: 0.9; color: var(--blu-accento); } th[data-sort][data-sort-active="desc"]::after { content: ' \2193'; opacity: 0.9; color: var(--blu-accento); } /* ---- Bottone "Esci" nella colonna azioni presenze (più compatto) ------- */ #presenzeTableBody .btn-sm { min-height: 32px; padding: 3px 10px; font-size: 0.85rem; } /* --- Vista a CARD su mobile (la tabella si nasconde) ------------------ */ .cards-view { display: none; } .guest-card { background: var(--bianco); border: 1px solid var(--grigio-bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 16px; margin-bottom: 12px; } .guest-card h3 { font-size: 1.05rem; margin: 0 0 4px; color: var(--testo-forte); } .guest-card .meta { font-size: 0.85rem; color: var(--grigio-testo); margin-bottom: 4px; } .guest-card .meta b { color: var(--testo); font-weight: 600; } .guest-card .card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .guest-card .card-actions .btn { flex: 1 1 auto; } /* --- Pulsante flottante "Nuova registrazione" ------------------------- */ .fab { position: fixed; right: 18px; bottom: 18px; z-index: 1040; height: 60px; padding: 0 24px; border-radius: 999px; background: var(--blu-accento); color: #fff; border: none; font-weight: 700; font-size: 1rem; box-shadow: var(--ombra-forte); display: flex; align-items: center; gap: 10px; cursor: pointer; } .fab:hover { background: var(--blu-accento-hover); } /* --- Stato vuoto ------------------------------------------------------ */ .empty-state { text-align: center; padding: 48px 20px; color: var(--grigio-testo); } .empty-state .big-icon { font-size: 48px; opacity: 0.4; } /* ====================================================================== FORM DI REGISTRAZIONE ====================================================================== */ .form-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blu-accento); font-weight: 600; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--grigio-bordo); } .form-label { font-weight: 600; color: var(--blu-medio); margin-bottom: 4px; } .required::after { content: " *"; color: var(--rosso); } .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .photo-slot { border: 2px dashed var(--grigio-bordo); border-radius: 12px; background: var(--grigio-bg); min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; cursor: pointer; position: relative; overflow: hidden; } .photo-slot.filled { border-style: solid; border-color: var(--verde); } .photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .photo-slot .ph-label { color: var(--grigio-testo); font-weight: 600; font-size: 0.85rem; } .photo-slot .ph-icon { font-size: 28px; color: var(--blu-accento); margin-bottom: 6px; } .photo-slot .ph-check { position: absolute; top: 6px; right: 6px; background: var(--verde); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: none; align-items: center; justify-content: center; font-size: 14px; z-index: 2; } .photo-slot.filled .ph-check { display: flex; } /* L'input file resta nel tab order (raggiungibile e attivabile da tastiera): visivamente nascosto ma non 'display:none'. Il click sul label apre comunque la fotocamera; :focus-within mostra un anello di focus visibile. */ .photo-slot input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .photo-slot:focus-within { outline: 2px solid var(--blu-accento); outline-offset: 2px; } /* --- Area firma (Canvas) --------------------------------------------- */ .signature-area { border: 2px solid var(--grigio-bordo); border-radius: 12px; background: var(--bianco); touch-action: none; width: 100%; display: block; } .signature-hint { text-align: center; color: var(--grigio-testo); font-size: 0.85rem; margin-top: 8px; } .signature-preview { border: 1px solid var(--grigio-bordo); border-radius: 10px; padding: 8px; background: #fff; max-width: 220px; } .signature-preview img { max-width: 100%; } /* --- Autocomplete ----------------------------------------------------- */ .autocomplete-wrap { position: relative; } .autocomplete-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--bianco); border: 1px solid var(--grigio-bordo); border-radius: 10px; box-shadow: var(--ombra); z-index: 1055; max-height: 220px; overflow-y: auto; display: none; } .autocomplete-list.show { display: block; } .autocomplete-list .item { padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--grigio-bordo); } .autocomplete-list .item:last-child { border-bottom: none; } .autocomplete-list .item:hover, .autocomplete-list .item.active { background: var(--azzurro-chiaro); } /* Evita che la tendina di autocompletamento (posizionata in assoluto) venga ritagliata dal body del modale con scroll interno. */ .modal-body:has(.autocomplete-list) { overflow: visible; } /* Target di tocco più ampi SOLO su dispositivi touch (tablet/smartphone), senza appesantire le tabelle su desktop (puntatore fine). */ @media (pointer: coarse) { .row-actions .btn, .card-actions .btn, td .btn-sm, th .btn-sm { min-height: 44px; min-width: 44px; } input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; } } /* --- Toast ------------------------------------------------------------ */ .toast-container { position: fixed; top: 80px; right: 16px; z-index: 1080; } /* --- Modale ----------------------------------------------------------- */ .modal-header { background: var(--blu-scuro); color: #fff; } .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .modal-content { border-radius: 16px; overflow: hidden; } /* --- Galleria allegati nel dettaglio ---------------------------------- */ .attachment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .attachment-grid figure { margin: 0; } .attachment-grid img { width: 100%; border-radius: 10px; border: 1px solid var(--grigio-bordo); } .attachment-grid figcaption { font-size: 0.78rem; color: var(--grigio-testo); text-align: center; margin-top: 4px; } /* --- Tabella admin ---------------------------------------------------- */ .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; } .pill-admin { background: #ede9fe; color: #6d28d9; } .pill-basic { background: var(--azzurro-chiaro); color: var(--blu-medio); } .pill-on { background: #dcfce7; color: #15803d; } .pill-off { background: #fee2e2; color: #b91c1c; } .pill-warn { background: #ffedd5; color: #9a3412; } /* ====================================================================== MODULO TIMBRATURE (Registrazione Ingressi/Uscite) ====================================================================== */ .disclaimer { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: var(--raggio); padding: 14px 16px; margin-bottom: 18px; display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.4; } .disclaimer .ic, .disclaimer > i { font-size: 1.3rem; line-height: 1; flex-shrink: 0; } .timbra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; } .btn-timbra { border: none; border-radius: var(--raggio); color: #fff; font-weight: 700; font-size: 1.25rem; min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: var(--ombra); transition: transform 0.05s ease, filter 0.15s ease; } .btn-timbra .ic, .btn-timbra > i { font-size: 2.4rem; } .btn-timbra:hover { filter: brightness(1.05); } .btn-timbra:active { transform: scale(0.98); } .btn-timbra:disabled { opacity: 0.6; cursor: default; } .btn-timbra.ingresso { background: var(--verde); } .btn-timbra.uscita { background: var(--blu-scuro); } .timbra-list .voce { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--grigio-bordo); } .timbra-list .voce:last-child { border-bottom: none; } .timbra-list .voce .tipo-badge { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: 0 0 auto; } .timbra-list .voce.ingresso .tipo-badge { background: #dcfce7; } .timbra-list .voce.uscita .tipo-badge { background: var(--azzurro-chiaro); } .timbra-list .voce .tipo-badge i { font-size: 1.2rem; } .timbra-list .voce .info { flex: 1 1 auto; } .timbra-list .voce .info .quando { font-weight: 700; color: var(--testo-forte); } .timbra-list .voce .info .dove { font-size: 0.84rem; color: var(--grigio-testo); } .timbra-list .voce .stato { font-size: 0.78rem; } /* ====================================================================== DASHBOARD SALE RIUNIONI ====================================================================== */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } /* --- Tiles riepilogo --- */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; } .stat-tile { display: flex; align-items: center; gap: 14px; background: var(--bianco); border: 1px solid var(--grigio-bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 16px 18px; } .stat-ico { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.4rem; } .stat-ico-blu { background: var(--azzurro-chiaro); color: var(--blu-accento); } .stat-ico-verde { background: #dcfce7; color: #15803d; } .stat-ico-rosso { background: #fee2e2; color: #b91c1c; } .stat-ico-arancio { background: #ffedd5; color: #9a3412; } .stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--testo-forte); } .stat-lbl { font-size: 0.82rem; color: var(--grigio-testo); margin-top: 3px; } /* --- Navigazione data --- */ .date-nav { display: flex; align-items: center; gap: 6px; } .date-nav .form-control { max-width: 160px; } /* --- Titoli di sezione --- */ .section-title { font-size: 1.05rem; font-weight: 700; color: var(--testo-forte); margin: 6px 0 12px; display: flex; align-items: center; gap: 8px; } .count-badge { background: #ffedd5; color: #9a3412; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; min-width: 26px; text-align: center; } /* --- Layout a due colonne --- */ .sale-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: start; } /* --- Griglia disponibilità sale --- */ .stato-sale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .sala-chip { background: var(--bianco); border: 1px solid var(--grigio-bordo); border-left-width: 4px; border-radius: 12px; box-shadow: var(--ombra); padding: 12px 14px; } .sala-chip.libera { border-left-color: var(--verde); } .sala-chip.occupata { border-left-color: var(--rosso); } .sala-chip-head { display: flex; align-items: center; gap: 8px; color: var(--testo-forte); } .sala-chip-head strong { font-size: 0.95rem; } .dot-stato { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .sala-chip.libera .dot-stato { background: var(--verde); box-shadow: 0 0 0 3px #dcfce7; } .sala-chip.occupata .dot-stato { background: var(--rosso); box-shadow: 0 0 0 3px #fee2e2; } .sala-chip-sede { font-size: 0.78rem; color: var(--grigio-testo); margin: 4px 0 6px; } .sala-chip-stato { font-size: 0.82rem; font-weight: 600; color: var(--testo); } /* --- Richieste in attesa --- */ .richieste-list { display: flex; flex-direction: column; gap: 10px; } .richiesta-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--bianco); border: 1px solid var(--grigio-bordo); border-left: 4px solid #f59e0b; border-radius: 12px; box-shadow: var(--ombra); padding: 14px 16px; } .richiesta-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--testo-forte); } .richiesta-orario { font-size: 0.86rem; color: var(--grigio-testo); margin: 4px 0; } .richiesta-titolo { font-weight: 600; } .richiesta-meta { font-size: 0.82rem; color: var(--grigio-testo); margin-top: 2px; } .richiesta-azioni { display: flex; gap: 8px; flex-shrink: 0; } .badge-sede { background: var(--azzurro-chiaro); color: var(--blu-medio); font-size: 0.74rem; font-weight: 600; border-radius: 8px; padding: 3px 9px; } /* --- Elenco prenotazioni del giorno --- */ .pren-item { display: flex; align-items: center; gap: 14px; background: var(--bianco); border: 1px solid var(--grigio-bordo); border-radius: 12px; box-shadow: var(--ombra); padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: box-shadow .15s, border-color .15s; } .pren-item:hover, .pren-item:focus-visible { border-color: var(--blu-accento); box-shadow: var(--ombra-forte); outline: none; } .pren-orario { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding-right: 12px; border-right: 2px solid var(--grigio-bordo); } .pren-orario strong { color: var(--testo-forte); font-size: 1rem; } .pren-orario span { font-size: 0.8rem; color: var(--grigio-testo); } .pren-body { flex: 1 1 auto; min-width: 0; } .pren-titolo { font-weight: 600; } .pren-meta { font-size: 0.82rem; color: var(--grigio-testo); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 3px; } /* --- Chip riepilogo su card richiesta --- */ .richiesta-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; } .mini-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--azzurro-chiaro); color: var(--blu-medio); font-size: 0.76rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; } /* --- Modale dettaglio richiesta --- */ .dett-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--grigio-bordo); } .dett-row span { color: var(--grigio-testo); font-size: 0.85rem; } .dett-row strong { text-align: right; } .dett-list { margin: 4px 0 0; padding-left: 18px; } .dett-list li { margin-bottom: 2px; } /* ====================================================================== RICHIESTA SALA (utente semplice) ====================================================================== */ .azione-card { display: flex; align-items: center; gap: 14px; background: var(--bianco); border: 1px solid var(--grigio-bordo); border-left: 4px solid var(--blu-accento); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 16px 18px; margin: 14px 0 20px; text-decoration: none; color: var(--testo); transition: transform .15s, box-shadow .15s; } .azione-card:hover { transform: translateY(-2px); box-shadow: var(--ombra-forte); color: var(--testo); } .azione-ico { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--azzurro-chiaro); color: var(--blu-accento); font-size: 1.4rem; } .azione-testo { display: flex; flex-direction: column; flex: 1 1 auto; } .azione-testo strong { color: var(--testo-forte); } .azione-testo span { font-size: 0.84rem; color: var(--grigio-testo); } .azione-arrow { color: var(--grigio-testo); font-size: 1.2rem; } .richiesta-form .form-section-title { font-weight: 700; color: var(--testo-forte); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .sede-lock { display: inline-flex; align-items: center; gap: 8px; background: var(--azzurro-chiaro); color: var(--blu-medio); font-weight: 600; border-radius: 10px; padding: 10px 14px; min-height: 48px; } .checklist { max-height: 220px; overflow-y: auto; border: 1px solid var(--grigio-bordo); border-radius: 10px; background: var(--bianco); } .check-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--grigio-bordo); cursor: pointer; margin: 0; font-size: 0.92rem; } .check-item:last-child { border-bottom: none; } .check-item:hover { background: var(--azzurro-chiaro); } .check-item input { width: 18px; height: 18px; min-height: 0; flex-shrink: 0; } .totale-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.05rem; color: var(--testo-forte); } .totale-box .bi { color: var(--blu-accento); } /* --- Box preventivo (sala + servizi) --- */ .preventivo-box { background: var(--azzurro-chiaro); border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; } .prev-titolo { font-weight: 700; color: var(--testo-forte); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .prev-riga { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; } .prev-riga.prev-totale { margin-top: 6px; padding-top: 8px; border-top: 2px solid var(--blu-accento); font-weight: 700; font-size: 1rem; color: var(--testo-forte); } /* --- Documenti preventivo nel dettaglio richiesta --- */ .prev-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--grigio-bordo); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .prev-doc-info strong { color: var(--testo-forte); } .prev-doc-azioni { display: flex; gap: 6px; flex-shrink: 0; } /* --- Ospiti attesi (invitati) nel modale Nuova prenotazione --- */ .invitati-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; } .invitato-row { display: flex; gap: 6px; align-items: center; } .invitato-row .form-control { min-height: 38px; } .invitato-row input[data-f="nome"], .invitato-row input[data-f="cognome"] { flex: 1 1 0; min-width: 0; } .invitato-row input[data-f="azienda"] { flex: 1.4 1 0; min-width: 0; } /* --- Badge stato invitato nel dettaglio prenotazione --- */ .invitato-badge { font-size: 0.76rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; } .invitato-badge.atteso { background: #ffedd5; color: #9a3412; } .invitato-badge.presente { background: #dcfce7; color: #15803d; } .dett-list-invitati li { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; padding: 4px 0; } .dett-list-invitati { padding-left: 0; margin: 4px 0 0; } /* --- Selezione ospite atteso al check-in (dashboard.js) --- */ .attesi-list { display: flex; flex-direction: column; gap: 8px; } .atteso-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--bianco); border: 1px solid var(--grigio-bordo); border-radius: 10px; padding: 10px 14px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; } .atteso-chip:hover { border-color: var(--blu-accento); background: var(--azzurro-chiaro); } .atteso-chip strong { color: var(--testo-forte); } .atteso-chip span { font-size: 0.82rem; color: var(--grigio-testo); } /* --- Selezione servizi accessori dal listino --- */ .servizio-item { border-bottom: 1px solid var(--grigio-bordo); padding: 8px 12px; } .servizio-item:last-child { border-bottom: none; } .servizio-item.attivo { background: var(--azzurro-chiaro); } .servizio-check { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-size: 0.92rem; } .servizio-check input { width: 18px; height: 18px; min-height: 0; flex-shrink: 0; } .servizio-qta { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px 28px; } .servizio-qta .form-control { max-width: 100px; min-height: 38px; } .servizio-unita { font-size: 0.82rem; color: var(--grigio-testo); } .servizio-riga { font-size: 0.85rem; font-weight: 600; color: var(--testo-forte); margin-left: auto; } .totale-servizi { display: flex; align-items: center; gap: 8px; background: #dcfce7; color: #15803d; border-radius: 10px; padding: 10px 14px; font-size: 0.95rem; } .sala-hint { font-size: 0.88rem; padding: 8px 12px; border-radius: 10px; } .sala-hint.ok { background: #dcfce7; color: #15803d; } .sala-hint.warn { background: #fff4e5; color: #9a3412; } /* ====================================================================== RESPONSIVE ====================================================================== */ @media (max-width: 900px) { .sale-layout { grid-template-columns: 1fr; } } @media (max-width: 768px) { .table-view { display: none; } .cards-view { display: block; } .photo-grid { grid-template-columns: 1fr; } .user-chip .user-meta { display: none; } .page-title { font-size: 1.2rem; } .richiesta-card { flex-direction: column; align-items: stretch; } .richiesta-azioni { justify-content: stretch; } .richiesta-azioni .btn { flex: 1 1 auto; } } @media print { /* Forza SEMPRE il tema chiaro in stampa: con il tema scuro attivo le variabili produrrebbero testo chiaro su sfondo scuro -> registro presenze illeggibile e spreco di toner. Qui neutralizziamo le variabili a valori chiari. */ :root, :root[data-theme="dark"], :root:not([data-theme="light"]) { --grigio-bg: #ffffff; --grigio-bordo: #cccccc; --grigio-testo: #333333; --azzurro-chiaro: #ffffff; --testo: #000000; --testo-forte: #000000; --bianco: #ffffff; --blu-scuro: #000000; } html, body { background: #ffffff !important; color: #000000 !important; } .card, table, .guest-card, .page, main { background: #ffffff !important; color: #000000 !important; box-shadow: none !important; } .app-header, .toolbar, .fab, .tab-bar, .row-actions, .card-actions, .no-print, .btn { display: none !important; } .page { padding: 0; } }