/* ============================================================ KDS.CSS — Sereni a Tavola Kitchen Display System Design system copiato da mobile-sereni/public/css/mobile.css ============================================================ */ /* ---- Google Fonts ---- */ /* Google Fonts caricati nel con preconnect (vedi views/*.ejs) — l'@import qui creava una catena seriale HTML -> kds.css -> fonts = FOUC. Vedi mobile-sereni. */ /* ---- CSS Variables (identiche a mobile-sereni) ---- */ :root { --primary: #E67E22; --primary-light: #F39C12; --primary-dark: #D35400; --secondary: #27AE60; --secondary-dark: #219a52; --blue: #4A90D9; --blue-dark: #2980B9; --red: #E74C3C; --red-dark: #C0392B; --purple: #9B59B6; --purple-dark: #7D3C98; --yellow: #F1C40F; --yellow-dark: #D4AC0D; --teal: #1ABC9C; --teal-dark: #17A589; --bg: #F8F9FA; --bg-white: #FFFFFF; --text-dark: #2C3E50; --text-secondary: #7F8C8D; --text-muted: #95A5A6; --border: rgba(0, 0, 0, 0.08); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --radius: 16px; --radius-sm: 12px; --bottom-nav-height: 72px; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Space Grotesk', sans-serif; --transition: 0.2s ease-out; } /* ---- Reset ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; overscroll-behavior: none; } body { font-family: var(--font-main); font-size: 18px; line-height: 1.5; background: var(--bg); color: var(--text-dark); height: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none; } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; background: none; font-family: var(--font-main); } input, textarea, select { font-family: var(--font-main); font-size: 1rem; } img { max-width: 100%; } /* ---- Layout base ---- */ .app-container { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: calc(var(--bottom-nav-height) + 16px); } .section { padding: 0 20px; } .section-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } /* ---- Top Bar (mobile-sereni pattern) ---- */ .top-bar { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 20px; background: var(--bg-white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; min-height: 60px; text-align: left; } .top-bar-left { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; gap: 1px; flex: 1; text-align: left; } .top-bar-greeting { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-dark); } .top-bar-sub { font-size: 0.8rem; color: var(--text-secondary); } .top-bar-right { display: flex; align-items: center; gap: 8px; } /* ---- Icon Button ---- */ .icon-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); color: var(--text-dark); font-size: 1rem; transition: var(--transition); } .icon-btn:active { transform: scale(0.92); } /* ---- Card (mobile-sereni pattern) ---- */ .card { background: var(--bg-white); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; } .card-body { padding: 16px; } /* ---- Section ---- */ .section { padding: 0 20px; } .section + .section { margin-top: 20px; } /* ---- Action Grid (mobile-sereni pattern — esatto) ---- */ .action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 20px; } .action-card { border-radius: 20px; min-height: 130px; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); -webkit-user-select: none; user-select: none; border: none; text-decoration: none; } /* Glossy overlay */ .action-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 100%); border-radius: 20px 20px 0 0; pointer-events: none; } .action-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--card-shadow-color, #000), 0 4px 8px rgba(0,0,0,0.2) !important; } .card-orange { background: linear-gradient(145deg, var(--primary-light), var(--primary)); box-shadow: 0 6px 0 var(--primary-dark), 0 8px 20px rgba(230,126,34,0.35); --card-shadow-color: var(--primary-dark); } .card-green { background: linear-gradient(145deg, #2ECC71, var(--secondary)); box-shadow: 0 6px 0 var(--secondary-dark), 0 8px 20px rgba(39,174,96,0.35); --card-shadow-color: var(--secondary-dark); } .card-blue { background: linear-gradient(145deg, #5BA4F5, var(--blue)); box-shadow: 0 6px 0 var(--blue-dark), 0 8px 20px rgba(59,130,246,0.35); --card-shadow-color: var(--blue-dark); } .card-red { background: linear-gradient(145deg, #F1948A, var(--red)); box-shadow: 0 6px 0 var(--red-dark), 0 8px 20px rgba(231,76,60,0.35); --card-shadow-color: var(--red-dark); } .card-purple { background: linear-gradient(145deg, #C39BD3, var(--purple)); box-shadow: 0 6px 0 var(--purple-dark), 0 8px 20px rgba(155,89,182,0.35); --card-shadow-color: var(--purple-dark); } .action-card-icon { width: 56px; height: 56px; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; } .action-card-label { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: white; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.2); } /* ---- Bottom Nav (identico a mobile-sereni) ---- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-height); background: var(--bg-white); border-top: 1px solid var(--border); display: flex; align-items: stretch; z-index: 200; padding-bottom: env(safe-area-inset-bottom, 0); } .nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-muted); font-size: 0.65rem; font-weight: 600; padding: 8px 4px; transition: color var(--transition); text-decoration: none; } .nav-tab i { font-size: 1.2rem; } .nav-tab.active { color: var(--primary); } .nav-tab.active i { color: var(--primary); } .nav-tab-label { font-size: 0.65rem; } /* ---- Modal (mobile-sereni pattern) ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .modal-overlay.active { opacity: 1; pointer-events: all; } .modal-card { background: var(--bg-white); border-radius: 20px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(20px); transition: transform 0.3s ease-out; } .modal-overlay.active .modal-card { transform: translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px; border-bottom: 1px solid var(--border); } .modal-header h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; } .modal-body { padding: 20px; } /* ---- Toast Popup (mobile-sereni pattern) ---- */ .kds-toast { position: fixed; bottom: calc(var(--bottom-nav-height) + 16px); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text-dark); color: white; padding: 12px 20px; border-radius: 24px; font-size: 0.9rem; font-weight: 500; z-index: 400; opacity: 0; transition: opacity 0.3s, transform 0.3s; display: flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: var(--shadow-md); } .kds-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .kds-toast.toast-success { background: var(--secondary); } .kds-toast.toast-error { background: var(--red); } /* ---- Alert ---- */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; } .alert-error { background: rgba(231,76,60,0.1); border: 1px solid rgba(231,76,60,0.25); color: var(--red); } .alert-success { background: rgba(39,174,96,0.1); border: 1px solid rgba(39,174,96,0.25); color: var(--secondary); } /* ---- Connection Indicator ---- */ .connection-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--secondary); display: inline-block; animation: pulse-dot 2s infinite; } .connection-dot.offline { background: var(--red); animation: none; } .connection-dot.polling { background: var(--yellow); } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ==================================================== LOGIN PAGE (dark theme) ==================================================== */ .login-page { min-height: 100vh; background: #0D1117; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; position: relative; } .login-page::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(230,126,34,0.12) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .login-card { background: #161B22; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .login-header { padding: 24px 24px 16px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08); } .login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } .login-logo-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary), #F39C12); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .login-logo-text { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: white; } .login-subtitle { color: #8B949E; font-size: 0.85rem; margin-top: 4px; } /* Staff Code Field */ .staff-code-field { padding: 0 24px 4px; } .staff-code-label { display: block; font-size: 0.75rem; color: #8B949E; margin-bottom: 6px; letter-spacing: 0.05em; text-transform: uppercase; } .staff-code-input-wrap { position: relative; display: flex; align-items: center; } .staff-code-input-wrap input { width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 12px 40px 12px 14px; color: white; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.05em; outline: none; transition: border-color 0.2s; } .staff-code-input-wrap input::placeholder { color: rgba(255,255,255,0.25); font-weight: 400; letter-spacing: 0; } .staff-code-input-wrap input:focus { border-color: var(--primary); } .staff-code-clear { position: absolute; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; color: rgba(255,255,255,0.6); font-size: 0.75rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .pin-label { padding: 12px 24px 0; font-size: 0.75rem; color: #8B949E; letter-spacing: 0.05em; text-transform: uppercase; } /* PIN Display */ .pin-display { display: flex; justify-content: center; gap: 10px; padding: 24px 0 8px; } .pin-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: transparent; transition: all 0.15s ease-out; } .pin-dot.filled { background: var(--primary); border-color: var(--primary); transform: scale(1.2); } .pin-dot.error { background: var(--red); border-color: var(--red); } .pin-dot.success { background: var(--secondary); border-color: var(--secondary); } /* Keypad */ .keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 24px; } .keypad-btn { height: 72px; border-radius: 16px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: white; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 3px 0 rgba(0,0,0,0.4); transition: transform 0.1s, box-shadow 0.1s; display: flex; align-items: center; justify-content: center; } .keypad-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,0.4); } .keypad-btn.key-cancel { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.2); font-size: 0.75rem; } .keypad-btn.key-backspace { background: rgba(230,126,34,0.15); border-color: rgba(230,126,34,0.2); font-size: 1.2rem; } .keypad-btn.key-zero { } .btn-login { width: calc(100% - 48px); margin: 0 24px 24px; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; font-family: var(--font-display); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 0 var(--primary-dark), 0 6px 16px rgba(230,126,34,0.3); transition: transform 0.1s, box-shadow 0.1s; } .btn-login:active { transform: translateY(4px); box-shadow: 0 0 0 var(--primary-dark); } .btn-login:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .login-error { margin: 0 24px 16px; padding: 10px 14px; background: rgba(231,76,60,0.15); border: 1px solid rgba(231,76,60,0.3); border-radius: 10px; color: #ff6b6b; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; } @keyframes shake { 0% { transform: translateX(0); } 15% { transform: translateX(-8px); } 35% { transform: translateX(8px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(4px); } 100% { transform: translateX(0); } } .login-card.shake { animation: shake 0.35s ease-out; } /* ==================================================== KDS BOARD (Kanban) ==================================================== */ .kds-wrapper { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .kds-topbar { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 16px; height: 60px; width: 100%; box-sizing: border-box; background: var(--bg-white); border-bottom: 1px solid var(--border); flex-shrink: 0; text-align: left; } .kds-topbar-left { display: flex; align-items: center; gap: 12px; } .kds-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .kds-clock { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .kds-topbar-right { display: flex; align-items: center; gap: 10px; } .connection-status { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); } /* Stats bar */ .kds-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; } .kds-stat { background: var(--bg-white); border-radius: var(--radius-sm); padding: 6px 8px; display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); min-width: 0; } .kds-stat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: white; flex-shrink: 0; } .kds-stat-icon.total { background: var(--text-secondary); } .kds-stat-icon.new { background: var(--blue); } .kds-stat-icon.preparing { background: var(--primary); } .kds-stat-icon.ready { background: var(--secondary); } .kds-stat-icon.delivered { background: #6b7280; } .kds-date-nav { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--border); } .kds-date-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); text-decoration: none; font-size: 0.85rem; } .kds-date-btn:hover { background: var(--border); } .kds-date-input { height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 0.85rem; cursor: pointer; } .kds-date-today { padding: 6px 12px; background: var(--primary); color: #fff; border-radius: 8px; font-size: 0.8rem; font-weight: 600; text-decoration: none; } .kds-stat-value { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--text-dark); } .kds-stat-label { font-size: 0.7rem; color: var(--text-secondary); line-height: 1.2; } /* Filters */ .kds-filters { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .kds-filters::-webkit-scrollbar { display: none; } .filter-pill { padding: 6px 16px; border-radius: 20px; border: 2px solid var(--border); background: var(--bg-white); color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; white-space: nowrap; transition: var(--transition); cursor: pointer; text-decoration: none; } .filter-pill.active, .filter-pill:hover { border-color: var(--primary); background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: white; box-shadow: 0 3px 0 var(--primary-dark); } .center-badge { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; } /* Courses Bar */ .courses-bar { padding: 0 12px 8px; } .courses-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px; scrollbar-width: none; } .courses-scroll::-webkit-scrollbar { display: none; } .course-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; min-width: 72px; flex-shrink: 0; box-shadow: var(--shadow-sm); } .course-icon { font-size: 1.2rem; line-height: 1; } .course-count { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--primary); line-height: 1; } .course-label { font-size: 0.7rem; color: var(--text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } /* Bulk action bar */ .kds-bulk-bar { display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; } .kds-bulk-bar::-webkit-scrollbar { display: none; } .kds-bulk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: none; border-radius: 10px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; cursor: pointer; min-height: 44px; transition: opacity 0.15s; } .kds-bulk-btn:active { opacity: 0.7; } .kds-bulk-btn:disabled { opacity: 0.4; cursor: not-allowed; } .kds-bulk-btn.bulk-preparing { background: #FFF3E0; color: #E65100; } .kds-bulk-btn.bulk-ready { background: #E8F5E9; color: #388E3C; } .kds-bulk-btn.bulk-delivered { background: #E3F2FD; color: #1565C0; } /* Tabs */ .kds-tabs { display: flex; gap: 8px; padding: 0 12px 10px; } .kds-tab { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-white); border: 1px solid var(--border); transition: var(--transition); } .kds-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); } .kds-tab:not(.active):hover { background: #f0f0f0; } /* Dish List */ .dish-list-panel { padding: 0 12px 12px; } .dish-section { margin-bottom: 16px; } .dish-section-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 2px solid var(--border); margin-bottom: 4px; } .dish-section-header span:first-child { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.03em; } .dish-section-total { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--primary); } .dish-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(0,0,0,0.04); } .dish-row:last-child { border-bottom: none; } .dish-name { flex: 1; font-size: 0.95rem; font-weight: 500; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dish-bar-wrap { width: 120px; height: 8px; background: #F0F0F0; border-radius: 4px; overflow: hidden; flex-shrink: 0; } .dish-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s; } .dish-qty { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--primary); min-width: 48px; text-align: right; line-height: 1; } /* Board */ .kds-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px; flex: 1; overflow: hidden; } .kds-column { border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm); } .kds-column-header { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; flex-shrink: 0; } .kds-column-badge { background: rgba(255,255,255,0.3); color: white; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; } .kds-column-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent; } /* Column themes */ .col-new { background: #FFF9F0; } .col-new .kds-column-header { background: #FFE0B2; color: var(--text-dark); } .col-new .kds-column-badge { background: rgba(0,0,0,0.15); color: var(--text-dark); } .col-preparing { background: #FFF3E0; } .col-preparing .kds-column-header { background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: white; } .col-ready { background: #F1FFF5; } .col-ready .kds-column-header { background: linear-gradient(135deg, #2ECC71, var(--secondary)); color: white; } /* New order flash animation */ @keyframes col-flash-green { 0%, 100% { box-shadow: var(--shadow-sm); } 25% { box-shadow: 0 0 0 3px var(--secondary); } 75% { box-shadow: 0 0 0 3px var(--secondary); } } @keyframes col-flash-red { 0%, 100% { box-shadow: var(--shadow-sm); } 25% { box-shadow: 0 0 0 3px var(--red); } 75% { box-shadow: 0 0 0 3px var(--red); } } .col-new.flash-new { animation: col-flash-green 1s ease-out; } .col-new.flash-allergy { animation: col-flash-red 1s ease-out; } /* ==================================================== KDS CARD (order card in Kanban) ==================================================== */ .kds-card { background: var(--bg-white); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--transition), box-shadow var(--transition); animation: slideInDown 0.3s ease-out; } .kds-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .kds-card:active { transform: translateY(0); } @keyframes slideInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .kds-card-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px 6px; } .dietary-badge { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; color: white; flex-shrink: 0; text-transform: uppercase; } .dietary-badge.db-standard { background: #27AE60; } .dietary-badge.db-senza_glutine { background: #F1C40F; color: #5D4037; } .dietary-badge.db-diabetico { background: #3498DB; } .dietary-badge.db-renale { background: #9B59B6; } .dietary-badge.db-allergie { background: #E74C3C; } .dietary-badge.db-disfagia { background: #E67E22; } .dietary-badge.db-vegetariano { background: #1ABC9C; } .dietary-badge.db-default { background: var(--text-secondary); } .mc-badge { display: inline-block; font-size: 0.6rem; font-weight: 600; color: #fff; padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.3px; text-transform: uppercase; } .kds-card-info { flex: 1; min-width: 0; } .kds-card-code { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kds-card-meta { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin-top: 2px; } .texture-icon { font-size: 0.7rem; } .allergy-warning { color: var(--red); font-size: 0.8rem; animation: blink-warn 1.5s infinite; } @keyframes blink-warn { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .kds-card-resident { padding: 4px 12px; background: #EEF2FF; display: flex; align-items: center; gap: 6px; font-size: 0.7rem; } .resident-badge { background: #4F46E5; color: #fff; padding: 1px 6px; border-radius: 4px; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.5px; } .resident-info { color: #4338CA; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kds-card-items { padding: 6px 12px; border-top: 1px solid var(--border); background: var(--bg); } .kds-item-row { font-size: 0.78rem; color: var(--text); padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kds-item-qty { font-weight: 700; color: var(--text-muted); margin-right: 3px; } .kds-card-footer { padding: 8px 12px 10px; border-top: 1px solid var(--border); } .kds-card-timer { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; } .kds-card-timer.timer-warn { color: var(--red); font-weight: 600; } .kds-btn-advance { width: 100%; padding: 8px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; color: white; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 3px 0 rgba(0,0,0,0.2); transition: transform 0.1s, box-shadow 0.1s; } .kds-btn-advance:active { transform: translateY(3px); box-shadow: none; } .kds-btn-advance.btn-to-preparing { background: linear-gradient(135deg, var(--primary-light), var(--primary)); } .kds-btn-advance.btn-to-ready { background: linear-gradient(135deg, #2ECC71, var(--secondary)); } .kds-btn-advance.btn-to-delivered { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); } /* Legend */ .kds-legend { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--bg-white); border-top: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } .legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; } .legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } /* ==================================================== OSS HOME ==================================================== */ .oss-counter-wrap { padding: 20px; } .oss-counter-card { background: linear-gradient(135deg, #fff9f0, #fff5e6); border: 1px solid rgba(230,126,34,0.15); border-radius: 20px; padding: 32px 24px; text-align: center; box-shadow: var(--shadow-sm); } .oss-counter-number { font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: var(--primary); line-height: 1; display: block; transition: transform 0.3s, color 0.3s; } .oss-counter-number.pulse { animation: counter-pulse 0.6s ease-out; } @keyframes counter-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.15); color: var(--primary-dark); } 100% { transform: scale(1); } } .oss-counter-label { font-size: 1rem; color: var(--text-secondary); margin-top: 8px; display: block; } /* Delivery list */ .delivery-list { display: flex; flex-direction: column; gap: 8px; } .delivery-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-white); border-radius: var(--radius-sm); border: 1px solid var(--border); } .delivery-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } .delivery-icon.ok { background: rgba(39,174,96,0.1); color: var(--secondary); } .delivery-icon.anomaly { background: rgba(231,76,60,0.1); color: var(--red); } .delivery-info { flex: 1; } .delivery-code { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; } .delivery-meta { font-size: 0.75rem; color: var(--text-secondary); } .dietary-badge-sm { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; color: white; } /* ==================================================== QR SCAN PAGE ==================================================== */ .scan-page { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #000; overflow: hidden; } .scan-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(0,0,0,0.7); height: 56px; flex-shrink: 0; z-index: 10; } .back-btn { display: flex; align-items: center; gap: 8px; color: white; font-size: 0.9rem; font-weight: 600; min-width: 44px; min-height: 44px; padding: 0 8px; } .scan-title { color: white; font-family: var(--font-display); font-size: 1rem; font-weight: 700; } .scan-viewport { flex: 1; position: relative; overflow: hidden; } #scan-video { width: 100%; height: 100%; object-fit: cover; } .scan-crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 220px; height: 220px; border: 3px solid var(--primary); border-radius: 20px; pointer-events: none; } .scan-crosshair::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: linear-gradient(180deg, transparent 0%, var(--primary) 50%, transparent 100%); animation: scan-line 2s ease-in-out infinite; } @keyframes scan-line { 0%, 100% { transform: translateX(-50%) translateY(-50%); opacity: 0; } 20% { opacity: 1; } 50% { transform: translateX(-50%) translateY(50%); opacity: 1; } 80% { opacity: 0; } } .scan-hint { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.8); font-size: 0.85rem; padding: 8px; } /* Result bottom sheet */ .scan-result { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-white); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,0.2); padding: 24px 20px 40px; transform: translateY(100%); transition: transform 0.3s ease-out; z-index: 50; } .scan-result.active { transform: translateY(0); } .scan-result-order { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .scan-result-badge { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; } .scan-result-info .code { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; } .scan-result-info .label { font-size: 0.85rem; color: var(--text-secondary); } .scan-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .scan-action-btn { padding: 18px 12px; border-radius: 16px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; transition: transform 0.1s, box-shadow 0.1s; } .scan-action-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05)); border-radius: 16px 16px 0 0; pointer-events: none; } .scan-action-btn:active { transform: translateY(3px); } .scan-btn-delivered { background: linear-gradient(145deg, #2ECC71, var(--secondary)); box-shadow: 0 5px 0 var(--secondary-dark); } .scan-btn-anomaly { background: linear-gradient(145deg, #F1948A, var(--red)); box-shadow: 0 5px 0 var(--red-dark); } .scan-action-btn i { font-size: 1.4rem; } /* ==================================================== ANOMALY FORM ==================================================== */ .anomaly-page { min-height: 100vh; background: var(--bg); padding-bottom: calc(var(--bottom-nav-height) + 24px); } .page-header { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--bg-white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .page-header h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; } .anomaly-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px; } .anomaly-type-btn { min-height: 80px; border-radius: 16px; border: 2px solid var(--border); background: var(--bg-white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: var(--transition); padding: 12px; } .anomaly-type-btn .atype-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-secondary); transition: var(--transition); } .anomaly-type-btn .atype-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); text-align: center; } .anomaly-type-btn.selected { border-color: var(--red); background: rgba(231,76,60,0.04); } .anomaly-type-btn.selected .atype-icon { background: rgba(231,76,60,0.1); color: var(--red); } .anomaly-textarea { width: 100%; padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 1rem; font-family: var(--font-main); resize: none; min-height: 90px; background: var(--bg-white); color: var(--text-dark); transition: border-color var(--transition); } .anomaly-textarea:focus { outline: none; border-color: var(--primary); } .btn-submit-big { width: 100%; padding: 18px; border-radius: 14px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: white; background: linear-gradient(145deg, #F1948A, var(--red)); box-shadow: 0 6px 0 var(--red-dark), 0 8px 20px rgba(231,76,60,0.3); position: relative; overflow: hidden; transition: transform 0.1s, box-shadow 0.1s; } .btn-submit-big::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05)); pointer-events: none; } .btn-submit-big:active { transform: translateY(6px); box-shadow: none; } .btn-submit-big:disabled { opacity: 0.5; transform: none; cursor: not-allowed; } /* ==================================================== QR LABELS (print) ==================================================== */ .qr-labels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 20px; } .qr-label { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; } .qr-label img { display: block; margin: 0 auto 8px; } .qr-label-code { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; } .qr-label-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; } /* ---- Calendario ---- */ .cal-day-card { background: var(--bg-white); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-bottom: 10px; overflow: hidden; } .cal-today { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(230,126,34,0.15), var(--shadow-sm); } .cal-day-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; } .cal-day-label { display: flex; align-items: center; gap: 8px; flex: 1; } .cal-day-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-dark); min-width: 32px; } .cal-day-num { font-size: 0.85rem; color: var(--text-secondary); } .cal-today-badge { background: var(--primary); color: white; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; } .cal-day-meals-preview { display: flex; gap: 6px; flex-wrap: wrap; } .cal-meal-pill { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; font-size: 0.8rem; font-weight: 600; } .cal-chevron { color: var(--text-muted); font-size: 0.85rem; flex-shrink: 0; } .cal-day-body { padding: 0 16px 14px; border-top: 1px solid var(--border); } .cal-meal-row { padding: 12px 0; border-bottom: 1px solid var(--border); } .cal-meal-row:last-child { border-bottom: none; } .cal-meal-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; } .cal-meal-count { margin-left: auto; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--primary); } .cal-diet-row { display: flex; gap: 6px; flex-wrap: wrap; } .cal-diet-chip { color: white; font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: flex; gap: 4px; align-items: center; } /* ---- OSS Delivery Card ---- */ .delivery-card { background: var(--bg-white); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 10px; } .delivery-card.allergy-alert { border-color: var(--red); border-left: 4px solid var(--red); } .delivery-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .delivery-order-code { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--text-dark); } .delivery-buyer-name { font-size: 1rem; font-weight: 600; color: var(--text-dark); flex: 1; } .delivery-location { font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; margin-bottom: 12px; } .delivery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .delivery-actions.single { grid-template-columns: 1fr; } .btn-deliver { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); box-shadow: 0 4px 0 #1a7a45, 0 6px 15px rgba(39,174,96,0.3); color: white; border: none; border-radius: 14px; padding: 14px; font-size: 0.9rem; font-weight: 700; font-family: var(--font-display); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-deliver:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a7a45; } .btn-deliver:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-anomaly { background: linear-gradient(135deg, #fff, #fff5f5); box-shadow: 0 4px 0 #ddd, 0 6px 12px rgba(0,0,0,0.08); color: var(--red); border: 1.5px solid rgba(231,76,60,0.3); border-radius: 14px; padding: 14px; font-size: 0.9rem; font-weight: 700; font-family: var(--font-display); cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.1s; } .btn-anomaly:active { transform: translateY(3px); } @media print { .bottom-nav, .kds-topbar, .page-header, .kds-filters, .btn-print { display: none !important; } .qr-labels-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; } .qr-label { break-inside: avoid; border: 1px solid #ccc; } } /* ==================================================== HISTORY PAGE ==================================================== */ .history-list { display: flex; flex-direction: column; gap: 8px; } .history-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-white); border-radius: var(--radius-sm); border: 1px solid var(--border); } .history-status-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .history-status-icon.ok { background: rgba(39,174,96,0.1); color: var(--secondary); } .history-status-icon.warn { background: rgba(231,76,60,0.1); color: var(--red); } .history-code { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; } .history-meta { font-size: 0.8rem; color: var(--text-secondary); } .history-time { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; } /* ==================================================== READY LIST ==================================================== */ .ready-order-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--bg-white); border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 8px; } .ready-order-left { display: flex; align-items: center; gap: 12px; } .ready-order-code { font-family: var(--font-display); font-weight: 700; } .ready-order-meta { font-size: 0.8rem; color: var(--text-secondary); } .btn-deliver-inline { padding: 10px 16px; background: linear-gradient(135deg, #2ECC71, var(--secondary)); color: white; border-radius: 10px; font-weight: 700; font-size: 0.85rem; box-shadow: 0 3px 0 var(--secondary-dark); white-space: nowrap; } .btn-deliver-inline:active { transform: translateY(3px); box-shadow: none; } /* ==================================================== SHARED PROFILE ==================================================== */ .profile-page { height: 100vh; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } .profile-header { background: linear-gradient(135deg, var(--primary-light), var(--primary)); padding: 40px 20px 60px; text-align: center; position: relative; } .profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.25); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; } .profile-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: white; } .profile-role { font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-top: 4px; } .btn-logout { width: calc(100% - 40px); margin: 20px 20px 0; padding: 16px; border-radius: 14px; background: rgba(231,76,60,0.1); border: 1px solid rgba(231,76,60,0.2); color: var(--red); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 8px; } /* ==================================================== UTILITIES ==================================================== */ .hidden { display: none !important; } .text-center { text-align: center; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .p-20 { padding: 20px; } .empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); } .empty-state i { font-size: 3rem; margin-bottom: 12px; display: block; } .empty-state h3 { font-family: var(--font-display); font-size: 1rem; color: var(--text-secondary); } .empty-state p { font-size: 0.85rem; margin-top: 6px; } /* ═══════════════════════════════════════════════════════ GUEST LIST (OSS Ospiti) ═══════════════════════════════════════════════════════ */ .guest-list-card { display: flex; align-items: center; justify-content: space-between; background: var(--card-bg, #fff); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: transform 0.15s; } .guest-list-card:active { transform: scale(0.98); } .guest-card-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .guest-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .guest-card-info { min-width: 0; } .guest-card-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary, #2C3E50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .guest-card-meta { font-size: 0.75rem; color: var(--text-muted, #95A5A6); margin-top: 2px; } .guest-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .guest-card-tex { font-size: 1rem; } /* ═══════════════════════════════════════════════════════ COMANDA (OSS meal ordering) ═══════════════════════════════════════════════════════ */ .comanda-header { background: var(--card-bg, #fff); border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .comanda-guest-row { display: flex; align-items: center; gap: 12px; } .comanda-guest-info { flex: 1; } .comanda-guest-name { font-weight: 700; font-size: 1.05rem; color: var(--text-primary, #2C3E50); } .comanda-guest-meta { font-size: 0.8rem; color: var(--text-muted, #95A5A6); margin-top: 2px; } .comanda-alert { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; margin-top: 10px; font-size: 0.8rem; font-weight: 500; } .comanda-alert-danger { background: #FDEDEC; color: #C0392B; } .comanda-alert-warning { background: #FEF9E7; color: #B7950B; } .comanda-alert i { font-size: 0.9rem; } .comanda-section { background: var(--card-bg, #fff); border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .comanda-section-title { font-weight: 700; font-size: 0.85rem; color: var(--text-secondary, #7F8C8D); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .comanda-required { font-size: 0.65rem; background: #E74C3C; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 600; text-transform: uppercase; } .comanda-optional { font-size: 0.65rem; background: #BDC3C7; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 600; text-transform: uppercase; } /* Lot cards */ .comanda-lot-grid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .comanda-lot-card { min-width: 140px; padding: 12px; border: 2px solid #E5E7EB; border-radius: 10px; cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .comanda-lot-card.selected { border-color: var(--primary, #E67E22); background: #FFF3E0; } .comanda-lot-card.ordered { border-color: #27AE60; background: #E8F5E9; opacity: 0.7; cursor: default; position: relative; } .comanda-lot-card.ordered:active { transform: none; } .comanda-lot-card.disabled { opacity: 0.45; cursor: default; pointer-events: none; } .comanda-lot-ordered { position: absolute; top: 6px; right: 6px; background: #27AE60; color: #fff; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; } .comanda-lot-card:active { transform: scale(0.97); } .comanda-lot-date { font-weight: 700; font-size: 0.85rem; color: var(--text-primary, #2C3E50); } .comanda-lot-name { font-size: 0.7rem; color: var(--text-muted, #95A5A6); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comanda-lot-avail { font-size: 0.75rem; color: #27AE60; margin-top: 6px; font-weight: 600; } .comanda-lot-avail.low { color: #E74C3C; } /* Item cards */ .comanda-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid #E5E7EB; border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; } .comanda-item:active { transform: scale(0.98); } .comanda-item input[type=radio] { display: none; } .comanda-item.selected { border-color: #27AE60; background: #F0FFF4; } .comanda-item.forbidden { border-color: rgba(231,76,60,0.2); background: rgba(231,76,60,0.06); opacity: 0.7; cursor: not-allowed; } .comanda-item.warning { border-color: rgba(245,158,11,0.2); background: rgba(245,158,11,0.06); } .comanda-item-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .comanda-item-thumb-ph { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.04); } .comanda-item-body { flex: 1; min-width: 0; } .comanda-item-name { font-weight: 600; font-size: 0.9rem; color: #1F2937; } .comanda-item-desc { font-size: 0.75rem; color: #1F2937; margin-top: 2px; } .comanda-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .allergen-tag { font-size: 0.82rem; padding: 5px 12px; border-radius: 10px; background: rgba(0,0,0,0.05); color: #7F8C8D; font-weight: 700; text-transform: uppercase; } .allergen-tag.forbidden { background: rgba(231,76,60,0.12); color: #C0392B; } .allergen-tag.warning { background: rgba(245,158,11,0.12); color: #92400E; } .comanda-item-icon { font-size: 0.8rem; color: #BDC3C7; flex-shrink: 0; width: 24px; text-align: center; } .comanda-item-icon.forbidden { color: #E74C3C; } .comanda-item-icon.warning { color: #F39C12; } /* Notes */ .comanda-notes { width: 100%; border: 2px solid #E5E7EB; border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; font-family: var(--font-body, Inter, sans-serif); resize: none; outline: none; transition: border-color 0.15s; } .comanda-notes:focus { border-color: var(--oss-blue, var(--primary, #E67E22)); } /* Confirm button */ .btn-confirm-comanda { display: block; width: 100%; padding: 16px; margin-bottom: 12px; background: var(--primary, #E67E22); color: #fff; border: none; border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.15s; text-align: center; font-family: var(--font-display, 'Space Grotesk', sans-serif); } .btn-confirm-comanda:active { transform: scale(0.97); } .btn-confirm-comanda:disabled { background: #BDC3C7; cursor: not-allowed; } .btn-cancel-order { display: block; width: 100%; padding: 10px; margin-top: 8px; background: #fff; color: #E74C3C; border: 1.5px solid #E74C3C; border-radius: 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; } .btn-cancel-order:active { background: #FDEDEC; transform: scale(0.97); } /* ==================================================== OSS BLUE THEME — Liquid Glass Design System Replicated from mobile-sereni (Nunito, warm tones, glass) ==================================================== */ /* ---- OSS Blue Variables (Light Mode) ---- */ :root { --oss-blue: #3B82F6; --oss-blue-light: #60A5FA; --oss-blue-dark: #2563EB; --oss-blue-bg: linear-gradient(175deg, #F5F8FC 0%, #EBF2FB 60%, #DAEAF8 100%); --oss-glass-bg: rgba(255, 255, 255, 0.42); --oss-glass-bg-solid: rgba(255, 255, 255, 0.95); --oss-glass-bg-specular: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0.42) 100%); --oss-glass-border: rgba(255, 255, 255, 0.55); --oss-glass-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1.5px 4px rgba(0,0,0,0.04), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -0.5px 0 rgba(0,0,0,0.03); --oss-glass-blur: blur(28px) saturate(1.9); --oss-text-dark: #1a2a3a; --oss-text-secondary: #4a6178; --oss-text-muted: #7a8fa3; --oss-scan-bg: #FAF8F5; --oss-scan-text: #2C3E50; /* Glass identico alle card pasti cuoco (color-mix) */ --oss-grey-glass-bg: color-mix(in srgb, #bbbbbc 12%, transparent); --oss-grey-glass-blur: blur(18px) saturate(1.8); --oss-grey-glass-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04); /* Glass mobile-expy (bottom bar) */ --oss-expy-glass-bg: rgba(255, 255, 255, 0.1); --oss-expy-glass-blur: blur(24px); --oss-expy-glass-border: 1px solid rgba(255, 255, 255, 0.2); --oss-expy-glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* ---- OSS Page Container ---- */ /* Sfondo identico al cuoco (#f5f5f5) per glass coerente */ html:has(.oss-page) { background: #f5f5f5; } html:has(.oss-page.dark-mode) { background: #000000; } .oss-page { background: #f5f5f5; height: 100vh; overflow: hidden; position: fixed; width: 100%; font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--oss-text-dark); } .oss-page .app-container, .oss-page .profile-page { height: 100% !important; min-height: 0 !important; overflow: hidden !important; display: flex; flex-direction: column; padding-bottom: 0 !important; } /* Fade-in: content only (not bottom-nav) — fast 0.25s to reduce perceived lag */ .oss-page .top-bar, .oss-page .oss-home-scroll, .oss-page .oss-counter-wrap, .oss-page .prof-top, .oss-page .prof-content { opacity: 0; transition: opacity 0.25s ease-out; } .oss-page .app-container.visible .top-bar, .oss-page .app-container.visible .oss-home-scroll, .oss-page .app-container.visible .oss-counter-wrap, .oss-page .profile-page.visible .prof-top, .oss-page .profile-page.visible .prof-content { opacity: 1 !important; } /* Bottom nav — SEMPRE visibile, NESSUN flash al caricamento */ .oss-page .bottom-nav { opacity: 1 !important; visibility: visible !important; transition: none !important; } /* Fade-out: content only — bottom-nav stays visible */ .oss-page .app-container.fade-out .top-bar, .oss-page .app-container.fade-out .oss-home-scroll, .oss-page .profile-page.fade-out .prof-top, .oss-page .profile-page.fade-out .prof-content { opacity: 0 !important; transition: opacity 0.2s ease-out !important; } /* Bottom nav NEVER fades */ .oss-page .app-container.fade-out .bottom-nav, .oss-page .profile-page.fade-out .bottom-nav { opacity: 1 !important; transition: none !important; } /* Scrollable content area */ .oss-home-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; touch-action: pan-y; padding-bottom: 100px; scrollbar-width: none; -ms-overflow-style: none; } .oss-home-scroll::-webkit-scrollbar { display: none; } /* ---- OSS Typography (Nunito, matching mobile-sereni) ---- */ .oss-page .top-bar-greeting { font-family: 'Nunito', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--oss-text-dark); letter-spacing: -0.01em; } .oss-page .top-bar-sub { font-size: 0.85rem; color: var(--oss-text-secondary); font-weight: 500; } .oss-page .section-title { font-family: 'Nunito', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--oss-text-dark); letter-spacing: -0.01em; margin-bottom: 14px; } /* ---- OSS Top Bar (glass, no border) ---- */ .oss-page .top-bar { background: transparent; border-bottom: none; box-shadow: none; padding: 20px 20px 14px; flex-shrink: 0; } /* ---- OSS Counter Card (blue glass) ---- */ .oss-counter-wrap { padding: 0 20px; margin-bottom: 16px; } .oss-counter-card-blue { background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; border-radius: 22px; padding: 28px 24px; text-align: center; box-shadow: var(--oss-grey-glass-shadow); } .oss-counter-card-blue .oss-counter-number { color: var(--oss-blue); } .oss-counter-card-blue .oss-counter-number.pulse { animation: counter-pulse-blue 0.6s ease-out; } @keyframes counter-pulse-blue { 0% { transform: scale(1); } 40% { transform: scale(1.15); color: var(--oss-blue-dark); } 100% { transform: scale(1); } } /* ---- OSS Liquid Glass Action Cards ---- */ .oss-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 20px; } .oss-action-card { position: relative; border-radius: 22px; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; text-decoration: none !important; min-height: 120px; justify-content: center; overflow: hidden; backdrop-filter: blur(28px) saturate(1.9); -webkit-backdrop-filter: blur(28px) saturate(1.9); -webkit-tap-highlight-color: transparent; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; } /* Specular highlight — Apple WWDC liquid glass (matching Anna) */ .oss-action-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%); border-radius: 22px 22px 50% 50%; pointer-events: none; z-index: 1; } .oss-action-card:active { transform: scale(0.93); } .oss-action-card .oss-card-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent); position: relative; z-index: 2; } .oss-action-card .oss-card-label { font-size: 1rem; font-weight: 800; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,0.12); position: relative; z-index: 2; font-family: 'Nunito', sans-serif; } /* Blue scan card — colori vivaci originali */ .oss-card-scan { background: linear-gradient(145deg, rgba(96,165,250,0.95) 0%, rgba(59,130,246,0.97) 50%, rgba(37,99,235,0.95) 100%); backdrop-filter: blur(28px) saturate(1.9); -webkit-backdrop-filter: blur(28px) saturate(1.9); border: 1px solid rgba(96,165,250,0.55); box-shadow: 0 8px 32px rgba(37,99,235,0.4), 0 2px 8px rgba(37,99,235,0.25), inset 0 1px 0 rgba(255,255,255,0.35); } .oss-card-scan:active { box-shadow: 0 3px 12px rgba(37,99,235,0.3), inset 0 1px 0 rgba(255,255,255,0.3); } /* Green list card — colori vivaci originali */ .oss-card-list { background: linear-gradient(145deg, rgba(52,211,153,0.95) 0%, rgba(16,185,129,0.97) 50%, rgba(5,150,105,0.95) 100%); backdrop-filter: blur(28px) saturate(1.9); -webkit-backdrop-filter: blur(28px) saturate(1.9); border: 1px solid rgba(52,211,153,0.55); box-shadow: 0 8px 32px rgba(5,150,105,0.4), 0 2px 8px rgba(5,150,105,0.25), inset 0 1px 0 rgba(255,255,255,0.35); } .oss-card-list:active { box-shadow: 0 3px 12px rgba(5,150,105,0.3), inset 0 1px 0 rgba(255,255,255,0.3); } /* ---- OSS Comanda — Glass Design (matching guest-lookup info-card) ---- */ .oss-page .comanda-lot-card.selected { border-color: var(--oss-blue) !important; background: rgba(59,130,246,0.06) !important; } .oss-page .comanda-item.selected { border-color: var(--oss-blue) !important; background: rgba(59,130,246,0.06) !important; } .oss-page .comanda-item.selected .comanda-item-icon { color: var(--oss-blue) !important; } .oss-page .comanda-item .comanda-item-icon { color: #BDC3C7; } .oss-page .comanda-section-title { font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--oss-text-muted); font-size: 0.88rem; } .oss-page .comanda-section-title i { color: var(--oss-blue) !important; } /* Required/Optional badges — hidden on OSS */ .oss-page .comanda-required { display: none !important; } .oss-page .comanda-optional { display: none !important; } /* Alert banners — glass design, no harsh red/yellow bg */ .oss-page .comanda-alert { border-radius: 14px; padding: 14px 16px; font-size: 0.88rem; font-weight: 600; font-family: 'Nunito', sans-serif; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .oss-page .comanda-alert-danger { background: rgba(231,76,60,0.08) !important; color: #C0392B !important; border: 1px solid rgba(231,76,60,0.15); } .oss-page .comanda-alert-warning { background: rgba(245,158,11,0.08) !important; color: #92400E !important; border: 1px solid rgba(245,158,11,0.15); } .oss-page .comanda-alert strong { font-weight: 800; } /* Confirm button — blu pieno */ .oss-page .btn-confirm-comanda { background: #3B82F6 !important; box-shadow: 0 4px 16px rgba(59,130,246,0.3) !important; border: none; position: relative; overflow: hidden; } .oss-page .btn-confirm-comanda::before { content: none; } .oss-page .comanda-lot-card.ordered { border-color: var(--oss-blue) !important; background: rgba(59,130,246,0.06) !important; } .oss-page .comanda-lot-ordered { background: var(--oss-blue) !important; color: #fff !important; } .oss-page .comanda-alert[style*="#27AE60"] { border-left-color: var(--oss-blue) !important; background: rgba(59,130,246,0.08) !important; } .oss-page .comanda-alert[style*="#27AE60"] i { color: var(--oss-blue) !important; } /* Glass sections */ .oss-page .comanda-header { border-radius: 20px; padding: 20px; margin-bottom: 20px; } .oss-page .comanda-section { background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); border-radius: 20px; padding: 22px; margin-bottom: 16px; } .oss-page .comanda-guest-name { font-size: 1.25rem; font-weight: 800; color: var(--oss-text-dark); font-family: 'Nunito', sans-serif; } .oss-page .comanda-guest-meta { font-size: 0.95rem; color: var(--oss-text-muted); margin-top: 4px; } /* Comanda confirm button — stile blue pill */ .oss-page .btn-confirm-comanda { font-size: 1.1rem !important; padding: 16px !important; } /* Comanda lot card — font più grandi */ .oss-page .comanda-lot-date { font-size: 1rem !important; } .oss-page .comanda-lot-name { font-size: 0.9rem !important; } .oss-page .comanda-lot-avail { font-size: 0.88rem !important; } /* Comanda item card — font più grandi */ .oss-page .comanda-item { padding: 14px !important; border-radius: 16px !important; } .oss-page .comanda-item-name { font-size: 1.05rem !important; } .oss-page .comanda-item-desc { font-size: 0.85rem !important; } /* ---- OSS Guest Cards — bigger, blue, well-spaced ---- */ .oss-page .guest-list-card { padding: 20px; margin-bottom: 14px; border-radius: 20px; min-height: 72px; } .oss-page .guest-avatar { width: 50px; height: 50px; font-size: 1.2rem; font-weight: 800; } .oss-page .guest-card-left { gap: 16px; } .oss-page .guest-card-name { font-size: 1.05rem; font-weight: 700; } .oss-page .guest-card-meta { font-size: 0.82rem; margin-top: 4px; } .oss-page .guest-card-right { gap: 10px; } /* ---- OSS Glass Cards — grey glass (stile header cuoco) ---- */ .oss-page .delivery-item, .oss-page .history-item, .oss-page .guest-list-card, .oss-page .delivery-card { background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); border-radius: 18px; } /* ---- OSS Glass Buttons (Apple style) ---- */ .oss-page .btn-deliver { background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 60%, #2563EB 100%); box-shadow: 0 4px 0 #1D4ED8, 0 6px 18px rgba(59,130,246,0.35); color: #fff; border-radius: 14px; font-family: 'Nunito', sans-serif; font-weight: 800; } .oss-page .btn-deliver:active { box-shadow: 0 1px 0 #1D4ED8; } .oss-page .btn-anomaly { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8); border-radius: 14px; color: var(--oss-text-dark); font-family: 'Nunito', sans-serif; font-weight: 700; } .oss-page .btn-anomaly i { color: #E74C3C; } .oss-page .delivery-card { border-radius: 20px; padding: 18px; } .oss-page .delivery-card-top { margin-bottom: 12px; } .oss-page .delivery-order-code { font-size: 1rem; font-weight: 800; color: var(--oss-text-dark); } .oss-page .delivery-buyer-name { font-size: 0.88rem; color: var(--oss-text-secondary); } .oss-page .delivery-location { color: var(--oss-text-secondary); } /* OSS Glass comanda cards */ .oss-page .comanda-lot-card { background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: 2px solid transparent; box-shadow: var(--oss-grey-glass-shadow); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 80px; } .oss-page .comanda-item { background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); border-radius: 18px; } .oss-page .comanda-header { background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); } .oss-page .comanda-notes { background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.5); border-radius: 14px; } .oss-page .btn-confirm-comanda { border-radius: 16px; font-family: 'Nunito', sans-serif; font-weight: 800; } .oss-page .btn-cancel-order { background: rgba(231,76,60,0.08); border: 1px solid rgba(231,76,60,0.15); color: #E74C3C; border-radius: 14px; font-family: 'Nunito', sans-serif; font-weight: 700; padding: 12px; margin-top: 8px; } .oss-page .card { background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); } /* ---- OSS "Tutto consegnato" green check ---- */ .oss-check-done { margin-top: 12px; font-size: 0.85rem; color: var(--secondary); font-weight: 700; } /* ---- Neon pulse for counter (blue variant) ---- */ @keyframes blueNeonPulse { 0%, 100% { box-shadow: var(--oss-glass-shadow); } 50% { box-shadow: 0 0 16px rgba(59,130,246,0.3), 0 0 36px rgba(59,130,246,0.12), inset 0 1.5px 0 rgba(255,255,255,1); } } .oss-counter-pulse { animation: blueNeonPulse 2.5s ease-in-out infinite; } /* ---- OSS Touch Feedback — effetto press sui pulsanti specifici ---- */ .oss-page .icon-btn:active, .oss-page .inc-trigger-btn:active, .oss-page .oss-action-card:active, .oss-page .oss-fab-ordina:active, .oss-page .nav-tab:active, .oss-page .guest-list-card:active, .oss-page .delivery-card:active, .oss-page .btn-deliver:active, .oss-page .btn-anomaly:active, .oss-page .btn-confirm-comanda:active { transform: scale(0.96) !important; transition: transform 0.08s ease-out !important; } /* ---- Comanda badges row (top-left, in riga con gap) ---- */ .comanda-badges-row { position: absolute; top: -8px; left: -4px; z-index: 5; display: flex; gap: 4px; align-items: center; } .comanda-corner-badge { position: relative; top: auto; left: auto; font-size: 0.52rem; font-weight: 800; padding: 2px 7px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); letter-spacing: 0.4px; white-space: nowrap; text-transform: uppercase; opacity: 1; } .comanda-corner-badge.badge-star { background: linear-gradient(135deg, #F5B301, #E6A200); color: #fff; font-size: 0.75rem; padding: 3px 7px; } .comanda-corner-badge.badge-dietary { background: linear-gradient(135deg, #F59E0B, #E67E22); color: #fff; display: flex; gap: 4px; } /* Post-it realistico con spilla */ .comanda-corner-badge.badge-postit, .comanda-corner-badge.badge-fisso { background: linear-gradient(135deg, #FEF9C3 0%, #FDE68A 60%, #FCD34D 100%); color: #78350F; border: none; border-radius: 2px 2px 2px 12px; box-shadow: 2px 3px 6px rgba(120,53,15,0.2), inset 0 -1px 0 rgba(0,0,0,0.06); transform: rotate(-3deg); position: relative; padding: 2px 8px 2px 12px; font-size: 0.52rem; } /* Spilla rossa 3D inclinata — sembra entrare nel post-it */ .comanda-corner-badge.badge-postit::before, .comanda-corner-badge.badge-fisso::before { content: ''; position: absolute; top: -4px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #FCA5A5 10%, #EF4444 40%, #B91C1C 80%, #7F1D1D 100%); box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.35); z-index: 2; transform: rotate(-35deg) perspective(80px) rotateX(30deg); } /* Gambo della spilla — linea metallica che entra nel post-it */ .comanda-corner-badge.badge-postit::after, .comanda-corner-badge.badge-fisso::after { content: ''; position: absolute; top: 2px; left: 7px; width: 2px; height: 6px; background: linear-gradient(180deg, #D1D5DB 0%, #6B7280 60%, transparent 100%); border-radius: 1px; transform: rotate(-15deg); opacity: 0.7; z-index: 1; } /* Badge angolo DESTRO (stellina preferito) */ .comanda-badge-right { position: absolute; top: -8px; right: -4px; z-index: 5; font-size: 0.75rem; font-weight: 800; padding: 3px 7px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); animation: kds-badgeBounceFlat 1.4s ease forwards; opacity: 0; } .comanda-badge-right.badge-star { background: linear-gradient(135deg, #F5B301, #E6A200); color: #fff; } /* Dietary tag sotto il nome (colorato, stessa dimensione badge) */ .comanda-diet-tag { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.68rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.3px; } /* Legacy class kept for compat */ .comanda-badge-fisso { position: absolute; top: -8px; left: -4px; z-index: 5; background: #FEF3C7; color: #92400E; font-size: 0.58rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); letter-spacing: 0.4px; white-space: nowrap; animation: kds-badgeBounceFlat 1.4s ease forwards; opacity: 0; text-transform: uppercase; } /* ---- HACCP toggle button — glass style, rectangular, same height as icon-btn ---- */ .kds-haccp-toggle-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 0 10px !important; border-radius: 14px !important; width: auto !important; height: 48px !important; min-height: 48px !important; flex-direction: row !important; background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent) !important; border: none !important; color: var(--kds-text-dark) !important; } .kds-haccp-toggle-btn:active { transform: scale(0.95) !important; } /* ---- OSS Order Badge — bouncy, top-left corner ---- */ .oss-order-badge { position: absolute; top: -8px; left: -4px; z-index: 5; } .oss-order-badge span { display: inline-block; background: var(--oss-blue); color: #fff; font-size: 0.62rem; font-weight: 800; padding: 3px 10px; border-radius: 8px; box-shadow: 0 2px 8px rgba(59,130,246,0.4); letter-spacing: 0.3px; white-space: nowrap; animation: kds-badgeBounceFlat 1.4s ease forwards; opacity: 0; text-transform: uppercase; } /* ---- Incident Trigger Button — cerchio glass, stessa grandezza dei bottoni adiacenti ---- */ .inc-trigger-btn, .oss-page .inc-trigger-btn, .kitchen-page .inc-trigger-btn { width: 48px !important; height: 48px !important; border-radius: 50% !important; border: none !important; background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent) !important; color: #E74C3C !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 1.1rem !important; cursor: pointer; flex-shrink: 0 !important; transition: transform 0.15s; } .inc-trigger-btn:active { transform: scale(0.92); } /* ---- OSS Allergy Neon Red Border (gira nel contorno come arancione cuoco) ---- */ .oss-page .guest-list-card.card-allergy { border: 2px solid transparent !important; animation: oss-neon-red-border 3s linear infinite; overflow: visible !important; } @keyframes oss-neon-red-border { 0% { border-color: #EF4444 transparent transparent transparent; box-shadow: 0 -3px 8px rgba(239,68,68,0.4); } 12.5% { border-color: #EF4444 #EF4444 transparent transparent; box-shadow: 3px -3px 8px rgba(239,68,68,0.4); } 25% { border-color: transparent #EF4444 transparent transparent; box-shadow: 3px 0 8px rgba(239,68,68,0.4); } 37.5% { border-color: transparent #EF4444 #EF4444 transparent; box-shadow: 3px 3px 8px rgba(239,68,68,0.4); } 50% { border-color: transparent transparent #EF4444 transparent; box-shadow: 0 3px 8px rgba(239,68,68,0.4); } 62.5% { border-color: transparent transparent #EF4444 #EF4444; box-shadow: -3px 3px 8px rgba(239,68,68,0.4); } 75% { border-color: transparent transparent transparent #EF4444; box-shadow: -3px 0 8px rgba(239,68,68,0.4); } 87.5% { border-color: #EF4444 transparent transparent #EF4444; box-shadow: -3px -3px 8px rgba(239,68,68,0.4); } 100% { border-color: #EF4444 transparent transparent transparent; box-shadow: 0 -3px 8px rgba(239,68,68,0.4); } } /* ---- OSS Allergy Badge (stile cuoco — bouncy, inclinato) ---- */ .oss-page .kds-special-badge { position:absolute;top:-6px;left:-4px;z-index:5;transform:rotate(-8deg); } .oss-page .kds-special-badge span { display:inline-block;background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;font-size:0.55rem;font-weight:800;padding:2px 8px;border-radius:6px;box-shadow:0 2px 6px rgba(239,68,68,0.4);letter-spacing:0.5px;white-space:nowrap;animation:kds-badgeBounceFlat 1.4s ease forwards;opacity:0;text-transform:uppercase; } @keyframes kds-badgeBounceFlat{0%{transform:translateY(10px) scale(0.7);opacity:0}20%{transform:translateY(0) scale(1);opacity:1}40%{transform:translateY(-4px) scale(1.1);opacity:1}60%{transform:translateY(2px) scale(0.95);opacity:1}80%{transform:translateY(-1px) scale(1.02);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}} /* ---- OSS Font Size Boost — per uso pratico OSS (scritte leggibili) ---- */ .oss-page .top-bar-greeting { font-size: 1.45rem; } .oss-page .top-bar-sub { font-size: 1rem; } .oss-page .delivery-code { font-size: 1.1rem; } .oss-page .delivery-meta { font-size: 0.95rem; } .oss-page .guest-card-meta { font-size: 0.95rem; } .oss-page .guest-card-name { font-size: 1.2rem; } .oss-page .guest-avatar { font-size: 1.3rem; } .oss-page .comanda-lot-date { font-size: 1rem; } .oss-page .comanda-lot-name { font-size: 0.88rem; } .oss-page .comanda-lot-avail { font-size: 0.9rem; } .oss-page .comanda-section-title { font-size: 1.05rem; } .oss-page .comanda-item-name { font-size: 1.05rem; } .oss-page .comanda-item-desc { font-size: 0.82rem !important; } .oss-page .oss-counter-label { font-size: 1.15rem; } .oss-page .oss-counter-number { font-size: 4.5rem; } .oss-page .nav-tab-label { font-size: 0.78rem; } .oss-page .nav-tab i { font-size: 1.45rem; } .oss-page .section-title { font-size: 1.25rem; } .oss-page .oss-check-done { font-size: 1rem; } .oss-page .oss-card-label { font-size: 1.1rem; } .oss-page .oss-card-icon { width: 60px; height: 60px; font-size: 1.6rem; } .oss-page .dietary-badge { font-size: 0.7rem !important; } .oss-page .btn-action { font-size: 1.05rem; } .oss-page .prof-info h2 { font-size: 1.4rem; } .oss-page .prof-badge { font-size: 0.95rem; } .oss-page .row-label { font-size: 0.95rem; } .oss-page .row-value { font-size: 0.95rem; } .oss-page .row-icon { font-size: 1.1rem; } /* Delivery card nella ready-list */ .oss-page .delivery-order-code { font-size: 1.15rem; } .oss-page .delivery-buyer-name { font-size: 1rem; } .oss-page .delivery-location { font-size: 0.95rem; } .oss-page .btn-deliver { font-size: 1.05rem; padding: 16px 20px; border-radius: 16px; } .oss-page .btn-anomaly { font-size: 1rem; padding: 14px 16px; border-radius: 16px; } .oss-page .delivery-card { padding: 20px; border-radius: 20px; margin-bottom: 16px; } .oss-page .delivery-card-top { margin-bottom: 14px; } /* History items */ .oss-page .history-item { padding: 16px; border-radius: 18px; margin-bottom: 12px; } .oss-page .history-item .delivery-code { font-size: 1.1rem; } .oss-page .history-item .delivery-meta { font-size: 0.95rem; } /* Comanda items (piatti quando ordini) */ .oss-page .comanda-item { padding: 16px !important; border-radius: 18px !important; margin-bottom: 10px; } .oss-page .comanda-item-name { font-size: 1.1rem !important; font-weight: 700; } .oss-page .comanda-item-desc { font-size: 0.9rem !important; } .oss-page .comanda-item-body { flex: 1; } /* Order row in scheda ospite */ .oss-page .order-row { padding: 18px 0; } .oss-page .order-meal-label { font-size: 1.15rem !important; } .oss-page .order-item-name { font-size: 1rem !important; } .oss-page .order-code { font-size: 0.88rem; } .oss-page .status-badge { font-size: 0.78rem; padding: 5px 12px; } /* Expand button nella ready-list */ .oss-page .btn-expand { font-size: 0.95rem !important; padding: 12px !important; border-radius: 14px !important; } /* ---- OSS Bottom Nav — Floating glass grigio (identico a mobile-sereni) ---- */ .oss-page .bottom-nav { position: fixed; bottom: 16px; left: 20px; right: 20px; height: 80px; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none; border-radius: 9999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent); display: flex; align-items: center; justify-content: space-around; padding: 0 8px; z-index: 50; opacity: 1 !important; visibility: visible !important; flex-shrink: 0; transform: translateZ(0); -webkit-backface-visibility: hidden; } /* Tabs: cambio colore istantaneo (no transition = no scatto) */ .oss-page .nav-tab { color: var(--oss-text-dark); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.02em; gap: 3px; padding: 10px 0; z-index: 1; } .oss-page .nav-tab i { font-size: 1.3rem; } .oss-page .nav-tab.active { color: var(--oss-blue); } .oss-page .nav-tab.active i { color: var(--oss-blue); } .oss-page .nav-tab-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; } /* Pill slider (pill shape come la bottom bar) */ .nav-pill-slider { position: absolute; top: 6px; left: 0; height: calc(100% - 12px); background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.22); box-shadow: 0 4px 16px rgba(59, 130, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5); border-radius: 9999px; z-index: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, width 0.35s cubic-bezier(0.25, 1, 0.5, 1); } /* No transition on first load (set via JS) */ .nav-pill-slider.no-transition { transition: none !important; } /* (pill-hidden rimosso dal nav-pill-slider — non serve più, il pill resta sempre visibile) */ /* Nav tab icon bounce on click */ @keyframes tabIconBounce { 0% { transform: scale(0.85); } 50% { transform: scale(1.22); } 75% { transform: scale(1.12); } 100% { transform: scale(1.18); } } /* ---- OSS Section titles — blue icon ---- */ .oss-page .section-title i, .oss-page .top-bar-greeting i { color: var(--oss-blue); } /* ---- OSS Neon QR Button (Anna-style, blue) ---- */ .oss-qr-neon-btn { width: 56px !important; height: 56px !important; background-color: var(--oss-grey-glass-bg) !important; backdrop-filter: var(--oss-grey-glass-blur) !important; -webkit-backdrop-filter: var(--oss-grey-glass-blur) !important; border: none !important; box-shadow: var(--oss-grey-glass-shadow) !important; animation: qrNeonPulseBlue 2.5s ease-in-out infinite; color: var(--oss-blue) !important; font-size: 1.3rem !important; } .oss-qr-neon-btn i { color: var(--oss-blue) !important; } @keyframes qrNeonPulseBlue { 0%, 100% { box-shadow: 0 0 10px rgba(59,130,246,0.3), 0 0 24px rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.4); } 50% { box-shadow: 0 0 16px rgba(59,130,246,0.55), 0 0 36px rgba(59,130,246,0.22); border-color: rgba(59,130,246,0.6); } } .oss-page.dark-mode .oss-qr-neon-btn { background: rgba(59,130,246,0.15) !important; } /* ---- OSS Scan Page — blue crosshair ---- */ .oss-scan .scan-crosshair { border-color: var(--oss-blue); } .oss-scan .scan-crosshair::before { background: linear-gradient(180deg, transparent 0%, var(--oss-blue) 50%, transparent 100%); } /* ---- OSS Ready List — blue accents ---- */ .oss-page .btn-action.btn-blue { background: linear-gradient(135deg, var(--oss-blue-light), var(--oss-blue)); color: #fff; border: none; box-shadow: 0 4px 0 var(--oss-blue-dark), 0 6px 16px rgba(59,130,246,0.3); border-radius: 12px; font-weight: 700; font-family: 'Nunito', sans-serif; transition: transform 0.1s, box-shadow 0.1s; } .oss-page .btn-action.btn-blue:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--oss-blue-dark); } /* ---- OSS Empty State ---- */ .oss-page .empty-state i { color: var(--oss-blue); opacity: 0.4; } .oss-page .empty-state h3 { font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--oss-text-dark); } .oss-page .empty-state p { color: var(--oss-text-muted); } /* ---- OSS Icon Button (glass) ---- */ .oss-page .icon-btn { position: relative; width: 48px; height: 48px; border-radius: 50%; background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); color: var(--oss-text-dark); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, box-shadow 0.3s; } .oss-page .icon-btn:active { transform: scale(0.88); } .oss-page .icon-btn i { font-size: 1.15rem; } /* ---- OSS Profile Page (matching mobile-sereni prof- pattern) ---- */ .oss-page .prof-top { padding: 18px 20px 6px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .oss-page .prof-top h1 { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--oss-text-dark); } .prof-content { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 16px 18px 120px; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; } .prof-content::-webkit-scrollbar { display: none; } .prof-card { background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); border-radius: 22px; padding: 20px; display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .prof-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 28px; color: #fff; } .prof-info h2 { font-family: 'Nunito', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--oss-text-dark); margin: 0; } .prof-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; margin-top: 6px; } .prof-list { background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); border-radius: 22px; overflow: hidden; flex-shrink: 0; } .prof-row { display: flex; align-items: center; gap: 14px; padding: 22px 22px; border-bottom: 1px solid rgba(0,0,0,0.04); } .prof-row:last-child { border-bottom: none; } .prof-row .row-icon { width: 24px; text-align: center; color: var(--oss-blue); font-size: 1.15rem; flex-shrink: 0; } .prof-row .row-label { font-size: 0.95rem; color: var(--oss-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; min-width: 70px; } .prof-row .row-value { flex: 1; font-size: 0.95rem; font-weight: 700; color: var(--oss-text-dark); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prof-logout-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(231, 76, 60, 0.1); border: 1px solid rgba(231, 76, 60, 0.18); color: #C0392B; font-size: 1.05rem; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s; cursor: pointer; } .prof-logout-btn:active { transform: scale(0.88); } /* ---- Profile Big Action Buttons (like OSS action cards) ---- */ .prof-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border: none; border-radius: 16px; font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 800; cursor: pointer; text-decoration: none; min-height: 52px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s; position: relative; overflow: hidden; } .prof-action-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0)); pointer-events: none; border-radius: 16px 16px 0 0; } .prof-action-btn:active { transform: scale(0.93); } .prof-btn-home { background: linear-gradient(145deg, rgba(96,165,250,0.95), rgba(59,130,246,0.97) 50%, rgba(37,99,235,0.95)); color: #fff; box-shadow: 0 4px 16px rgba(59,130,246,0.3), inset 0 1px 0 rgba(255,255,255,0.2); } .kitchen-page .prof-btn-home { background: linear-gradient(145deg, #F87171, #EF4444 50%, #DC2626); box-shadow: 0 4px 16px rgba(239,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.2); } .prof-btn-logout { background: rgba(231, 76, 60, 0.08); border: 1px solid rgba(231, 76, 60, 0.15); color: #C0392B; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* Kitchen-page profile overrides */ .kitchen-page .prof-top { display: flex; align-items: center; justify-content: space-between; padding: 28px 18px 10px; } .kitchen-page .prof-content { padding: 24px 18px 40px; gap: 24px; } .kitchen-page .prof-top h1 { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--kds-text-dark); } .kitchen-page .prof-top .icon-btn-logout { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15); color: #DC2626; } .kitchen-page .prof-top .icon-btn-logout:active { background: rgba(239,68,68,0.15); } .kitchen-page .prof-card { background: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; border: none !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04); } .kitchen-page .prof-avatar { background: linear-gradient(135deg, #F87171, #EF4444) !important; } .kitchen-page .prof-badge { background: rgba(239,68,68,0.12) !important; color: var(--kds-red) !important; } .kitchen-page .prof-list { background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04) !important; } .kitchen-page .prof-row .row-icon { color: var(--kds-red); } /* ---- Dark Mode Toggle (matching mobile-sereni) ---- */ .dark-mode-toggle { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; background: none; border: none; border-bottom: 1px solid rgba(0,0,0,0.04); cursor: pointer; font-family: 'Nunito', sans-serif; transition: background 0.15s; } .dark-mode-toggle:active { background: rgba(0,0,0,0.03); } .dark-mode-toggle .toggle-icon { width: 24px; text-align: center; color: var(--oss-blue); font-size: 1.15rem; flex-shrink: 0; } .dark-mode-toggle .toggle-label { flex: 1; font-size: 1.05rem; font-weight: 700; color: var(--oss-text-dark); text-align: left; } .dark-mode-toggle .toggle-switch { width: 50px; height: 28px; border-radius: 14px; background: rgba(0,0,0,0.12); position: relative; flex-shrink: 0; transition: background 0.3s; border: none; } .dark-mode-toggle .toggle-switch::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 6px rgba(0,0,0,0.2); } .dark-mode-toggle.active .toggle-switch { background: var(--oss-blue); } .dark-mode-toggle.active .toggle-switch::after { transform: translateX(22px); } /* ---- OSS Scan Page — Full Restyle (matching Anna QR overlay) ---- */ .oss-scan { background: #f5f5f5 !important; } /* Bottom bar azzurrina anche nella scan page */ .oss-scan .bottom-nav { background: rgba(59, 130, 246, 0.10) !important; backdrop-filter: blur(20px) saturate(1.4) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4) !important; border: 1px solid rgba(59, 130, 246, 0.15) !important; } .oss-scan .app-container { padding-bottom: 0 !important; } .oss-scan .scan-page { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #f5f5f5 !important; } .oss-scan .scan-header { display: flex; align-items: center; gap: 14px; padding: 60px 20px 16px; background: transparent !important; flex-shrink: 0; } .oss-scan .scan-header .scan-back-btn { width: 44px; height: 44px; border-radius: 50%; background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); color: var(--oss-scan-text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration: none; } .oss-scan .scan-header .scan-back-btn:active { transform: scale(0.88); } .oss-scan .scan-title { color: var(--oss-scan-text); font-size: 1.3rem; font-weight: 800; font-family: 'Nunito', sans-serif; letter-spacing: -0.01em; flex: 1; } .oss-scan .scan-viewport { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 20px 20px 100px; } .oss-scan .scan-viewfinder { width: 320px; height: 320px; border-radius: 24px; position: relative; overflow: hidden; background: #e8e8e8; } .oss-scan .scan-viewfinder video { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; } /* Corner accents (blue for OSS) */ .oss-scan .scan-corner { position: absolute; width: 32px; height: 32px; z-index: 5; } .oss-scan .scan-corner::before, .oss-scan .scan-corner::after { content: ''; position: absolute; background: var(--oss-blue); border-radius: 2px; } .oss-scan .scan-corner::before { width: 32px; height: 3px; } .oss-scan .scan-corner::after { width: 3px; height: 32px; } .oss-scan .scan-corner.tl { top: 8px; left: 8px; } .oss-scan .scan-corner.tl::before { top: 0; left: 0; } .oss-scan .scan-corner.tl::after { top: 0; left: 0; } .oss-scan .scan-corner.tr { top: 8px; right: 8px; } .oss-scan .scan-corner.tr::before { top: 0; right: 0; } .oss-scan .scan-corner.tr::after { top: 0; right: 0; } .oss-scan .scan-corner.bl { bottom: 8px; left: 8px; } .oss-scan .scan-corner.bl::before { bottom: 0; left: 0; } .oss-scan .scan-corner.bl::after { bottom: 0; left: 0; } .oss-scan .scan-corner.br { bottom: 8px; right: 8px; } .oss-scan .scan-corner.br::before { bottom: 0; right: 0; } .oss-scan .scan-corner.br::after { bottom: 0; right: 0; } /* Animated scan line */ .oss-scan .scan-line { position: absolute; left: 10px; right: 10px; height: 2px; z-index: 6; background: linear-gradient(90deg, transparent 0%, var(--oss-blue) 25%, var(--oss-blue-light) 50%, var(--oss-blue) 75%, transparent 100%); box-shadow: 0 0 14px rgba(59,130,246,0.5); animation: ossScanMove 2.4s ease-in-out infinite; } @keyframes ossScanMove { 0% { top: 10px; } 50% { top: calc(100% - 12px); } 100% { top: 10px; } } .oss-scan .scan-hint { position: static; font-size: 1.2rem; font-weight: 800; color: var(--oss-text-dark); font-family: 'Nunito', sans-serif; text-align: center; letter-spacing: -0.01em; padding: 0; } /* Scan result sheet */ .oss-scan .scan-result { background: rgba(255,255,255,0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 22px 22px 0 0; padding: 24px 20px; box-shadow: 0 -4px 24px rgba(0,0,0,0.1); } .oss-scan .scan-result .scan-action-btn { flex: 1; padding: 15px; border-radius: 14px; border: none; font-size: 15px; font-weight: 700; font-family: 'Nunito', sans-serif; cursor: pointer; text-align: center; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .oss-scan .scan-result .scan-action-btn:active { transform: scale(0.95); } .oss-scan .scan-result .scan-btn-delivered { background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 60%, #2563EB 100%); color: #fff; box-shadow: 0 4px 18px rgba(59,130,246,0.35); } .oss-scan .scan-result .scan-btn-anomaly { background: rgba(0,0,0,0.06); color: var(--oss-scan-text); border: 1px solid rgba(0,0,0,0.1); } /* ---- Tablet Spacing (iPad Air 820px+) ---- */ @media (min-width: 768px) { /* Top bar */ .oss-page .top-bar { padding: 32px 36px 20px; } .oss-page .top-bar-greeting { font-size: 1.75rem; } .oss-page .top-bar-sub { font-size: 1.05rem; margin-top: 2px; } /* Counter card */ .oss-counter-wrap { padding: 0 36px; margin-bottom: 28px; } .oss-counter-card-blue { padding: 40px 36px; border-radius: 28px; } .oss-counter-card-blue .oss-counter-number { font-size: 4.5rem; } .oss-counter-card-blue .oss-counter-label { font-size: 1.15rem; } /* Action cards */ .oss-action-grid { gap: 20px; padding: 0 36px; margin-bottom: 32px; } .oss-action-card { border-radius: 26px; padding: 36px 24px; min-height: 170px; } .oss-action-card .oss-card-icon { width: 68px; height: 68px; font-size: 1.9rem; } .oss-action-card .oss-card-label { font-size: 1.2rem; } /* Sections */ .oss-page .section { padding: 0 36px; } .oss-page .section-title { font-size: 1.4rem; margin-bottom: 20px; } /* Cards — delivery, history, guests, ready-list */ .oss-page .delivery-item, .oss-page .history-item, .oss-page .guest-list-card, .oss-page .delivery-card { padding: 20px; border-radius: 22px; margin-bottom: 14px; } .oss-page .delivery-code, .oss-page .history-code, .oss-page .guest-card-name { font-size: 1.1rem; } .oss-page .delivery-meta, .oss-page .history-meta, .oss-page .guest-card-meta { font-size: 0.9rem; } .oss-page .delivery-buyer-name { font-size: 0.95rem; } /* Empty state */ .oss-page .empty-state { padding: 72px 0; } .oss-page .empty-state i { font-size: 4.5rem; } .oss-page .empty-state h3 { font-size: 1.5rem; margin: 18px 0 10px; } .oss-page .empty-state p { font-size: 1.1rem; } /* Scroll content */ .oss-home-scroll { padding-bottom: 48px; } /* Icon buttons */ .oss-page .icon-btn { width: 52px; height: 52px; } .oss-page .icon-btn i { font-size: 1.25rem; } /* Profile */ .oss-page .prof-top { padding: 28px 32px 10px; } .oss-page .prof-top h1 { font-size: 1.8rem; } .prof-content { padding: 20px 28px 40px; gap: 22px; } .prof-card { padding: 28px; gap: 24px; border-radius: 28px; } .prof-avatar { width: 88px; height: 88px; font-size: 34px; } .prof-info h2 { font-size: 1.55rem; } .prof-badge { font-size: 1rem; padding: 5px 14px; } .prof-list { border-radius: 28px; } .prof-row { padding: 22px 26px; } .prof-row .row-icon { font-size: 1.2rem; } .prof-row .row-label { font-size: 1rem; } .prof-row .row-value { font-size: 1rem; } .dark-mode-toggle { padding: 22px 26px; } .dark-mode-toggle .toggle-icon { font-size: 1.2rem; } .dark-mode-toggle .toggle-label { font-size: 1.1rem; } .dark-mode-toggle .toggle-switch { width: 54px; height: 30px; border-radius: 15px; } .dark-mode-toggle .toggle-switch::after { width: 24px; height: 24px; } .dark-mode-toggle.active .toggle-switch::after { transform: translateX(24px); } /* Bottom nav */ .oss-page .bottom-nav { height: 88px; } .oss-page .nav-tab i { font-size: 1.5rem; } .oss-page .nav-tab-label { font-size: 0.78rem; } .nav-pill-slider { top: 10px; height: calc(100% - 20px - env(safe-area-inset-bottom, 0px)); border-radius: 9999px; } /* Scan page */ .oss-scan .scan-header { padding: 60px 28px 16px; } .oss-scan .scan-viewfinder { width: 420px; height: 420px; border-radius: 28px; } .oss-scan .scan-viewfinder video { border-radius: 28px; } .oss-scan .scan-title { font-size: 1.55rem; } .oss-scan .scan-hint { font-size: 1.2rem; } .oss-scan .scan-result { padding: 28px 24px; border-radius: 26px 26px 0 0; } .oss-scan .scan-result .scan-action-btn { padding: 18px; font-size: 1rem; border-radius: 16px; } /* Comanda */ .oss-page .comanda-header { margin-bottom: 22px; } .oss-page .comanda-section { margin-bottom: 22px; } .oss-page .comanda-section-title { font-size: 1.15rem; } /* Ready list */ .oss-page .delivery-order-code { font-size: 1.15rem; } .oss-page .btn-deliver, .oss-page .btn-anomaly { padding: 14px 20px; font-size: 0.95rem; border-radius: 14px; } .oss-page .delivery-location { font-size: 0.95rem; } /* Guest list */ .oss-page .guest-card-info { gap: 4px; } .oss-page .guest-avatar { width: 48px; height: 48px; font-size: 1.15rem; } } /* ---- Notification Badge ---- */ .oss-page .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: #E74C3C; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 5px; line-height: 1; pointer-events: none; border: 2px solid #EBF2FB; } .oss-page .notif-badge.hidden { display: none; } .oss-page.dark-mode .notif-badge { border-color: #000; } /* ---- Overlay Panels (Guide & Notifications) ---- */ .sereni-overlay { position: fixed; inset: 0; z-index: 200; background: linear-gradient(175deg, #F5F8FC 0%, #EBF2FB 60%, #DAEAF8 100%); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0.24, 1.02); display: flex; flex-direction: column; overflow: hidden; font-family: 'Nunito', sans-serif; } .sereni-overlay.visible { transform: translateX(0); } .sereni-overlay-header { padding: 18px 20px 14px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,0.05); } .sereni-overlay-back { width: 44px; height: 44px; border-radius: 50%; background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--oss-text-dark); font-size: 1.1rem; -webkit-tap-highlight-color: transparent; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .sereni-overlay-back:active { transform: scale(0.88); } .sereni-overlay-title { font-family: 'Nunito', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--oss-text-dark); } .sereni-overlay-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 22px calc(40px + env(safe-area-inset-bottom, 0px)); padding-bottom: max(80px, calc(40px + env(safe-area-inset-bottom, 0px))); } /* Guide sections */ .guide-section { margin-bottom: 24px; } .guide-section h3 { font-size: 1.15rem; font-weight: 800; color: var(--oss-blue); margin-bottom: 10px; } .guide-section p { font-size: 1.05rem; line-height: 1.55; color: var(--oss-text-dark); font-weight: 500; } .guide-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 16px; margin-bottom: 10px; background: rgba(74, 144, 217, 0.06); } .guide-step-num { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--oss-blue); color: #fff; font-size: 0.9rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .guide-step-text { flex: 1; font-size: 1.05rem; line-height: 1.5; color: var(--oss-text-dark); font-weight: 500; } .guide-step-text strong { font-weight: 800; } .oss-tour-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; border-radius: 16px; background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 60%, #2563EB 100%); color: #fff; border: none; font-size: 1.05rem; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; box-shadow: 0 6px 24px rgba(59,130,246,0.3), inset 0 1px 0 rgba(255,255,255,0.3); -webkit-tap-highlight-color: transparent; transition: transform 0.2s; } .oss-tour-btn:active { transform: scale(0.95); } /* Notification items — glass grigio (stile cuoco header) */ .notif-ov-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px; margin-bottom: 8px; background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); border-left: 3.5px solid var(--oss-blue); transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .notif-ov-item.notif-read { opacity: 0.45; background: rgba(0,0,0,0.02); border-left-color: rgba(59,130,246,0.15); } .notif-ov-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .notif-ov-body { flex: 1; } .notif-ov-body h4 { font-size: 1.15rem; font-weight: 700; color: var(--oss-text-dark); margin: 0 0 3px; } .notif-ov-body p { font-size: 1.12rem; color: var(--oss-text-secondary); font-weight: 500; margin: 0; line-height: 1.5; } .notif-ov-time { font-size: 0.95rem; color: var(--oss-text-muted); font-weight: 600; margin-top: 6px; } .notif-mark-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); color: #aaa; font-size: 14px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: all 0.3s; } .oss-mark-all-btn { padding: 10px 18px; border-radius: 20px; background-color: var(--oss-grey-glass-bg); backdrop-filter: var(--oss-grey-glass-blur); -webkit-backdrop-filter: var(--oss-grey-glass-blur); border: none; box-shadow: var(--oss-grey-glass-shadow); color: var(--oss-blue); font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: 'Nunito', sans-serif; } /* Tour overlay */ .tour-overlay { position: fixed; inset: 0; z-index: 300; display: none; pointer-events: none; } .tour-overlay.visible { display: block; pointer-events: auto; } .tour-spotlight { position: absolute; border-radius: 16px; background: rgba(255,255,255,0.15); box-shadow: 0 0 0 9999px rgba(0,0,0,0.7), 0 0 20px rgba(255,255,255,0.3) inset; border: 2px solid rgba(255,255,255,0.5); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1; pointer-events: none; } .tour-tooltip { position: absolute; z-index: 2; background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); max-width: 340px; left: 50%; transform: translateX(-50%); animation: tourPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); font-family: 'Nunito', sans-serif; } @keyframes tourPop { from { opacity: 0; transform: translateX(-50%) scale(0.9); } to { opacity: 1; transform: translateX(-50%) scale(1); } } .tour-tooltip-text { font-size: 1.05rem; line-height: 1.5; color: var(--oss-text-dark); font-weight: 600; margin-bottom: 14px; } .tour-tooltip-footer { display: flex; align-items: center; justify-content: space-between; } .tour-counter { font-size: 0.85rem; color: var(--oss-text-muted); font-weight: 700; } .tour-next-btn { padding: 10px 22px; background: var(--oss-blue); color: #fff; border: none; border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; -webkit-tap-highlight-color: transparent; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .tour-next-btn:active { transform: scale(0.92); } /* Tablet overlay sizes */ @media (min-width: 768px) { .sereni-overlay-header { padding: 24px 28px 18px; } .sereni-overlay-title { font-size: 1.55rem; } .sereni-overlay-scroll { padding: 24px 28px 80px; } .guide-section h3 { font-size: 1.3rem; } .guide-section p { font-size: 1.1rem; } .guide-step { padding: 18px; border-radius: 18px; margin-bottom: 12px; } .guide-step-num { width: 36px; height: 36px; font-size: 1rem; } .guide-step-text { font-size: 1.1rem; } .notif-ov-item { padding: 18px; border-radius: 18px; margin-bottom: 10px; } .notif-ov-body h4 { font-size: 1.25rem; } .notif-ov-body p { font-size: 1.2rem; } .notif-ov-time { font-size: 1rem; } .tour-tooltip { max-width: 400px; padding: 22px 24px; } .tour-tooltip-text { font-size: 1.1rem; } } /* ============================================================ OSS DARK MODE ============================================================ */ .oss-page.dark-mode { background: #000000 !important; color: #F5F5F7; --oss-text-dark: #F5F5F7; --oss-text-secondary: #98989D; --oss-text-muted: #636366; --oss-glass-bg: rgba(255,255,255,0.05); --oss-glass-bg-specular: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%); --oss-glass-border: rgba(255,255,255,0.08); --oss-glass-shadow: 0 2px 16px rgba(0,0,0,0.6), inset 0 0.5px 0 rgba(255,255,255,0.04); --oss-glass-blur: blur(20px) saturate(1.3); --oss-scan-bg: #0a0a0a; --oss-scan-text: #F5F5F7; /* Dark mode grey glass override */ --oss-grey-glass-bg: color-mix(in srgb, #555 12%, transparent); --oss-grey-glass-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 15%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 10%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 8%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 20%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 30%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.2); } /* Dark: search trigger ospiti (override inline style del button) */ .oss-page.dark-mode #ossSearchTrigger { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #98989D !important; box-shadow: none !important; } /* Dark: bottom nav */ .oss-page.dark-mode .bottom-nav { background-color: color-mix(in srgb, #555 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border-top-color: rgba(255,255,255,0.06); } .oss-page.dark-mode .nav-tab { color: #8e8e93; } .oss-page.dark-mode .nav-tab.active { color: var(--oss-blue-light); } .oss-page.dark-mode .nav-tab.active i { color: var(--oss-blue-light); } .oss-page.dark-mode .nav-pill-slider { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.04); box-shadow: none; } /* Dark: icon buttons */ .oss-page.dark-mode .icon-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); color: #F5F5F7; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } /* Dark: counter card */ .oss-page.dark-mode .oss-counter-card-blue { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.2); box-shadow: 0 2px 16px rgba(0,0,0,0.4); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); } /* Dark: action cards (keep colors vivid) */ .oss-page.dark-mode .oss-action-card::before { background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%); } /* Dark: glass cards */ .oss-page.dark-mode .delivery-item, .oss-page.dark-mode .history-item, .oss-page.dark-mode .guest-list-card, .oss-page.dark-mode .delivery-card, .oss-page.dark-mode .card { background: #1C1C1E !important; border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.4), inset 0 0.5px 0 rgba(255,255,255,0.04) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Dark: section titles */ .oss-page.dark-mode .section-title { color: #F5F5F7; } .oss-page.dark-mode .section-title i { color: var(--oss-blue-light); } .oss-page.dark-mode .top-bar-greeting { color: #F5F5F7; } .oss-page.dark-mode .top-bar-greeting i { color: var(--oss-blue-light); } .oss-page.dark-mode .top-bar-sub { color: #98989D; } /* Dark: glass buttons */ .oss-page.dark-mode .btn-deliver { background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 60%, #2563EB 100%); box-shadow: 0 4px 18px rgba(59,130,246,0.35); } .oss-page.dark-mode .btn-anomaly { background: rgba(255,255,255,0.06); backdrop-filter: none; border-color: rgba(255,255,255,0.1); color: #F5F5F7; } .oss-page.dark-mode .delivery-order-code { color: #F5F5F7; } .oss-page.dark-mode .delivery-buyer-name { color: #98989D; } .oss-page.dark-mode .delivery-location { color: #636366; } /* Dark: glass comanda */ .oss-page.dark-mode .comanda-lot-card { background: #1C1C1E; border-color: rgba(255,255,255,0.08); backdrop-filter: none; box-shadow: 0 2px 12px rgba(0,0,0,0.4); } .oss-page.dark-mode .comanda-item { background: #1C1C1E; border-color: rgba(255,255,255,0.06); backdrop-filter: none; box-shadow: 0 2px 12px rgba(0,0,0,0.4); } .oss-page.dark-mode .comanda-header { background: #1C1C1E !important; border-color: rgba(255,255,255,0.06) !important; backdrop-filter: none !important; box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important; } .oss-page.dark-mode .comanda-notes { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #F5F5F7; } .oss-page.dark-mode .btn-cancel-order { background: rgba(231,76,60,0.12); border-color: rgba(231,76,60,0.2); color: #E74C3C; } /* Dark: delivery/history text */ .oss-page.dark-mode .delivery-code, .oss-page.dark-mode .history-code, .oss-page.dark-mode .guest-card-name { color: #F5F5F7; } .oss-page.dark-mode .delivery-meta, .oss-page.dark-mode .history-meta, .oss-page.dark-mode .guest-card-meta { color: #98989D; } .oss-page.dark-mode .delivery-buyer-name { color: #98989D; } /* Dark: empty state */ .oss-page.dark-mode .empty-state h3 { color: #F5F5F7; } .oss-page.dark-mode .empty-state p { color: #636366; } /* Dark: profile page */ .oss-page.dark-mode .profile-page { background: #000000 !important; } .oss-page.dark-mode .prof-top h1 { color: #F5F5F7; } .oss-page.dark-mode .prof-card { background: #1C1C1E !important; border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .oss-page.dark-mode .prof-info h2 { color: #F5F5F7; } .oss-page.dark-mode .prof-badge { background: rgba(59,130,246,0.2) !important; color: var(--oss-blue-light) !important; } .oss-page.dark-mode .prof-list { background: #1C1C1E !important; border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important; } .oss-page.dark-mode .prof-row { border-bottom-color: rgba(255,255,255,0.05); } .oss-page.dark-mode .prof-row .row-icon { color: var(--oss-blue-light); } .oss-page.dark-mode .prof-row .row-label { color: #636366; } .oss-page.dark-mode .prof-row .row-value { color: #F5F5F7; } .oss-page.dark-mode .prof-logout-btn { background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.25); color: #E74C3C; } /* Dark: toggle */ .oss-page.dark-mode .dark-mode-toggle { border-bottom-color: rgba(255,255,255,0.05); } .oss-page.dark-mode .dark-mode-toggle:active { background: rgba(255,255,255,0.04); } .oss-page.dark-mode .dark-mode-toggle .toggle-icon { color: #FFD60A; } .oss-page.dark-mode .dark-mode-toggle .toggle-label { color: #F5F5F7; } .oss-page.dark-mode .dark-mode-toggle .toggle-switch { background: rgba(255,255,255,0.1); } /* Dark: scan page */ .oss-page.dark-mode.oss-scan { background: #0a0a0a !important; } .oss-page.dark-mode .scan-header .scan-back-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); color: #fff; } .oss-page.dark-mode .scan-title { color: #fff; } .oss-page.dark-mode .scan-viewfinder { background: #1a1a1a; } .oss-page.dark-mode .scan-hint { color: #98989D; } .oss-page.dark-mode .scan-result { background: rgba(10,10,10,0.96); box-shadow: 0 -4px 24px rgba(0,0,0,0.5); } .oss-page.dark-mode .scan-result .scan-btn-anomaly { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.15); } .oss-page.dark-mode .scan-result-info .code { color: #F5F5F7; } .oss-page.dark-mode .scan-result-info .label { color: #98989D; } /* Dark: ready list */ .oss-page.dark-mode .btn-deliver { background: var(--oss-blue); color: #fff; } .oss-page.dark-mode .btn-anomaly { background: rgba(255,255,255,0.08); color: #F5F5F7; border-color: rgba(255,255,255,0.12); } /* Dark: comanda */ .oss-page.dark-mode .comanda-header { background: #1C1C1E; border-color: rgba(255,255,255,0.06); } .oss-page.dark-mode .comanda-guest-name { color: #F5F5F7; } .oss-page.dark-mode .comanda-guest-meta { color: #98989D; } .oss-page.dark-mode .comanda-alert-danger { background: rgba(231,76,60,0.15) !important; color: #F87171 !important; border-color: rgba(231,76,60,0.25) !important; } .oss-page.dark-mode .comanda-alert-warning { background: rgba(245,158,11,0.12) !important; color: #FCD34D !important; border-color: rgba(245,158,11,0.2) !important; } .oss-page.dark-mode .comanda-section { background: #1C1C1E !important; border-color: rgba(255,255,255,0.06) !important; backdrop-filter: none !important; box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important; } .oss-page.dark-mode .comanda-section-title { color: #98989D; } .oss-page.dark-mode .comanda-required { background: rgba(59,130,246,0.2) !important; } .oss-page.dark-mode .comanda-optional { background: rgba(255,255,255,0.06) !important; color: #636366 !important; } .oss-page.dark-mode .comanda-lot-card { background: #1C1C1E; border-color: rgba(255,255,255,0.08); } .oss-page.dark-mode .comanda-lot-card.selected { border-color: var(--oss-blue); } .oss-page.dark-mode .comanda-lot-name { color: #F5F5F7; } .oss-page.dark-mode .comanda-lot-date { color: #98989D; } .oss-page.dark-mode .comanda-item { background: #1C1C1E; border-color: rgba(255,255,255,0.06); } .oss-page.dark-mode .comanda-item.selected { border-color: var(--oss-blue); background: rgba(59,130,246,0.12); } .oss-page.dark-mode .comanda-item-name { color: #F5F5F7; } .oss-page.dark-mode .comanda-item-desc { color: #636366; } .oss-page.dark-mode .comanda-notes { background: #1C1C1E; color: #F5F5F7; border-color: rgba(255,255,255,0.08); } .oss-page.dark-mode .btn-confirm-comanda { background: var(--oss-blue); } /* Dark: guest avatars & list */ .oss-page.dark-mode .guest-avatar { opacity: 0.9; } .oss-page.dark-mode .guest-card-tex { color: #98989D; } .oss-page.dark-mode .guest-card-right .fa-chevron-right { color: var(--oss-blue-light) !important; } /* Dark: ready-list buttons */ .oss-page.dark-mode .delivery-card { color: #F5F5F7; } .oss-page.dark-mode .delivery-order-code { color: #F5F5F7; } .oss-page.dark-mode .delivery-location { color: #98989D; } .oss-page.dark-mode .btn-deliver { background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 60%, #2563EB 100%); color: #fff; box-shadow: 0 4px 18px rgba(59,130,246,0.35); } .oss-page.dark-mode .btn-anomaly { background: rgba(255,255,255,0.06); color: #F5F5F7; border-color: rgba(255,255,255,0.1); } /* Dark: delivery time text */ .oss-page.dark-mode .history-time { color: #636366; } /* Dark: action cards dark mode shadow boost */ .oss-page.dark-mode .oss-card-scan { box-shadow: 0 6px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15); } .oss-page.dark-mode .oss-card-list { box-shadow: 0 6px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15); } /* Dark: counter card check-done */ .oss-page.dark-mode .oss-check-done { color: #27AE60; } /* Dark: allergy alert card border */ .oss-page.dark-mode .delivery-card.allergy-alert { border-color: rgba(231,76,60,0.3); } /* Dark: scan page torch/back button */ .oss-page.dark-mode .scan-header .icon-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); color: #F5F5F7; } /* Dark: override inline muted colors (#95A5A6) used in templates */ .oss-page.dark-mode [style*="color:#95A5A6"], .oss-page.dark-mode [style*="color: #95A5A6"] { color: #636366 !important; } .oss-page.dark-mode [style*="color:var(--text-muted)"] { color: #636366 !important; } /* Dark: comanda back arrow */ .oss-page.dark-mode .top-bar-left a[href] { color: #98989D !important; } /* Dark: overlays (guide, notifications) */ .oss-page.dark-mode .sereni-overlay { background: #000000 !important; } .oss-page.dark-mode .sereni-overlay-header { border-bottom-color: rgba(255,255,255,0.06); } .oss-page.dark-mode .sereni-overlay-back { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); color: #F5F5F7; } .oss-page.dark-mode .sereni-overlay-title { color: #F5F5F7; } .oss-page.dark-mode .guide-section h3 { color: var(--oss-blue-light); } .oss-page.dark-mode .guide-section p { color: #F5F5F7; } .oss-page.dark-mode .guide-step { background: rgba(59,130,246,0.08); } .oss-page.dark-mode .guide-step-text { color: #F5F5F7; } .oss-page.dark-mode .notif-ov-item { background: #1C1C1E; border-color: rgba(255,255,255,0.06); border-left-color: var(--oss-blue-light); } .oss-page.dark-mode .notif-ov-item.notif-read { background: rgba(255,255,255,0.03); border-left-color: transparent; } .oss-page.dark-mode .notif-ov-body h4 { color: #F5F5F7; } .oss-page.dark-mode .notif-ov-body p { color: #98989D; } .oss-page.dark-mode .notif-ov-time { color: #636366; } .oss-page.dark-mode .notif-mark-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #636366; } .oss-page.dark-mode .oss-mark-all-btn { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.25); color: var(--oss-blue-light); } .oss-page.dark-mode .tour-tooltip { background: #1C1C1E; } .oss-page.dark-mode .tour-tooltip-text { color: #F5F5F7; } .oss-page.dark-mode .tour-counter { color: #636366; } /* ============================================================ KITCHEN PAGE — Red Glass Theme (iPad Air 820×1180) Compact 2-row header for maximum content area ============================================================ */ /* Kitchen Red Variables */ .kitchen-page { --kds-red: #EF4444; --kds-red-light: #F87171; --kds-red-dark: #DC2626; --kds-red-deeper: #B91C1C; --kds-red-bg: #F2F2F7; --kds-glass-bg: rgba(255, 255, 255, 0.12); --kds-glass-bg-solid: rgba(255, 255, 255, 0.55); --kds-glass-bg-specular: rgba(255, 255, 255, 0.10); --kds-glass-border: rgba(255, 255, 255, 0.18); --kds-glass-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 0.5px 0 rgba(255,255,255,0.25); --kds-glass-blur: blur(20px) saturate(180%) brightness(105%); --kds-text-dark: #1a2a3a; --kds-text-secondary: #4a6178; --kds-text-muted: #7a8fa3; } html:has(.kitchen-page) { background: #f5f5f5; } .kitchen-page { background: #f5f5f5; font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; height: 100vh; overflow: hidden; } .kitchen-page .kds-wrapper { height: 100vh; display: flex; flex-direction: column; overflow: hidden; opacity: 0; transition: opacity 0.25s ease-out; } .kitchen-page .kds-wrapper.visible { opacity: 1; } .kitchen-page .kds-wrapper.fade-out { opacity: 0 !important; transition: opacity 0.2s ease-out !important; } /* Kitchen profile fade */ .kitchen-page .profile-page { opacity: 0; transition: opacity 0.25s ease-out; } .kitchen-page .profile-page.visible { opacity: 1; } .kitchen-page .profile-page.fade-out { opacity: 0 !important; transition: opacity 0.2s ease-out !important; } /* ============================================================ HACCP PAGES — Glass styling (cuoco) ============================================================ */ /* Header — glass fluttuante staccato */ .kitchen-page .haccp-header, .kitchen-page .chk-header { background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; border: none !important; border-bottom: none !important; border-radius: 18px !important; margin: 12px 12px 0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent) !important; position: sticky; top: 8px; z-index: 50; } /* ---- HACCP Glass Mixin (tutte le card/righe/form) ---- */ .kitchen-page .haccp-asset-row, .kitchen-page .haccp-struct-pick, .kitchen-page .haccp-tabs, .kitchen-page .haccp-shift-picker, .kitchen-page .haccp-form-card, .kitchen-page .haccp-lot-row, .kitchen-page .haccp-filter-bar input, .kitchen-page .haccp-filter-bar select, .kitchen-page .haccp-area-group, .kitchen-page .haccp-instance, .kitchen-page .haccp-task-row, .kitchen-page .haccp-empty, .kitchen-page .chk-progress-bar, .kitchen-page .chk-category, .kitchen-page .chk-readonly-banner { background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; border: none !important; border-radius: 18px !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent) !important; } /* Tabs/Shift picker — identico ai filtri home (kds-pill-group) */ .kitchen-page .haccp-tabs, .kitchen-page .haccp-shift-picker { position: relative; padding: 3px !important; gap: 0 !important; } .kitchen-page .haccp-tab, .kitchen-page .haccp-shift-btn { position: relative; z-index: 1; border-radius: 13px !important; background: transparent !important; font-size: 0.8rem; font-weight: 700; font-family: 'Nunito', sans-serif; color: var(--kds-text-secondary, #7F8C8D) !important; cursor: pointer; white-space: nowrap; transition: color 0.25s !important; min-height: 44px; } .kitchen-page .haccp-tab.active, .kitchen-page .haccp-shift-btn.active { background: transparent !important; color: white !important; box-shadow: none !important; } /* Form fields glass */ .kitchen-page .haccp-form-field input, .kitchen-page .haccp-form-field select, .kitchen-page .haccp-form-field textarea, .kitchen-page .chk-num-input, .kitchen-page .chk-text-area { background-color: color-mix(in srgb, #bbbbbc 8%, transparent) !important; border: 1px solid color-mix(in srgb, #fff 20%, transparent) !important; border-radius: 14px !important; } .kitchen-page .haccp-form-field input:focus, .kitchen-page .haccp-form-field select:focus, .kitchen-page .chk-num-input:focus, .kitchen-page .chk-text-area:focus { border-color: var(--haccp-orange, #E67E22) !important; } /* Select dropdown — freccetta staccata dal bordo destro */ .kitchen-page .haccp-struct-pick select, .kitchen-page .haccp-form-field select, .kitchen-page .haccp-filter-bar select { padding-right: 12px !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237F8C8D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 7px !important; padding-right: 32px !important; } /* Submit button — arancione come home (#F59E0B) */ .kitchen-page .haccp-btn-primary { background: #F59E0B !important; border-radius: 14px !important; box-shadow: 0 4px 16px rgba(245,158,11,0.4) !important; color: white !important; } .kitchen-page .haccp-btn-primary:active { transform: scale(0.97); } /* Back button glass nelle sezioni HACCP */ .kitchen-page .haccp-header a.back, .kitchen-page .chk-header a.back { width: 44px; height: 44px; border-radius: 50%; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none; text-decoration: none; padding: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent); display: inline-flex; align-items: center; justify-content: center; } .kitchen-page .haccp-header a.back:active, .kitchen-page .chk-header a.back:active { transform: scale(0.92); } /* Refresh button sanificazione — cerchio glass */ .kitchen-page .haccp-header .refresh-btn { width: 44px; height: 44px; border-radius: 50% !important; background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; border: none !important; padding: 0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .kitchen-page .haccp-header .refresh-btn:active { transform: scale(0.92); } /* Voice button header — stessa forma glass */ .kitchen-page .haccp-header .voice-btn { width: 44px; height: 44px; border-radius: 50% !important; background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; border: none !important; } /* Touch feedback HACCP */ .kitchen-page .haccp-asset-row:active, .kitchen-page .haccp-lot-row:active, .kitchen-page .haccp-tab:active, .kitchen-page .haccp-shift-btn:active, .kitchen-page .haccp-task-row:active, .kitchen-page .haccp-instance:active, .kitchen-page .chk-category-header:active { transform: scale(0.97) !important; transition: transform 0.08s ease-out !important; } /* Background pagine HACCP = stesso del cuoco */ .kitchen-page .haccp-container, .kitchen-page .chk-container { background: transparent; } /* Sezioni interne cuoco: scroll naturale (override kitchen-page height:100vh/overflow:hidden) */ html:has(.haccp-header), html:has(.haccp-header) body, html:has(.chk-header), html:has(.chk-header) body, html:has(.cmp-header), html:has(.cmp-header) body { height: auto !important; min-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; } body.kitchen-page:has(.haccp-header), body.kitchen-page:has(.chk-header), body.kitchen-page:has(.cmp-header) { height: auto !important; overflow: visible !important; overflow-y: auto !important; } /* Progress bar: stessa larghezza dell'header (margin 12px) */ .kitchen-page .chk-progress-bar { margin: 8px 12px 0 !important; position: sticky; top: 80px; z-index: 49; } /* Badge Bozza + contatore — centrati verticalmente */ .kitchen-page .chk-progress-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; } .kitchen-page .chk-progress-meta > span { display: inline-flex !important; align-items: center !important; } /* ============================================================ HACCP + COMPLIANCE — Font Size Boost (leggibilità cuoco) ============================================================ */ /* Header titoli */ .kitchen-page .haccp-header h1, .kitchen-page .chk-header h1, .kitchen-page .cmp-header h1 { font-size: 20px !important; font-weight: 800 !important; font-family: 'Nunito', sans-serif !important; } .kitchen-page .chk-header .sub, .kitchen-page .cmp-header .sub { font-size: 13px !important; } /* Sanitization date label */ .kitchen-page .haccp-header h1 small { font-size: 13px !important; } /* Card/row titoli e meta */ .kitchen-page .haccp-asset-row .name, .kitchen-page .haccp-lot-name, .kitchen-page .haccp-instance-title, .kitchen-page .haccp-area-name { font-size: 16px !important; font-weight: 700 !important; } .kitchen-page .haccp-asset-row .meta, .kitchen-page .haccp-lot-meta, .kitchen-page .haccp-instance-code { font-size: 13px !important; } .kitchen-page .haccp-asset-row .last { font-size: 16px !important; } /* Tab e shift labels */ .kitchen-page .haccp-tab, .kitchen-page .haccp-shift-btn { font-size: 14px !important; } /* Form labels e input */ .kitchen-page .haccp-form-field label { font-size: 13px !important; } .kitchen-page .haccp-form-field input, .kitchen-page .haccp-form-field select, .kitchen-page .haccp-form-field textarea { font-size: 16px !important; } .kitchen-page .haccp-checkbox-row label { font-size: 14px !important; } .kitchen-page .haccp-btn { font-size: 16px !important; } /* Filter bar (lotti) */ .kitchen-page .haccp-filter-bar input, .kitchen-page .haccp-filter-bar select { font-size: 15px !important; } /* Lot status badge */ .kitchen-page .haccp-lot-status { font-size: 13px !important; } /* Task rows (sanificazione) */ .kitchen-page .haccp-task-title { font-size: 15px !important; } .kitchen-page .haccp-task-desc { font-size: 13px !important; } .kitchen-page .haccp-task-meta { font-size: 12px !important; } .kitchen-page .haccp-badge { font-size: 12px !important; } /* Note modal text */ .kitchen-page .haccp-note-modal h2 { font-size: 18px !important; } .kitchen-page .haccp-note-modal textarea { font-size: 15px !important; } /* Checklist items */ .kitchen-page .chk-category-header { font-size: 16px !important; font-weight: 800 !important; } .kitchen-page .chk-category-header .cat-progress { font-size: 14px !important; } .kitchen-page .chk-item-label { font-size: 16px !important; } .kitchen-page .chk-item-desc { font-size: 13px !important; } .kitchen-page .chk-bool-label { font-size: 15px !important; } .kitchen-page .chk-num-input { font-size: 18px !important; } .kitchen-page .chk-num-unit { font-size: 15px !important; } .kitchen-page .chk-num-range { font-size: 13px !important; } .kitchen-page .chk-text-area { font-size: 15px !important; } .kitchen-page .chk-confirm-btn { font-size: 17px !important; } .kitchen-page .chk-progress-meta { font-size: 14px !important; } .kitchen-page .chk-status-badge { font-size: 13px !important; } /* Empty states */ .kitchen-page .haccp-empty { font-size: 15px !important; } /* Structure picker */ .kitchen-page .haccp-struct-pick select, .kitchen-page .haccp-struct-pick div { font-size: 16px !important; } /* ============================================================ COMPLIANCE — Glass morphism + Font boost ============================================================ */ /* Header glass */ .kitchen-page .cmp-header { background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; border: none !important; border-bottom: none !important; border-radius: 18px !important; margin: 12px 12px 0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent) !important; position: sticky; top: 8px; z-index: 50; } .kitchen-page .cmp-header a.back { width: 44px; height: 44px; border-radius: 50%; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none; text-decoration: none; padding: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent); display: inline-flex; align-items: center; justify-content: center; } .kitchen-page .cmp-header a.back:active { transform: scale(0.92); } /* Card ward glass */ .kitchen-page .cmp-ward, .kitchen-page .cmp-lock-banner, .kitchen-page .cmp-readonly-banner { background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; border: none !important; border-radius: 18px !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent) !important; } /* Preserve colored left border for compliance status */ .kitchen-page .cmp-ward.compliant { border-left: 4px solid var(--haccp-ok) !important; } .kitchen-page .cmp-ward.partial { border-left: 4px solid var(--haccp-danger) !important; } /* Compliance form inputs glass */ .kitchen-page .cmp-temp-input, .kitchen-page .cmp-notes-area { background-color: color-mix(in srgb, #bbbbbc 8%, transparent) !important; border: 1px solid color-mix(in srgb, #fff 20%, transparent) !important; border-radius: 14px !important; } .kitchen-page .cmp-temp-input:focus, .kitchen-page .cmp-notes-area:focus { border-color: var(--haccp-orange, #E67E22) !important; } /* Compliance footer glass */ .kitchen-page .cmp-footer { background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; border: none !important; border-top: none !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent) !important; } .kitchen-page .cmp-confirm-btn { background: #F59E0B !important; border-radius: 14px !important; box-shadow: 0 4px 16px rgba(245,158,11,0.4) !important; font-size: 16px !important; } .kitchen-page .cmp-confirm-btn:active { transform: scale(0.97); } /* Compliance container transparent */ .kitchen-page .cmp-container { background: transparent; } /* Compliance font boost */ .kitchen-page .cmp-ward > summary { font-size: 16px !important; font-weight: 800 !important; } .kitchen-page .cmp-ward .ward-meta { font-size: 13px !important; } .kitchen-page .cmp-ward .ward-status { font-size: 12px !important; } .kitchen-page .cmp-course-title { font-size: 16px !important; } .kitchen-page .cmp-course-count { font-size: 13px !important; } .kitchen-page .cmp-dish { font-size: 13px !important; } .kitchen-page .cmp-temp-input { font-size: 18px !important; } .kitchen-page .cmp-temp-unit { font-size: 15px !important; } .kitchen-page .cmp-temp-threshold { font-size: 13px !important; } .kitchen-page .cmp-visual-label { font-size: 14px !important; } .kitchen-page .cmp-notes-area { font-size: 14px !important; } .kitchen-page .cmp-footer-progress { font-size: 14px !important; } .kitchen-page .cmp-lock-banner, .kitchen-page .cmp-readonly-banner { font-size: 14px !important; } /* Touch feedback compliance */ .kitchen-page .cmp-ward > summary:active { transform: scale(0.97) !important; transition: transform 0.08s ease-out !important; } /* ---- ROW 1: Compact Top Bar (logo + date + clock + actions) ---- */ .kitchen-page .kds-topbar { display: flex; align-items: center; padding: calc(env(safe-area-inset-top, 14px) + 14px) 20px 14px; min-height: 76px; width: calc(100% - 24px); margin: 12px auto 0; box-sizing: border-box; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border-radius: 22px; border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04); flex-shrink: 0; flex-wrap: wrap; } .kitchen-page .kds-topbar-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .kitchen-page .kds-logo-badge { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #F59E0B; color: #fff; font-size: 1rem; box-shadow: 0 3px 10px rgba(245,158,11,0.4); position: relative; overflow: hidden; } .kitchen-page .kds-logo-shine { display: none; } .kitchen-page .kds-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--kds-text-dark); } /* Center section: date nav + clock */ .kitchen-page .kds-topbar-center { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; min-width: 0; overflow: hidden; } .kitchen-page .kds-date-arrow { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04); color: var(--kds-text-dark); font-size: 0.8rem; transition: transform 0.15s; } .kitchen-page .kds-date-arrow:active { transform: scale(0.9); } .kitchen-page .kds-date-compact { height: 34px; padding: 0 8px; border-radius: 10px; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04); color: var(--kds-text-dark); font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: 'Space Grotesk', sans-serif; } .kitchen-page .kds-today-chip { padding: 5px 14px; background: #EF4444; color: #fff; border-radius: 10px; font-size: 0.78rem; font-weight: 800; box-shadow: 0 3px 10px rgba(239,68,68,0.35); border: 1px solid rgba(255,255,255,0.15); white-space: nowrap; display: inline-flex; align-items: center; max-width: 80px; opacity: 1; transform: scale(1); transition: max-width 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s cubic-bezier(0.4,0,0.2,1), margin 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, transform 0.3s cubic-bezier(0.4,0,0.2,1), border-width 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease; overflow: hidden; margin: 0 1px; } .kitchen-page .kds-today-chip.chip-hidden { max-width: 0; padding: 5px 0; margin: 0; border-width: 0; opacity: 0; transform: scale(0.8); box-shadow: none; pointer-events: none; } .kitchen-page .kds-today-chip > span { display: inline-block; } .kitchen-page .kds-clock-pill { font-family: 'Space Grotesk', monospace; font-size: 0.88rem; font-weight: 600; color: var(--kds-text-muted); background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 10px; font-variant-numeric: tabular-nums; border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04); } .kitchen-page .kds-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } .kitchen-page .connection-status { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--kds-text-muted); font-weight: 600; } .kitchen-page .icon-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none; color: var(--kds-text-dark); font-size: 1rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04); transition: transform 0.15s; cursor: pointer; } .kitchen-page .icon-btn:active { transform: scale(0.92); } /* ---- ROW 2: Toolbar (stats + filters + tabs — one compact row) ---- */ .kitchen-page .kds-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 20px; flex-shrink: 0; } .kitchen-page .kds-toolbar-sep { width: 1px; height: 28px; flex-shrink: 0; background: rgba(0,0,0,0.06); margin: 0 4px; } /* (inline-stats moved to bottom bar) */ /* Pill Group (bouncy slider for meal filters & view tabs) — liquid glass */ .kitchen-page .kds-pill-group { display: flex; position: relative; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none; border-radius: 16px; padding: 3px; flex-shrink: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04); } .kitchen-page .kds-pill-bg { position: absolute; top: 3px; bottom: 3px; border-radius: 13px; z-index: 0; pointer-events: none; background: #F59E0B; border: none; box-shadow: 0 4px 16px rgba(245,158,11,0.4); } /* Glass reflection on red pill — subtle specular only */ .kitchen-page .kds-pill-bg::after { display: none; } .kitchen-page .kds-pill-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: none; border-radius: 13px; background: transparent; font-size: 0.8rem; font-weight: 700; font-family: 'Nunito', sans-serif; color: var(--kds-text-secondary); cursor: pointer; white-space: nowrap; transition: color 0.25s; min-height: 44px; } .kitchen-page .kds-pill-tab.active { color: white; } /* View tabs variant — same red as meal pills */ .kitchen-page .kds-pill-group-view .kds-pill-bg-view { background: #F59E0B; border: none; box-shadow: 0 4px 16px rgba(245,158,11,0.4); } .kitchen-page .kds-pill-group-view .kds-pill-tab.active { color: #fff; } .kitchen-page .kds-center-tag { margin-left: auto; flex-shrink: 0; font-size: 0.78rem; color: var(--kds-text-muted); font-weight: 600; white-space: nowrap; } /* ---- Content wrapper (fade transition) ---- */ .kitchen-page .kds-content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; transition: opacity 0.2s ease-out; } /* ---- Timeline View ---- */ .kitchen-page .kds-timeline { flex: 1; min-height: 0; padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.08) transparent; } /* ---- Section (DA FARE / IN CORSO / PRONTI) — transparent container, cards are glass ---- */ .kitchen-page .kds-section { border-radius: 0; overflow: visible; background: transparent; border: none; box-shadow: none; flex-shrink: 0; max-height: 100%; overflow-y: auto; transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1), margin 0.35s cubic-bezier(0.4,0,0.2,1), max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.35s cubic-bezier(0.4,0,0.2,1), border-width 0.35s cubic-bezier(0.4,0,0.2,1); opacity: 1; transform: scale(1); } @keyframes kds-card-in { from { opacity: 0; transform: translateY(-16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- Section Header ---- */ .kitchen-page .kds-section-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kds-text-muted); position: relative; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Liquid glass — inset specular highlight only, no overlays */ .kitchen-page .kds-section-header::before { display: none; } .kitchen-page .kds-section-header::after { display: none; } .kitchen-page .kds-section-header span:first-child { display: flex; align-items: center; gap: 8px; } .kitchen-page .kds-section-header i { font-size: 0.9rem; } .kitchen-page .kds-sh-right { display: flex; align-items: center; gap: 10px; } .kitchen-page .kds-sh-chevron { font-size: 0.8rem; opacity: 1; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); animation: kds-chevron-bounce 2s ease-in-out infinite; text-shadow: none; filter: none; color: var(--kds-text-muted); } @keyframes kds-chevron-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(3px); } 60% { transform: translateY(-1px); } 80% { transform: translateY(1px); } } /* ---- Section Panel: show only 1st card, hide rest ---- */ .kitchen-page .kds-section-panel { overflow: hidden; position: relative; transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1); } /* Hide all cards after the first one when NOT expanded */ .kitchen-page .kds-section:not(.expanded) .kds-section-body > .kds-order-card:not(:first-child) { display: none; } /* Ready grid: hide overflow pills when NOT expanded */ .kitchen-page .kds-section:not(.expanded) .kds-ready-grid { flex-wrap: nowrap; overflow: hidden; } /* No panel overlay */ .kitchen-page .kds-section-panel::after { display: none; } /* ---- Expanded: show all orders, no scroll inside ---- */ .kitchen-page .kds-section.expanded { flex: none; display: flex; flex-direction: column; max-height: none; overflow-y: auto; } .kitchen-page .kds-section.expanded .kds-section-panel { max-height: none; overflow: visible; } .kitchen-page .kds-section.expanded .kds-sh-chevron { transform: rotate(180deg); animation: none; } /* ---- Hide other sections smoothly (disabled for 3-column layout) ---- */ /* .kitchen-page .kds-section.section-hidden { opacity: 0; transform: scale(0.96); max-height: 0px; padding: 0; margin-top: 0; margin-bottom: 0; border-width: 0; pointer-events: none; overflow: hidden; box-shadow: none; } */ /* Section color variants — glass + colored accent bar left */ .kitchen-page .kds-sh-todo, .kitchen-page .kds-sh-prep, .kitchen-page .kds-sh-ready { background: transparent; border: none; border-left: 4px solid; } .kitchen-page .kds-sh-todo { border-left-color: #EF4444; } .kitchen-page .kds-sh-prep { border-left-color: #F59E0B; } .kitchen-page .kds-sh-ready { border-left-color: #10B981; } .kitchen-page .kds-section-count { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 800; padding: 2px 8px; border-radius: 10px; min-width: 22px; text-align: center; background: rgba(0,0,0,0.06); color: var(--kds-text-muted); } .kitchen-page .kds-section-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; } .kitchen-page .kds-section-empty { padding: 20px 16px; text-align: center; color: var(--kds-text-muted); font-size: 0.88rem; font-weight: 600; } .kitchen-page .kds-section-empty i { margin-right: 6px; color: rgba(239,68,68,0.2); } /* ---- Order Card (glass morphism — 2 rows: info + GIANT action) ---- */ .kitchen-page .kds-order-card { background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border-radius: 18px; border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent); overflow: hidden; cursor: pointer; transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); } .kitchen-page .kds-order-card:active { transform: scale(0.98); } .kds-batch-card { background-color: color-mix(in srgb, #bbbbbc 12%, transparent) !important; backdrop-filter: blur(18px) saturate(1.8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.8) !important; } .kitchen-page .kds-order-card.card-allergy { position: relative; overflow: visible; } .kitchen-page .kds-order-card.card-allergy .kds-allergy-badge { position: absolute; top: -6px; left: -4px; z-index: 5; transform: rotate(-8deg); display: inline-block; background: linear-gradient(135deg, #EF4444, #DC2626); color: #fff; font-size: 0.55rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; box-shadow: 0 2px 6px rgba(239,68,68,0.4); letter-spacing: 0.5px; white-space: nowrap; text-transform: uppercase; animation: kds-badgeBounce 1.4s ease forwards; opacity: 0; } @keyframes kds-badgeBounce { 0% { transform: translateY(10px) scale(0.7) rotate(-8deg); opacity: 0; } 20% { transform: translateY(0) scale(1) rotate(-8deg); opacity: 1; } 40% { transform: translateY(-4px) scale(1.1) rotate(-8deg); opacity: 1; } 60% { transform: translateY(2px) scale(0.95) rotate(-8deg); opacity: 1; } 80% { transform: translateY(-1px) scale(1.02) rotate(-8deg); opacity: 1; } 100% { transform: translateY(0) scale(1) rotate(-8deg); opacity: 1; } } /* Neon arancione — linea che percorre il perimetro */ #sectionPrep .kds-order-card, .kds-batch-card[data-batch-status="prep"] { border: 2px solid transparent !important; animation: kds-neon-border 3s linear infinite; } @keyframes kds-neon-border { 0% { border-color: #F59E0B transparent transparent transparent; box-shadow: 0 -3px 8px rgba(245,158,11,0.4); } 12.5% { border-color: #F59E0B #F59E0B transparent transparent; box-shadow: 3px -3px 8px rgba(245,158,11,0.4); } 25% { border-color: transparent #F59E0B transparent transparent; box-shadow: 3px 0 8px rgba(245,158,11,0.4); } 37.5% { border-color: transparent #F59E0B #F59E0B transparent; box-shadow: 3px 3px 8px rgba(245,158,11,0.4); } 50% { border-color: transparent transparent #F59E0B transparent; box-shadow: 0 3px 8px rgba(245,158,11,0.4); } 62.5% { border-color: transparent transparent #F59E0B #F59E0B; box-shadow: -3px 3px 8px rgba(245,158,11,0.4); } 75% { border-color: transparent transparent transparent #F59E0B; box-shadow: -3px 0 8px rgba(245,158,11,0.4); } 87.5% { border-color: #F59E0B transparent transparent #F59E0B; box-shadow: -3px -3px 8px rgba(245,158,11,0.4); } 100% { border-color: #F59E0B transparent transparent transparent; box-shadow: 0 -3px 8px rgba(245,158,11,0.4); } } /* Card top row: badge + info + timer */ .kitchen-page .kds-oc-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } /* Dish tags (piatti inside order card) */ .kitchen-page .kds-oc-dishes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; } .kitchen-page .kds-dish-tag { display: inline-block; padding: 3px 10px; background: rgba(0,0,0,0.05); border-radius: 10px; font-size: 0.95rem; font-weight: 600; color: var(--kds-text-dark); line-height: 1.3; } .kitchen-page .kds-dish-tag.tag-todo { background: rgba(0,0,0,0.05); color: var(--kds-text-dark); } .kitchen-page .kds-dish-tag.tag-prep { background: rgba(245,158,11,0.12); color: #B45309; } .kitchen-page .kds-dish-tag.tag-ready { background: rgba(16,185,129,0.12); color: #047857; } /* Dietary badge (large, with glass shine) */ .kitchen-page .kds-oc-badge { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.3px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); position: relative; overflow: hidden; } .kitchen-page .kds-oc-badge::before { display: none; } .kitchen-page .kds-oc-badge-lg { width: 56px; height: 56px; border-radius: 18px; font-size: 0.85rem; } /* Info block (code + meta) */ .kitchen-page .kds-oc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .kitchen-page .kds-oc-code { font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--kds-text-dark); line-height: 1.2; } .kitchen-page .kds-oc-meta { font-size: 0.9rem; color: var(--kds-text-muted); font-weight: 600; word-wrap: break-word; } /* Timer with urgency states */ .kitchen-page .kds-oc-timer { display: flex; align-items: center; gap: 5px; font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem; font-weight: 600; color: var(--kds-text-muted); flex-shrink: 0; padding: 5px 12px; border-radius: 10px; background: rgba(0,0,0,0.04); white-space: nowrap; } .kitchen-page .kds-oc-timer.warn { color: #D97706; background: rgba(245,158,11,0.1); font-weight: 700; } .kitchen-page .kds-oc-timer.urgent { color: var(--kds-red); background: rgba(239,68,68,0.1); font-weight: 800; animation: kds-timer-blink 1.2s ease-in-out infinite; } @keyframes kds-timer-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* GIANT action button (56px min, full-width) */ .kitchen-page .kds-oc-action { width: 100%; min-height: 56px; padding: 14px 16px; border: none; border-radius: 0 0 18px 18px; font-size: 1rem; font-weight: 800; font-family: 'Nunito', sans-serif; color: white; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 0.03em; } .kitchen-page .kds-oc-action::before { display: none; } .kitchen-page .kds-oc-action:active { transform: translateY(2px); box-shadow: 0 1px 4px rgba(0,0,0,0.1); } /* Small action button variant (for batch view) */ .kitchen-page .kds-oc-action-sm { min-height: 44px; padding: 10px 14px; border-radius: 14px; font-size: 0.88rem; } /* Action button color — SOLID vivid, matches parent section */ .kitchen-page .kds-oc-action.btn-to-preparing { background: #EF4444; box-shadow: 0 4px 14px rgba(239,68,68,0.4); border-top: none; } .kitchen-page .kds-oc-action.btn-to-ready { background: #F59E0B; box-shadow: 0 4px 14px rgba(245,158,11,0.4); border-top: none; } .kitchen-page .kds-oc-action.btn-to-delivered { background: #10B981; box-shadow: 0 4px 14px rgba(16,185,129,0.4); border-top: none; } /* ---- Ready Grid (compact pills) ---- */ .kitchen-page .kds-ready-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; } .kitchen-page .kds-ready-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1); min-height: 44px; } .kitchen-page .kds-ready-pill:active { transform: scale(0.95); } .kitchen-page .kds-rp-code { font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--kds-text-dark); } .kitchen-page .kds-rp-badge { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.3px; position: relative; overflow: hidden; } .kitchen-page .kds-rp-badge::before { display: none; } /* ---- Batch View ---- */ .kitchen-page .kds-batch-view { flex: 1; overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: rgba(239,68,68,0.2) transparent; } /* Batch Card (grouped by dietary code) */ .kitchen-page .kds-batch-card { background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent); border-radius: 20px; padding: 0 0 10px; overflow: visible; } .kitchen-page .kds-bc-header { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.05); border-radius: 20px 20px 0 0; } .kitchen-page .kds-bc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .kitchen-page .kds-bc-title { font-family: 'Nunito', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--kds-text-dark); } .kitchen-page .kds-bc-codes { font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; color: var(--kds-text-muted); font-weight: 600; word-wrap: break-word; } .kitchen-page .kds-bc-status { display: flex; gap: 8px; padding: 8px 16px; border-bottom: 1px solid rgba(0,0,0,0.04); } .kitchen-page .kds-bcs-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; } .kitchen-page .kds-bcs-tag.todo { background: rgba(239,68,68,0.08); color: var(--kds-red); } .kitchen-page .kds-bcs-tag.prep { background: rgba(245,158,11,0.08); color: #D97706; } .kitchen-page .kds-bc-actions { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; } /* Stats total */ .kitchen-page .kds-is-total { font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--kds-text-muted); background: rgba(0,0,0,0.04); padding: 2px 8px; border-radius: 6px; } /* ---- Allergy warning ---- */ .kitchen-page .allergy-warning { color: var(--kds-red); font-size: 1rem; animation: kds-timer-blink 1.5s infinite; } /* ---- Kitchen Bottom Bar (stats + bulk actions + voice) ---- */ .kitchen-page .kds-bottom-bar { flex-shrink: 0; background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border-radius: 22px; width: calc(100% - 24px); margin: 0 auto 12px; border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 5px 0px color-mix(in srgb, #000 10%, transparent), 0px 8px 24px 0px rgba(0,0,0,0.2); display: flex; flex-direction: column; gap: 0; } /* Bottom stats row */ .kitchen-page .kds-bottom-stats { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 20px 8px; border-bottom: 1px solid rgba(0,0,0,0.04); } .kitchen-page .kds-bs-item { display: flex; align-items: center; gap: 6px; } .kitchen-page .kds-bs-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .kitchen-page .kds-bs-val { font-family: 'Nunito', sans-serif !important; font-size: 1.1rem; font-weight: 800; color: #111; line-height: 1; -webkit-font-smoothing: antialiased; } .kitchen-page .kds-bs-lbl { font-size: 0.75rem; font-weight: 600; color: var(--kds-text-muted); } .kitchen-page .kds-bs-total { padding-left: 10px; border-left: 1px solid rgba(0,0,0,0.08); } /* KPI row (standalone, no bottom-bar wrapper) */ .kitchen-page .kds-kpi-row { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 20px 12px; flex-shrink: 0; } /* Bulk actions row (below toolbar) */ .kitchen-page .kds-bulk-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 8px; flex-shrink: 0; } /* Bottom actions row */ .kitchen-page .kds-bottom-actions { display: flex; align-items: center; gap: 12px; padding: 10px 20px 24px; } .kitchen-page .kds-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; } .kitchen-page .kds-float-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; border: none; border-radius: 14px; font-size: 0.88rem; font-weight: 800; font-family: 'Nunito', sans-serif; white-space: nowrap; cursor: pointer; min-height: 48px; transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.15s; position: relative; overflow: hidden; } .kitchen-page .kds-float-btn::before { display: none; } .kitchen-page .kds-float-btn:active { transform: scale(0.96); } .kitchen-page .kds-float-btn:disabled { opacity: 0.4; cursor: not-allowed; } .kitchen-page .kds-btn-count { font-family: 'Nunito', sans-serif !important; font-weight: 800; background: rgba(0,0,0,0.15); padding: 2px 10px; border-radius: 8px; font-size: 1em; margin-left: 4px; line-height: 1; } .kitchen-page .kds-float-btn.fb-preparing { background: #F59E0B; color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,0.4); border: none; } .kitchen-page .kds-float-btn.fb-ready { background: #10B981; color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,0.4); border: none; } .kitchen-page .kds-float-btn.fb-delivered { background: #3B82F6; color: #fff; box-shadow: 0 4px 14px rgba(59,130,246,0.4); border: none; } /* Tasto comandi vocali NASCOSTO temporaneamente (verrà riattivato più avanti): per riattivarlo, rimuovere/commentare questa singola regola. */ .kds-voice-btn { display: none !important; } /* Voice command button — exact copy of mobile-agri orb (red, green on listening) */ .kitchen-page .kds-voice-btn { position: fixed; bottom: 20px; right: 20px; z-index: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-color: transparent; border: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .kitchen-page .kds-voice-loader { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1/1; border-radius: 50%; background-color: transparent; animation: kds-voice-rotate 2s linear infinite; z-index: 0; } @keyframes kds-voice-rotate { 0% { transform: rotate(90deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #F87171 inset, 0 60px 60px 0 #B91C1C inset; } 50% { transform: rotate(270deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 10px 0 #EF4444 inset, 0 40px 60px 0 #7F1D1D inset; } 100% { transform: rotate(450deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #F87171 inset, 0 60px 60px 0 #B91C1C inset; } } .kitchen-page .kds-voice-btn.touched .kds-voice-loader { animation-duration: 1s; } .kitchen-page .kds-voice-btn.listening .kds-voice-loader { animation-duration: 0.8s; box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #34C759 inset, 0 60px 60px 0 #0a4a20 inset !important; } .kitchen-page .kds-voice-label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; color: white; pointer-events: none; } .kitchen-page .kds-voice-btn:active { transform: scale(0.92); } /* ---- Kitchen Modal (glass) ---- */ .kitchen-page .modal-overlay { background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .kitchen-page .modal-card { background: #fff; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 8px 32px rgba(0,0,0,0.08); border-radius: 24px; max-width: 520px; } .kitchen-page .modal-header { border-bottom: 1px solid rgba(0,0,0,0.05); padding: 22px 24px 18px; } .kitchen-page .modal-header h3 { font-family: 'Nunito', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--kds-text-dark); } .kitchen-page .modal-body { padding: 22px 24px; } /* ---- Kitchen Toast ---- */ .kitchen-page .kds-toast { border-radius: 16px; font-family: 'Nunito', sans-serif; font-weight: 700; box-shadow: 0 8px 32px rgba(0,0,0,0.15); } .kitchen-page .kds-toast.toast-success { background: #10B981; } .kitchen-page .kds-toast.toast-error { background: #EF4444; } /* ---- Kitchen Empty States ---- */ .kitchen-page .empty-state { text-align: center; color: var(--kds-text-muted); padding: 32px 16px; } .kitchen-page .empty-state i { font-size: 2rem; color: rgba(239,68,68,0.2); } .kitchen-page .empty-state p { margin-top: 10px; font-weight: 600; color: var(--kds-text-muted); } /* ---- Kitchen Section Flash (new order notification) ---- */ .kitchen-page .kds-section.flash-new { animation: kds-section-flash-green 1s ease-out; } .kitchen-page .kds-section.flash-allergy { animation: kds-section-flash-red 1s ease-out; } @keyframes kds-section-flash-green { 0%, 100% { box-shadow: var(--kds-glass-shadow); } 25%, 75% { box-shadow: 0 0 0 3px #10B981, var(--kds-glass-shadow); } } @keyframes kds-section-flash-red { 0%, 100% { box-shadow: var(--kds-glass-shadow); } 25%, 75% { box-shadow: 0 0 0 3px var(--kds-red), var(--kds-glass-shadow); } } /* ---- Kitchen card body (inside modal) ---- */ .kitchen-page .card.card-body { background: var(--kds-glass-bg); backdrop-filter: blur(20px) saturate(180%) brightness(105%); -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(105%); border: 0.5px solid var(--kds-glass-border); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 0.5px 0 rgba(255,255,255,0.25); } /* ---- iPad Air optimization (820px width, vertical) ---- */ @media (min-width: 768px) { /* Top bar */ .kitchen-page .kds-topbar { padding: calc(env(safe-area-inset-top, 16px) + 16px) 32px 16px; min-height: 80px; } .kitchen-page .kds-title { font-size: 1.4rem; } .kitchen-page .kds-logo-badge { width: 44px; height: 44px; border-radius: 14px; font-size: 1.1rem; } .kitchen-page .kds-date-arrow { width: 40px; height: 40px; font-size: 0.9rem; border-radius: 12px; } .kitchen-page .kds-date-compact { height: 40px; font-size: 0.95rem; padding: 0 14px; } .kitchen-page .kds-today-chip:not(.chip-hidden) { padding: 6px 16px; font-size: 0.85rem; max-width: 100px; } .kitchen-page .kds-clock-pill { font-size: 1rem; padding: 5px 12px; } .kitchen-page .icon-btn { width: 44px; height: 44px; font-size: 1.1rem; } /* Toolbar */ .kitchen-page .kds-toolbar { padding: 10px 32px; gap: 12px; } .kitchen-page .kds-pill-tab { padding: 10px 22px; font-size: 1rem; min-height: 48px; } /* Timeline / Batch containers */ .kitchen-page .kds-timeline { padding: 14px 32px 32px; gap: 16px; } .kitchen-page .kds-batch-view { padding: 14px 32px 20px; gap: 16px; } /* Sections */ .kitchen-page .kds-section { border-radius: 24px; } .kitchen-page .kds-section-header { padding: 18px 22px; font-size: 1.1rem; } .kitchen-page .kds-section-count { font-size: 0.9rem; padding: 4px 12px; } .kitchen-page .kds-section-body { padding: 14px; gap: 12px; } .kitchen-page .kds-section-empty { padding: 28px 20px; font-size: 1rem; } /* Order cards */ .kitchen-page .kds-order-card { border-radius: 22px; } .kitchen-page .kds-oc-top { padding: 16px 18px; gap: 14px; } .kitchen-page .kds-oc-badge { width: 56px; height: 56px; border-radius: 18px; font-size: 0.9rem; } .kitchen-page .kds-oc-badge-lg { width: 64px; height: 64px; border-radius: 20px; font-size: 1rem; } .kitchen-page .kds-oc-code { font-size: 1.4rem; } .kitchen-page .kds-oc-meta { font-size: 0.95rem; } .kitchen-page .kds-oc-timer { font-size: 1rem; padding: 6px 14px; border-radius: 12px; } /* GIANT action buttons */ .kitchen-page .kds-oc-action { min-height: 64px; font-size: 1.15rem; border-radius: 0 0 22px 22px; } .kitchen-page .kds-oc-action-sm { min-height: 52px; font-size: 1rem; border-radius: 16px; } /* Ready pills */ .kitchen-page .kds-ready-grid { padding: 14px 16px; gap: 10px; } .kitchen-page .kds-ready-pill { padding: 12px 18px; border-radius: 16px; min-height: 48px; } .kitchen-page .kds-rp-code { font-size: 1.05rem; } .kitchen-page .kds-rp-badge { width: 30px; height: 30px; font-size: 0.6rem; border-radius: 10px; } /* Batch cards */ .kitchen-page .kds-batch-card { border-radius: 24px; } .kitchen-page .kds-bc-header { padding: 18px 20px; gap: 16px; } .kitchen-page .kds-bc-title { font-size: 1.2rem; } .kitchen-page .kds-bc-codes { font-size: 0.92rem; } .kitchen-page .kds-bc-status { padding: 10px 20px; } .kitchen-page .kds-bcs-tag { padding: 5px 12px; font-size: 0.85rem; } .kitchen-page .kds-bc-actions { padding: 12px 16px; gap: 8px; } /* Bottom bar */ .kitchen-page .kds-bottom-stats { padding: 12px 32px 8px; gap: 20px; } .kitchen-page .kds-bs-dot { width: 12px; height: 12px; } .kitchen-page .kds-bs-val { font-size: 1.3rem; } .kitchen-page .kds-bs-lbl { font-size: 0.82rem; } .kitchen-page .kds-bottom-actions { padding: 10px 32px 28px; } .kitchen-page .kds-float-btn { padding: 14px 24px; font-size: 1rem; min-height: 52px; border-radius: 16px; } .kitchen-page .kds-voice-btn { width: 88px; height: 88px; } .kitchen-page .kds-voice-label i { font-size: 2rem !important; } /* Modal */ .kitchen-page .modal-card { max-width: 600px; border-radius: 28px; } .kitchen-page .modal-header { padding: 24px 28px 20px; } .kitchen-page .modal-header h3 { font-size: 1.3rem; } .kitchen-page .modal-body { padding: 24px 28px; } } /* ============================================================ PHONE (≤480px) — il KDS cucina è tarato su tablet; qui compattiamo la PARTE ALTA così sta bene anche su telefono. Tablet (≥768px) e fascia media (481–767px) restano invariati. Problema risolto: sotto ~480px le 4 icone del topbar-right (44px + gap) non stavano in riga con logo+titolo → andavano a capo dentro la card e si accavallavano con le pill sottostanti. ============================================================ */ @media (max-width: 480px) { /* Topbar: più larghezza utile + elementi compatti → logo, titolo e 4 icone su UNA sola riga (niente wrap). */ .kitchen-page .kds-topbar { width: calc(100% - 12px); margin: 8px auto 0; padding: calc(env(safe-area-inset-top, 8px) + 8px) 12px 10px; min-height: 62px; gap: 6px; flex-wrap: nowrap; } .kitchen-page .kds-topbar-left { gap: 8px; min-width: 0; flex-shrink: 1; } .kitchen-page .kds-logo-badge { width: 34px; height: 34px; border-radius: 11px; } .kitchen-page .kds-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kitchen-page .kds-topbar-right { gap: 5px; flex-shrink: 0; } .kitchen-page .icon-btn { width: 38px; height: 38px; font-size: 0.95rem; } .kitchen-page .kds-haccp-toggle-btn span { font-size: 0.6rem; letter-spacing: 0.2px; } /* Toolbar pill (status + pasti): padding/font ridotti per stare comode. */ .kitchen-page .kds-toolbar { padding: 6px 12px; gap: 6px; } .kitchen-page .kds-pill-tab { padding: 6px 11px; font-size: 0.78rem; min-height: 42px; } .kitchen-page .kds-pill-count { min-width: 20px; height: 18px; font-size: 0.68rem; } } /* ============================================================ RIEPILOGO — Tab switch + Summary cards ============================================================ */ /* ---- Pill Hidden ---- */ .pill-hidden { display: none !important; } /* ---- Bottone Riepilogo (standalone, separato dal pill group) ---- */ .kds-btn-riepilogo { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 2px solid var(--primary); border-radius: 12px; background: transparent; color: var(--primary); font-family: var(--font-main); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; margin-left: auto; } .kds-btn-riepilogo:active { transform: scale(0.95); } .kds-btn-riepilogo.active { background: var(--primary); color: #fff; } .kds-btn-speciali { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 2px solid var(--kds-red); border-radius: 12px; background: transparent; color: var(--kds-red); font-family: 'Nunito', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .kds-btn-speciali:active { transform: scale(0.95); } .kds-btn-speciali.active { background: var(--kds-red); color: #fff; } .kds-speciali-count { display: none; /* replaced by .kds-speciali-badge-outer */ } .kds-speciali-badge-outer { position: absolute; top: -8px; right: -8px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--kds-red); color: #fff; font-size: 0.7rem; font-weight: 800; z-index: 5; animation: kds-badgeBounceFlat 1.4s ease forwards; opacity: 0; font-size: 0.65rem; font-weight: 800; margin-left: 4px; line-height: 1; } /* ---- Summary View (Riepilogo compatto) ---- */ .kds-summary-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; } .kds-summary-view { padding: 4px 0 12px; } /* Slot header (PRIMI, SECONDI...) */ .kds-sr-slot { margin-bottom: 2px; } .kds-sr-slot-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 10px 0 4px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.05rem; color: #111; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 2px solid var(--kds-red); } .kds-sr-slot-tot { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; } /* Griglia card: 2 colonne */ .kds-sr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; } /* Riga piatto — card glass compatta */ .kds-sr-row { background-color: color-mix(in srgb, #bbbbbc 12%, transparent); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border-radius: 14px; padding: 12px; margin: 0; border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent), inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent), inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent), 0px 1px 3px 0px rgba(0,0,0,0.04); } /* Main: thumb + nome + qty + meta inline */ .kds-sr-main { display: flex; align-items: center; gap: 8px; } .kds-sr-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .kds-sr-thumb-empty { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: rgba(0,0,0,0.04); color: var(--kds-text-muted); font-size: 0.85rem; flex-shrink: 0; } .kds-sr-info { flex: 1; min-width: 0; } .kds-sr-name-line { display: flex; align-items: baseline; gap: 6px; } .kds-sr-name { font-weight: 700; font-size: 1.15rem; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kds-sr-qty { font-weight: 800; font-size: 1.15rem; color: #111; flex-shrink: 0; } /* Meta: grammatura, calorie, temp, consistenza inline */ .kds-sr-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: 0.95rem; color: #333; font-weight: 600; } .kds-sr-meta i { font-size: 0.78rem; } /* Dettagli: allergeni + ingredienti + note */ .kds-sr-details { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.06); font-size: 0.88rem; line-height: 1.45; } .kds-sr-lbl { font-weight: 700; color: #555; margin-right: 3px; } .kds-sr-allergens { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-bottom: 2px; } .kds-sr-abadge { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #FEF2F2; color: #DC2626; font-weight: 700; font-size: 0.7rem; text-transform: capitalize; } .kds-sr-empty { color: var(--text-muted); } .kds-sr-ingr { margin-bottom: 2px; color: var(--text-dark); } .kds-sr-ingr-text { color: #333; } .kds-sr-note { background: #FFFBEB; border-radius: 4px; padding: 3px 6px; border-left: 2px solid #F59E0B; color: var(--text-dark); margin-top: 2px; } /* ---- Tablet (768px+): 2 colonne ---- */ @media (min-width: 768px) { .kds-sr-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .kds-sr-name { font-size: 1.05rem; } .kds-sr-row { padding: 12px; } .kds-sr-meta { font-size: 0.74rem; gap: 8px; } .kds-btn-riepilogo { font-size: 0.88rem; padding: 10px 20px; } } /* ---- Animated ENTRY button (compliance) ---- */ .animated-entry-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 20px; border: 3px solid transparent; font-size: 12px; background-color: transparent; border-radius: 100px; font-weight: 600; color: #E67E22; box-shadow: 0 0 0 2px #E67E22; cursor: pointer; overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); text-decoration: none; flex-shrink: 0; margin-left: auto; } .animated-entry-btn svg { position: absolute; width: 20px; fill: #E67E22; z-index: 9; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .animated-entry-btn .arr-1 { right: 12px; } .animated-entry-btn .arr-2 { left: -25%; } .animated-entry-btn .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background-color: rgba(230, 126, 34, 0.15); border-radius: 50%; opacity: 0; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .animated-entry-btn .text { position: relative; z-index: 1; transform: translateX(-10px); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); letter-spacing: 0.1em; font-weight: 800; } /* Touch animation (tablet — no hover) */ .animated-entry-btn.touched, .animated-entry-btn:hover { box-shadow: 0 0 0 12px transparent; color: #212121; border-radius: 12px; } .animated-entry-btn.touched .arr-1, .animated-entry-btn:hover .arr-1 { right: -25%; } .animated-entry-btn.touched .arr-2, .animated-entry-btn:hover .arr-2 { left: 12px; } .animated-entry-btn.touched .text, .animated-entry-btn:hover .text { transform: translateX(10px); } .animated-entry-btn.touched svg, .animated-entry-btn:hover svg { fill: #7A4900; } .animated-entry-btn:active { scale: 0.95; box-shadow: 0 0 0 4px #E67E22; } .animated-entry-btn.touched .circle, .animated-entry-btn:hover .circle { width: 180px; height: 180px; opacity: 1; } /* ---- Print ---- */ @media print { .kds-topbar, .kds-toolbar, .kds-bottom-bar, .modal-overlay, #kds-toast, .kds-btn-riepilogo { display: none !important; } .kds-summary-wrapper, .kds-summary-view { display: block !important; overflow: visible; } .kds-sr-row { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; } } /* === Future-day grouping in kanban (Da fare / In corso / Pronti) === */ .kitchen-page .kds-future-divider { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 14px 0 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(99,102,241,0.04)); border-left: 4px solid #6366f1; color: #4338ca; font-weight: 700; font-size: 0.95rem; text-transform: capitalize; position: sticky; top: 0; z-index: 2; } .kitchen-page .kds-future-divider i { color: #6366f1; opacity: 0.9; } .kitchen-page .kds-future-divider .kds-future-divider-label { flex: 1; } .kitchen-page .kds-future-divider .kds-future-divider-count { background: #6366f1; color: #fff; padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; } /* Forza visibilità anche quando il lazy collapse della sezione è attivo. */ .kitchen-page .kds-section:not(.expanded) .kds-section-body > .kds-future-divider { display: flex !important; } /* Banner "Pasto Inviato" in cima al Riepilogo cuoco */ .kitchen-page .kds-meal-sent-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 10px 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); position: sticky; top: 0; z-index: 7; animation: kdsSentPulse 2.4s ease-in-out 0s 2; } .kitchen-page .kds-meal-sent-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .kitchen-page .kds-meal-sent-title { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .kitchen-page .kds-meal-sent-sub { font-size: 0.85rem; opacity: 0.92; margin-top: 2px; } @keyframes kdsSentPulse { 0%, 100% { box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); } 50% { box-shadow: 0 6px 22px rgba(16, 185, 129, 0.55); } } /* Tag pasto davanti al codice (Pranzo #PO-...) */ .kitchen-page .kds-oc-meal-tag { display: inline-block; padding: 1px 8px; margin-right: 6px; border-radius: 5px; background: #f1f5f9; color: #334155; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }