/* RESET GENERALE */
html {
overscroll-behavior-y: none;
touch-action: manipulation;
}
/* BASE DASHBOARD */
body {
font-family: 'Inter', sans-serif;
background: #eef3f8;
margin: 0;
min-height: 100vh;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: calc(275px + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
color: #1f2937;
touch-action: manipulation;
-webkit-text-size-adjust: 100%;
}
button, input, select, textarea, div, a, .card {
touch-action: manipulation;
}
/* TOP BAR FISSA */
.top-bar {
position: fixed;
top: auto;
bottom: calc(30px + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
width: min(300px, calc(100vw - 24px));
min-height: 0;
height: auto;
padding: 10px;
background: #111827;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 6px;
z-index: 1000;
box-shadow: 0 24px 70px rgba(15,23,42,0.42), 0 -8px 28px rgba(15,23,42,0.24);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
box-sizing: border-box;
overflow: hidden;
}
.header-left, .header-right { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 6px; width: 100%; min-width: 0; }
/* BOTTONI STANDARD */
.btn-style { height: 34px; padding: 0 5px; border-radius: 10px; font-weight: 800; border: none; cursor: pointer; text-decoration: none; color:white; font-size: 0.68rem; line-height: 1.05; transition: transform 0.1s; display:flex; align-items:center; justify-content:center; text-align:center; min-width:0; }
.btn-style:active { transform: scale(0.95); }
.btn-home { background-color: #2563eb; }
.btn-reset { background: #ef4444; }
.btn-debug { background: #8b5cf6; }
.btn-msg { background: #f59e0b; color: #111827; position: relative; }
.btn-msg.chat-unread {
background: #dc2626 !important;
color: #fff !important;
animation: staffChatButtonPulse 0.65s ease-in-out infinite;
}
.staff-chat-alert-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
margin-left: 5px;
padding: 0 6px;
border-radius: 999px;
background: #dc2626;
color: #fff;
font-size: 0.78rem;
font-weight: 950;
line-height: 1;
}
@keyframes staffChatButtonPulse {
0%, 100% { background:#b91c1c; transform:scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,0.42); }
50% { background:#ef4444; transform:scale(1.05); box-shadow: 0 0 0 10px rgba(220,38,38,0.18); }
}
.btn-clear-msg { background: #64748b; }
.btn-history { background-color: #facc15; color: #111827; }
.btn-cashmatic { background-color: #059669; }
.btn-log-ops { background-color: #475569; }
.log-special-split {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:4px;
min-width:0;
}
.log-special-split .btn-style { width:100%; padding:0 3px; }
.log-special-split .btn-special-menus { font-size:0.58rem; }
.btn-register { background-color: #22c55e; color: #052e16; }
.btn-ritiri-cassa {
width: 100%;
height: 40px;
background: linear-gradient(135deg, #f59e0b, #ea580c);
color: #111827;
font-size: 0.82rem;
box-shadow: 0 10px 24px rgba(234, 88, 12, 0.28);
gap: 8px;
}
.quick-fattura-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
width: 100%;
}
.btn-fattura-clienti {
width: 100%;
height: 40px;
background: linear-gradient(135deg, #0ea5e9, #2563eb);
color: #fff;
font-size: 0.74rem;
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}
.btn-fatture-list {
width: 100%;
height: 40px;
background: linear-gradient(135deg, #a855f7, #7c3aed);
color: #fff;
font-size: 0.74rem;
box-shadow: 0 10px 24px rgba(124, 58, 237, 0.24);
}
.ritiri-panel {
position: fixed;
top: 14px;
right: 14px;
width: min(430px, calc(100vw - 28px));
max-height: calc(100vh - 34px);
background: #ffffff;
border: 1px solid rgba(15,23,42,0.12);
border-radius: 18px;
box-shadow: 0 28px 80px rgba(15,23,42,0.34);
z-index: 4700;
display: none;
flex-direction: column;
overflow: hidden;
}
.ritiri-panel.open { display: flex; }
.ritiri-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px;
background: #111827;
color: #fff;
cursor: move;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.ritiri-panel.is-positioned { right: auto; }
.ritiri-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 1rem;
font-weight: 900;
}
.ritiri-head-actions {
display: flex;
align-items: center;
gap: 7px;
}
.ritiri-head-actions button {
border: none;
border-radius: 10px;
padding: 8px 10px;
font-size: 0.78rem;
font-weight: 900;
cursor: pointer;
}
.ritiri-close { background: #ef4444; color: #fff; }
.ritiri-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
padding: 8px 10px;
border-bottom: 1px solid #e2e8f0;
background: #fff;
}
.ritiri-tab {
min-height: 38px;
border: 1px solid #cbd5e1;
border-radius: 10px;
background: #e2e8f0;
color: #334155;
font-size: 0.82rem;
font-weight: 950;
cursor: pointer;
}
.ritiri-tab.active {
border-color: #ea580c;
background: #f97316;
color: #fff;
}
.ritiri-list {
padding: 10px;
overflow-y: auto;
background: #f8fafc;
}
.ritiri-empty {
padding: 18px 12px;
text-align: center;
color: #64748b;
font-weight: 800;
}
.ritiri-card {
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 12px;
padding: 10px;
margin-bottom: 9px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}
.ritiri-card.pagato {
background: #dcfce7;
border-color: #86efac;
}
.ritiri-card.consegna:not(.pagato) {
background: #eff6ff;
border-color: #93c5fd;
}
.ritiri-main {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.ritiri-id {
font-size: 1.05rem;
font-weight: 950;
color: #111827;
}
.ritiri-meta {
margin-top: 3px;
font-size: 0.8rem;
color: #475569;
font-weight: 750;
}
.ritiri-meta-line + .ritiri-meta-line { margin-top: 2px; }
.ritiri-payment-method {
margin-top: 4px;
color: #1d4ed8;
font-weight: 900;
}
.ritiri-price {
text-align: right;
font-size: 1.05rem;
font-weight: 950;
color: #111827;
white-space: nowrap;
}
.ritiri-pay {
border: none;
border-radius: 10px;
background: #16a34a;
color: #fff;
font-weight: 950;
padding: 9px 14px;
cursor: pointer;
width: auto;
min-width: 72px;
height: 38px;
}
.ritiri-actions {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 5px;
margin-top: 9px;
width: 100%;
}
.ritiri-actions .ritiri-pay,
.ritiri-actions .ritiri-receipt,
.ritiri-actions .ritiri-command,
.ritiri-actions .ritiri-edit {
width: 100%;
min-width: 0;
height: 38px;
padding: 7px 3px;
font-size: 0.64rem;
line-height: 1.05;
}
.ritiri-receipt {
border: none;
border-radius: 10px;
background: #2563eb;
color: #fff;
font-weight: 950;
cursor: pointer;
}
.ritiri-receipt:disabled {
background: #94a3b8;
color: #f8fafc;
cursor: default;
opacity: 0.9;
}
.ritiri-command {
border: none;
border-radius: 10px;
background: #7c3aed;
color: #fff;
font-weight: 950;
cursor: pointer;
}
.ritiri-command.kitchen { background: #0f766e; }
.ritiri-command:disabled {
background: #94a3b8;
color: #f8fafc;
cursor: wait;
}
.ritiri-edit {
border: none;
border-radius: 10px;
background: #334155;
color: #fff;
font-weight: 950;
cursor: pointer;
}
.takeaway-editor-overlay {
position: fixed;
inset: 0;
z-index: 26000;
display: none;
align-items: center;
justify-content: center;
padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
background: rgba(15, 23, 42, 0.52);
}
.takeaway-editor-overlay.open { display: flex; }
.takeaway-editor-box {
width: min(1380px, 98vw);
height: min(94vh, 980px);
max-height: calc(100dvh - 20px);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #cbd5e1;
border-radius: 14px;
background: #fff;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
}
.takeaway-editor-head {
min-height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px 8px 14px;
box-sizing: border-box;
background: #f8fafc;
border-bottom: 1px solid #dbe3ec;
}
.takeaway-editor-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #172033;
font-size: 1rem;
font-weight: 900;
}
.takeaway-editor-actions { display: flex; gap: 7px; flex-shrink: 0; }
.takeaway-editor-actions button {
height: 38px;
min-width: 42px;
border: 0;
border-radius: 9px;
background: #e2e8f0;
color: #1e293b;
font-size: 0.86rem;
font-weight: 900;
cursor: pointer;
}
.takeaway-editor-actions .takeaway-editor-close {
background: #172033;
color: #fff;
padding: 0 14px;
}
.takeaway-editor-frame {
display: block;
flex: 1 1 auto;
width: 100%;
min-height: 0;
border: 0;
background: #fff;
}
@media (max-width: 600px) {
.takeaway-editor-overlay { padding: 0; }
.takeaway-editor-box {
width: 100vw;
height: 100dvh;
max-height: 100dvh;
border: 0;
border-radius: 0;
}
.takeaway-editor-head {
padding-top: max(8px, env(safe-area-inset-top, 0px));
min-height: calc(54px + env(safe-area-inset-top, 0px));
}
.takeaway-editor-actions button { min-width: 38px; }
.takeaway-editor-actions .takeaway-editor-close { padding: 0 10px; }
}
.ritiri-detail {
display: none;
margin-top: 10px;
border-top: 1px solid rgba(15,23,42,0.12);
padding-top: 9px;
font-size: 0.82rem;
}
.ritiri-detail.open { display: block; }
.ritiri-item-row {
display: grid;
grid-template-columns: 38px 1fr auto;
gap: 7px;
padding: 5px 0;
border-bottom: 1px dashed rgba(15,23,42,0.13);
align-items: start;
}
.ritiri-note {
margin-top: 8px;
padding: 8px;
border-radius: 9px;
background: rgba(245,158,11,0.14);
color: #78350f;
font-weight: 800;
}
.fatture-panel {
position: fixed;
top: 14px;
right: 14px;
width: min(720px, calc(100vw - 28px));
max-height: calc(100vh - 34px);
background: #ffffff;
border: 1px solid rgba(15,23,42,0.12);
border-radius: 18px;
box-shadow: 0 28px 80px rgba(15,23,42,0.34);
z-index: 4720;
display: none;
flex-direction: column;
overflow: hidden;
}
.fatture-panel.open { display: flex; }
.fatture-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px;
background: #111827;
color: #fff;
}
.fatture-title {
font-size: 1rem;
font-weight: 950;
}
.fatture-head-actions {
display: flex;
gap: 7px;
align-items: center;
}
.fatture-head-actions button,
.fatture-import-label {
border: none;
border-radius: 10px;
padding: 8px 10px;
font-size: 0.76rem;
font-weight: 900;
cursor: pointer;
background: #2563eb;
color: #fff;
text-align: center;
}
.fatture-close { background: #ef4444 !important; }
.fatture-list {
padding: 10px;
overflow-y: auto;
background: #f8fafc;
}
.fatture-clienti-panel {
position: fixed;
inset: 0;
background: rgba(15,23,42,0.42);
z-index: 4730;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
}
.fatture-clienti-panel.open { display: flex; }
.fatture-clienti-box {
width: 80vw;
height: 80vh;
background: #ffffff;
border: 1px solid rgba(15,23,42,0.12);
border-radius: 18px;
box-shadow: 0 28px 80px rgba(15,23,42,0.38);
display: flex;
flex-direction: column;
overflow: hidden;
}
.fatture-clienti-frame {
width: 100%;
flex: 1;
min-height: 0;
border: 0;
background: #fff;
}
.fatture-help {
padding: 9px 10px;
background: #eff6ff;
color: #1e3a8a;
font-size: 0.8rem;
font-weight: 800;
border-bottom: 1px solid #bfdbfe;
}
.fattura-row {
background: #fff;
border: 1px solid #e5e7eb;
border-left: 7px solid #64748b;
border-radius: 12px;
padding: 10px;
margin-bottom: 9px;
color: #111827;
box-shadow: 0 6px 18px rgba(15,23,42,0.07);
}
.fattura-row.stato-pec_inviata { border-left-color: #2563eb; }
.fattura-row.stato-consegnata { border-left-color: #16a34a; }
.fattura-row.stato-scartata,
.fattura-row.stato-errore { border-left-color: #dc2626; background: #fff7f7; }
.fattura-row.stato-mancata_consegna { border-left-color: #f97316; background: #fff7ed; }
.fattura-main {
display: grid;
grid-template-columns: minmax(110px, 0.8fr) minmax(150px, 1.2fr) auto;
gap: 10px;
align-items: center;
}
.fattura-numero { font-size: 1rem; font-weight: 950; }
.fattura-cliente { font-size: 0.92rem; font-weight: 900; min-width: 0; overflow-wrap: anywhere; }
.fattura-meta { margin-top: 4px; color: #64748b; font-size: 0.76rem; font-weight: 800; }
.fattura-totale { text-align: right; font-size: 1.05rem; font-weight: 950; white-space: nowrap; }
.fattura-badge {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 8px;
padding: 5px 9px;
border-radius: 999px;
background: #e2e8f0;
color: #334155;
font-size: 0.75rem;
font-weight: 950;
}
.fattura-badge.pec_inviata { background: #dbeafe; color: #1d4ed8; }
.fattura-badge.consegnata { background: #dcfce7; color: #15803d; }
.fattura-badge.scartata,
.fattura-badge.errore { background: #fee2e2; color: #b91c1c; }
.fattura-badge.mancata_consegna { background: #ffedd5; color: #c2410c; }
.fattura-error {
margin-top: 8px;
padding: 8px;
border-radius: 9px;
background: #fee2e2;
color: #991b1b;
font-size: 0.8rem;
font-weight: 850;
overflow-wrap: anywhere;
}
.fattura-action-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.fattura-resend-btn,
.fattura-delete-btn,
.fattura-credit-btn,
.fattura-pdf-btn,
.fattura-mail-btn {
margin-top: 8px;
border: none;
border-radius: 10px;
background: #dc2626;
color: #fff;
padding: 8px 11px;
font-size: 0.78rem;
font-weight: 950;
cursor: pointer;
}
.fattura-action-row .fattura-resend-btn,
.fattura-action-row .fattura-delete-btn,
.fattura-action-row .fattura-credit-btn,
.fattura-action-row .fattura-pdf-btn,
.fattura-action-row .fattura-mail-btn { margin-top: 0; }
.fattura-delete-btn { background: #7f1d1d; }
.fattura-credit-btn { background: #7c3aed; }
.fattura-pdf-btn { background: #1d4ed8; }
.fattura-mail-btn { background: #15803d; }
.fattura-mail-btn:disabled,
.fattura-pdf-btn:disabled,
.fattura-credit-btn:disabled {
background: #94a3b8;
color: #f8fafc;
cursor: not-allowed;
opacity: 0.75;
}
.fattura-pdf-panel {
position: fixed;
inset: 0;
z-index: 4760;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(15,23,42,0.38);
}
.fattura-pdf-panel.open { display: flex; }
.fattura-pdf-box {
width: min(980px, calc(100vw - 24px));
height: min(88vh, 900px);
background: #ffffff;
border-radius: 18px;
box-shadow: 0 30px 90px rgba(15,23,42,0.42);
border: 1px solid rgba(15,23,42,0.14);
overflow: hidden;
display: flex;
flex-direction: column;
}
.fattura-pdf-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
background: #111827;
color: #fff;
}
.fattura-pdf-title {
font-size: 0.96rem;
font-weight: 950;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fattura-pdf-actions {
display: flex;
gap: 8px;
align-items: center;
}
.fattura-pdf-actions button {
border: none;
border-radius: 10px;
padding: 8px 10px;
font-size: 0.78rem;
font-weight: 950;
cursor: pointer;
color: #fff;
background: #2563eb;
}
.fattura-pdf-actions .pdf-close-btn { background: #475569; }
.fattura-pdf-mail-box {
display: none;
flex: 0 0 auto;
gap: 8px;
align-items: center;
padding: 10px 12px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.fattura-pdf-mail-box.open { display: flex; }
.fattura-pdf-mail-box input {
flex: 1 1 auto;
min-width: 0;
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 11px 12px;
font-size: 0.95rem;
font-weight: 750;
color: #0f172a;
background: #fff;
}
.fattura-pdf-mail-box button {
flex: 0 0 auto;
border: none;
border-radius: 12px;
padding: 11px 14px;
background: #0f766e;
color: #fff;
font-weight: 950;
cursor: pointer;
}
.fattura-pdf-mail-box button:disabled {
background: #94a3b8;
cursor: not-allowed;
}
.fattura-pdf-frame {
width: 100%;
flex: 1 1 auto;
min-height: 0;
border: 0;
background: #f8fafc;
}
@media (max-width: 720px) {
.fattura-pdf-panel {
padding: 8px;
align-items: stretch;
}
.fattura-pdf-box {
width: 100%;
height: calc(100vh - 16px);
border-radius: 16px;
}
.fattura-pdf-head {
padding: 9px;
}
.fattura-pdf-actions button {
padding: 8px 9px;
}
.fattura-pdf-mail-box {
padding: 8px;
align-items: stretch;
}
.fattura-pdf-mail-box input,
.fattura-pdf-mail-box button {
font-size: 0.88rem;
padding: 10px;
}
}
.fattura-resend-panel {
position: fixed;
inset: 0;
background: rgba(15,23,42,0.48);
z-index: 4740;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.fattura-resend-panel.open { display: flex; }
.fattura-resend-box {
width: min(760px, 96vw);
max-height: 90vh;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 30px 90px rgba(15,23,42,0.42);
display: flex;
flex-direction: column;
overflow: hidden;
}
.fattura-resend-body {
padding: 12px;
overflow-y: auto;
background: #f8fafc;
}
.fattura-resend-info {
padding: 10px;
border-radius: 12px;
background: #fff7ed;
color: #7c2d12;
font-size: 0.84rem;
font-weight: 850;
margin-bottom: 10px;
}
.fattura-resend-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.fattura-resend-grid input {
width: 100%;
border: 1px solid #cbd5e1;
border-radius: 10px;
padding: 10px;
font-size: 0.88rem;
font-weight: 850;
background: #fff;
}
.fattura-resend-grid textarea {
width: 100%;
min-height: 86px;
resize: vertical;
border: 1px solid #cbd5e1;
border-radius: 10px;
padding: 10px;
font-size: 0.88rem;
font-weight: 850;
background: #fff;
}
.fattura-resend-grid .wide { grid-column: 1 / -1; }
.fattura-resend-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px;
background: #fff;
border-top: 1px solid #e5e7eb;
}
.fattura-resend-actions button {
border: none;
border-radius: 11px;
padding: 10px 13px;
font-size: 0.82rem;
font-weight: 950;
cursor: pointer;
}
.fattura-resend-cancel { background: #e5e7eb; color: #111827; }
.fattura-resend-send { background: #16a34a; color: #fff; }
.fattura-resend-status {
min-height: 18px;
margin-top: 9px;
font-size: 0.82rem;
font-weight: 850;
color: #475569;
}
.fatture-load-more {
width: 100%;
border: none;
border-radius: 12px;
background: #111827;
color: #fff;
padding: 12px;
font-weight: 950;
cursor: pointer;
margin: 6px 0 4px;
}
@media (max-width: 680px) {
.fattura-resend-grid { grid-template-columns: 1fr; }
}
/* SEZIONE SALA GIGANTE */
.server-menu-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 6px;
grid-column: 1 / -1;
width: 100%;
min-width: 0;
}
.global-menu-box {
background: rgba(255,255,255,0.1);
padding: 4px;
border-radius: 8px;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 5px;
grid-column: 1 / -1;
height: 34px;
box-sizing: border-box;
}
.server-menu-row .global-menu-box {
grid-column: auto;
grid-template-columns: minmax(0, 1fr);
padding: 3px;
gap: 4px;
}
.server-menu-row .btn-server-print,
.server-menu-row .btn-kitchen-print,
.server-menu-row .btn-menu-open,
.server-menu-row .btn-theme-open { height: 34px; }
.server-menu-row .select-big,
.server-menu-row .btn-big-apply { height: 24px; }
.label-big { font-size: 0.68rem; font-weight: 900; color: #eee; margin:0; }
.select-big {
padding: 0 4px;
border: 1px solid #555;
border-radius: 6px;
font-weight: 800;
font-size: 0.74rem;
height: 26px;
background-color: #fff;
color: #333;
cursor: pointer;
width: 100%;
min-width: 0;
}
.btn-big-apply {
background: #2980b9; color: white; border: none; padding: 0; height: 26px;
border-radius: 6px; font-weight: 900; font-size: 0.72rem; cursor: pointer;
}
.btn-menu-open {
background: #6366f1;
font-size: 0.58rem;
}
.menu-settings-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
min-width: 0;
}
.menu-settings-split .btn-style { width: 100%; padding: 0 3px; font-size:0.62rem; }
.btn-theme-open { background: #0f766e; font-size: 0.58rem; }
.menu-choice-list { display: grid; gap: 10px; padding: 8px 0; }
.menu-choice-btn {
height: 58px;
border: 1px solid #dbe3ee;
border-radius: 12px;
background: #ffffff;
color: #1f2937;
font-size: 1.25rem;
font-weight: 900;
cursor: pointer;
box-shadow: 0 4px 0 #cbd5e1;
}
.menu-choice-btn:nth-child(1) { border-left: 7px solid #8bd450; }
.menu-choice-btn:nth-child(2) { border-left: 7px solid #ff876d; }
.menu-choice-btn:nth-child(3) { border-left: 7px solid #2563eb; }
.menu-choice-btn:nth-child(4) { border-left: 7px solid #f59e0b; }
.menu-theme-box {
width: min(1040px, calc(100vw - 24px));
max-width: none !important;
max-height: 92vh;
overflow-y: auto;
padding: 22px !important;
text-align: left;
}
.menu-theme-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.menu-theme-head h2 { margin:0; color:#0f766e; }
.menu-theme-close { border:0; border-radius:9px; padding:10px 14px; background:#334155; color:#fff; font-weight:900; cursor:pointer; }
.menu-theme-toolbar { display:grid; grid-template-columns:minmax(170px, 1fr) minmax(170px, 1fr) auto; gap:10px; align-items:end; margin-bottom:16px; }
.menu-theme-toolbar label, .menu-theme-control { display:flex; flex-direction:column; gap:6px; color:#334155; font-size:0.76rem; font-weight:900; text-transform:uppercase; letter-spacing:0.02em; }
.menu-theme-toolbar select { min-height:42px; border:1px solid #cbd5e1; border-radius:9px; padding:0 10px; background:#fff; color:#0f172a; font-weight:850; }
.menu-theme-copy { min-height:42px; border:0; border-radius:9px; padding:0 15px; background:#475569; color:#fff; font-weight:900; cursor:pointer; }
.menu-theme-layout { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(300px, 0.85fr); gap:16px; align-items:start; }
.menu-theme-fields { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.menu-theme-control { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px; text-transform:none; letter-spacing:0; }
.menu-theme-control input[type="color"] { width:100%; height:38px; border:0; padding:0; border-radius:7px; background:transparent; cursor:pointer; }
.menu-theme-control input[type="range"] { width:100%; }
.menu-theme-control select { width:100%; min-height:38px; border:1px solid #cbd5e1; border-radius:8px; padding:0 9px; background:#fff; color:#0f172a; font-weight:800; }
.menu-theme-control select[data-theme-font] { display:none; }
.menu-theme-font-trigger {
width:100%;
min-height:48px;
border:1px solid #cbd5e1;
border-radius:8px;
padding:7px 10px;
background:#fff;
color:#0f172a;
cursor:pointer;
text-align:left;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.menu-theme-font-trigger-name { min-width:0; font-size:1rem; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-theme-font-trigger-sample { flex:0 0 auto; color:#0f766e; font-size:1.3rem; font-weight:800; }
.menu-theme-font-picker-box {
width:min(960px, calc(100vw - 24px)) !important;
max-width:none !important;
height:min(86vh, 760px);
max-height:calc(100vh - 24px);
padding:18px !important;
display:flex;
flex-direction:column;
overflow:hidden;
text-align:left;
}
.menu-theme-font-picker-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.menu-theme-font-picker-head h2 { margin:0; color:#0f766e; font-size:1.45rem; }
.menu-theme-font-picker-content { flex:1; min-height:0; overflow-y:auto; padding-right:4px; -webkit-overflow-scrolling:touch; }
.menu-theme-font-group + .menu-theme-font-group { margin-top:16px; }
.menu-theme-font-group-title { margin:0 0 8px; color:#475569; font-family:Arial,sans-serif; font-size:.78rem; font-weight:900; text-transform:uppercase; }
.menu-theme-font-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px; }
.menu-theme-font-choice {
min-width:0;
min-height:70px;
border:2px solid #dbe3ec;
border-radius:9px;
padding:9px 11px;
background:#fff;
color:#172033;
cursor:pointer;
text-align:left;
display:flex;
flex-direction:column;
justify-content:center;
gap:4px;
}
.menu-theme-font-choice.active { border-color:#16a34a; background:#ecfdf3; box-shadow:inset 0 0 0 1px #16a34a; }
.menu-theme-font-choice-name { font-size:1.08rem; font-weight:800; line-height:1.1; overflow-wrap:anywhere; }
.menu-theme-font-choice-sample { font-size:.88rem; font-weight:500; line-height:1.15; opacity:.78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-theme-value { color:#64748b; font-size:0.72rem; font-weight:850; }
.menu-theme-preview-wrap { position:sticky; top:0; }
.menu-theme-preview-label { margin-bottom:7px; color:#475569; font-size:0.75rem; font-weight:950; text-transform:uppercase; }
.menu-theme-preview { min-height:390px; border:2px solid #cbd5e1; border-radius:14px; padding:12px; overflow:hidden; transition:background-color .15s ease; }
.menu-theme-preview-bar { display:flex; gap:7px; padding:8px; border-radius:18px; margin-bottom:16px; }
.menu-theme-preview-button { flex:1; min-height:34px; border:0; border-radius:14px; font-size:0.68rem; font-weight:900; }
.menu-theme-preview-title { text-align:center; font-weight:950; margin:10px 0 14px; line-height:1; overflow-wrap:anywhere; }
.menu-theme-preview-product { width:min(230px, 90%); margin:0 auto; border:1px solid rgba(15,23,42,.12); overflow:hidden; box-shadow:0 3px 10px rgba(15,23,42,.12); }
.menu-theme-preview-image { height:100px; background:linear-gradient(135deg,#cbd5e1,#94a3b8); position:relative; }
.menu-theme-preview-price { position:absolute; right:0; bottom:0; padding:5px 9px; border-radius:8px 0 0 0; font-weight:900; }
.menu-theme-preview-body { padding:10px; }
.menu-theme-preview-name { font-weight:900; line-height:1.18; }
.menu-theme-preview-desc { margin-top:5px; opacity:.72; font-size:.8em; }
.menu-theme-preview-buy { width:100%; min-height:34px; margin-top:12px; border:0; border-radius:18px; font-weight:900; }
.menu-theme-preview-panels { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.menu-theme-preview-panel { min-height:48px; border:1px solid rgba(15,23,42,.12); border-radius:9px; padding:8px; font-size:.72rem; font-weight:900; }
.menu-theme-actions { display:flex; gap:10px; margin-top:18px; }
.menu-theme-actions button { min-height:46px; border:0; border-radius:10px; padding:0 18px; font-weight:950; cursor:pointer; }
.menu-theme-save { flex:1; background:#16a34a; color:#fff; }
.menu-theme-reset { background:#fee2e2; color:#991b1b; }
.menu-theme-reset-confirm { display:none; align-items:center; gap:9px; margin-top:12px; padding:12px; border:1px solid #fecaca; border-radius:10px; background:#fff1f2; color:#991b1b; font-weight:850; }
.menu-theme-reset-confirm.open { display:flex; }
.menu-theme-reset-confirm button { border:0; border-radius:8px; padding:9px 12px; color:#fff; font-weight:900; cursor:pointer; }
.menu-theme-reset-confirm .yes { background:#dc2626; }
.menu-theme-reset-confirm .no { background:#64748b; }
@media (max-width: 760px) {
.menu-theme-layout { grid-template-columns:1fr; }
.menu-theme-fields { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.menu-theme-preview-wrap { position:static; }
.menu-theme-toolbar { grid-template-columns:1fr 1fr; }
.menu-theme-copy { grid-column:1 / -1; }
.menu-theme-font-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.menu-theme-font-picker-box { height:calc(100vh - 20px); padding:14px !important; }
}
.payment-modal-box {
width: min(940px, calc(100vw - 24px)) !important;
max-width: none !important;
height: 90vh;
max-height: 90vh;
overflow: hidden;
padding: 22px !important;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.payment-layout {
display: grid;
grid-template-columns: minmax(330px, 1fr) minmax(320px, 380px);
gap: 16px;
align-items: stretch;
flex: 1;
min-height: 0;
}
.payment-actions-panel {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
padding-right: 2px;
}
.payment-actions-stack {
display: flex;
flex-direction: column;
gap: 15px;
}
.payment-side-panel {
min-width: 0;
min-height: 0;
max-height: none;
display: grid;
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
overflow: hidden;
}
.vip-payment-box {
background: #f8fafc;
border: 1px solid #dbeafe;
border-radius: 14px;
padding: 10px;
margin-bottom: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
text-align: left;
overflow: hidden;
}
.fattura-payment-box {
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 14px;
padding: 10px;
text-align: left;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.fattura-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.fattura-title {
font-size: 0.95rem;
font-weight: 900;
color: #9a3412;
}
.fattura-selected {
display: none;
background: #ffffff;
border: 1px solid #fdba74;
border-radius: 11px;
padding: 8px;
margin-bottom: 8px;
color: #431407;
}
.fattura-selected.open { display: block; }
.fattura-selected-main {
display: grid;
grid-template-columns: 1fr 38px;
gap: 8px;
align-items: start;
}
.fattura-selected-name {
font-size: 0.88rem;
font-weight: 900;
line-height: 1.2;
}
.fattura-selected-meta {
font-size: 0.72rem;
font-weight: 800;
color: #9a3412;
margin-top: 3px;
overflow-wrap: anywhere;
}
.fattura-clear {
width: 36px;
height: 36px;
border: none;
border-radius: 9px;
background: #dc2626;
color: #fff;
font-weight: 900;
cursor: pointer;
}
.fattura-only-btn {
width: 100%;
min-height: 38px;
margin-bottom: 8px;
border: 2px solid #ea580c;
border-radius: 9px;
background: #fff;
color: #9a3412;
font-size: 0.78rem;
font-weight: 950;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fattura-only-btn.active {
background: #15803d;
border-color: #15803d;
color: #fff;
}
.fattura-only-btn:disabled {
background: #f3f4f6;
border-color: #d1d5db;
color: #9ca3af;
cursor: not-allowed;
}
.fattura-search-row {
display: grid;
grid-template-columns: 1fr 78px;
gap: 7px;
}
.fattura-search-row input,
.fattura-quick-form input {
width: 100%;
min-width: 0;
border: 1px solid #fdba74;
border-radius: 9px;
padding: 9px 10px;
font-size: 0.85rem;
font-weight: 800;
box-sizing: border-box;
}
.fattura-search-row button,
.fattura-new-btn,
.fattura-save-btn,
.fattura-lookup-btn {
border: none;
border-radius: 9px;
background: #f97316;
color: #fff;
font-size: 0.78rem;
font-weight: 900;
cursor: pointer;
}
.fattura-new-btn {
width: 100%;
min-height: 34px;
margin-top: 7px;
background: #7c2d12;
}
.fattura-results {
display: grid;
gap: 5px;
margin-top: 7px;
flex: 1;
min-height: 0;
max-height: none;
overflow-y: auto;
align-content: start;
padding-right: 2px;
}
.fattura-result-row {
width: 100%;
border: 1px solid #fed7aa;
border-radius: 9px;
background: #fff;
padding: 7px 8px;
text-align: left;
cursor: pointer;
}
.fattura-result-name {
font-size: 0.82rem;
font-weight: 900;
color: #431407;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fattura-result-meta {
font-size: 0.7rem;
color: #9a3412;
font-weight: 800;
overflow-wrap: anywhere;
}
.fattura-quick-form {
display: none;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed #fdba74;
gap: 6px;
max-height: min(220px, 38%);
overflow-y: auto;
}
.fattura-quick-form.open {
display: grid;
}
.fattura-quick-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.fattura-save-btn {
min-height: 38px;
background: #16a34a;
}
.fattura-lookup-btn {
min-height: 36px;
background: #2563eb;
}
.vip-payment-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.vip-payment-title {
font-size: 0.95rem;
font-weight: 900;
color: #1e3a8a;
display: flex;
align-items: center;
gap: 7px;
}
.vip-count-pill {
background: #dbeafe;
color: #1d4ed8;
border-radius: 999px;
padding: 3px 8px;
font-size: 0.72rem;
line-height: 1;
}
.vip-manual-row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 92px;
gap: 7px;
margin-bottom: 8px;
}
.vip-manual-row input {
width: 100%;
min-width: 0;
box-sizing: border-box;
border: 1px solid #93c5fd;
border-radius: 9px;
background: #fff;
color: #0f172a;
padding: 9px 10px;
font-size: 0.86rem;
font-weight: 850;
}
.vip-manual-row input[readonly] { cursor:pointer; caret-color:transparent; }
.vip-manual-row input.keypad-open { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.16); }
.vip-manual-row button {
border: none;
border-radius: 9px;
background: #2563eb;
color: #fff;
font-size: 0.76rem;
font-weight: 900;
cursor: pointer;
}
.vip-manual-row button:disabled {
opacity: 0.55;
cursor: wait;
}
.vip-id-keypad {
position:absolute;
z-index:30;
top:calc(100% + 6px);
left:0;
width:min(238px,100%);
box-sizing:border-box;
display:none;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
padding:8px;
border:1px solid #bfdbfe;
border-radius:12px;
background:rgba(255,255,255,.98);
box-shadow:0 16px 35px rgba(15,23,42,.25),0 3px 9px rgba(15,23,42,.12);
-webkit-backdrop-filter:saturate(180%) blur(16px);
backdrop-filter:saturate(180%) blur(16px);
}
.vip-id-keypad.open { display:grid; }
.vip-manual-row .vip-id-key {
min-width:0;
min-height:42px;
padding:0;
border:1px solid #dbe3ef;
border-radius:9px;
background:#f1f5f9;
color:#0f172a;
font-size:1rem;
font-weight:850;
cursor:pointer;
}
.vip-manual-row .vip-id-key:active { transform:scale(.96); background:#dbeafe; }
.vip-manual-row .vip-id-key-clear { background:#fee2e2; border-color:#fecaca; color:#b91c1c; }
.vip-manual-row .vip-id-key-back { background:#e2e8f0; color:#334155; }
.vip-manual-row .vip-id-key-confirm {
grid-column:1 / -1;
min-height:44px;
background:#16a34a;
border-color:#15803d;
color:#fff;
font-size:.8rem;
}
.vip-selected {
display: none;
background: #ffffff;
border: 1px solid #bfdbfe;
border-radius: 12px;
padding: 9px;
margin-bottom: 8px;
}
.vip-selected.open {
display: block;
}
.vip-selected-main {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
font-size: 0.92rem;
font-weight: 800;
color: #0f172a;
}
.vip-selected-credit {
white-space: nowrap;
color: #16a34a;
font-weight: 900;
}
.vip-action-row {
display: grid;
grid-template-columns: 1fr 1fr 42px;
gap: 7px;
margin-top: 8px;
}
.vip-action-row button {
min-height: 42px;
border: none;
border-radius: 10px;
font-weight: 900;
color: #fff;
cursor: pointer;
transition: opacity 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.vip-action-choice {
opacity: 0.46;
filter: saturate(0.55) brightness(0.96);
}
.vip-action-choice.is-selected {
opacity: 1;
filter: saturate(1.2) brightness(1.06);
transform: translateY(-1px);
animation: vipActionPulse 1.35s ease-in-out infinite;
}
.vip-action-use { background: #f97316; }
.vip-action-use.is-selected {
background: #ea580c;
box-shadow: 0 0 0 3px rgba(249,115,22,0.28), 0 10px 20px rgba(234,88,12,0.24);
}
.vip-action-load { background: #16a34a; }
.vip-action-load.is-selected {
background: #15803d;
box-shadow: 0 0 0 3px rgba(22,163,74,0.28), 0 10px 20px rgba(21,128,61,0.24);
}
.vip-action-clear { background: #dc2626; }
@keyframes vipActionPulse {
0%, 100% {
filter: saturate(1.2) brightness(1.03);
}
50% {
filter: saturate(1.35) brightness(1.18);
}
}
.vip-action-summary {
margin-top: 7px;
font-size: 0.84rem;
font-weight: 800;
color: #334155;
}
.vip-list {
flex: 1;
min-height: 0;
max-height: none;
overflow-y: auto;
display: grid;
align-content: start;
gap: 6px;
padding-right: 2px;
}
.vip-row {
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #ffffff;
padding: 8px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
text-align: left;
cursor: pointer;
}
.vip-row:active { transform: scale(0.98); }
.vip-row-name {
font-size: 0.9rem;
font-weight: 900;
color: #111827;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vip-row-meta {
font-size: 0.75rem;
color: #64748b;
font-weight: 800;
}
.vip-row-credit {
font-size: 0.88rem;
font-weight: 900;
color: #16a34a;
white-space: nowrap;
}
.vip-empty {
color: #64748b;
font-size: 0.85rem;
font-weight: 700;
padding: 8px 2px;
text-align: center;
}
#paymentModal.vip-locked .vip-pay-btn {
opacity: 0.42;
pointer-events: none;
filter: grayscale(0.25);
}
@media (max-width: 760px) {
.payment-modal-box {
width: min(520px, calc(100vw - 20px)) !important;
height: 90vh;
max-height: 90vh;
overflow-y: auto;
}
.payment-layout {
grid-template-columns: 1fr;
flex: none;
min-height: auto;
}
.payment-side-panel {
max-height: none;
overflow: visible;
display: grid;
grid-template-rows: minmax(260px, auto) minmax(260px, auto);
}
.vip-payment-box {
min-height: 260px;
max-height: 320px;
}
.fattura-payment-box {
min-height: 280px;
max-height: 420px;
}
.fattura-results {
max-height: 180px;
}
}
.menu-choice-btn:nth-child(5) { border-left: 7px solid #8b5cf6; }
.menu-choice-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #cbd5e1; }
.operation-log-row,
.cashmatic-history-row,
.sumup-history-row,
.cashmatic-fund-card,
.cashmatic-level-row {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 8px;
color: #2c3e50;
}
.numbered-history-row { display:flex; align-items:flex-start; gap:10px; }
.history-row-number { min-width:28px; height:28px; border-radius:50%; background:#2563eb; color:white; display:flex; align-items:center; justify-content:center; font-weight:950; font-size:0.82rem; flex-shrink:0; margin-top:2px; }
.history-row-content { min-width:0; flex:1; }
.history-row-main { min-width:0; flex:1; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.history-row-side { min-width:150px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:7px; flex-shrink:0; }
.history-time-badge { background:#111827; color:white; border-radius:10px; padding:8px 11px; font-size:0.95rem; font-weight:950; line-height:1.1; text-align:center; box-shadow:0 8px 18px rgba(15,23,42,0.22); white-space:nowrap; }
.history-status-badge { border-radius:999px; padding:6px 11px; color:white; font-size:0.8rem; font-weight:950; letter-spacing:0.02em; background:#16a34a; white-space:nowrap; }
.history-status-badge.failed,
.history-status-badge.cancelled,
.history-status-badge.refunded { background:#dc2626; }
.history-status-badge.pending { background:#d97706; }
.operation-log-time { font-size: 0.78rem; color: #7f8c8d; font-weight: 800; margin-bottom: 4px; }
.operation-log-desc { font-size: 0.95rem; font-weight: 900; line-height: 1.25; }
.operation-log-meta { font-size: 0.75rem; color: #95a5a6; margin-top: 4px; }
.cashmatic-history-title { font-size:0.95rem; font-weight:950; line-height:1.25; }
.cashmatic-history-meta { font-size:0.78rem; color:#64748b; font-weight:800; margin-top:4px; }
.cashmatic-history-money { font-size:0.9rem; font-weight:950; margin-top:6px; color:#0f766e; }
.cashmatic-history-row.successful { background:#ecfdf5; border-color:#86efac; }
.cashmatic-history-row.failed,
.cashmatic-history-row.cancelled { background:#fee2e2; border-color:#fca5a5; }
.cashmatic-history-row.successful .history-row-number { background:#16a34a; }
.cashmatic-history-row.failed .history-row-number,
.cashmatic-history-row.cancelled .history-row-number { background:#dc2626; }
.cashmatic-history-row.failed .cashmatic-history-money,
.cashmatic-history-row.cancelled .cashmatic-history-money { color:#dc2626; }
.cashmatic-fund-wrap { padding:12px; overflow-y:auto; }
.cashmatic-fund-summary { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom:12px; }
.cashmatic-fund-card { margin-bottom:0; border-color:#cbd5e1; }
.cashmatic-fund-card.income { background:#ecfdf5; border-color:#34d399; }
.cashmatic-fund-card-title { color:#64748b; font-size:0.78rem; font-weight:950; text-transform:uppercase; margin-bottom:5px; }
.cashmatic-fund-card-value { color:#0f172a; font-size:1.35rem; font-weight:950; line-height:1; }
.cashmatic-fund-card.income .cashmatic-fund-card-value { color:#047857; }
.cashmatic-fund-card-sub { color:#64748b; font-size:0.68rem; font-weight:850; margin-top:6px; line-height:1.15; }
.cashmatic-fund-actions { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-bottom:12px; }
.cashmatic-fund-action { border:none; border-radius:10px; color:white; min-height:48px; font-size:0.82rem; font-weight:950; cursor:pointer; line-height:1.05; padding:8px 6px; }
.cashmatic-fund-action:disabled { opacity:0.55; cursor:not-allowed; }
.cashmatic-level-row { display:grid; grid-template-columns:80px 82px 72px 1fr 88px; gap:8px; align-items:center; border-color:#e2e8f0; }
.cashmatic-level-value { font-size:1.08rem; font-weight:950; color:#111827; }
.cashmatic-level-pill { border-radius:999px; padding:6px 8px; font-size:0.78rem; font-weight:950; text-align:center; background:#e0f2fe; color:#075985; }
.cashmatic-level-pill.note { background:#fef3c7; color:#92400e; }
.cashmatic-level-meta { color:#64748b; font-size:0.78rem; font-weight:800; line-height:1.2; }
.cashmatic-level-total { text-align:right; color:#0f766e; font-size:1.02rem; font-weight:950; }
.sumup-history-title { font-size:0.95rem; font-weight:950; line-height:1.25; }
.sumup-history-meta { font-size:0.78rem; color:#64748b; font-weight:800; margin-top:4px; }
.sumup-history-money { font-size:0.94rem; font-weight:950; margin-top:6px; color:#047857; }
.sumup-history-row.successful { background:#ecfdf5; border-color:#86efac; }
.sumup-history-row.failed,
.sumup-history-row.cancelled,
.sumup-history-row.refunded { background:#fee2e2; border-color:#fca5a5; }
.sumup-history-row.pending { background:#fff7ed; border-color:#fdba74; }
.sumup-history-row.successful .history-row-number { background:#16a34a; }
.sumup-history-row.pending .history-row-number { background:#d97706; }
.sumup-history-row.failed .history-row-number,
.sumup-history-row.cancelled .history-row-number,
.sumup-history-row.refunded .history-row-number { background:#dc2626; }
.sumup-history-row.failed .sumup-history-money,
.sumup-history-row.cancelled .sumup-history-money,
.sumup-history-row.refunded .sumup-history-money { color:#dc2626; }
@media (max-width: 700px) {
.history-row-main { flex-direction:column; align-items:stretch; gap:8px; }
.history-row-side { min-width:0; width:100%; flex-direction:row; align-items:center; justify-content:space-between; }
.history-time-badge { font-size:0.86rem; padding:7px 9px; }
}
@media (min-width: 701px) {
body {
padding-bottom: calc(310px + env(safe-area-inset-bottom, 0px));
}
.top-bar {
width: min(420px, calc(100vw - 40px));
height: auto;
min-height: 0;
padding: 14px;
bottom: calc(30px + env(safe-area-inset-bottom, 0px));
border-radius: 24px;
gap: 8px;
}
.header-left, .header-right {
gap: 8px;
}
.btn-style {
height: 48px;
border-radius: 10px;
font-size: 0.88rem;
padding: 0 7px;
}
.menu-settings-split .btn-style { font-size:0.72rem; }
.log-special-split .btn-special-menus { font-size:0.66rem; }
.global-menu-box {
height: 48px;
padding: 6px;
border-radius: 10px;
grid-template-columns: minmax(0, 1fr) 58px;
gap: 7px;
}
.server-menu-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.server-menu-row .btn-server-print,
.server-menu-row .btn-kitchen-print,
.server-menu-row .btn-menu-open,
.server-menu-row .btn-theme-open {
height: 42px;
}
.server-menu-row .global-menu-box {
height: 42px;
padding: 5px;
grid-template-columns: minmax(0, 1fr) 48px;
gap: 6px;
}
.label-big {
font-size: 0.86rem;
}
.select-big {
height: 36px;
font-size: 0.88rem;
padding: 0 6px;
}
.btn-big-apply {
height: 36px;
border-radius: 8px;
font-size: 0.86rem;
}
.server-menu-row .select-big,
.server-menu-row .btn-big-apply {
height: 30px;
font-size: 0.8rem;
}
}
/* GRID WRAPPER */
.grid-wrapper { width: 100%; height: auto; overflow: visible; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
/* CARD TAVOLI */
.card {
border-radius: 10px;
padding: 10px;
text-align: center;
cursor: pointer;
box-shadow: 0 10px 22px rgba(15,23,42,0.20), 0 2px 6px rgba(15,23,42,0.12);
border: 1px solid rgba(15,23,42,0.10);
width: 90%;
max-width: 90%;
min-height: 117px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
justify-self: center;
position: relative;
transition: transform 0.1s;
}
.card:active { transform: scale(0.98); }
.card.occupato { background-color: #ff876d; color: #3b1510; }
.card.libero { background-color: #8bd450; color: #102a12; }
.card.conteggio { background-color: #3b82f6; color: white; border: 4px solid #1d4ed8; }
.card.waiter-call {
animation: waiterCallBlink 0.72s steps(2, end) infinite;
border: 5px solid #f1c40f !important;
z-index: 2;
}
@keyframes waiterCallBlink {
0% { background-color: #f1c40f; color: #111; box-shadow: 0 0 0 0 rgba(241,196,15,0.9), 0 0 26px rgba(241,196,15,0.95); transform: scale(1); }
50% { background-color: #c0392b; color: #fff; box-shadow: 0 0 0 8px rgba(192,57,43,0.45), 0 0 34px rgba(192,57,43,1); transform: scale(1.035); }
100% { background-color: #f1c40f; color: #111; box-shadow: 0 0 0 0 rgba(241,196,15,0.9), 0 0 26px rgba(241,196,15,0.95); transform: scale(1); }
}
.card.bill-call {
animation: billCallBlink 0.72s steps(2, end) infinite;
border: 5px solid #22d3ee !important;
z-index: 3;
}
@keyframes billCallBlink {
0% { background-color: #6d28d9; color: #fff; box-shadow: 0 0 0 0 rgba(109,40,217,0.9), 0 0 28px rgba(109,40,217,0.95); transform: scale(1); }
50% { background-color: #22d3ee; color: #09262c; box-shadow: 0 0 0 9px rgba(34,211,238,0.42), 0 0 36px rgba(34,211,238,1); transform: scale(1.04); }
100% { background-color: #6d28d9; color: #fff; box-shadow: 0 0 0 0 rgba(109,40,217,0.9), 0 0 28px rgba(109,40,217,0.95); transform: scale(1); }
}
.card h3 { margin: 10px 0 2px 0; font-size: 2.5rem; color: white; font-weight: 900; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.status-text { font-weight: 800; font-size: 0.9rem; display: block; margin-bottom: 0; line-height: 0.9; opacity: 0.95; text-transform:uppercase; }
.time-badge-card {
font-size: 1.3rem;
font-weight: 800;
color: #fff;
background: transparent;
padding: 0;
border-radius: 0;
display: block;
margin-top: -3px;
box-shadow: none;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
line-height: 1;
padding-top: 5px;
}
.menu-badge { position: absolute; top: 8px; right: 8px; font-size: 0.7rem; background: rgba(0,0,0,0.5); color: white; padding: 3px 6px; border-radius: 4px; font-weight: 700; text-transform: uppercase; }
.coperti-badge { position: absolute; top: 8px; left: 8px; font-size: 1.2rem; background: rgba(0,0,0,0.3); color: white; padding: 2px 8px; border-radius: 4px; font-weight: 800; }
.pin-badge-card { position: absolute; bottom: 5px; right: 8px; font-size: 0.8rem; color: rgba(255,255,255,0.8); font-weight: bold; font-family: monospace; }
/* MODAL FULL SCREEN */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 1050; display: none; justify-content: center; align-items: center; backdrop-filter: blur(4px); }
.modal-overlay.open { display: flex; }
.modal-content { background: white; width: 100%; max-width: none; height: 100vh; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: none; color: #333; }
/* Apertura preparata: i contenuti vengono costruiti dietro una copertura opaca. */
.panel-opening-mask {
position:fixed;
inset:-120px 0;
z-index:90;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .22s ease, visibility 0s linear .22s;
}
#modalOverlay .panel-opening-mask { background:#ffffff; }
.panel-opening-mask-inner {
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
color:#1d1d1f;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
text-align:center;
animation:panelOpeningContentIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.panel-opening-logo {
width:min(396px, 72vw);
height:min(174px, 25vh);
object-fit:contain;
display:block;
}
.panel-opening-title { font-size:.96rem; font-weight:720; letter-spacing:0; color:#3a3a3c; }
.panel-opening-progress {
position:relative;
width:min(288px, 58vw);
height:6px;
overflow:hidden;
border-radius:6px;
background:#e2e2e7;
}
.panel-opening-progress::after {
content:"";
position:absolute;
inset:0 auto 0 0;
width:42%;
border-radius:6px;
background:#169447;
animation:panelOpeningProgress .68s ease-in-out infinite;
}
.modal-overlay.is-preparing .panel-opening-mask {
opacity:1;
visibility:visible;
pointer-events:auto;
transition-delay:0s;
}
.modal-overlay.is-preparing > .table-workspace-beta,
.modal-overlay.is-preparing > .bar-sale-shell {
opacity:0;
transform:scale(.91);
border-radius:28px;
will-change:transform, opacity, border-radius;
}
.modal-overlay.is-revealing .panel-opening-mask {
visibility:visible;
pointer-events:none;
animation:panelOpeningMaskExit .56s cubic-bezier(.18,.78,.18,1) both;
will-change:transform, opacity;
}
.modal-overlay.is-revealing .panel-opening-logo {
animation:panelOpeningLogoExpand .56s cubic-bezier(.18,.78,.18,1) both;
will-change:transform, opacity;
}
.modal-overlay.is-revealing .panel-opening-title,
.modal-overlay.is-revealing .panel-opening-progress {
animation:panelOpeningDetailsExit .28s ease both;
}
.modal-overlay.is-revealing > .table-workspace-beta,
.modal-overlay.is-revealing > .bar-sale-shell {
animation:panelOpeningReveal .56s cubic-bezier(.18,.82,.18,1) both;
transform-origin:center center;
will-change:transform, opacity, border-radius;
}
@keyframes panelOpeningContentIn {
from { opacity:0; transform:translateY(5px); }
to { opacity:1; transform:translateY(0); }
}
@keyframes panelOpeningProgress {
0% { transform:translateX(-115%); }
55% { transform:translateX(90%); }
100% { transform:translateX(240%); }
}
@keyframes panelOpeningMaskExit {
0% { opacity:1; transform:scale(1); }
42% { opacity:.98; transform:scale(1.012); }
100% { opacity:0; transform:scale(1.08); }
}
@keyframes panelOpeningLogoExpand {
0% { opacity:1; transform:scale(1); }
42% { opacity:1; transform:scale(1.18); }
100% { opacity:0; transform:scale(2.25); }
}
@keyframes panelOpeningDetailsExit {
from { opacity:1; transform:translateY(0); }
to { opacity:0; transform:translateY(5px); }
}
@keyframes panelOpeningReveal {
0% { opacity:.08; transform:scale(.91); border-radius:28px; }
58% { opacity:.9; transform:scale(.985); border-radius:10px; }
100% { opacity:1; transform:scale(1); border-radius:0; }
}
@media (prefers-reduced-motion: reduce) {
.panel-opening-mask-inner,
.panel-opening-progress::after { animation:none; }
.modal-overlay.is-revealing > .table-workspace-beta,
.modal-overlay.is-revealing > .bar-sale-shell { animation:none; }
}
/* Apertura diretta stile app iOS: nessuna schermata intermedia. */
.panel-opening-mask { display:none !important; }
.modal-overlay.is-preparing {
animation:panelDirectBackdrop .5s cubic-bezier(.16,.82,.2,1) both;
transform-origin:center center;
will-change:opacity;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.modal-overlay.is-preparing > .table-workspace-beta,
.modal-overlay.is-preparing > .bar-sale-shell {
animation:panelDirectAppOpen .5s cubic-bezier(.16,.82,.2,1) both;
transform-origin:center center;
will-change:transform, opacity;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.modal-overlay.is-panel-closing {
animation:panelDirectBackdropClose .3s cubic-bezier(.4,0,.8,.2) both;
pointer-events:none;
will-change:opacity;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.modal-overlay.is-panel-closing > .table-workspace-beta,
.modal-overlay.is-panel-closing > .bar-sale-shell {
animation:panelDirectAppClose .3s cubic-bezier(.4,0,.8,.2) both;
transform-origin:center center;
will-change:transform, opacity;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
@keyframes panelDirectBackdrop {
from { opacity:0; }
to { opacity:1; }
}
@keyframes panelDirectAppOpen {
from { opacity:.18; transform:translate3d(0,0,0) scale(.72); }
to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes panelDirectBackdropClose {
from { opacity:1; }
to { opacity:0; }
}
@keyframes panelDirectAppClose {
from { opacity:1; transform:translate3d(0,0,0) scale(1); }
to { opacity:.12; transform:translate3d(0,0,0) scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
.modal-overlay.is-preparing,
.modal-overlay.is-preparing > .table-workspace-beta,
.modal-overlay.is-preparing > .bar-sale-shell,
.modal-overlay.is-panel-closing,
.modal-overlay.is-panel-closing > .table-workspace-beta,
.modal-overlay.is-panel-closing > .bar-sale-shell { animation-duration:.18s; }
}
.modal-header {
background: #2c3e50; color: white;
padding: 35px 15px 10px 15px;
display: flex; flex-direction: row; justify-content: space-between; align-items: center;
border-bottom: 4px solid #1a252f; flex-shrink: 0; gap: 10px;
}
.header-left-group { display: flex; align-items: center; gap: 10px; flex: 1; }
.table-title-huge { font-size: 3.5rem; font-weight: 900; margin: 0; line-height: 1; color: #f1c40f; text-shadow: 3px 3px 0 #000; margin-right: 15px; }
.modal-select { font-size: 1.3rem; padding: 5px 10px; border-radius: 6px; border: 2px solid #7f8c8d; font-weight: bold; cursor: pointer; height: 50px; }
.header-right-group { display: flex; align-items: center; gap: 8px; }
.btn-tool { width: 50px; height: 50px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 6px; cursor: pointer; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; }
.btn-close-header {
background-color: #e74c3c; color: white; border: 2px solid #c0392b; border-radius: 8px;
font-size: 1.3rem; font-weight: 900; padding: 0 25px; height: 50px; cursor: pointer; text-transform: uppercase;
box-shadow: 0 4px 0 #922b21; transition: all 0.1s;
display: flex; align-items: center;
}
.btn-close-header:active { transform: translateY(4px); box-shadow: 0 0 0 #922b21; }
.btn-close-x-roman {
background-color: #c0392b; color: white; border: 2px solid #e74c3c; border-radius: 8px;
width: 50px; height: 50px; font-size: 1.5rem; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pin-text { font-family: monospace; font-size: 1.2rem; color: #f1c40f; font-weight: bold; margin: 0 5px; }
/* SPLIT */
.modal-body-split { display: flex; flex: 1; overflow: hidden; background: #ecf0f1; }
.split-left { width: 60%; display: flex; flex-direction: column; border-right: 1px solid #ddd; background: #fff; }
.split-right { width: 40%; display: flex; flex-direction: column; background: #fff; }
/* CATEGORIE */
.cat-nav {
display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 5px; padding: 10px; background: #2c3e50;
height: 85px;
flex-shrink: 0; align-items: center;
}
.cat-tab {
padding: 18px 25px;
background: rgba(255,255,255,0.1); color: #ccc; border-radius: 6px; cursor: pointer;
font-weight: 800; text-transform: uppercase; font-size: 1.1rem; white-space: nowrap; flex-shrink: 0;
}
.cat-tab.active { background: #27ae60; color: white; border-color: #2ecc71; box-shadow: 0 0 15px rgba(39, 174, 96, 0.6); transform: scale(1.05); }
.products-container { flex: 1; overflow-y: auto; padding: 10px; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.prod-card { background: white; border: 1px solid #eee; border-radius: 8px; padding: 5px; text-align: center; cursor: pointer; position: relative; transition: transform 0.1s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.prod-card:active { border-color: #27ae60; transform: scale(0.95); background-color:#e8f5e9; }
.prod-card img { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; margin-bottom: 5px; pointer-events: none; }
.prod-name { font-size: 0.85rem; font-weight: 700; height: 32px; overflow: hidden; line-height: 1.1; margin-bottom: 3px; color: #333; pointer-events: none; }
.prod-price { font-size: 0.8rem; color: #666; font-weight: bold; pointer-events: none; }
/* UI CARRELLO */
.order-list { flex: 1; overflow-y: auto; padding: 10px; background: #f8f9fa; }
.order-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
background: white;
padding: 8px;
margin-bottom: 5px;
border-radius: 8px;
border: 1px solid #ddd;
min-height: 60px;
transition: background 0.3s;
}
.order-row.is-paying { background-color: #fff9c4 !important; border-color: #fbc02d !important; }
.order-title-col { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.order-control-col { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.order-qty-block { display: flex; flex-direction: column; align-items: center; min-width: 96px; }
.order-price-client { display: flex; flex-direction: column; align-items: flex-end; min-width: 86px; }
.btn-delete-x { width: 30px; height: 30px; background: #c0392b; color: white; border: none; border-radius: 4px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.product-info { display: flex; align-items: flex-start; gap: 10px; flex-grow: 1; min-width: 0; }
.product-img-small { width: 45px; height: 45px; border-radius: 4px; object-fit: cover; border:1px solid #eee; flex-shrink: 0; }
.product-text { display: flex; flex-direction: column; justify-content: center; width: 100%; min-width: 0; }
.product-title { font-weight: 800; font-size: 0.98rem; color: #333; line-height: 1.14; white-space: normal; overflow-wrap: anywhere; }
.product-unit-price { font-size: 0.75rem; color: #777; display: flex; align-items: center; gap: 5px; font-weight: 600; margin-top: 2px; }
.product-note { background:#fff7ed; border:1px solid #fed7aa; border-left:5px solid #f97316; color:#9a3412; border-radius:7px; padding:5px 7px; font-size:0.78rem; line-height:1.25; font-weight:800; overflow-wrap:anywhere; }
.product-note span { display:inline-block; margin-right:5px; color:#7c2d12; font-weight:950; text-transform:uppercase; font-size:0.68rem; }
.product-note.is-sollecito { background:#fee2e2; border-color:#fecaca; border-left-color:#dc2626; color:#991b1b; animation: noteSollecitoPulse 0.85s ease-in-out infinite; }
.product-note.is-sollecito span { color:#7f1d1d; }
@keyframes noteSollecitoPulse {
0%, 100% { box-shadow:0 0 0 0 rgba(220,38,38,0.15); }
50% { box-shadow:0 0 0 4px rgba(220,38,38,0.12); }
}
.fixed-menu-order-group {
--fixed-menu-accent:#2563eb;
--fixed-menu-bg:#eaf2ff;
margin:7px 0 11px;
padding:6px;
background:var(--fixed-menu-bg);
border:2px solid var(--fixed-menu-accent);
border-left-width:7px;
border-radius:10px;
box-shadow:0 2px 7px rgba(15,23,42,0.12);
}
.fixed-menu-order-group.tone-1 { --fixed-menu-accent:#15803d; --fixed-menu-bg:#ecfdf3; }
.fixed-menu-order-group.tone-2 { --fixed-menu-accent:#c2410c; --fixed-menu-bg:#fff7ed; }
.fixed-menu-order-group.tone-3 { --fixed-menu-accent:#7e22ce; --fixed-menu-bg:#faf5ff; }
.fixed-menu-order-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:5px 7px 8px;
color:var(--fixed-menu-accent);
font-weight:900;
font-size:0.88rem;
line-height:1.2;
text-transform:uppercase;
}
.fixed-menu-order-header small {
color:#475569;
font-size:0.68rem;
font-weight:800;
text-transform:none;
}
.fixed-menu-order-group .order-row {
margin-bottom:5px;
border-color:var(--fixed-menu-accent);
background:rgba(255,255,255,0.88);
box-shadow:0 1px 2px rgba(15,23,42,0.05);
}
.fixed-menu-order-group .order-row:last-child { margin-bottom:0; }
.poke-order-badge {
display:inline-flex;
align-items:center;
align-self:flex-start;
background:#dcfce7;
border:1px solid #86efac;
color:#166534;
border-radius:999px;
padding:3px 8px;
font-size:0.7rem;
line-height:1.15;
font-weight:900;
text-transform:uppercase;
}
.poke-description {
background:#f0fdf4;
border:1px solid #bbf7d0;
border-left:5px solid #16a34a;
color:#14532d;
border-radius:7px;
padding:6px 8px;
font-size:0.78rem;
line-height:1.3;
font-weight:650;
overflow-wrap:anywhere;
}
.poke-description span {
display:block;
margin-bottom:2px;
color:#166534;
font-size:0.66rem;
font-weight:950;
text-transform:uppercase;
}
.order-client { color:#2980b9; font-size:0.75rem; font-weight:bold; text-align:right; margin-top:2px; overflow-wrap:anywhere; }
.order-time { font-size:0.7rem; color:#888; text-align:center; margin-top:2px; font-weight:600; }
.qty-ctrl { display: flex; align-items: center; gap: 3px; margin-right: 0; flex-shrink: 0; }
.btn-circle { width: 30px; height: 30px; border-radius: 50%; border: none; color: white; font-weight: bold; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; padding: 0; }
.btn-minus { background: #e74c3c; } .btn-plus { background: #27ae60; }
.qty-num { font-weight: bold; width: 22px; text-align: center; font-size: 1.1rem; }
.price-display { font-size: 1.1rem; text-align: right; min-width: 75px; flex-shrink: 0; margin-right: 0; width: 100%; cursor: pointer; padding: 5px; border-radius: 6px; transition: background 0.2s; font-weight: 900; white-space: nowrap; }
.price-display:hover { background: rgba(0,0,0,0.05); }
.btn-bell-mini { padding: 2px 6px; border-radius: 4px; border: none; background: #f39c12; color: white; font-size: 0.8rem; cursor: pointer; font-weight: bold; }
.btn-pay-toggle { min-width: 45px; height: 38px; border-radius: 6px; border: none; color: white; font-size: 0.9rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; transition: background 0.2s; }
.pay-btn-zero { background: #95a5a6; color: #fff; }
.pay-btn-partial { background: #f39c12; color: #fff; }
.pay-btn-full { background: #27ae60; color: #fff; }
/* FOOTER */
.modal-footer { background: #fff; border-top: 1px solid #ddd; padding: 15px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 10px; }
.btn-footer-std { height: 75px; padding: 0 25px; border-radius: 10px; font-weight: 800; font-size: 1.3rem; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; box-shadow: 0 5px 0 rgba(0,0,0,0.2); }
.btn-footer-std:active { transform: scale(0.98); }
.btn-close-big { background: #c0392b; box-shadow: 0 5px 0 #922b21; }
.footer-right-actions { display: flex; align-items: center; gap: 15px; overflow-x: auto; }
.btn-scontrino { background: #27ae60; box-shadow: 0 5px 0 #219150; }
.btn-scontrino:disabled { background: #bdc3c7 !important; color: #7f8c8d !important; cursor: not-allowed; box-shadow: none; opacity: 0.6; }
.btn-unisci { background: #e67e22; box-shadow: 0 5px 0 #d35400; }
.btn-separato { background: #d35400; box-shadow: 0 5px 0 #a04000; }
.btn-diviso { background: #8e44ad; box-shadow: 0 5px 0 #71368a; }
.btn-discount { background: #c0392b; box-shadow: 0 5px 0 #922b21; }
.total-display { font-size: 2.2rem; font-weight: 900; color: #2c3e50; text-align: right; white-space:nowrap; margin-left: 15px; }
.discount-row { background:#fff5f5; border:2px solid #e74c3c; color:#c0392b; font-weight:900; }
.order-row.discount-row { grid-template-columns: minmax(0, 1fr) auto; }
.discount-row .discount-label { font-size:1.05rem; letter-spacing:0; }
.discount-row .discount-amount { font-size:1.25rem; white-space:nowrap; }
.btn-discount-remove { background:#c0392b; color:white; border:none; border-radius:6px; padding:9px 12px; font-weight:900; cursor:pointer; margin-left:10px; }
.discount-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; text-align:left; font-weight:800; color:#2c3e50; }
.discount-summary div { background:#f8f9fa; border:1px solid #ddd; border-radius:8px; padding:10px; }
.discount-summary b { display:block; font-size:1.25rem; margin-top:4px; }
/* TASTI ROMANA */
.btn-roman-big { height: 80px; padding: 0 40px; border-radius: 12px; font-weight: 900; font-size: 1.4rem; color: white; border: none; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,0.2); transition: transform 0.1s; text-transform: uppercase; }
.btn-roman-big:active { transform: translateY(4px); box-shadow: none; }
/* POPUPS GENERICI */
.popup-box { background: white; width: 90%; max-width: 400px; padding: 25px; border-radius: 16px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; color: #333; }
.popup-select { width: 100%; height: 90px; padding: 0 10px; border: 2px solid #ccc; border-radius: 8px; font-size: 1.8rem; font-weight: bold; text-align: center; text-align-last: center; margin-bottom: 15px; background: white; color: #333; }
.popup-textarea { width: 100%; height: 100px; padding: 10px; border: 2px solid #ccc; border-radius: 8px; font-size: 1rem; margin-bottom: 15px; resize: none; box-sizing: border-box; }
.btn-big-green { background: #27ae60; color: white; width: 100%; height: 50px; border: none; border-radius: 8px; font-size: 1.2rem; font-weight: bold; cursor: pointer; }
.message-popup-box { width:min(92vw, 920px) !important; max-width:920px !important; height:min(88vh, 780px) !important; min-height:min(88vh, 680px); padding:0 !important; text-align:left; overflow:hidden; display:flex; flex-direction:column; }
.message-popup-head { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px; background:#1f2937; color:white; }
.message-popup-head h2 { margin:0; font-size:1.35rem; color:white; font-weight:950; }
.message-popup-close { width:42px; height:42px; border:none; border-radius:10px; background:rgba(255,255,255,0.14); color:white; font-size:1.8rem; line-height:1; font-weight:900; cursor:pointer; }
.message-tabs { flex:0 0 auto; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; padding:12px; background:#e5e7eb; }
.message-tab-btn { min-height:48px; border:none; border-radius:10px; background:white; color:#334155; font-size:1rem; font-weight:950; cursor:pointer; box-shadow:0 3px 0 #cbd5e1; }
.message-tab-btn.active { background:#2563eb; color:white; box-shadow:0 3px 0 #1d4ed8; }
.message-tab-badge { display:none; min-width:22px; height:22px; margin-left:5px; padding:0 6px; align-items:center; justify-content:center; border-radius:999px; background:#dc2626; color:white; font-size:0.75rem; font-weight:950; vertical-align:middle; }
.message-tab-panel { display:none; flex:1 1 auto; min-height:0; overflow:auto; padding:18px 20px; background:#f8fafc; }
.message-tab-panel.active { display:flex; flex-direction:column; }
.message-section-title { margin:0 0 12px; font-size:1.15rem; color:#111827; font-weight:950; }
.message-help { margin:0 0 12px; color:#64748b; font-size:0.9rem; font-weight:800; line-height:1.35; }
.message-immediate-row { display:flex; gap:10px; align-items:stretch; }
.message-immediate-row .popup-select { flex:1; height:64px; font-size:1.25rem; margin-bottom:0; }
.message-immediate-row .btn-big-green { width:140px; height:64px; flex-shrink:0; }
.message-chat-new { background:white; border:2px solid #e5e7eb; border-radius:12px; padding:12px; margin-bottom:12px; box-shadow:0 4px 12px rgba(15,23,42,0.06); }
.message-chat-new-row { display:grid; grid-template-columns:190px 1fr 130px; gap:10px; align-items:stretch; }
.message-chat-new-row select { width:100%; min-height:54px; border:2px solid #cbd5e1; border-radius:10px; padding:0 10px; font-size:1rem; font-weight:900; color:#111827; background:white; }
.message-chat-new-row textarea { width:100%; min-height:54px; border:2px solid #cbd5e1; border-radius:10px; padding:10px; resize:vertical; font-size:0.95rem; font-weight:800; color:#111827; box-sizing:border-box; }
.message-chat-new-row button { min-height:54px; border:none; border-radius:10px; background:#16a34a; color:white; font-size:0.95rem; font-weight:950; cursor:pointer; }
.message-chat-layout { display:grid; grid-template-columns:300px minmax(0, 1fr); gap:12px; flex:1 1 auto; min-height:0; }
.message-chat-list { background:white; border:2px solid #e5e7eb; border-radius:12px; overflow:auto; padding:8px; min-height:0; box-shadow:0 4px 12px rgba(15,23,42,0.06); }
.message-chat-conversation { width:100%; display:block; text-align:left; border:2px solid #e5e7eb; border-radius:10px; background:#f8fafc; color:#111827; padding:10px; margin-bottom:8px; cursor:pointer; font-weight:850; }
.message-chat-conversation.active { border-color:#2563eb; background:#eff6ff; }
.message-chat-conversation.unread { border-color:#dc2626; background:#fff1f2; animation: staffChatCardPulse 0.8s ease-in-out infinite; }
.message-chat-conv-title { display:flex; justify-content:space-between; gap:8px; font-size:1rem; font-weight:950; }
.message-chat-conv-meta { margin-top:3px; color:#64748b; font-size:0.78rem; font-weight:850; }
.message-chat-conv-last { margin-top:6px; color:#334155; font-size:0.85rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.message-chat-thread { background:white; border:2px solid #e5e7eb; border-radius:12px; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 4px 12px rgba(15,23,42,0.06); }
.message-chat-thread-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:#1f2937; color:white; font-weight:950; }
.message-chat-thread-head button { border:none; border-radius:8px; background:#ef4444; color:white; padding:8px 10px; font-weight:950; cursor:pointer; }
.message-chat-confirm-delete { display:none; margin:10px 12px 0; padding:12px; border:2px solid #fecaca; border-radius:12px; background:#fff1f2; color:#7f1d1d; font-weight:900; }
.message-chat-confirm-delete.open { display:block; }
.message-chat-confirm-text { font-size:0.95rem; line-height:1.3; margin-bottom:10px; }
.message-chat-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.message-chat-confirm-actions button { min-height:42px; border:none; border-radius:9px; color:white; font-weight:950; cursor:pointer; }
.message-chat-confirm-actions .cancel { background:#64748b; }
.message-chat-confirm-actions .delete { background:#dc2626; }
.message-chat-messages { flex:1 1 auto; min-height:0; overflow:auto; padding:12px; background:#f4f7fb; display:flex; flex-direction:column; gap:8px; }
.message-chat-empty { padding:22px; text-align:center; color:#64748b; font-weight:900; }
.message-chat-bubble { max-width:82%; padding:10px 12px; border-radius:12px; font-size:0.95rem; font-weight:800; line-height:1.3; word-break:break-word; }
.message-chat-bubble.cliente { align-self:flex-start; background:#fff; border:2px solid #dbe3ef; color:#111827; border-bottom-left-radius:4px; }
.message-chat-bubble.staff { align-self:flex-end; background:#dcfce7; border:2px solid #86efac; color:#14532d; border-bottom-right-radius:4px; }
.message-chat-time { display:block; margin-top:4px; color:rgba(15,23,42,0.55); font-size:0.72rem; font-weight:850; }
.message-chat-reply { flex:0 0 auto; display:flex; gap:10px; padding:12px; border-top:1px solid #e5e7eb; }
.message-chat-reply textarea { flex:1; min-height:64px; max-height:130px; border:2px solid #cbd5e1; border-radius:10px; padding:10px; resize:vertical; font-size:0.95rem; font-weight:800; }
.message-chat-reply button { width:120px; border:none; border-radius:10px; background:#16a34a; color:white; font-size:0.95rem; font-weight:950; cursor:pointer; }
@keyframes staffChatCardPulse {
0%, 100% { box-shadow:0 0 0 0 rgba(220,38,38,0.22); }
50% { box-shadow:0 0 0 6px rgba(220,38,38,0.10); }
}
.message-recurring-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.message-field { display:flex; flex-direction:column; gap:5px; color:#334155; font-size:0.82rem; font-weight:950; text-transform:uppercase; letter-spacing:0.02em; }
.message-field input, .message-field textarea { width:100%; border:2px solid #cbd5e1; border-radius:10px; background:white; color:#111827; font-size:1rem; font-weight:800; padding:10px 12px; box-sizing:border-box; }
.message-field textarea { height:96px; resize:vertical; line-height:1.25; font-weight:800; text-transform:none; letter-spacing:0; }
.message-field-full { grid-column:1 / -1; }
.message-days { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:7px; }
.message-day-pill { cursor:pointer; user-select:none; }
.message-day-pill input { display:none; }
.message-day-pill span { min-height:44px; display:flex; align-items:center; justify-content:center; border:2px solid #cbd5e1; border-radius:10px; background:white; color:#334155; font-weight:950; }
.message-day-pill input:checked + span { background:#dcfce7; border-color:#22c55e; color:#14532d; }
.message-recurring-actions { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; margin:12px 0 16px; }
.message-recurring-actions button { height:52px; border:none; border-radius:10px; color:white; font-size:0.95rem; font-weight:950; cursor:pointer; }
.message-recurring-actions button:disabled { opacity:0.45; cursor:not-allowed; }
.message-recurring-save { background:#16a34a; }
.message-recurring-new { background:#64748b; }
.message-recurring-republish { background:#f59e0b; }
.message-recurring-list { display:grid; gap:10px; }
.message-recurring-card { background:white; border:2px solid #e5e7eb; border-left:7px solid #16a34a; border-radius:12px; padding:12px; color:#111827; box-shadow:0 5px 14px rgba(15,23,42,0.08); }
.message-recurring-card.off { border-left-color:#ef4444; opacity:0.78; }
.message-recurring-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:7px; }
.message-recurring-card-title { font-size:1rem; font-weight:950; line-height:1.2; }
.message-recurring-card-meta { font-size:0.8rem; color:#64748b; font-weight:850; line-height:1.35; }
.message-recurring-card-text { font-size:0.92rem; font-weight:800; line-height:1.28; margin-top:8px; color:#334155; }
.message-recurring-card-actions { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:7px; margin-top:10px; }
.message-recurring-card-actions button { min-height:38px; border:none; border-radius:8px; color:white; font-size:0.78rem; font-weight:950; cursor:pointer; padding:5px; }
.message-recurring-empty { padding:18px; text-align:center; border:2px dashed #cbd5e1; border-radius:12px; color:#64748b; font-weight:900; background:white; }
.restaurant-rule-grid { display:grid; grid-template-columns:110px minmax(0, 1fr) 130px; gap:12px; margin-bottom:12px; }
.restaurant-rule-menu-options { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:7px; }
.restaurant-rule-menu-pill { cursor:pointer; user-select:none; }
.restaurant-rule-menu-pill input { display:none; }
.restaurant-rule-menu-pill span { min-height:44px; display:flex; align-items:center; justify-content:center; border:2px solid #cbd5e1; border-radius:10px; background:white; color:#334155; font-size:0.86rem; font-weight:950; text-transform:uppercase; }
.restaurant-rule-menu-pill input:checked + span { background:#dbeafe; border-color:#2563eb; color:#1e3a8a; }
.restaurant-rule-actions { display:grid; grid-template-columns:1.25fr 1fr; gap:10px; margin:12px 0 16px; }
.restaurant-rule-actions button { height:52px; border:none; border-radius:10px; color:white; font-size:0.95rem; font-weight:950; cursor:pointer; }
.restaurant-rule-save { background:#16a34a; }
.restaurant-rule-new { background:#64748b; }
.restaurant-rules-list { display:grid; gap:10px; }
.restaurant-rule-card { background:white; border:2px solid #dbe3ef; border-left:7px solid #2563eb; border-radius:12px; padding:12px; color:#111827; box-shadow:0 5px 14px rgba(15,23,42,0.08); }
.restaurant-rule-card.off { border-left-color:#ef4444; opacity:0.76; }
.restaurant-rule-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.restaurant-rule-card-title { font-size:1rem; font-weight:950; line-height:1.25; }
.restaurant-rule-card-position { flex:0 0 auto; border-radius:999px; padding:5px 9px; background:#e2e8f0; color:#334155; font-size:0.76rem; font-weight:950; }
.restaurant-rule-card-text { margin-top:8px; color:#334155; font-size:0.92rem; font-weight:750; line-height:1.35; white-space:pre-wrap; }
.restaurant-rule-card-menus { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.restaurant-rule-card-menu { border-radius:999px; padding:4px 8px; background:#dbeafe; color:#1e3a8a; font-size:0.72rem; font-weight:950; text-transform:uppercase; }
.restaurant-rule-card-actions { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; margin-top:10px; }
.restaurant-rule-card-actions button { min-height:38px; border:none; border-radius:8px; color:white; font-size:0.78rem; font-weight:950; cursor:pointer; padding:5px; }
.restaurant-rule-delete-confirm { display:none; grid-template-columns:minmax(0, 1fr) auto auto; gap:8px; align-items:center; margin-top:10px; padding:10px; border:2px solid #fecaca; border-radius:10px; background:#fff1f2; color:#7f1d1d; font-size:0.86rem; font-weight:900; }
.restaurant-rule-delete-confirm.open { display:grid; }
.restaurant-rule-delete-confirm button { min-height:36px; border:none; border-radius:8px; padding:0 11px; color:white; font-weight:950; cursor:pointer; }
@media (max-width: 700px) {
.message-popup-box { width:calc(100vw - 16px) !important; height:92vh !important; min-height:0; max-height:92vh; }
.message-recurring-grid, .restaurant-rule-grid { grid-template-columns:1fr; }
.message-days { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.restaurant-rule-menu-options { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.message-immediate-row, .message-recurring-actions, .message-recurring-card-actions, .restaurant-rule-actions, .restaurant-rule-card-actions { grid-template-columns:1fr; display:grid; }
.message-immediate-row .btn-big-green { width:100%; }
.message-tabs { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.message-chat-new-row, .message-chat-layout { grid-template-columns:1fr; }
.message-chat-new-row button, .message-chat-reply button { width:100%; }
.message-chat-reply { flex-direction:column; }
.restaurant-rule-delete-confirm { grid-template-columns:1fr 1fr; }
.restaurant-rule-delete-confirm span { grid-column:1 / -1; }
}
.btn-conf-no { background: #e0e0e0; color: #333; border: none; padding: 20px; border-radius: 8px; font-weight: 800; font-size: 1.5rem; cursor: pointer; flex: 1; }
.btn-conf-yes { background: #c0392b; color: white; border: none; padding: 20px; border-radius: 8px; font-weight: 800; font-size: 1.5rem; cursor: pointer; flex: 1; }
.btn-conf-yes.green { background: #27ae60; }
.btn-conf-yes.bg-red { background: #c0392b; }
.auto-closure-preview { margin-top:12px; display:grid; gap:10px; text-align:left; }
.auto-closure-preview-head { padding:10px 12px; border-radius:10px; background:#ecfdf5; color:#065f46; font-size:0.96rem; font-weight:900; line-height:1.35; }
.auto-closure-preview-row { border:2px solid #e5e7eb; border-radius:12px; background:#fff; overflow:hidden; box-shadow:0 5px 14px rgba(15,23,42,0.08); }
.auto-closure-preview-row.warn { border-color:#f59e0b; }
.auto-closure-preview-row.ok { border-color:#22c55e; }
.auto-closure-preview-title { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 12px; background:#f8fafc; color:#111827; font-size:1rem; font-weight:950; }
.auto-closure-preview-diff { white-space:nowrap; color:#0f172a; }
.auto-closure-preview-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; padding:10px 12px; }
.auto-closure-preview-cell { padding:8px; border-radius:9px; background:#f1f5f9; color:#334155; font-size:0.82rem; font-weight:850; line-height:1.3; }
.auto-closure-preview-cell strong { display:block; color:#111827; font-size:1.02rem; margin-top:3px; }
.auto-closure-preview-insert { padding:10px 12px; border-top:1px solid #e5e7eb; color:#78350f; background:#fffbeb; font-size:0.86rem; font-weight:900; line-height:1.35; }
.auto-closure-preview-insert.none { color:#166534; background:#f0fdf4; }
@media (max-width: 700px) {
.auto-closure-preview-grid { grid-template-columns:1fr; }
.auto-closure-preview-title { flex-direction:column; align-items:flex-start; }
}
.btn-conf-restore { display:none; width:100%; margin-top:12px; border:0; padding:16px; border-radius:8px; background:#f39c12; color:white; font-size:1.05rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #c77700; }
.btn-conf-restore:disabled { opacity:0.55; cursor:not-allowed; box-shadow:none; }
.setup-box { max-width: 900px; width: calc(100% - 32px); padding: 24px; }
.setup-section-title { text-align:left; color:#2c3e50; font-size:1rem; font-weight:900; margin:18px 0 8px; }
.setup-grid { display:grid; gap:8px; margin-bottom:10px; }
.setup-people-grid { grid-template-columns: repeat(10, minmax(44px, 1fr)); }
.setup-kids-grid { grid-template-columns: repeat(11, minmax(42px, 1fr)); }
.setup-menu-grid { grid-template-columns: repeat(5, minmax(112px, 1fr)); }
.setup-menu-grid.setup-menu-grid-special { grid-template-columns: repeat(4, minmax(112px, 1fr)); }
.setup-choice { height:54px; border:2px solid #d5dadd; border-radius:8px; background:#ecf0f1; color:#2c3e50; font-size:1.35rem; font-weight:900; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,0.12); }
.setup-menu-grid .setup-choice { min-height:72px; height:auto; font-size:1.02rem; line-height:1.12; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; }
.setup-menu-price { font-size:0.76rem; color:#64748b; font-weight:850; text-transform:none; }
.setup-choice.active .setup-menu-price { color:rgba(255,255,255,0.92); }
.setup-choice.active { background:#27ae60; border-color:#1f8f4f; color:white; box-shadow:0 3px 0 #1f8f4f; }
.setup-choice:active { transform:translateY(2px); box-shadow:none; }
.setup-hidden { display:none !important; }
.setup-error { display:none; margin:12px 0 0; padding:11px 13px; border-radius:8px; background:#fee2e2; color:#991b1b; font-weight:850; text-align:left; }
.table-recovery-box { display:none; margin:14px 0; padding:13px; border:2px solid #f39c12; border-radius:10px; background:#fff8e6; color:#2c3e50; text-align:left; box-shadow:0 4px 12px rgba(243,156,18,0.18); }
.table-recovery-title { font-size:1rem; font-weight:900; color:#b45309; margin-bottom:5px; }
.table-recovery-info { font-size:0.92rem; line-height:1.35; font-weight:700; color:#4b5563; }
.table-recovery-warning { margin-top:6px; font-size:0.78rem; color:#9a3412; font-weight:800; }
.table-recovery-btn { width:100%; margin-top:10px; height:48px; border:0; border-radius:8px; background:#f39c12; color:white; font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #c77700; }
.table-recovery-btn:disabled { opacity:0.55; cursor:not-allowed; box-shadow:none; }
@media (max-width: 700px) {
#setupModal {
align-items: flex-start;
padding: calc(8px + env(safe-area-inset-top, 0px)) 6px calc(8px + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
}
.setup-box {
width: calc(100vw - 12px);
max-height: 92vh;
max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 10px;
border-radius: 12px;
}
.setup-box h2 { font-size: 1.25rem; line-height: 1.05; margin: 0 0 7px; }
.setup-section-title { font-size: 0.72rem; margin: 7px 0 4px; letter-spacing: 0; }
.setup-grid { gap: 4px; margin-bottom: 5px; }
.setup-people-grid { grid-template-columns: repeat(10, minmax(28px, 1fr)); }
.setup-kids-grid { grid-template-columns: repeat(11, minmax(24px, 1fr)); }
.setup-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-menu-grid.setup-menu-grid-special { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-choice {
height: 34px;
min-width: 0;
border-radius: 7px;
font-size: 0.95rem;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.setup-menu-grid .setup-choice {
min-height: 49px;
font-size: 0.78rem;
gap: 2px;
padding: 5px;
}
.setup-menu-price { font-size: 0.64rem; }
.setup-error { margin-top: 6px; padding: 8px 9px; font-size: 0.76rem; }
.table-recovery-box { margin: 7px 0; padding: 8px; }
.table-recovery-title { font-size: 0.85rem; }
.table-recovery-info { font-size: 0.76rem; line-height: 1.22; }
.table-recovery-warning { font-size: 0.66rem; }
.table-recovery-btn { height: 38px; font-size: 0.82rem; margin-top: 6px; }
.setup-box > .btn-big-green { height: 42px; font-size: 0.98rem; border-radius: 8px; margin-top: 6px; }
}
#confTitle { font-size: 2rem; margin-bottom: 10px; }
#confMsg { font-size: 1.2rem; margin-bottom: 25px; }
#debugConsole { display:none; position: fixed; bottom: 0; right: 0; width: 450px; height: 150px; background: rgba(0,0,0,0.9); color: #0f0; font-family: monospace; font-size: 11px; padding: 10px; overflow-y: auto; z-index: 9999; border-top-left-radius: 10px; }
.dbg-sent { color: #3498db; } .dbg-rec { color: #2ecc71; } .dbg-err { color: #e74c3c; font-weight: bold; }
/* Centro notifiche operativo: evidente nei risultati, discreto durante il lavoro. */
#notificationCenter {
position: fixed;
z-index: 12000;
top: calc(env(safe-area-inset-top, 0px) + 14px);
left: 50%;
width: min(620px, calc(100vw - 24px));
display: flex;
flex-direction: column;
gap: 10px;
transform: translateX(-50%);
pointer-events: none;
}
.hk-notification {
--notification-color: #15803d;
--notification-soft: #eef9f1;
--notification-border: #9ed2aa;
position: relative;
box-sizing: border-box;
width: 100%;
min-height: 82px;
overflow: hidden;
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 34px;
align-items: center;
gap: 12px;
padding: 13px 12px 15px 14px;
border: 1px solid var(--notification-border);
border-left: 7px solid var(--notification-color);
border-radius: 14px;
background: rgba(255, 255, 255, .97);
color: #1d1d1f;
box-shadow: 0 18px 50px rgba(15, 23, 42, .24), 0 2px 8px rgba(15, 23, 42, .10);
-webkit-backdrop-filter: blur(22px) saturate(1.15);
backdrop-filter: blur(22px) saturate(1.15);
pointer-events: auto;
touch-action: pan-y;
user-select: none;
animation: hkNotificationIn .28s cubic-bezier(.2, .82, .2, 1) both;
}
.hk-notification::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--notification-soft);
opacity: .78;
}
.hk-notification.is-error {
--notification-color: #c62828;
--notification-soft: #fff1f1;
--notification-border: #e9aaaa;
}
.hk-notification.is-warning {
--notification-color: #b45309;
--notification-soft: #fff8e8;
--notification-border: #e8c68f;
}
.hk-notification.is-info {
--notification-color: #1769aa;
--notification-soft: #eef6ff;
--notification-border: #a8c9e6;
}
.hk-notification.is-payment {
min-height: 96px;
grid-template-columns: 56px minmax(0, 1fr) 36px;
border-left-width: 9px;
box-shadow: 0 22px 58px rgba(15, 23, 42, .30), 0 0 0 3px color-mix(in srgb, var(--notification-color) 15%, transparent);
animation: hkNotificationIn .28s cubic-bezier(.2, .82, .2, 1) both, hkPaymentNoticePulse .72s ease .3s 2;
}
.hk-notification.is-leaving {
animation: hkNotificationOut .2s ease both;
pointer-events: none;
}
.hk-notification-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--notification-color);
color: #fff;
box-shadow: 0 4px 13px color-mix(in srgb, var(--notification-color) 34%, transparent);
font-size: 1.4rem;
line-height: 1;
font-weight: 900;
}
.hk-notification.is-payment .hk-notification-icon { width: 54px; height: 54px; font-size: 1.7rem; }
.hk-notification-copy { min-width: 0; }
.hk-notification-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 3px;
}
.hk-notification-title {
color: var(--notification-color);
font-size: 1rem;
line-height: 1.1;
font-weight: 820;
}
.hk-notification-time {
flex: 0 0 auto;
color: #8e8e93;
font-size: .7rem;
font-weight: 650;
}
.hk-notification-message {
color: #2c2c2e;
font-size: .9rem;
line-height: 1.28;
font-weight: 660;
overflow-wrap: anywhere;
}
.hk-notification.is-payment .hk-notification-title { font-size: 1.16rem; }
.hk-notification.is-payment .hk-notification-message { font-size: 1rem; font-weight: 720; }
.hk-notification-close {
width: 32px;
height: 32px;
display: grid;
place-items: center;
align-self: start;
border: 0;
border-radius: 50%;
background: rgba(118, 118, 128, .13);
color: #5c5c5f;
font: inherit;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
touch-action: manipulation;
}
.hk-notification-close:active { background: rgba(118, 118, 128, .24); transform: scale(.94); }
.hk-notification-progress {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 4px;
overflow: hidden;
background: rgba(118, 118, 128, .10);
}
.hk-notification-progress span {
display: block;
width: 100%;
height: 100%;
background: var(--notification-color);
transform: scaleX(1);
transform-origin: left center;
}
.hk-notification.is-counting .hk-notification-progress span {
animation: hkNotificationCountdown var(--notification-duration, 5000ms) linear forwards;
}
#notificationHistoryButton {
--filter-color: #f59e0b;
}
#notificationHistoryButton strong {
min-width: 25px;
}
#notificationHistoryButton.is-open {
border-color: #d97706;
background: #fff5df;
color: #7c3f00;
}
#notificationHistoryButton.is-open > strong { background: #d97706; color: #fff; }
#notificationHistoryPanel {
position: absolute;
z-index: 120;
top: calc(100% + 8px);
right: 6px;
bottom: auto;
width: min(430px, calc(100vw - 28px));
max-height: min(64vh, 600px);
overflow: hidden;
display: none;
flex-direction: column;
border: 1px solid rgba(60, 60, 67, .16);
border-radius: 14px;
background: rgba(248, 248, 250, .98);
box-shadow: 0 24px 70px rgba(15, 23, 42, .30);
-webkit-backdrop-filter: blur(24px) saturate(1.15);
backdrop-filter: blur(24px) saturate(1.15);
}
#notificationHistoryPanel.open { display: flex; animation: hkHistoryIn .2s ease both; }
.notification-history-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 14px;
border-bottom: 1px solid rgba(60, 60, 67, .13);
background: rgba(255, 255, 255, .92);
}
.notification-history-head strong { color: #1d1d1f; font-size: .98rem; }
.notification-history-head-actions { display: flex; gap: 6px; }
.notification-history-head button {
min-height: 32px;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: #e9e9ee;
color: #3a3a3c;
font: inherit;
font-size: .68rem;
font-weight: 750;
cursor: pointer;
}
#notificationHistoryList {
min-height: 90px;
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 9px;
}
.notification-history-item {
--history-color: #15803d;
margin-bottom: 7px;
padding: 10px 11px;
border: 1px solid rgba(60, 60, 67, .11);
border-left: 4px solid var(--history-color);
border-radius: 9px;
background: #fff;
}
.notification-history-item.is-error { --history-color: #c62828; }
.notification-history-item.is-warning { --history-color: #b45309; }
.notification-history-item.is-info { --history-color: #1769aa; }
.notification-history-item:last-child { margin-bottom: 0; }
.notification-history-item-head { display: flex; justify-content: space-between; gap: 10px; }
.notification-history-item-head strong { color: var(--history-color); font-size: .78rem; }
.notification-history-item-head time { color: #8e8e93; font-size: .66rem; }
.notification-history-item p { margin: 4px 0 0; color: #3a3a3c; font-size: .76rem; line-height: 1.3; font-weight: 620; }
.notification-history-empty { padding: 28px 14px; color: #8e8e93; text-align: center; font-size: .82rem; font-weight: 650; }
.notification-history-foot {
flex: 0 0 auto;
padding: 9px;
border-top: 1px solid rgba(60, 60, 67, .13);
background: rgba(255, 255, 255, .92);
}
.notification-history-more {
width: 100%;
min-height: 43px;
border: 1px solid rgba(23, 105, 170, .24);
border-radius: 9px;
background: #eef6ff;
color: #14588d;
font: inherit;
font-size: .76rem;
font-weight: 780;
cursor: pointer;
}
.notification-history-more:disabled { opacity: .55; cursor: default; }
@keyframes hkNotificationIn {
from { opacity: 0; transform: translateY(-18px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hkNotificationOut {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-12px) scale(.97); }
}
@keyframes hkPaymentNoticePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.012); }
}
@keyframes hkNotificationCountdown { to { transform: scaleX(0); } }
@keyframes hkHistoryIn {
from { opacity: 0; transform: translateY(8px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 700px) {
#notificationCenter { top: calc(env(safe-area-inset-top, 0px) + 8px); width: calc(100vw - 16px); gap: 7px; }
.hk-notification { min-height: 76px; grid-template-columns: 42px minmax(0, 1fr) 30px; gap: 9px; padding: 11px 9px 13px 11px; border-radius: 12px; }
.hk-notification.is-payment { min-height: 88px; grid-template-columns: 48px minmax(0, 1fr) 30px; }
.hk-notification-icon { width: 40px; height: 40px; font-size: 1.2rem; }
.hk-notification.is-payment .hk-notification-icon { width: 46px; height: 46px; font-size: 1.45rem; }
.hk-notification-title { font-size: .9rem; }
.hk-notification-message { font-size: .82rem; }
.hk-notification.is-payment .hk-notification-title { font-size: 1rem; }
.hk-notification.is-payment .hk-notification-message { font-size: .9rem; }
.hk-notification-close { width: 29px; height: 29px; }
#notificationHistoryPanel { right: 0; width: 100%; max-height: 67vh; }
}
@media (prefers-reduced-motion: reduce) {
.hk-notification,
.hk-notification.is-payment,
.hk-notification.is-leaving,
#notificationHistoryPanel.open { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.sumup-wait-box { background: white; width: 90%; max-width: 420px; padding: 28px; border-radius: 14px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5); color: #2c3e50; }
.sumup-loader { width: 54px; height: 54px; border-radius: 50%; border: 6px solid #dfe6e9; border-top-color: #2980b9; margin: 0 auto 18px; animation: sumupSpin 1s linear infinite; }
.sumup-amount { font-size: 2.6rem; font-weight: 900; color: #27ae60; margin: 10px 0; }
.sumup-cancel-btn { background:#c0392b; color:white; border:none; border-radius:8px; font-size:1rem; font-weight:900; padding:14px 18px; margin-top:18px; width:100%; cursor:pointer; }
.sumup-floating-panel { display:none; position:fixed; left:18px; right:auto; bottom:104px; width:320px; max-width:calc(100vw - 36px); background:white; border:3px solid #16a085; border-radius:10px; box-shadow:0 10px 35px rgba(0,0,0,0.35); z-index:5400; color:#2c3e50; overflow:hidden; }
.sumup-floating-panel.open { display:block; }
.sumup-floating-head { background:#16a085; color:white; padding:10px 14px; font-weight:900; font-size:1rem; display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:move; user-select:none; touch-action:none; }
.sumup-floating-body { padding:14px; }
.sumup-floating-amount { font-size:2rem; font-weight:900; color:#27ae60; line-height:1.1; }
.sumup-floating-status { font-size:0.95rem; color:#555; font-weight:700; margin-top:6px; }
.sumup-floating-btn { background:#c0392b; color:white; border:none; border-radius:7px; padding:10px 12px; font-weight:900; cursor:pointer; width:100%; margin-top:12px; }
.payment-device-locked { opacity:0.42 !important; filter:grayscale(0.72); cursor:not-allowed !important; box-shadow:none !important; background:#64748b !important; transform:none !important; }
.payment-device-busy-text { display:block; margin-top:4px; font-size:0.78em; font-weight:950; color:#fee2e2; letter-spacing:0.02em; }
.payment-primary-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(108px, 1fr)); gap:10px; }
.table-payment-lockable:disabled { opacity:0.45 !important; filter:grayscale(0.7); cursor:not-allowed !important; box-shadow:none !important; transform:none !important; }
@keyframes sumupSpin { to { transform: rotate(360deg); } }
/* BUGFIX: DETAIL OVERLAY + HISTORY */
.detail-overlay { position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999 !important; display: none; justify-content: center; align-items: center; backdrop-filter: blur(2px); }
.detail-overlay.open { display: flex; }
.detail-box { background: white; width: 90%; max-width: 450px; max-height: 80vh; border-radius: 12px; padding: 25px; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.5); color:#333; position: relative; }
.history-list { max-height: 65vh; overflow-y: auto; padding: 10px; background: #f1f2f6; border-radius:8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; position: relative; }
.history-row { display: flex; justify-content: space-between; align-items: center; background: white; border: 1px solid #ddd; padding: 15px; margin-bottom: 8px; border-radius: 8px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; color: #333; }
.history-row:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.h-left { display: flex; flex-direction: column; gap: 5px; }
.h-tavolo { font-weight: 800; font-size: 1.1rem; color: #2c3e50; }
.h-data { font-size: 0.85rem; color: #7f8c8d; }
.h-right { font-weight: 900; font-size: 1.3rem; color: #27ae60; }
.history-load-more-wrap { padding: 8px 0 2px; text-align: center; }
.history-load-more-btn { width: 100%; height: 48px; border: none; border-radius: 8px; background: #2c3e50; color: white; font-weight: 900; font-size: 1rem; cursor: pointer; box-shadow: 0 3px 0 #1f2d3a; }
.history-load-more-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1f2d3a; }
.history-load-more-btn:disabled { background: #95a5a6; box-shadow: none; cursor: wait; transform: none; }
.history-end-text { padding: 12px; color: #7f8c8d; font-weight: 800; text-align: center; }
.secure-pin-box { background:white; width:90%; max-width:360px; padding:22px; border-radius:16px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,0.45); color:#1f2937; position:relative; }
.secure-pin-close { position:absolute; top:10px; right:12px; width:34px; height:34px; border:none; border-radius:8px; background:#e5e7eb; color:#111827; font-size:1.3rem; font-weight:900; cursor:pointer; }
.secure-pin-title { margin:0 36px 6px; font-size:1.35rem; color:#111827; }
.secure-pin-subtitle { margin:0 0 14px; color:#64748b; font-size:0.9rem; font-weight:800; }
.secure-pin-display { height:52px; border:2px solid #2563eb; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#111827; font-size:1.65rem; font-weight:900; letter-spacing:5px; background:#eff6ff; margin-bottom:10px; font-family:monospace; }
.secure-pin-message { min-height:22px; color:#ef4444; font-size:0.92rem; font-weight:900; margin-bottom:10px; }
.secure-pin-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.secure-pin-key { height:58px; border:none; border-radius:12px; background:#f1f5f9; color:#111827; font-size:1.45rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #cbd5e1; }
.secure-pin-key:active { transform:translateY(2px); box-shadow:0 1px 0 #cbd5e1; }
.secure-pin-key.danger { background:#fee2e2; color:#b91c1c; }
.secure-pin-key.utility { background:#e0e7ff; color:#3730a3; }
.staff-biometric-box { background:#fff; width:90%; max-width:360px; padding:28px 22px 24px; border-radius:16px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,0.45); color:#1f2937; }
.staff-biometric-icon { width:66px; height:66px; margin:0 auto 16px; border-radius:18px; display:grid; place-items:center; background:#e8f5ee; color:#087a43; font-size:2rem; font-weight:900; }
.staff-biometric-title { margin:0 0 8px; font-size:1.3rem; color:#111827; }
.staff-biometric-message { margin:0; color:#64748b; font-size:0.95rem; font-weight:700; line-height:1.4; }
.staff-biometric-spinner { width:34px; height:34px; margin:18px auto 0; border:4px solid #dcebe3; border-top-color:#087a43; border-radius:50%; animation:sumupSpin .8s linear infinite; }
.ops-archive-title-secret { user-select:none; cursor:default; touch-action:manipulation; }
.ops-tabs { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:6px; padding:8px; background:#e5e7eb; }
.ops-tab-btn { min-height:40px; border:none; border-radius:10px; background:#fff; color:#334155; font-weight:900; font-size:clamp(0.74rem, 1.55vw, 0.94rem); cursor:pointer; box-shadow:0 3px 0 #cbd5e1; padding:5px 4px; white-space:nowrap; }
.ops-tab-btn.active { background:#2563eb; color:#fff; box-shadow:0 3px 0 #1d4ed8; }
.ops-tab-btn.ops-sensitive-hidden { display:none; }
.ops-tab-panel { display:none; }
.ops-tab-panel.active { display:block; }
.operation-archive-box {
width: 70vw !important;
max-width: 70vw !important;
height: 85vh;
max-height: 85vh;
text-align: left;
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.operation-archive-head { flex:0 0 auto; background:#34495e; color:white; padding:15px; display:flex; justify-content:space-between; align-items:center; }
.operation-archive-box .ops-tabs { flex:0 0 auto; }
.operation-archive-box .ops-tab-panel { flex:1 1 auto; min-height:0; background:#f1f2f6; }
.operation-archive-box .ops-tab-panel.active { display:flex; flex-direction:column; }
.operation-archive-box .history-list { flex:1 1 auto; height:100%; max-height:none !important; border-radius:0; box-sizing:border-box; }
.operation-archive-box .cashmatic-fund-wrap { flex:1 1 auto; min-height:0; }
@media (max-width: 700px) {
.operation-archive-box {
width: calc(100vw - 18px) !important;
max-width: calc(100vw - 18px) !important;
height: 88vh;
max-height: 88vh;
}
.operation-archive-head { padding:12px; }
.operation-archive-head h2 { font-size:1.08rem !important; }
.ops-tabs { gap:4px; padding:6px; }
.ops-tab-btn { min-height:36px; font-size:0.66rem; padding:4px 2px; border-radius:8px; }
.cashmatic-fund-summary { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.cashmatic-fund-actions { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.cashmatic-level-row { grid-template-columns:70px 70px 60px 1fr; }
.cashmatic-level-total { grid-column:1 / -1; text-align:left; }
}
.manual-conteggio-box { width: 92%; max-width: 900px; max-height: 92vh; overflow-y:auto; text-align:left; }
.manual-conteggio-layout { display:grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap:14px; align-items:start; }
.manual-conteggio-form { min-width:0; }
.manual-conteggio-side { min-width:0; border-left:1px solid #e2e8f0; padding-left:14px; }
.manual-records-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; color:#0f172a; font-weight:900; }
.manual-refresh-btn { border:none; border-radius:9px; background:#2563eb; color:#fff; font-weight:900; height:34px; padding:0 12px; cursor:pointer; }
.manual-incasso-actions { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:12px; }
.manual-incasso-actions .btn-big-green { height:55px; font-size:0.82rem; line-height:1.05; padding:0 4px; }
#cashmaticManualModal { padding:0; align-items:stretch; background:rgba(15,23,42,.82); }
.bar-sale-shell {
width:100vw;
height:100vh;
height:100dvh;
min-height:0;
background:#eef2f6;
color:#0f172a;
display:flex;
flex-direction:column;
overflow:hidden;
text-align:left;
}
.bar-sale-header {
flex:0 0 auto;
min-height:68px;
padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
background:#182433;
color:#fff;
display:grid;
grid-template-columns:minmax(0, 1fr) auto auto;
gap:14px;
align-items:center;
box-shadow:0 3px 12px rgba(15,23,42,.25);
z-index:2;
}
.bar-sale-heading { min-width:0; }
.bar-sale-heading h2 { margin:0; font-size:clamp(1.15rem,2vw,1.55rem); font-weight:900; }
.bar-sale-heading p { margin:3px 0 0; color:#cbd5e1; font-size:.78rem; font-weight:700; }
.bar-sale-header-total { text-align:right; white-space:nowrap; }
.bar-sale-header-total span { display:block; color:#94a3b8; font-size:.68rem; font-weight:900; text-transform:uppercase; }
.bar-sale-header-total strong { display:block; color:#fff; font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.05; }
.bar-sale-close {
width:46px;
height:46px;
border:0;
border-radius:10px;
background:#334155;
color:#fff;
font-size:1.65rem;
line-height:1;
font-weight:500;
cursor:pointer;
}
.bar-sale-body {
flex:1 1 auto;
min-height:0;
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(340px, 38vw);
gap:0;
}
.bar-sale-catalog { min-width:0; min-height:0; display:flex; flex-direction:column; background:#f8fafc; }
.bar-sale-categories {
flex:0 0 auto;
display:grid;
grid-template-rows:repeat(3, 42px);
grid-auto-flow:column;
grid-auto-columns:max-content;
gap:7px;
overflow-x:auto;
overflow-y:hidden;
padding:10px 12px;
background:#dfe6ed;
border-bottom:1px solid #cbd5e1;
scrollbar-width:thin;
}
.bar-sale-category {
min-width:112px;
min-height:42px;
padding:0 14px;
border:1px solid #cbd5e1;
border-radius:8px;
background:#fff;
color:#334155;
font-size:.78rem;
font-weight:900;
cursor:pointer;
text-transform:capitalize;
}
.bar-sale-category.active { background:#0f766e; border-color:#0f766e; color:#fff; box-shadow:0 3px 0 #115e59; }
.bar-sale-products {
flex:1 1 auto;
min-height:0;
overflow-y:auto;
padding:12px;
display:grid;
grid-template-columns:repeat(4,minmax(130px,1fr));
grid-auto-rows:max-content;
align-content:start;
align-items:start;
gap:10px;
overscroll-behavior:contain;
}
.bar-sale-product {
min-width:0;
height:auto;
align-self:start;
display:flex;
flex-direction:column;
border:1px solid #dbe3ec;
border-radius:8px;
background:#fff;
padding:0;
overflow:hidden;
text-align:left;
cursor:pointer;
box-shadow:0 2px 5px rgba(15,23,42,.08);
}
.bar-sale-product:active { transform:scale(.985); }
.bar-sale-product img { width:100%; flex:0 0 auto; aspect-ratio:16/9; object-fit:cover; display:block; background:#e2e8f0; }
.bar-sale-product-copy { width:100%; min-height:68px; padding:8px 9px 9px; display:block; box-sizing:border-box; overflow:visible; }
.bar-sale-product-name {
display:-webkit-box;
min-height:2.3em;
max-height:2.3em;
overflow:hidden;
color:#172033;
font-size:.83rem;
font-weight:850;
line-height:1.15;
white-space:normal;
overflow-wrap:anywhere;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.bar-sale-product-price { display:block; min-height:1.2em; margin-top:5px; padding-bottom:1px; color:#087a43; font-size:1rem; font-weight:950; line-height:1.2; overflow:visible; }
.bar-sale-empty { grid-column:1/-1; padding:30px 15px; text-align:center; color:#64748b; font-weight:800; }
.bar-sale-checkout {
min-width:0;
min-height:0;
display:flex;
flex-direction:column;
border-left:1px solid #cbd5e1;
background:#fff;
}
.bar-sale-cart-head { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:11px 12px 8px; }
.bar-sale-cart-head strong { font-size:.94rem; }
.bar-sale-cart-clear { border:0; border-radius:8px; background:#fee2e2; color:#b91c1c; min-height:34px; padding:0 10px; font-weight:900; cursor:pointer; }
.bar-sale-cart { flex:1 1 auto; min-height:110px; overflow-y:auto; padding:0 10px 8px; overscroll-behavior:contain; }
.bar-sale-cart-empty { padding:24px 10px; text-align:center; color:#94a3b8; font-size:.83rem; font-weight:800; }
.bar-sale-cart-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; border-top:1px solid #e2e8f0; padding:8px 2px; }
.bar-sale-cart-row:first-child { border-top:0; }
.bar-sale-cart-name { min-width:0; color:#1e293b; font-size:.79rem; font-weight:850; line-height:1.18; }
.bar-sale-cart-title-edit { position:relative; display:block; min-width:0; }
.bar-sale-cart-title-input {
width:100%;
min-width:0;
height:34px;
box-sizing:border-box;
padding:5px 28px 5px 7px;
border:1px solid #dbe3ec;
border-radius:7px;
background:#f8fafc;
color:#1e293b;
font:inherit;
font-weight:850;
outline:none;
}
.bar-sale-cart-title-input:focus { border-color:#0f766e; background:#fff; box-shadow:0 0 0 2px rgba(15,118,110,.12); }
.bar-sale-cart-title-icon { position:absolute; top:50%; right:8px; transform:translateY(-50%); color:#64748b; font-size:.86rem; pointer-events:none; }
.bar-sale-cart-name small { display:block; margin-top:3px; color:#64748b; font-size:.7rem; font-weight:800; }
.bar-sale-cart-controls { display:grid; grid-template-columns:32px 30px 32px; align-items:center; text-align:center; }
.bar-sale-cart-controls button { width:32px; height:32px; border:0; border-radius:8px; background:#e2e8f0; color:#0f172a; font-size:1.15rem; font-weight:900; cursor:pointer; }
.bar-sale-cart-controls span { font-size:.83rem; font-weight:950; }
.bar-sale-free {
flex:0 0 auto;
padding:9px 10px;
border-top:1px solid #dbe3ec;
background:#f8fafc;
}
.bar-sale-free-title { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; color:#334155; font-size:.75rem; font-weight:900; }
.bar-sale-free-layout { display:grid; grid-template-columns:minmax(128px,.82fr) minmax(180px,1.18fr); gap:10px; }
.bar-sale-free-display { display:flex; flex-direction:column; gap:7px; }
#cashmaticManualModal #manualCmDisplay { min-height:68px; margin:0; display:flex; align-items:center; justify-content:center; font-size:1.65rem; }
.bar-sale-add-free { min-height:44px; border:0; border-radius:8px; background:#f59e0b; color:#111827; font-size:.74rem; font-weight:950; cursor:pointer; }
#cashmaticManualModal .price-numpad { margin:0; gap:7px; }
#cashmaticManualModal .price-btn { min-height:42px; height:42px; border-radius:8px; font-size:1.05rem; }
.bar-sale-payment {
flex:0 0 auto;
padding:9px 10px calc(10px + env(safe-area-inset-bottom, 0px));
border-top:1px solid #cbd5e1;
background:#fff;
box-shadow:0 -3px 10px rgba(15,23,42,.08);
}
.bar-sale-payment-total { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.bar-sale-payment-total span { color:#475569; font-size:.8rem; font-weight:900; }
.bar-sale-payment-total strong { color:#0f172a; font-size:1.45rem; font-weight:950; }
.bar-sale-payment .manual-receipt-toggle { margin-top:0; min-height:40px; }
.bar-sale-payment .manual-incasso-actions { margin-top:8px; }
.bar-sale-payment .manual-fiscal-actions { margin-top:8px; padding:7px; }
.bar-sale-payment .manual-fiscal-title { margin-bottom:6px; font-size:.68rem; }
.bar-sale-payment .manual-fiscal-btn { height:42px; }
.manual-receipt-toggle {
width:100%;
min-height:46px;
margin-top:12px;
border:2px solid #cbd5e1;
border-radius:11px;
background:#f1f5f9;
color:#475569;
font-size:0.86rem;
font-weight:950;
cursor:pointer;
}
.manual-receipt-toggle.active {
border-color:#16a34a;
background:#dcfce7;
color:#166534;
box-shadow:inset 0 0 0 1px #86efac;
}
.manual-fiscal-actions { margin-top:12px; padding:10px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
.manual-fiscal-title { color:#334155; font-size:0.82rem; font-weight:950; margin-bottom:8px; text-align:center; letter-spacing:0.02em; }
.manual-fiscal-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.manual-fiscal-btn { border:none; border-radius:10px; height:52px; color:#fff; font-size:0.78rem; font-weight:950; cursor:pointer; line-height:1.05; padding:0 6px; }
.manual-fiscal-btn:disabled { opacity:0.55; cursor:not-allowed; }
.conteggio-records-list { max-height: 58vh; overflow-y:auto; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:8px; }
.conteggio-record-row { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:9px; padding:10px; margin-bottom:7px; color:#1f2937; }
.conteggio-record-main { min-width:0; }
.conteggio-record-top { display:flex; justify-content:space-between; gap:8px; font-weight:900; color:#111827; }
.conteggio-record-meta { font-size:0.78rem; color:#64748b; font-weight:800; margin-top:3px; }
.conteggio-delete-btn { border:none; border-radius:8px; background:#fee2e2; color:#b91c1c; font-weight:900; height:38px; padding:0 10px; cursor:pointer; }
.register-pay-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:12px 0; }
.register-pay-grid.payments { grid-template-columns:repeat(4, 1fr); }
.register-pay-btn { height:54px; border:2px solid #dbe3ee; border-radius:10px; background:#fff; color:#334155; font-weight:900; cursor:pointer; }
.register-pay-btn.active { border-color:#22c55e; background:#ecfdf5; color:#166534; }
@media (max-width: 820px) {
.manual-conteggio-layout { grid-template-columns:1fr; }
.manual-conteggio-side { border-left:0; padding-left:0; border-top:1px solid #e2e8f0; padding-top:12px; }
.manual-incasso-actions { gap:6px; }
.manual-incasso-actions .btn-big-green { font-size:0.74rem; padding:0 2px; }
.manual-fiscal-grid { gap:6px; }
.manual-fiscal-btn { font-size:0.7rem; padding:0 3px; }
.bar-sale-products { grid-template-columns:repeat(3,minmax(115px,1fr)); }
.bar-sale-body { grid-template-columns:minmax(0,1fr) minmax(315px,42vw); }
}
@media (max-width: 700px) {
.bar-sale-header { min-height:58px; padding-left:10px; padding-right:10px; gap:9px; }
.bar-sale-heading p { display:none; }
.bar-sale-close { width:42px; height:42px; }
.bar-sale-body { grid-template-columns:1fr; grid-template-rows:minmax(220px,43%) minmax(0,57%); }
.bar-sale-checkout { border-left:0; border-top:1px solid #cbd5e1; }
.bar-sale-products { grid-template-columns:repeat(3,minmax(100px,1fr)); padding:8px; gap:7px; }
.bar-sale-product-copy { padding:7px; }
.bar-sale-product-name { font-size:.75rem; }
.bar-sale-product-price { font-size:.88rem; }
.bar-sale-categories { grid-template-rows:repeat(3, 36px); padding:7px 8px; }
.bar-sale-category { min-width:100px; min-height:36px; padding:0 11px; font-size:.7rem; }
.bar-sale-cart { min-height:72px; }
.bar-sale-free { padding:7px 9px; }
.bar-sale-free-layout { grid-template-columns:126px minmax(170px,1fr); gap:8px; }
#cashmaticManualModal #manualCmDisplay { min-height:60px; font-size:1.5rem; }
#cashmaticManualModal .price-btn { min-height:37px; height:37px; font-size:.95rem; }
.bar-sale-payment { padding-top:7px; }
.bar-sale-payment .manual-incasso-actions .btn-big-green { height:46px; }
.bar-sale-payment .manual-fiscal-actions { display:none; }
}
@media (max-height: 600px) {
.bar-sale-header { min-height:54px; padding-top:7px; padding-bottom:7px; }
.bar-sale-heading p { display:none; }
.bar-sale-cart { min-height:58px; }
.bar-sale-free { padding-top:6px; padding-bottom:6px; }
.bar-sale-payment .manual-fiscal-actions { display:none; }
.bar-sale-payment .manual-incasso-actions .btn-big-green { height:44px; }
}
.btn-server-print { background-color: #0ea5e9; }
.btn-special-menus { background-color:#0f766e; font-size:0.58rem; line-height:1.02; }
.special-menu-admin-box { width:min(1180px,98vw) !important; max-width:1180px !important; height:92vh; height:92dvh; padding:0 !important; overflow:hidden; display:flex; flex-direction:column; }
.special-menu-admin-frame { display:block; width:100%; height:100%; border:0; background:#f5f7f8; }
.btn-server-print.disabled { background-color: #7f8c8d; }
.btn-server-print.alarm-blink { animation:serverPrintAlarm .72s steps(2, jump-none) infinite; }
@keyframes serverPrintAlarm { 0%,45% { background:#dc2626; color:#fff; box-shadow:0 0 0 4px rgba(220,38,38,.3); } 46%,100% { background:#facc15; color:#111827; box-shadow:0 0 0 7px rgba(250,204,21,.42); } }
.server-print-box { width:min(920px, 96vw) !important; max-width:920px !important; max-height:92vh; max-height:92dvh; display:flex; flex-direction:column; }
.server-print-status { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; padding:12px; background:#f1f2f6; border-bottom:1px solid #ddd; }
.server-print-pill { border-radius:8px; padding:12px; background:#fff; border:1px solid #ddd; color:#2c3e50; font-weight:900; }
.server-print-pill b { display:block; font-size:0.78rem; color:#7f8c8d; text-transform:uppercase; margin-bottom:4px; }
.server-print-status button.server-print-pill { text-align:left; cursor:pointer; }
.server-print-actions { display:grid; grid-template-columns: 1fr 1fr; gap:10px; padding:12px; background:#fff; border-bottom:1px solid #eee; }
.server-print-actions button { border:none; border-radius:8px; padding:13px 10px; color:#fff; font-weight:900; cursor:pointer; }
.server-print-toggle-on { background:#c0392b; }
.server-print-toggle-off { background:#27ae60; }
.server-print-test { background:#8e44ad; }
.server-print-config { padding:12px; background:#fff; border-bottom:1px solid #eee; }
.server-print-config label { display:block; margin-bottom:6px; color:#7f8c8d; font-size:0.78rem; font-weight:900; text-transform:uppercase; }
.server-print-ip-row { display:grid; grid-template-columns: 1fr 120px; gap:10px; }
.server-print-ip-row input, .server-print-ip-row select { width:100%; min-width:0; border:1px solid #bdc3c7; border-radius:8px; padding:12px; color:#2c3e50; font-size:1.05rem; font-weight:900; background:#fff; }
.server-print-ip-row button { border:none; border-radius:8px; padding:12px 10px; background:#2e86de; color:#fff; font-weight:900; cursor:pointer; }
.server-print-settings-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:12px; }
.server-print-setting { min-width:0; }
.server-print-setting input, .server-print-setting select { width:100%; min-width:0; box-sizing:border-box; border:1px solid #bdc3c7; border-radius:8px; padding:10px; color:#2c3e50; font-size:.95rem; font-weight:900; background:#fff; }
.server-print-checks { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; color:#334155; font-weight:900; }
.server-print-checks label { display:flex; align-items:center; gap:7px; margin:0; text-transform:none; font-size:.86rem; color:#334155; }
.server-print-save { width:100%; border:0; border-radius:8px; padding:13px; margin-top:12px; background:#2563eb; color:#fff; font-weight:900; cursor:pointer; }
.cluster-replication-panel { margin:12px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; padding:12px; color:#1e293b; }
.cluster-replication-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.cluster-replication-head h3 { margin:0; font-size:1rem; color:#0f172a; }
.cluster-replication-refresh { border:0; border-radius:7px; min-height:38px; padding:8px 12px; background:#e2e8f0; color:#334155; font-weight:900; cursor:pointer; }
.cluster-replication-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.cluster-replication-item { border:1px solid #e2e8f0; border-radius:7px; background:#f8fafc; padding:9px; min-width:0; }
.cluster-replication-item b { display:block; margin-bottom:4px; color:#64748b; font-size:.72rem; text-transform:uppercase; }
.cluster-replication-item span { display:block; color:#0f172a; font-weight:900; overflow-wrap:anywhere; }
.cluster-replication-note { margin:10px 0 0; color:#475569; font-size:.82rem; font-weight:700; line-height:1.4; }
.cluster-replication-error { display:none; margin-top:9px; border-radius:7px; padding:9px; background:#fee2e2; color:#991b1b; font-size:.8rem; font-weight:900; overflow-wrap:anywhere; }
.cluster-replication-error.visible { display:block; }
.cluster-promote-btn { display:none; width:100%; border:0; border-radius:8px; min-height:48px; margin-top:11px; padding:10px; background:#dc2626; color:#fff; font-weight:900; cursor:pointer; }
.cluster-promote-btn.visible { display:block; }
.cluster-promote-btn:disabled { background:#94a3b8; cursor:not-allowed; }
.cluster-confirm-box { width:min(520px, 92vw); border-radius:8px; background:#fff; padding:0; overflow:hidden; text-align:left; }
.cluster-confirm-head { background:#b91c1c; color:#fff; padding:16px; }
.cluster-confirm-head h2 { margin:0; font-size:1.2rem; }
.cluster-confirm-body { padding:16px; color:#334155; line-height:1.5; }
.cluster-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:0 16px 16px; }
.cluster-confirm-actions button { border:0; border-radius:8px; min-height:48px; padding:10px; font-weight:900; cursor:pointer; }
.cluster-confirm-cancel { background:#e2e8f0; color:#334155; }
.cluster-confirm-activate { background:#dc2626; color:#fff; }
.server-print-log-row { background:#fff; border:1px solid #ddd; border-left:6px solid #95a5a6; padding:10px; border-radius:8px; margin-bottom:8px; color:#2c3e50; font-weight:800; max-width:100%; min-width:0; box-sizing:border-box; overflow-wrap:anywhere; word-break:break-word; }
.server-print-log-row.ok { border-left-color:#27ae60; }
.server-print-log-row.err { border-left-color:#c0392b; }
.server-print-log-row.warn { border-left-color:#f59e0b; }
.server-print-log-row small { display:block; color:#7f8c8d; margin-top:4px; font-weight:700; }
#serverPrintLogs { min-height:180px; overflow:auto; padding:12px; background:#f8fafc; }
@media (max-width: 720px) {
.server-print-status, .server-print-settings-grid { grid-template-columns:1fr 1fr; }
.cluster-replication-grid { grid-template-columns:1fr 1fr; }
.server-print-box { width:100vw !important; max-width:none !important; height:100vh; height:100dvh; max-height:none; border-radius:0 !important; }
}
.history-list { min-width:0; }
.btn-kitchen-print { background-color:#10b981; }
.btn-kitchen-print.disabled { background-color:#64748b; }
.btn-kitchen-print.running { background-color:#059669; }
.btn-kitchen-print.alarm-blink { background:#dc2626; animation:kitchenAlarmBlink .72s steps(2, jump-none) infinite; }
@keyframes kitchenAlarmBlink { 0%,45% { background:#dc2626; color:#fff; box-shadow:0 0 0 4px rgba(220,38,38,.28); } 46%,100% { background:#facc15; color:#111827; box-shadow:0 0 0 7px rgba(250,204,21,.38); } }
.kitchen-print-box { width:100vw !important; max-width:none !important; height:100vh; height:100dvh; max-height:none; border-radius:0 !important; box-shadow:none; display:flex; flex-direction:column; background:#f1f5f9; }
.kitchen-modal-head { background:#0f766e; color:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.kitchen-modal-head h2 { margin:0; font-size:1.35rem; }
.kitchen-close-btn { background:#fff !important; border:0; border-radius:8px; color:#0f172a !important; padding:10px 14px; font-size:.95rem !important; font-weight:900; cursor:pointer; display:flex; align-items:center; gap:8px; }
.kitchen-status-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; padding:10px 12px; background:#e2e8f0; border-bottom:1px solid #cbd5e1; }
.kitchen-status-grid .server-print-pill { min-width:0; padding:10px; overflow-wrap:anywhere; }
.kitchen-state-button { background:#059669 !important; border-color:#059669 !important; color:#fff !important; }
.kitchen-state-button.off { background:#64748b !important; border-color:#64748b !important; }
.kitchen-state-button.alarm { background:#dc2626 !important; border-color:#dc2626 !important; }
.kitchen-state-button b { color:rgba(255,255,255,.82) !important; }
.kitchen-tabs { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:7px; padding:9px 12px; background:#fff; border-bottom:1px solid #dbe3eb; }
.kitchen-tabs button { border:0; border-radius:7px; min-height:43px; padding:8px 5px; background:#e2e8f0; color:#334155; font-size:.8rem; font-weight:900; cursor:pointer; }
.kitchen-tabs button.active { background:#0f766e; color:#fff; }
.kitchen-tab-panel { display:none; min-width:0; min-height:0; overflow:hidden; background:#f1f5f9; flex:1; }
.kitchen-tab-panel.active { display:flex; flex-direction:column; }
.kitchen-tab-scroll { flex:1; min-height:0; max-height:none; overflow:auto; -webkit-overflow-scrolling:touch; padding:12px; box-sizing:border-box; min-width:0; }
.kitchen-section { background:#fff; border:1px solid #dbe3eb; border-radius:8px; padding:12px; margin-bottom:10px; color:#1e293b; }
.kitchen-section h3 { margin:0 0 10px; font-size:1rem; color:#0f172a; }
.kitchen-settings-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px; }
.kitchen-settings-grid label, .kitchen-printer-fields label, .kitchen-fiscal-grid label { display:flex; flex-direction:column; gap:5px; min-width:0; color:#475569; font-size:.76rem; font-weight:900; }
.kitchen-settings-grid input, .kitchen-settings-grid select, .kitchen-printer-fields input, .kitchen-printer-fields select, .kitchen-fiscal-grid input { width:100%; min-width:0; min-height:43px; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:7px; padding:9px; color:#0f172a; background:#fff; font-size:.92rem; font-weight:800; }
.kitchen-toggle-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin-bottom:10px; }
.kitchen-toggle-grid label, .kitchen-switch-label { min-height:45px; display:flex !important; flex-direction:row !important; align-items:center; justify-content:center; gap:7px; padding:7px; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:7px; background:#f8fafc; color:#334155 !important; font-size:.78rem !important; font-weight:900; }
.kitchen-toggle-grid input, .kitchen-switch-label input { width:20px !important; height:20px !important; min-height:0 !important; }
.kitchen-primary-actions { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.kitchen-primary-actions button, .kitchen-printer-actions button, .kitchen-fiscal-actions button { min-height:44px; border:0; border-radius:7px; padding:9px; background:#0f766e; color:#fff; font-weight:900; cursor:pointer; }
.kitchen-primary-actions button.secondary, .kitchen-printer-actions button.secondary, .kitchen-fiscal-actions button.secondary { background:#2563eb; }
.kitchen-primary-actions button.warning, .kitchen-fiscal-actions button.warning { background:#a16207; }
.kitchen-primary-actions button.danger, .kitchen-fiscal-actions button.danger { background:#b91c1c; }
.kitchen-alarm-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px; align-items:center; background:#fff7ed; border:2px solid #f97316; border-radius:8px; padding:10px; margin-bottom:8px; color:#7c2d12; }
.kitchen-alarm-row b, .kitchen-alarm-row span { display:block; }
.kitchen-alarm-row small { font-weight:900; text-align:right; }
.kitchen-empty-state { padding:18px; border:1px dashed #94a3b8; border-radius:8px; text-align:center; color:#64748b; font-weight:900; }
.kitchen-empty-state.ok { border-color:#86efac; background:#f0fdf4; color:#166534; }
.kitchen-printer-list { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; padding:12px; box-sizing:border-box; }
.kitchen-printer-card { background:#fff; border:1px solid #dbe3eb; border-radius:8px; padding:11px; margin-bottom:9px; color:#1e293b; }
.kitchen-printer-title { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:9px; }
.kitchen-printer-title b, .kitchen-printer-title small { display:block; }
.kitchen-printer-title small { margin-top:3px; color:#64748b; font-weight:800; }
.kitchen-printer-fields { display:grid; grid-template-columns:1fr 150px 1fr 120px; gap:8px; align-items:end; }
.kitchen-printer-actions { display:grid; grid-template-columns:110px 1fr; gap:8px; margin-top:9px; }
.kitchen-net-pill { display:inline-flex; align-items:center; justify-content:center; min-width:80px; color:#fff; border-radius:7px; padding:8px 7px; text-align:center; font-size:.72rem; font-weight:900; box-sizing:border-box; }
.kitchen-net-pill.online { background:#16a34a; }
.kitchen-net-pill.offline { background:#dc2626; }
.kitchen-net-pill.unknown, .kitchen-net-pill.muted { background:#64748b; }
.kitchen-network-row { display:grid; grid-template-columns:minmax(180px, 1fr) 130px 100px minmax(120px, .8fr); gap:8px; align-items:center; background:#fff; border:1px solid #dbe3eb; border-radius:8px; padding:10px; margin-bottom:8px; color:#1e293b; font-weight:800; min-width:0; }
.kitchen-network-row b, .kitchen-network-row small { display:block; }
.kitchen-network-row small { color:#64748b; font-weight:800; overflow-wrap:anywhere; }
.kitchen-fiscal-grid { display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:8px; }
.kitchen-fiscal-actions { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.kitchen-fiscal-status { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.server-print-log-row.warn { border-left-color:#f59e0b; }
@media (max-width: 760px) {
.kitchen-status-grid { grid-template-columns:1fr 1fr; }
.kitchen-tabs { gap:4px; padding:7px; }
.kitchen-tabs button { font-size:.66rem; padding:6px 2px; }
.kitchen-toggle-grid { grid-template-columns:1fr 1fr; }
.kitchen-settings-grid, .kitchen-printer-fields, .kitchen-fiscal-grid { grid-template-columns:1fr; }
.kitchen-primary-actions, .kitchen-fiscal-actions { grid-template-columns:1fr; }
.kitchen-network-row { grid-template-columns:1fr 90px; }
.kitchen-network-row small { grid-column:1 / -1; }
.kitchen-alarm-row { grid-template-columns:1fr; }
.kitchen-alarm-row small { text-align:left; }
}
/* MODALE AVVISO IMPORTO */
.high-value-box { background: #fff; border: 4px solid #e74c3c; padding: 30px; border-radius: 16px; text-align: center; box-shadow: 0 0 50px rgba(231, 76, 60, 0.5); width: 90%; max-width: 450px; position: relative; animation: pulseRed 2s infinite; color: #333; }
@keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } }
/* CSS TASTIERA TOUCH (PRICE) */
.price-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
.price-btn { padding: 15px; font-size: 1.5rem; font-weight: bold; border-radius: 8px; border: none; background: #ecf0f1; color: #333; cursor: pointer; }
.price-btn:active { background: #bdc3c7; }
.price-display-box { font-size: 2.5rem; font-weight: 900; text-align: center; margin-bottom: 10px; color: #2c3e50; border: 2px solid #3498db; border-radius: 8px; padding: 10px; background: #fff; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
.numpad-btn { background: #34495e; color: white; border: none; padding: 20px; border-radius: 8px; font-size: 1.8rem; font-weight: 800; cursor: pointer; }
.numpad-btn:active { background: #2c3e50; transform: scale(0.95); }
.numpad-btn.btn-enter { background: #27ae60; grid-column: span 3; }
.roman-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; padding: 20px; }
.roman-btn { background: #fff; border: 4px solid #8e44ad; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); color: #333; }
.roman-btn:active { transform: scale(0.98); }
.roman-btn h4 { margin: 0 0 10px 0; font-size: 1.2rem; color: #8e44ad; }
.roman-btn .amount { font-size: 2rem; font-weight: 900; color: #333; }
.roman-btn.pending-payment { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.25); border-color: #64748b; background: #f1f5f9; box-shadow: none; }
.roman-btn.pending-payment:active { transform: none; }
.roman-btn.pending-payment h4 { color: #475569; }
.roman-btn.pending-payment .amount { color: #475569; }
.roman-pending-label { margin-top: 10px; color: #334155; font-weight: 950; font-size: 0.86rem; text-transform: uppercase; line-height: 1.15; }
.roman-pending-device { margin-top: 4px; display: inline-flex; justify-content: center; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; background: #111827; color: #fff; font-size: 0.78rem; font-weight: 950; }
.roman-summary { background: #8e44ad; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.2rem; }
#separateItemsList .item-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #eee; color: #333; font-weight: 600; }
.d-row { display: flex; justify-content: space-between; border-bottom: 1px dotted #ccc; padding: 8px 0; }
/* ==========================================================
MOBILE FIX (OTTIMIZZATO PER IPHONE - TASTI PICCOLI)
========================================================== */
@media (max-width: 600px) {
/* HEADER (Alto) - Tutto su una singola riga */
.modal-header {
flex-wrap: nowrap;
min-height: 58px;
height: auto;
padding: calc(env(safe-area-inset-top, 0px) + 4px) 6px 6px 6px;
gap: 4px;
overflow-x: auto;
overflow-y: hidden;
align-items: center;
}
.header-left-group {
width: auto;
flex: 1 1 auto;
justify-content: flex-start;
align-items: center;
gap: 4px;
min-width: 0;
}
.header-right-group {
width: auto;
flex: 0 0 auto;
justify-content: flex-end;
align-items: center;
border-top: none;
padding-top: 0;
gap: 4px;
min-width: max-content;
}
.table-title-huge {
font-size: 1.5rem;
margin-right: 4px;
flex-shrink: 0;
}
.modal-select {
height: 34px;
font-size: 0.8rem;
padding: 0 4px;
min-width: 68px;
max-width: 82px;
flex-shrink: 0;
}
.pin-container {
padding: 2px 6px !important;
height: 34px;
min-width: 54px;
box-sizing: border-box;
flex-shrink: 0;
}
.pin-text {
font-size: 0.85rem;
margin: 0;
white-space: nowrap;
}
.btn-tool {
width: 34px;
height: 34px;
font-size: 1rem;
flex-shrink: 0;
}
.btn-close-header {
height: 34px;
font-size: 0.72rem;
padding: 0 8px;
white-space: nowrap;
flex-shrink: 0;
}
.btn-close-x-roman {
width: 34px;
height: 34px;
font-size: 1rem;
}
/* MENU CATEGORIE (Centro-Alto) */
.cat-nav {
height: 42px;
padding: 3px;
}
.cat-tab {
padding: 5px 9px;
font-size: 0.76rem;
}
.modal-content {
height: 100dvh;
max-height: 100dvh;
}
/* DIVISIONE SCHERMO (Lista Ordini vs Prodotti) */
.modal-body-split {
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
overflow: hidden;
}
.split-left {
width: 100%;
height: 38%;
min-height: 170px;
border-bottom: 1px solid #ddd;
border-right: none;
min-width: 0;
}
.split-right {
width: 100%;
height: 62%;
min-height: 0;
min-width: 0;
}
/* PRODOTTI */
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 4px;
}
.prod-card {
padding: 4px;
min-height: 45px;
display: flex;
flex-direction: column;
justify-content: center;
}
.prod-card img { display: none; }
.prod-name {
font-size: 0.65rem;
height: auto;
margin-bottom: 2px;
}
.prod-price { font-size: 0.7rem; }
.order-list {
padding: 6px;
}
.order-row {
grid-template-columns: 28px minmax(0, 1fr);
align-items: flex-start;
gap: 5px;
padding: 6px;
min-height: 0;
}
.order-row.discount-row {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.order-title-col {
min-width: 0;
}
.order-control-col {
grid-column: 2;
width: 100%;
display: grid;
grid-template-columns: auto minmax(68px, 1fr) auto;
gap: 5px;
align-items: center;
margin-top: 2px;
}
.order-qty-block {
min-width: 0;
align-items: flex-start;
}
.order-price-client {
min-width: 0;
align-items: flex-end;
}
.btn-delete-x {
width: 26px;
height: 26px;
font-size: 1rem;
border-radius: 6px;
}
.product-info {
gap: 6px;
}
.product-img-small {
width: 34px;
height: 34px;
}
.product-title {
font-size: 0.82rem;
line-height: 1.12;
}
.product-unit-price {
font-size: 0.66rem;
gap: 4px;
}
.product-note {
font-size: 0.7rem;
padding: 4px 6px;
border-left-width: 4px;
}
.product-note span {
font-size: 0.6rem;
}
.btn-circle {
width: 26px;
height: 26px;
font-size: 0.95rem;
}
.qty-num {
width: 19px;
font-size: 0.95rem;
}
.price-display {
min-width: 0;
font-size: 0.9rem;
padding: 3px;
}
.btn-pay-toggle {
min-width: 38px;
height: 32px;
font-size: 0.72rem;
}
.order-client,
.order-time {
font-size: 0.63rem;
}
/* FOOTER (Basso) - Griglia a 2 righe e 3 colonne */
.modal-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
padding: 6px;
padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
flex-shrink: 0;
background: #fff;
position: relative;
z-index: 5;
}
.modal-footer > div {
display: contents;
}
.footer-right-actions {
display: contents;
}
.btn-footer-std {
width: 100% !important;
min-width: 0 !important;
height: 42px !important;
font-size: 0.7rem !important;
padding: 0 4px !important;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
border-radius: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-close-big {
font-size: 0.76rem !important;
}
.total-display {
width: 100%;
text-align: right;
margin: 0;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 2px;
white-space: nowrap;
grid-column: 3;
}
/* Modali extra */
.btn-roman-big {
height: 40px !important;
font-size: 0.85rem !important;
padding: 0 10px !important;
}
/* --------------------------------------------------------
NUOVE REGOLE PER LA SCHERMATA PRINCIPALE (SALA)
-------------------------------------------------------- */
body {
padding-top: 8px;
padding-bottom: calc(275px + env(safe-area-inset-bottom, 0px));
}
/* HEADER PRINCIPALE (Top Bar) */
.top-bar {
top: auto;
bottom: calc(30px + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
width: min(300px, calc(100vw - 18px));
height: auto;
min-height: 0;
flex-direction: column;
padding: 9px;
gap: 6px;
}
.header-left, .header-right {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
justify-content: stretch;
gap: 6px;
}
.btn-style {
height: 34px;
padding: 0 4px;
font-size: 0.64rem;
}
.server-menu-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.global-menu-box { width: 100%; justify-content: stretch; padding: 4px; }
.server-menu-row .global-menu-box { grid-column: auto; padding: 3px; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.server-menu-row .btn-server-print,
.server-menu-row .btn-kitchen-print,
.server-menu-row .btn-menu-open,
.server-menu-row .btn-theme-open { height: 34px; }
.label-big { font-size: 0.65rem; }
.select-big { height: 26px; font-size: 0.72rem; width: 100%; padding: 0 4px; }
.btn-big-apply { height: 26px; font-size: 0.7rem; padding: 0; }
.server-menu-row .label-big { font-size: 0.62rem; }
.server-menu-row .select-big,
.server-menu-row .btn-big-apply { height: 24px; font-size: 0.66rem; }
/* GRIGLIA TAVOLI: Forza esattamente 3 per fila (1fr = 1 frazione) */
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px; /* Spazio leggermente maggiore tra i tavoli */
}
/* CARD TAVOLI: Rimpiccioliamo le dimensioni generali per adattarle alle 3 colonne */
.card { width: 90%; max-width: 90%; min-height: 81px; padding: 5px; border-radius: 8px; }
.card h3 { font-size: 1.6rem; margin: 5px 0 2px 0; }
/* Badge del tavolo ridimensionati altrimenti escono dai bordi */
.coperti-badge { font-size: 0.85rem; padding: 2px 4px; top: 4px; left: 4px; }
.menu-badge { font-size: 0.55rem; padding: 2px 4px; top: 4px; right: 4px; }
.pin-badge-card { font-size: 0.65rem; bottom: 3px; right: 4px; }
.status-text { font-size: 0.65rem; }
.time-badge-card { font-size: 0.95rem; padding-top: 2px; }
}
/* DEBUGGER CASHMATIC BOTTOM-LEFT + DRAGGABLE STYLE (IOS FIXED) */
#cashmaticDebug {
display: none;
position: fixed;
bottom: 104px; /* Sopra i comandi di chiusura del tavolo */
left: 18px; /* Colonna di stato a sinistra */
top: auto;
transform: none;
width: 340px;
background: rgba(0, 0, 0, 0.95);
border-right: 4px solid #00ff00;
border-top: 2px solid #00ff00;
border-bottom: 2px solid #00ff00;
border-radius: 10px;
color: #00ff00;
padding: 15px;
font-family: 'Courier New', monospace;
font-size: 13px;
z-index: 99999;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
cursor: grab;
}
#cashmaticDebug:active {
cursor: grabbing;
}
/* FIX IOS: TOUCH-ACTION NONE SU HEADER */
#cmStatusHeader {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px dashed #00ff00;
padding-bottom: 8px;
margin-bottom: 10px;
cursor: move;
touch-action: none; /* CRUCIALE PER IOS */
}
/* STILE BOTTONI DEBUGGER */
.cm-btn-red { background: #c0392b; color: white; border: 1px solid #e74c3c; cursor: pointer; font-size: 12px; padding: 8px; font-weight: bold; border-radius: 4px; width:100%; }
.cm-btn-yellow { background: #f1c40f; color: #333; border: 1px solid #f39c12; cursor: pointer; font-size: 12px; padding: 8px; font-weight: bold; border-radius: 4px; width:100%; }
.cm-btn-grey { background: #7f8c8d; color: white; border: 1px solid #95a5a6; cursor: pointer; font-size: 12px; padding: 8px; font-weight: bold; border-radius: 4px; width:100%; }
.cm-btn-group { display: flex; gap: 5px; margin-top: 10px; }
#cmMoneySummary { display: grid; gap: 5px; margin: 8px 0 10px; }
.cm-money-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(0,255,0,0.25);
border-radius: 5px;
color: #d7ffd7;
font-size: 12px;
font-weight: 800;
}
.cm-money-row strong { color: #fff; font-size: 14px; white-space: nowrap; }
.cm-money-row.warn { border-color: rgba(241,196,15,0.75); color: #ffe7a8; }
.cm-money-row.err { border-color: rgba(231,76,60,0.8); color: #ffc6c6; }
.cm-money-row.err strong { color: #ff9f9f; }
#cmLogs { height: 120px; overflow-y: auto; margin-bottom: 10px; background: rgba(255,255,255,0.05); padding: 5px; border-radius: 4px; }
.cm-big { font-size: 1.8rem; text-align: center; margin: 10px 0; color: #fff; font-weight: 900; text-shadow: 0 0 5px #00ff00; }
.cm-row { margin-bottom: 3px; border-bottom: 1px dotted #444; }
#cmBtnOk { display: none; width: 100%; background: #27ae60; color: white; font-size: 1.2rem; font-weight: bold; padding: 12px; border: none; cursor: pointer; border-radius: 6px; margin-top:10px; animation: pulseGreen 1.5s infinite; }
@keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(39, 174, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); } }
/* CSS CALCOLATRICE TICKET */
.modal-split-body {
display: flex;
gap: 20px;
justify-content: center;
align-items: flex-start;
}
/* Sezione Calcolatrice (Sinistra) */
.calc-section {
background: #f8f9fa;
padding: 10px;
border-radius: 10px;
border: 1px solid #bdc3c7;
width: 220px;
}
.calc-display {
background: #fff;
border: 1px solid #ccc;
height: 50px;
font-size: 1.5rem;
text-align: right;
padding: 10px;
margin-bottom: 10px;
border-radius: 6px;
color: #333;
font-family: monospace;
overflow: hidden;
white-space: nowrap;
}
.calc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.btn-calc {
padding: 15px 0;
font-size: 1.1rem;
font-weight: bold;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
background: #ecf0f1;
color: #333;
}
.btn-calc:active { background: #bdc3c7; }
.btn-calc.op { background: #3498db; color: white; border-color: #2980b9; }
.btn-calc.eq { background: #27ae60; color: white; border-color: #2ecc71; grid-column: span 2; }
.btn-calc.clr { background: #c0392b; color: white; }
.ticket-summary-box {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: -4px 0 14px;
}
.ticket-summary-item {
background: #f5f3ff;
border: 1px solid #ddd6fe;
border-radius: 10px;
padding: 10px 12px;
text-align: center;
}
.ticket-summary-item span {
display: block;
color: #6b7280;
font-size: 0.78rem;
font-weight: 900;
margin-bottom: 4px;
}
.ticket-summary-item strong {
display: block;
color: #4c1d95;
font-size: 1.28rem;
font-weight: 950;
}
.btn-ticket-divide {
width: 100%;
margin-top: 10px;
padding: 11px;
background: #f59e0b;
color: #111827;
border: none;
border-radius: 6px;
font-weight: 950;
cursor: pointer;
font-size: 0.86rem;
}
.ticket-calc-hint {
margin-top: 8px;
min-height: 18px;
color: #6b7280;
font-size: 0.78rem;
font-weight: 800;
text-align: center;
}
.btn-transfer {
width: 100%;
margin-top: 10px;
padding: 10px;
background: #8e44ad;
color: white;
border: none;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
font-size: 0.9rem;
}
/* Sezione Input Ticket (Destra) - Adattamento */
.ticket-input-section {
width: 280px; /* Larghezza fissa per il tastierino esistente */
}
/* Mobile: Metti uno sotto l'altro se lo schermo è piccolo */
@media (max-width: 600px) {
.modal-split-body { flex-direction: column; align-items: center; }
.calc-section { width: 100%; max-width: 280px; margin-bottom: 15px; }
.ticket-summary-box { grid-template-columns: 1fr; }
}
/* ==========================================================
BETA UI - PANNELLO TAVOLO
Restyling puramente visivo: gli id e i flussi restano invariati.
========================================================== */
.table-workspace-beta {
--table-bg: #f5f5f7;
--table-surface: #ffffff;
--table-text: #1d1d1f;
--table-secondary: #6e6e73;
--table-separator: #d2d2d7;
--table-blue: #0071e3;
--table-green: #248a3d;
--table-red: #d70015;
background: var(--table-bg);
color: var(--table-text);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
letter-spacing: 0;
}
.table-workspace-beta .modal-header {
min-height: 76px;
padding: calc(env(safe-area-inset-top, 0px) + 9px) 16px 9px;
background: #ffffff;
color: var(--table-text);
border: 0;
border-bottom: 1px solid rgba(60, 60, 67, 0.18);
box-shadow: 0 1px 0 rgba(255,255,255,0.8);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.table-workspace-beta .header-left-group,
.table-workspace-beta .header-right-group { gap: 8px; }
.table-workspace-beta .table-identity {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-width: 82px;
padding-right: 10px;
border-right: 1px solid var(--table-separator);
}
.table-workspace-beta .table-context-label,
.table-workspace-beta .table-setting-control > span,
.table-workspace-beta .table-control-label {
display: block;
color: var(--table-secondary);
font-size: 0.64rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.table-workspace-beta .table-title-huge {
margin: 2px 0 0;
color: var(--table-text);
font-size: 2.2rem;
font-weight: 760;
line-height: 0.95;
text-shadow: none;
}
.table-workspace-beta .table-setting-control {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 0;
}
.table-workspace-beta .modal-select {
height: 38px;
min-width: 112px;
padding: 0 30px 0 10px;
border: 1px solid rgba(60, 60, 67, 0.22);
border-radius: 8px;
background-color: #f2f2f7;
color: var(--table-text);
font-size: 0.9rem;
font-weight: 650;
box-shadow: none;
outline: none;
}
.table-workspace-beta .modal-select:focus {
border-color: var(--table-blue);
box-shadow: 0 0 0 3px rgba(0,113,227,0.14);
}
.table-workspace-beta .table-covers-control .modal-select { min-width: 88px; }
.table-workspace-beta .table-choice-native { display:none !important; }
.table-workspace-beta .table-choice-trigger {
min-width:112px;
height:38px;
padding:0 9px 0 11px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
border:1px solid rgba(60,60,67,.22);
border-radius:8px;
background:#f2f2f7;
color:var(--table-text);
font-family:inherit;
font-size:.9rem;
font-weight:700;
cursor:pointer;
}
.table-workspace-beta .table-covers-control .table-choice-trigger { min-width:88px; }
.table-choice-trigger-arrow { color:var(--table-secondary); font-size:.8rem; }
.table-choice-backdrop {
position:fixed;
z-index:1090;
inset:0;
display:none;
background:transparent;
}
.table-choice-backdrop.open { display:block; }
.table-choice-popover {
position:fixed;
z-index:1095;
display:none;
box-sizing:border-box;
width:min(330px,calc(100vw - 16px));
max-height:calc(100dvh - 80px);
padding:10px;
overflow:hidden;
border:1px solid rgba(60,60,67,.18);
border-radius:13px;
background:rgba(255,255,255,.98);
color:#1d1d1f;
box-shadow:0 18px 45px rgba(15,23,42,.28),0 3px 10px rgba(15,23,42,.14);
-webkit-backdrop-filter:saturate(180%) blur(18px);
backdrop-filter:saturate(180%) blur(18px);
}
.table-choice-popover.open { display:flex; flex-direction:column; }
.table-choice-popover-title { flex:0 0 auto; padding:2px 3px 9px; font-size:.78rem; font-weight:800; }
.table-choice-grid { min-height:0; display:grid; gap:7px; overflow-y:auto; overscroll-behavior:contain; }
.table-choice-grid.is-menu { grid-template-columns:repeat(2,minmax(0,1fr)); }
.table-choice-grid.is-covers { grid-template-columns:repeat(5,minmax(0,1fr)); }
.table-choice-option {
min-width:0;
min-height:48px;
padding:5px;
border:1px solid rgba(60,60,67,.16);
border-radius:9px;
background:#f2f2f7;
color:#1d1d1f;
font-family:inherit;
font-size:.82rem;
font-weight:750;
cursor:pointer;
}
.table-choice-option.is-active { border-color:#0071e3; background:#0071e3; color:#fff; }
.table-choice-cancel {
flex:0 0 auto;
min-height:42px;
margin-top:9px;
border:0;
border-radius:9px;
background:#e5e5ea;
color:#3a3a3c;
font-family:inherit;
font-size:.78rem;
font-weight:750;
cursor:pointer;
}
.table-workspace-beta .table-pin-control {
min-width: 74px;
height: 42px;
padding: 6px 9px !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
box-sizing: border-box;
border: 1px solid rgba(60, 60, 67, 0.18);
border-radius: 8px !important;
background: #f2f2f7 !important;
}
.table-workspace-beta .pin-text {
margin: 0;
color: var(--table-text);
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 0.86rem;
font-weight: 750;
line-height: 1;
}
.table-workspace-beta .btn-tool,
.table-workspace-beta .btn-close-header {
height: 42px;
border: 1px solid rgba(60, 60, 67, 0.18);
border-radius: 8px;
box-shadow: none;
transition: background 0.16s ease, transform 0.16s ease;
}
.table-workspace-beta .btn-tool {
width: 42px;
background: #f2f2f7;
color: var(--table-text);
font-size: 1.08rem;
}
.table-workspace-beta .btn-close-header {
gap: 6px;
padding: 0 13px;
background: #fff0f1;
border-color: rgba(215, 0, 21, 0.2);
color: var(--table-red);
font-size: 0.84rem;
font-weight: 750;
text-transform: none;
}
.table-workspace-beta .btn-close-header > span:first-child { font-size: 1.35rem; font-weight: 500; line-height: 1; }
.table-workspace-beta .btn-tool:active,
.table-workspace-beta .btn-close-header:active { transform: scale(0.96); background: #e5e5ea; }
.table-workspace-beta .modal-body-split {
gap: 10px;
padding: 10px;
background: var(--table-bg);
}
.table-workspace-beta .split-left,
.table-workspace-beta .split-right {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(60, 60, 67, 0.14);
border-radius: 8px;
background: var(--table-surface);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.table-workspace-beta .split-left { width: 58%; }
.table-workspace-beta .split-right { width: 42%; }
.table-workspace-beta .workspace-section-label {
min-height: 48px;
padding: 8px 12px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid rgba(60, 60, 67, 0.12);
background: rgba(255,255,255,0.96);
}
.table-workspace-beta .workspace-section-label span {
color: var(--table-text);
font-size: 0.98rem;
font-weight: 750;
line-height: 1.1;
}
.table-workspace-beta .workspace-section-label small {
margin-top: 2px;
color: var(--table-secondary);
font-size: 0.7rem;
font-weight: 500;
line-height: 1.1;
}
.table-workspace-beta .workspace-order-label { border-bottom-color: rgba(60,60,67,0.14); }
.table-workspace-beta .cat-nav {
box-sizing: border-box;
height: auto;
min-height: 94px;
max-height: 142px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: minmax(38px, auto);
align-content: start;
align-items: stretch;
gap: 6px;
padding: 8px 10px;
background: #f2f2f7;
border-bottom: 1px solid rgba(60,60,67,0.12);
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
}
.table-workspace-beta .cat-nav::-webkit-scrollbar { width: 4px; }
.table-workspace-beta .cat-nav::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(60,60,67,0.22); }
.table-workspace-beta .cat-tab {
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 38px;
padding: 7px 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(60,60,67,0.13);
border-radius: 8px;
background: rgba(255,255,255,0.86);
color: #3a3a3c;
font-size: 0.78rem;
font-weight: 650;
line-height: 1.05;
text-align: center;
white-space: normal;
box-shadow: none;
transform: none;
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.table-workspace-beta .cat-tab.active {
background: var(--table-blue);
border-color: var(--table-blue);
color: #fff;
box-shadow: none;
transform: none;
}
.table-workspace-beta .products-container { padding: 10px; background: #fff; }
.table-workspace-beta .products-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.table-workspace-beta .prod-card {
padding: 7px;
border: 1px solid rgba(60,60,67,0.13);
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.035);
transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.table-workspace-beta .prod-card:active {
transform: scale(0.97);
border-color: var(--table-blue);
background: #eef6ff;
}
.table-workspace-beta .prod-card img { height: 76px; margin-bottom: 7px; border-radius: 7px; }
.table-workspace-beta .prod-name { color: var(--table-text); font-size: 0.8rem; font-weight: 650; }
.table-workspace-beta .prod-price { color: var(--table-secondary); font-size: 0.75rem; font-weight: 650; }
.table-workspace-beta .order-list { padding: 9px; background: var(--table-bg); }
.table-workspace-beta .order-row {
gap: 8px;
min-height: 62px;
margin-bottom: 7px;
padding: 8px;
border: 1px solid rgba(60,60,67,0.14);
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.035);
}
.table-workspace-beta .order-row.is-paying {
background: #fff8e8 !important;
border-color: #f2b84b !important;
box-shadow: inset 3px 0 0 #f2b84b;
}
.table-workspace-beta .product-img-small { border-radius: 7px; border-color: rgba(60,60,67,0.12); }
.table-workspace-beta .product-title {
width: 100%;
max-width: 20ch;
padding: 0;
border: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
color: var(--table-text);
font-family: inherit;
font-weight: 700;
line-height: 1.14;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.table-workspace-beta .product-title.is-expanded {
max-width: 100%;
white-space: normal;
overflow: visible;
overflow-wrap: anywhere;
text-overflow: clip;
}
.table-workspace-beta .product-unit-price,
.table-workspace-beta .order-time { color: var(--table-secondary); }
.table-workspace-beta .order-client { color: var(--table-blue); }
.table-workspace-beta .btn-delete-x,
.table-workspace-beta .btn-circle,
.table-workspace-beta .btn-bell-mini,
.table-workspace-beta .btn-pay-toggle {
box-shadow: none;
border-radius: 8px;
}
.table-workspace-beta .btn-delete-x { background: #fff0f1; color: var(--table-red); border: 1px solid rgba(215,0,21,0.18); }
.table-workspace-beta .btn-minus { background: #ff3b30; }
.table-workspace-beta .btn-plus { background: #34c759; }
.table-workspace-beta .btn-bell-mini { background: #fff3d6; color: #9a6700; }
.table-workspace-beta .pay-btn-zero { background: #e5e5ea; color: #3a3a3c; }
.table-workspace-beta .pay-btn-partial { background: #ff9f0a; color: #fff; }
.table-workspace-beta .pay-btn-full { background: #34c759; color: #fff; }
.table-workspace-beta .price-display { color: var(--table-text); border-radius: 7px; }
.table-workspace-beta .fixed-menu-order-group { border-radius: 8px; box-shadow: none; }
.table-workspace-beta .modal-footer {
min-height: 82px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
gap: 8px;
border: 0;
border-top: 1px solid rgba(60,60,67,0.16);
background: rgba(255,255,255,0.96);
box-shadow: 0 -6px 22px rgba(0,0,0,0.035);
backdrop-filter: saturate(180%) blur(22px);
-webkit-backdrop-filter: saturate(180%) blur(22px);
}
.table-workspace-beta .footer-right-actions { gap: 8px; }
.table-workspace-beta .btn-footer-std {
min-width: 106px;
height: 56px;
padding: 0 15px;
border: 1px solid transparent;
border-radius: 8px;
box-shadow: none;
font-size: 0.86rem;
font-weight: 750;
letter-spacing: 0;
transition: transform 0.14s ease, opacity 0.14s ease;
}
.table-workspace-beta .btn-footer-std:active { transform: scale(0.97); }
.table-workspace-beta .btn-close-big { background: #fff0f1; border-color: rgba(215,0,21,0.22); color: var(--table-red); }
.table-workspace-beta .btn-unisci { background: #5856d6; }
.table-workspace-beta .btn-separato { background: #ff9500; }
.table-workspace-beta .btn-diviso { background: #af52de; }
.table-workspace-beta .btn-discount { background: #fff4e5; border-color: rgba(255,149,0,0.25); color: #a65f00; }
.table-workspace-beta .btn-scontrino { background: var(--table-green); }
.table-workspace-beta .btn-scontrino:disabled { background: #e5e5ea !important; color: #8e8e93 !important; opacity: 1; }
.table-workspace-beta .total-display {
min-width: 142px;
margin-left: 4px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
color: var(--table-text);
line-height: 1;
}
.table-workspace-beta .total-label { color: var(--table-secondary); font-size: 0.68rem; font-weight: 650; text-transform: uppercase; }
.table-workspace-beta .total-value { margin-top: 5px; font-size: 1.75rem; font-weight: 760; white-space: nowrap; }
@media (min-width: 900px) {
.table-workspace-beta .cat-nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 601px) and (max-width: 1100px) {
.table-workspace-beta .order-row {
grid-template-columns: 30px minmax(0, 1fr);
align-items: flex-start;
}
.table-workspace-beta .order-control-col {
grid-column: 2;
width: 100%;
display: grid;
grid-template-columns: auto minmax(86px, 1fr) auto;
gap: 7px;
align-items: center;
}
.table-workspace-beta .order-qty-block { min-width: 0; align-items: flex-start; }
.table-workspace-beta .order-price-client { min-width: 0; }
.table-workspace-beta .product-title { font-size: 0.92rem; }
}
@media (max-width: 600px) {
.table-workspace-beta .modal-header {
min-height: 54px;
padding: calc(env(safe-area-inset-top, 0px) + 4px) 5px 5px;
gap: 3px;
overflow-x: hidden;
}
.table-workspace-beta .header-left-group,
.table-workspace-beta .header-right-group { gap: 3px; }
.table-workspace-beta .header-left-group { flex: 1 1 auto; }
.table-workspace-beta .header-right-group { flex: 0 0 auto; min-width: 0; }
.table-workspace-beta .table-identity {
min-width: 34px;
padding-right: 3px;
border-right: 0;
}
.table-workspace-beta .table-context-label { font-size: 0.47rem; }
.table-workspace-beta .table-title-huge { margin-top: 1px; font-size: 1.32rem; }
.table-workspace-beta .table-setting-control { gap: 0; }
.table-workspace-beta .table-setting-control > span,
.table-workspace-beta .table-control-label { display: none; }
.table-workspace-beta .modal-select {
width: 62px;
min-width: 62px;
max-width: 62px;
height: 32px;
padding: 0 2px;
border-radius: 7px;
font-size: 0.67rem;
}
.table-workspace-beta .table-covers-control .modal-select {
width: 51px;
min-width: 51px;
max-width: 51px;
}
.table-workspace-beta .table-choice-trigger {
width:62px;
min-width:62px;
max-width:62px;
height:32px;
padding:0 5px;
gap:3px;
border-radius:7px;
font-size:.67rem;
}
.table-workspace-beta .table-covers-control .table-choice-trigger {
width:51px;
min-width:51px;
max-width:51px;
}
.table-choice-popover { border-radius:11px; padding:8px; }
.table-choice-option { min-height:44px; font-size:.76rem; }
.table-workspace-beta .table-pin-control {
width: 43px;
min-width: 43px;
height: 32px;
padding: 2px !important;
border-radius: 7px !important;
}
.table-workspace-beta .pin-text { font-size: 0.66rem; }
.table-workspace-beta .btn-tool,
.table-workspace-beta .btn-close-header {
width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
border-radius: 7px;
justify-content: center;
}
.table-workspace-beta .btn-tool { font-size: 0.88rem; }
.table-workspace-beta .btn-close-header > span:first-child { font-size: 1.25rem; }
.table-workspace-beta .btn-close-label { display: none; }
.table-workspace-beta .modal-body-split { gap: 5px; padding: 5px; }
.table-workspace-beta .split-left,
.table-workspace-beta .split-right { width: 100%; border-radius: 8px; }
.table-workspace-beta .split-left { height: 38%; min-height: 165px; }
.table-workspace-beta .split-right { height: 62%; }
.table-workspace-beta .workspace-section-label { display: none; }
.table-workspace-beta .cat-nav {
height: auto;
min-height: 72px;
max-height: 76px;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 32px;
padding: 4px;
gap: 4px;
overflow-x: hidden;
overflow-y: auto;
}
.table-workspace-beta .cat-tab {
min-width: 0;
min-height: 32px;
padding: 0 6px;
border-radius: 7px;
font-size: 0.66rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.table-workspace-beta .products-container { padding: 5px; }
.table-workspace-beta .products-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 4px; }
.table-workspace-beta .prod-card { min-height: 44px; padding: 4px; border-radius: 7px; }
.table-workspace-beta .prod-name { font-size: 0.64rem; }
.table-workspace-beta .prod-price { font-size: 0.68rem; }
.table-workspace-beta .order-list { padding: 5px; }
.table-workspace-beta .order-row { gap: 5px; padding: 6px; margin-bottom: 5px; border-radius: 7px; }
.table-workspace-beta .btn-delete-x,
.table-workspace-beta .btn-circle,
.table-workspace-beta .btn-pay-toggle { border-radius: 7px; }
.table-workspace-beta .modal-footer {
min-height: 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}
.table-workspace-beta .btn-footer-std {
min-width: 0;
height: 42px !important;
padding: 0 4px !important;
border-radius: 7px;
font-size: 0.68rem !important;
box-shadow: none;
}
.table-workspace-beta .total-display {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
min-height: 30px;
margin: 0;
padding: 0 4px;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.table-workspace-beta .total-label { font-size: 0.62rem; }
.table-workspace-beta .total-value { margin-top: 0; font-size: 1.1rem; }
}
/* Home sala sperimentale: beta 2 */
body.room-home-beta2 {
background: #f2f2f7;
padding-top: 8px;
}
.room-home-beta2 .room-overview-beta2 {
position: sticky;
top: 8px;
z-index: 60;
width: 100%;
max-width: 1400px;
margin: 0 auto 10px;
padding: 6px;
box-sizing: border-box;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
background: rgba(31,32,35,0.96);
box-shadow: 0 8px 24px rgba(15,23,42,0.24), 0 2px 6px rgba(15,23,42,0.16);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.room-home-beta2 .room-summary-beta2 {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 5px;
}
.room-home-beta2 .room-filter-beta2 {
min-width: 0;
min-height: 40px;
padding: 4px 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
border: 1px solid rgba(60,60,67,0.13);
border-radius: 7px;
background: #fff;
color: #3a3a3c;
font-family: inherit;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.room-home-beta2 .room-filter-beta2::before {
content: '';
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--filter-color, #8e8e93);
}
.room-home-beta2 .room-filter-beta2 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-home-beta2 .room-filter-beta2 > strong {
min-width: 25px;
height: 25px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 999px;
background: #f2f2f7;
color: #1d1d1f;
font-size: 0.76rem;
font-variant-numeric: tabular-nums;
}
.room-home-beta2 .room-filter-beta2.is-active {
border-color: #3ba760;
background: #2f8f51;
color: #fff;
}
.room-home-beta2 .room-filter-beta2.is-active > strong { background: rgba(255,255,255,0.16); color: #fff; }
.room-home-beta2 .room-filter-all { --filter-color: #8e8e93; }
.room-home-beta2 .room-filter-free { --filter-color: #30a956; }
.room-home-beta2 .room-filter-busy { --filter-color: #ef6a5b; }
.room-home-beta2 .room-filter-paying { --filter-color: #3478f6; }
.room-home-beta2 .room-filter-request { --filter-color: #8b5cf6; }
.room-home-beta2 .room-filter-request.has-requests {
border: 2px solid #f7c948;
background: #6d28d9;
color: #fff;
animation: roomRequestFilterPulse 0.82s ease-in-out infinite;
transform-origin: center;
will-change: transform, background-color, box-shadow;
}
.room-home-beta2 .room-filter-request.has-requests::before {
background: #fff;
box-shadow: 0 0 0 4px rgba(255,255,255,0.22);
}
.room-home-beta2 .room-filter-request.has-requests > strong {
background: #fff;
color: #5b21b6;
box-shadow: 0 2px 8px rgba(49,20,91,0.28);
}
@keyframes roomRequestFilterPulse {
0%, 100% {
border-color: #a78bfa;
background: #6d28d9;
box-shadow: 0 0 0 0 rgba(109,40,217,0.38), 0 4px 12px rgba(76,29,149,0.26);
transform: scale(1);
}
50% {
border-color: #ffdc63;
background: #f59e0b;
color: #231500;
box-shadow: 0 0 0 6px rgba(245,158,11,0.28), 0 8px 20px rgba(180,83,9,0.34);
transform: scale(1.045);
}
}
.room-home-beta2 .room-filter-notifications { --filter-color: #f59e0b; }
.room-home-beta2 .room-filter-operator {
--filter-color: #30a956;
display: grid;
grid-template-columns: 8px minmax(0, 1fr);
grid-template-rows: auto;
align-content: center;
justify-content: stretch;
column-gap: 5px;
row-gap: 2px;
cursor: pointer;
}
.room-home-beta2 .room-filter-operator::before {
grid-column: 1;
grid-row: 1;
align-self: center;
}
.room-home-beta2 .room-filter-operator > span {
grid-column: 2;
grid-row: 1;
font-weight: 800;
}
.room-home-beta2 .room-filter-operator.is-open {
border-color: #30a956;
background: #effaf2;
}
#operatorInfoPanel {
position: absolute;
z-index: 121;
top: calc(100% + 8px);
right: 6px;
width: min(360px, calc(100vw - 28px));
display: none;
overflow: hidden;
border: 1px solid rgba(60, 60, 67, .16);
border-radius: 14px;
background: rgba(248, 248, 250, .98);
box-shadow: 0 24px 70px rgba(15, 23, 42, .30);
-webkit-backdrop-filter: blur(24px) saturate(1.15);
backdrop-filter: blur(24px) saturate(1.15);
}
#operatorInfoPanel.open {
display: block;
animation: hkHistoryIn .2s ease both;
}
.operator-info-head {
min-height: 46px;
padding: 0 12px 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid rgba(60, 60, 67, .13);
background: rgba(255, 255, 255, .92);
color: #1d1d1f;
font-size: .9rem;
font-weight: 800;
}
.operator-info-close {
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 9px;
background: #e9e9ee;
color: #3a3a3c;
font: inherit;
cursor: pointer;
}
.operator-info-list {
padding: 8px;
display: grid;
gap: 6px;
}
.operator-info-row {
min-height: 42px;
padding: 7px 10px;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
align-items: center;
gap: 9px;
border: 1px solid rgba(60, 60, 67, .10);
border-radius: 9px;
background: #fff;
}
.operator-info-row > span {
color: #8e8e93;
font-size: .66rem;
font-weight: 750;
text-transform: uppercase;
}
.operator-info-row > strong {
min-width: 0;
overflow: hidden;
color: #1d1d1f;
font-size: .78rem;
font-weight: 760;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.room-home-beta2 .room-priority-beta2 {
margin-top: 6px;
padding-top: 6px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
border-top: 1px solid rgba(255,255,255,0.16);
}
.room-home-beta2 .room-priority-beta2[hidden] { display: none; }
.room-home-beta2 .room-priority-label {
color: #d1d1d6;
font-size: 0.65rem;
font-weight: 750;
text-transform: uppercase;
}
.room-home-beta2 .room-priority-list {
min-width: 0;
display: flex;
gap: 5px;
overflow-x: auto;
scrollbar-width: none;
}
.room-home-beta2 .room-priority-list::-webkit-scrollbar { display: none; }
.room-home-beta2 .room-priority-chip {
min-height: 31px;
padding: 0 10px;
flex: 0 0 auto;
border: 1px solid transparent;
border-radius: 7px;
color: #1d1d1f;
font-family: inherit;
font-size: 0.7rem;
font-weight: 750;
cursor: pointer;
}
.room-home-beta2 .room-priority-chip.is-waiter { border-color: #e5b000; background: #fff7d6; }
.room-home-beta2 .room-priority-chip.is-bill { border-color: #8b5cf6; background: #f1eaff; }
.room-home-beta2 .grid-wrapper { max-width: 1400px; margin: 0 auto; }
.room-home-beta2 .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.room-home-beta2 .card {
--table-accent: #8e8e93;
width: 100%;
max-width: none;
min-height: 108px;
padding: 15px 10px 11px;
justify-self: stretch;
overflow: hidden;
border: 1px solid rgba(60,60,67,0.13);
border-radius: 8px;
background: #fff;
color: #1d1d1f;
box-shadow: 0 2px 7px rgba(15,23,42,0.07);
transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.room-home-beta2 .card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: var(--table-accent);
}
.room-home-beta2 .card:active { transform: scale(0.98); }
.room-home-beta2 .card.libero { --table-accent: #30a956; background: #f8fcf9; color: #173d23; }
.room-home-beta2 .card.occupato { --table-accent: #ef6a5b; background: #fff8f7; color: #55231d; }
.room-home-beta2 .card.conteggio {
--table-accent: #3478f6;
border: 1px solid rgba(52,120,246,0.28);
background: #f6f9ff;
color: #16365f;
}
.room-home-beta2 .card h3 {
margin: 10px 0 5px;
color: #1d1d1f;
font-size: 2.15rem;
font-weight: 760;
line-height: 1;
letter-spacing: 0;
text-shadow: none;
}
.room-home-beta2 .status-text {
min-height: 24px;
margin: 0 auto;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 760;
line-height: 1;
white-space: nowrap;
}
.room-home-beta2 .card.libero .status-text { background: #e5f6e9; color: #237d3c; }
.room-home-beta2 .card.occupato .status-text { background: #ffe5e1; color: #a63b30; }
.room-home-beta2 .card.conteggio .status-text { background: #e3edff; color: #205bbb; }
.room-home-beta2 .coperti-badge,
.room-home-beta2 .menu-badge {
top: 8px;
min-height: 22px;
padding: 0 6px;
display: inline-flex;
align-items: center;
box-sizing: border-box;
border-radius: 6px;
background: rgba(255,255,255,0.78);
color: #3a3a3c;
border: 1px solid rgba(60,60,67,0.11);
font-size: 0.62rem;
font-weight: 700;
}
.room-home-beta2 .coperti-badge { left: 8px; }
.room-home-beta2 .coperti-badge {
min-height: 27px;
padding: 0 8px;
font-size: 0.88rem;
font-weight: 820;
}
.room-home-beta2 .menu-badge { right: 8px; }
.room-home-beta2 .pin-badge-card {
right: 8px;
bottom: 5px;
color: #8e8e93;
font-family: inherit;
font-size: 0.58rem;
font-weight: 650;
}
.room-home-beta2 .time-badge-card {
margin-top: 5px;
padding: 0 0 4px;
color: #6e6e73;
font-size: 0.68rem;
font-weight: 650;
line-height: 1;
text-shadow: none;
white-space: nowrap;
}
.room-home-beta2 .card.waiter-call {
--table-accent: #d9a400;
border: 4px solid #e5a800 !important;
background: #fff6bd;
color: #4d3a00;
animation: roomWaiterPulseBeta2 0.86s ease-in-out infinite;
transform-origin: center;
will-change: transform, background-color, box-shadow;
}
.room-home-beta2 .card.waiter-call::before { height: 9px; background: #e5a800; }
.room-home-beta2 .card.waiter-call .status-text {
background: #6f4b00;
color: #fff;
box-shadow: 0 2px 8px rgba(111,75,0,0.28);
}
.room-home-beta2 .card.bill-call {
--table-accent: #8b5cf6;
border: 4px solid #7c3aed !important;
background: #eee4ff;
color: #432179;
animation: roomBillPulseBeta2 0.86s ease-in-out infinite;
transform-origin: center;
will-change: transform, background-color, box-shadow;
}
.room-home-beta2 .card.bill-call::before { height: 9px; background: #7c3aed; }
.room-home-beta2 .card.bill-call .status-text {
background: #5b21b6;
color: #fff;
box-shadow: 0 2px 8px rgba(91,33,182,0.30);
}
.room-home-beta2 .card.room-filter-hidden { display: none !important; }
@keyframes roomWaiterPulseBeta2 {
0%, 100% {
border-color: #e5a800;
background: #fff6bd;
box-shadow: 0 4px 12px rgba(15,23,42,0.16), 0 0 0 0 rgba(245,158,11,0.42);
transform: scale(1);
}
50% {
border-color: #7c4a03;
background: #ffc400;
box-shadow: 0 12px 30px rgba(146,86,0,0.38), 0 0 0 8px rgba(245,158,11,0.34);
transform: scale(1.055);
}
}
@keyframes roomBillPulseBeta2 {
0%, 100% {
border-color: #7c3aed;
background: #eee4ff;
box-shadow: 0 4px 12px rgba(15,23,42,0.16), 0 0 0 0 rgba(124,58,237,0.44);
transform: scale(1);
}
50% {
border-color: #4c1d95;
background: #67e8f9;
box-shadow: 0 12px 30px rgba(76,29,149,0.36), 0 0 0 8px rgba(34,211,238,0.34);
transform: scale(1.055);
}
}
@media (min-width: 1200px) {
.room-home-beta2 .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 899px) {
.room-home-beta2 .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.room-home-beta2 { padding-top: 5px; }
.room-home-beta2 .room-overview-beta2 { top: 5px; margin-bottom: 7px; padding: 5px; }
.room-home-beta2 .room-summary-beta2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.room-home-beta2 .room-filter-operator { grid-column: span 2; }
#operatorInfoPanel { right: 0; width: 100%; }
.room-home-beta2 .room-filter-beta2 { min-height: 34px; padding: 3px 5px; font-size: 0.62rem; }
.room-home-beta2 .room-filter-beta2::before { width: 6px; height: 6px; flex-basis: 6px; }
.room-home-beta2 .room-filter-beta2 > strong { min-width: 21px; height: 21px; font-size: 0.62rem; }
.room-home-beta2 .room-priority-beta2 { grid-template-columns: 1fr; gap: 4px; }
.room-home-beta2 .room-priority-label { display: none; }
.room-home-beta2 .room-priority-chip { min-height: 28px; padding: 0 8px; font-size: 0.62rem; }
.room-home-beta2 .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.room-home-beta2 .card { min-height: 88px; padding: 12px 5px 8px; }
.room-home-beta2 .card h3 { margin: 8px 0 4px; font-size: 1.55rem; }
.room-home-beta2 .status-text { min-height: 20px; padding: 0 5px; font-size: 0.54rem; }
.room-home-beta2 .coperti-badge,
.room-home-beta2 .menu-badge { top: 5px; min-height: 18px; padding: 0 4px; font-size: 0.5rem; }
.room-home-beta2 .coperti-badge { left: 5px; }
.room-home-beta2 .coperti-badge {
min-height: 24px;
padding: 0 6px;
font-size: 0.76rem;
font-weight: 820;
}
.room-home-beta2 .menu-badge { right: 5px; }
.room-home-beta2 .time-badge-card { margin-top: 3px; font-size: 0.56rem; }
.room-home-beta2 .pin-badge-card { right: 5px; bottom: 3px; font-size: 0.48rem; }
}
/* Dock operativo sperimentale: beta 2 */
body.room-home-beta2 {
padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
body.staff-more-open-beta2 { overflow: hidden; }
body.room-home-beta2.table-workspace-open-beta2 {
background: #ffffff !important;
overflow: hidden !important;
overscroll-behavior: none;
}
body.room-home-beta2.bar-sale-open-beta2 {
background: #ffffff !important;
overflow: hidden !important;
overscroll-behavior: none;
}
/* Mantiene la sala al suo posto, ma non la lascia trasparire dietro alla status bar di iPad. */
body.room-home-beta2.table-workspace-open-beta2 > .room-overview-beta2,
body.room-home-beta2.table-workspace-open-beta2 > .grid-wrapper,
body.room-home-beta2.bar-sale-open-beta2 > .room-overview-beta2,
body.room-home-beta2.bar-sale-open-beta2 > .grid-wrapper,
body.room-home-beta2.bar-sale-open-beta2 > .staff-dock-beta2 {
visibility: hidden !important;
}
body.room-home-beta2.table-workspace-open-beta2 #modalOverlay {
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
background: #ffffff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.room-home-beta2.table-workspace-open-beta2 #modalOverlay > .table-workspace-beta {
height: 100vh;
min-height: 100vh;
max-height: 100vh;
height: 100dvh;
min-height: 100dvh;
max-height: 100dvh;
}
.room-home-beta2 .staff-dock-beta2 {
position: fixed;
z-index: 1180;
left: 50%;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
width: min(700px, calc(100vw - 18px));
min-height: 70px;
padding: 5px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
box-sizing: border-box;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px;
background: rgba(31,32,35,0.96);
box-shadow: 0 -12px 32px rgba(15,23,42,0.24), 0 -2px 8px rgba(15,23,42,0.16);
-webkit-backdrop-filter: blur(22px) saturate(1.35);
backdrop-filter: blur(22px) saturate(1.35);
transform: translateX(-50%);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.room-home-beta2.table-workspace-open-beta2:not(.table-workspace-closing-beta2) .staff-dock-beta2 {
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 18px);
}
.room-home-beta2.table-workspace-closing-beta2 .staff-dock-beta2 {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateX(-50%);
transition: none;
}
.room-home-beta2 .staff-dock-item-beta2 {
min-width: 0;
min-height: 58px;
padding: 5px 3px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
box-sizing: border-box;
border: 0;
border-radius: 9px;
background: transparent;
color: #f5f5f7;
box-shadow: none;
font-family: inherit;
font-size: 0.66rem;
font-weight: 720;
line-height: 1;
letter-spacing: 0;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.room-home-beta2 .staff-dock-item-beta2:active { background: rgba(255,255,255,0.14); transform: scale(0.96); }
.room-home-beta2 .staff-dock-icon-beta2 {
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #f5f5f7;
font-size: 1.16rem;
font-weight: 760;
line-height: 1;
}
.room-home-beta2 .staff-dock-primary-beta2 {
background: #2f8f51;
color: #fff;
}
.room-home-beta2 .staff-dock-primary-beta2 .staff-dock-icon-beta2 { color: #fff; }
.room-home-beta2 .staff-dock-primary-beta2:active { background: #267642; }
.room-home-beta2 .staff-dock-kitchen-beta2.running { background: #e8f7ed; color: #237d3c; }
.room-home-beta2 .staff-dock-kitchen-beta2.disabled { color: #aeaeb2; opacity: 0.78; }
.room-home-beta2 .staff-dock-kitchen-beta2.alarm-blink { color: #a63b30; background: #ffe9e6; }
.room-home-beta2 .staff-dock-kitchen-beta2::before {
content: '▤';
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
font-size: 1.16rem;
font-weight: 760;
line-height: 1;
}
.room-home-beta2 .staff-dock-more-beta2.is-open { background: rgba(255,255,255,0.16); color: #fff; }
.room-home-beta2 .staff-more-backdrop-beta2 {
position: fixed;
z-index: 1190;
inset: 0;
visibility: hidden;
opacity: 0;
background: rgba(0,0,0,0.34);
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.room-home-beta2 .staff-more-backdrop-beta2.is-open { visibility: visible; opacity: 1; }
.room-home-beta2 .top-bar.staff-more-sheet-beta2 {
position: fixed;
z-index: 1200;
left: 50%;
right: auto;
bottom: 0;
width: min(620px, 100%);
height: auto;
min-height: 0;
max-height: min(74dvh, 650px);
margin: 0;
padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
display: block;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid rgba(60,60,67,0.14);
border-bottom: 0;
border-radius: 18px 18px 0 0;
background: #f8f8fa;
color: #1d1d1f;
box-shadow: 0 -14px 40px rgba(15,23,42,0.22);
opacity: 0;
pointer-events: none;
transform: translate(-50%, calc(100% + 24px));
transition: transform 0.24s ease, opacity 0.18s ease;
}
.room-home-beta2 .top-bar.staff-more-sheet-beta2.is-open {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.room-home-beta2 .staff-more-backdrop-beta2.is-closing {
visibility: visible;
pointer-events: none;
animation: staffMoreBackdropCloseBeta2 .32s ease both;
}
.room-home-beta2 .top-bar.staff-more-sheet-beta2.is-closing {
pointer-events: none;
animation: staffMoreSheetCloseBeta2 .32s cubic-bezier(.4, 0, .7, .2) both;
}
@keyframes staffMoreBackdropCloseBeta2 {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes staffMoreSheetCloseBeta2 {
from { opacity: 1; transform: translate(-50%, 0); }
to { opacity: 0; transform: translate(-50%, calc(100% + 24px)); }
}
.room-home-beta2 .staff-more-handle-beta2 {
width: 38px;
height: 5px;
margin: 0 auto 8px;
border-radius: 999px;
background: #c7c7cc;
}
.room-home-beta2 .staff-more-header-beta2 {
min-height: 38px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.room-home-beta2 .staff-more-title-beta2 {
color: #1d1d1f;
font-size: 1rem;
font-weight: 760;
}
.room-home-beta2 .staff-more-close-beta2 {
width: 34px;
height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #e5e5ea;
color: #3a3a3c;
font-family: inherit;
font-size: 1.1rem;
font-weight: 650;
cursor: pointer;
}
.room-home-beta2 .staff-more-grid-beta2 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
.room-home-beta2 .staff-more-sheet-beta2 .staff-more-action-beta2,
.room-home-beta2 .staff-more-sheet-beta2 .btn-style.staff-more-action-beta2 {
width: 100%;
min-width: 0;
height: 50px;
min-height: 50px;
margin: 0;
padding: 5px 7px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1px solid rgba(60,60,67,0.12);
border-radius: 8px;
background: #fff;
color: #1d1d1f;
box-shadow: none;
font-family: inherit;
font-size: 0.78rem;
font-weight: 720;
line-height: 1.05;
text-align: center;
text-transform: none;
white-space: normal;
cursor: pointer;
touch-action: manipulation;
}
.room-home-beta2 .staff-more-sheet-beta2 .staff-more-action-beta2:active { background: #e9e9ee; }
.room-home-beta2 .staff-more-sheet-beta2 .btn-server-print.running { border-color: #93d3a4; background: #ecf8ef; color: #237d3c; }
.room-home-beta2 .staff-more-sheet-beta2 .staff-more-reset-beta2 {
width: 100%;
min-height: 44px;
margin-top: 9px;
border: 1px solid #efc1bd;
border-radius: 8px;
background: #fff0ee;
color: #b42318;
font-family: inherit;
font-size: 0.78rem;
font-weight: 760;
cursor: pointer;
}
.room-home-beta2 .staff-more-sheet-beta2 .whatsapp-staff-badge { top: 3px; right: 3px; }
/* Tema operativo moderno: solo presentazione, nessun flusso applicativo. */
#paymentModal,
#sumupWaitModal,
#separateModal,
#romanNumpadModal,
#romanMultiModal,
#romanBoardModal,
#discountModal,
#priceModal,
#mergeModal,
#ticketAmountModal,
#ticketBalanceModal {
background: rgba(18, 18, 20, .48);
-webkit-backdrop-filter: blur(16px) saturate(1.12);
backdrop-filter: blur(16px) saturate(1.12);
}
#paymentModal.open > .popup-box,
#sumupWaitModal.open > .sumup-wait-box,
#separateModal.open > .popup-box,
#romanNumpadModal.open > .popup-box,
#romanMultiModal.open > .popup-box,
#discountModal.open > .popup-box,
#priceModal.open > .popup-box,
#mergeModal.open > .popup-box,
#ticketAmountModal.open > .popup-box,
#ticketBalanceModal.open > .popup-box {
animation: operationalPanelIn .2s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes operationalPanelIn {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
#paymentModal .popup-box,
#sumupWaitModal .sumup-wait-box,
#separateModal .popup-box,
#romanNumpadModal .popup-box,
#romanMultiModal .popup-box,
#discountModal .popup-box,
#priceModal .popup-box,
#mergeModal .popup-box,
#ticketAmountModal .popup-box,
#ticketBalanceModal .popup-box {
box-sizing: border-box;
border: 1px solid rgba(60, 60, 67, .16);
border-radius: 18px;
background: #f5f5f7;
color: #1d1d1f;
box-shadow: 0 24px 70px rgba(0, 0, 0, .30), 0 1px 0 rgba(255, 255, 255, .9) inset;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}
#paymentModal h2,
#sumupWaitModal h2,
#separateModal h2,
#romanNumpadModal h2,
#romanMultiModal h2,
#discountModal h2,
#priceModal h2,
#mergeModal h2,
#ticketAmountModal h2,
#ticketBalanceModal h2 {
color: #1d1d1f !important;
letter-spacing: 0;
}
#paymentModal .payment-modal-box {
padding: 18px !important;
border-radius: 20px;
background: #f2f2f7;
}
#paymentModalTitle {
margin: 0 0 12px !important;
font-size: 1.42rem !important;
line-height: 1.12;
text-align: left;
}
#paymentModal .payment-actions-panel,
#paymentModal .vip-payment-box,
#paymentModal .fattura-payment-box {
border: 1px solid rgba(60, 60, 67, .13);
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
#paymentModal .payment-actions-panel { padding: 12px; }
#paymentModal #payModalDisplay {
margin-bottom: 12px !important;
padding: 13px 16px !important;
border: 1px solid rgba(47, 143, 81, .28) !important;
border-radius: 10px !important;
background: #edf7f0 !important;
color: #237d3c !important;
font-size: 2.25rem !important;
line-height: 1;
box-shadow: none;
}
#paymentModal .payment-actions-stack { gap: 9px; }
#paymentModal .payment-primary-row { gap: 8px; }
#paymentModal .vip-pay-btn,
#ticketBalanceModal .btn-big-green {
min-height: 58px;
height: 58px !important;
padding: 8px 12px;
border: 0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .18);
font-size: .96rem !important;
font-weight: 760 !important;
letter-spacing: 0;
transition: transform .12s ease, filter .12s ease;
}
#paymentModal .vip-pay-btn:active,
#ticketBalanceModal .btn-big-green:active { transform: scale(.98); filter: brightness(.94); }
#paymentModal .btn-conf-no,
#separateModal .btn-conf-no,
#discountModal .btn-conf-no,
#priceModal .btn-conf-no,
#mergeModal .btn-conf-no,
#ticketAmountModal .btn-conf-no,
#ticketBalanceModal .btn-conf-no {
border: 1px solid rgba(60, 60, 67, .13);
border-radius: 10px;
background: #e5e5ea;
color: #3a3a3c;
box-shadow: none;
font-weight: 740;
}
#paymentModal .vip-payment-title,
#paymentModal .fattura-title { color: #1d1d1f; font-weight: 760; }
#paymentModal .fattura-only-btn,
#paymentModal .fattura-search-row input,
#paymentModal .fattura-quick-form input,
#paymentModal .vip-manual-row input,
#paymentModal .vip-manual-row button {
border-radius: 9px;
box-shadow: none;
}
#mergeModal .merge-table-box {
width: min(920px, calc(100vw - 24px));
max-width: 920px;
height: min(82vh, 760px);
max-height: calc(100vh - 24px);
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
text-align: left;
}
#mergeModal .merge-table-head {
flex: 0 0 auto;
padding: 20px 22px 16px;
border-bottom: 1px solid rgba(60, 60, 67, .13);
background: rgba(255, 255, 255, .96);
}
#mergeModal .merge-table-head h2 {
margin: 0 0 5px;
font-size: 1.48rem;
line-height: 1.15;
}
#mergeModal .merge-table-head p {
margin: 0;
color: #6e6e73;
font-size: .92rem;
font-weight: 620;
}
#mergeModal .merge-table-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 16px;
}
#mergeModal .merge-table-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 11px;
}
#mergeModal .merge-table-option {
position: relative;
min-height: 112px;
padding: 13px;
border: 2px solid rgba(60, 60, 67, .14);
border-radius: 12px;
background: #fff;
color: #1d1d1f;
font: inherit;
text-align: left;
cursor: pointer;
touch-action: manipulation;
transition: border-color .14s ease, background .14s ease, transform .12s ease, box-shadow .14s ease;
}
#mergeModal .merge-table-option:active { transform: scale(.98); }
#mergeModal .merge-table-option.is-free { background: #f0faf3; border-color: #b9dfc3; }
#mergeModal .merge-table-option.is-busy { background: #fff8e8; border-color: #ead39c; }
#mergeModal .merge-table-option.is-paying { background: #f5f1ff; border-color: #cabce9; }
#mergeModal .merge-table-option.is-request { background: #fff0f0; border-color: #efb5b5; }
#mergeModal .merge-table-option.is-selected {
border-color: #007aff;
background: #eaf4ff;
box-shadow: 0 0 0 3px rgba(0, 122, 255, .16);
}
#mergeModal .merge-table-option.is-selected::after {
content: "\2713";
position: absolute;
top: 9px;
right: 10px;
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 50%;
background: #007aff;
color: #fff;
font-size: .9rem;
font-weight: 900;
}
#mergeModal .merge-table-name {
display: block;
padding-right: 25px;
font-size: 1.24rem;
line-height: 1.05;
font-weight: 800;
}
#mergeModal .merge-table-status {
display: inline-flex;
margin-top: 9px;
padding: 4px 7px;
border-radius: 999px;
background: rgba(255, 255, 255, .75);
color: #3a3a3c;
font-size: .68rem;
line-height: 1;
font-weight: 820;
}
#mergeModal .merge-table-meta {
display: block;
margin-top: 8px;
color: #636366;
font-size: .76rem;
line-height: 1.3;
font-weight: 650;
}
#mergeModal .merge-table-empty {
grid-column: 1 / -1;
padding: 30px 16px;
color: #6e6e73;
font-weight: 650;
text-align: center;
}
#mergeModal .merge-table-foot {
flex: 0 0 auto;
padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(60, 60, 67, .13);
background: rgba(255, 255, 255, .97);
}
#mergeModal .merge-table-selection {
min-height: 20px;
margin: 0 0 10px;
color: #6e6e73;
font-size: .84rem;
font-weight: 680;
text-align: center;
}
#mergeModal .merge-table-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#mergeModal .merge-table-actions button { min-height: 54px; height: 54px; }
#mergeModal .merge-confirm-button { background: #007aff !important; }
#mergeModal .merge-confirm-button:disabled {
background: #d1d1d6 !important;
color: #8e8e93;
cursor: not-allowed;
}
@media (max-width: 520px) {
#mergeModal .merge-table-box { height: calc(100vh - 18px); max-height: calc(100vh - 18px); }
#mergeModal .merge-table-head { padding: 16px 15px 13px; }
#mergeModal .merge-table-scroll { padding: 11px; }
#mergeModal .merge-table-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
#mergeModal .merge-table-option { min-height: 108px; padding: 11px; }
}
#sumupWaitModal .sumup-wait-box {
width: min(420px, calc(100vw - 24px));
padding: 24px;
}
#sumupWaitModal .sumup-loader {
width: 48px;
height: 48px;
border-width: 5px;
border-color: #d1d1d6;
border-top-color: #2f8f51;
}
#sumupWaitModal .sumup-amount {
color: #237d3c;
font-size: 2.35rem;
letter-spacing: 0;
}
#sumupWaitModal #sumupWaitStatus { color: #636366 !important; font-weight: 650 !important; }
#sumupWaitModal .sumup-cancel-btn {
border-radius: 10px;
background: #b42318;
box-shadow: none;
font-weight: 740;
}
.sumup-floating-panel {
border: 1px solid rgba(60, 60, 67, .18);
border-left: 5px solid #2f8f51;
border-radius: 14px;
background: #f5f5f7;
color: #1d1d1f;
box-shadow: 0 16px 42px rgba(15, 23, 42, .25);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}
.sumup-floating-head {
min-height: 42px;
padding: 8px 12px;
background: #242529;
color: #f5f5f7;
font-size: .84rem;
font-weight: 740;
letter-spacing: 0;
}
.sumup-floating-body { padding: 12px; background: #fff; }
.sumup-floating-amount { color: #237d3c; font-size: 1.75rem; }
.sumup-floating-status { color: #636366; font-weight: 620; }
.sumup-floating-btn {
border-radius: 9px;
background: #b42318;
box-shadow: none;
font-weight: 740;
}
#cashmaticDebug {
box-sizing: border-box;
width: 340px;
max-width: calc(100vw - 36px);
padding: 0 12px 12px;
overflow: hidden;
border: 1px solid rgba(60, 60, 67, .18);
border-left: 5px solid #2f8f51;
border-radius: 14px;
background: #fff;
color: #1d1d1f;
box-shadow: 0 16px 42px rgba(15, 23, 42, .25);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}
#cmStatusHeader {
min-height: 42px;
margin: 0 -12px 10px;
padding: 0 12px;
border: 0;
background: #242529;
color: #f5f5f7;
font-size: .78rem;
letter-spacing: 0;
}
#cashmaticDebug > div[style*="color:#ccc"] { color: #636366 !important; }
#cashmaticDebug .cm-big {
margin: 8px 0;
color: #237d3c;
font-size: 1.8rem;
text-shadow: none;
}
#cashmaticDebug .cm-money-row {
border: 1px solid rgba(60, 60, 67, .12);
border-radius: 8px;
background: #f5f5f7;
color: #3a3a3c;
}
#cashmaticDebug .cm-money-row strong { color: #1d1d1f; }
#cashmaticDebug .cm-money-row.warn { border-color: #e6b94d; color: #8a5a00; background: #fff8e7; }
#cashmaticDebug .cm-money-row.err { border-color: #e6a29c; color: #9f241b; background: #fff0ee; }
#cashmaticDebug .cm-money-row.err strong { color: #b42318; }
#cashmaticDebug #cmLogs {
border: 1px solid rgba(60, 60, 67, .12);
border-radius: 8px;
background: #f5f5f7;
color: #3a3a3c;
}
#cashmaticDebug #cmLogs .cm-row {
color: #3a3a3c;
border-bottom-color: #d1d1d6;
}
#cashmaticDebug #cmLogs .cm-row.err { color: #b42318; font-weight: 700; }
#cashmaticDebug .cm-btn-red,
#cashmaticDebug .cm-btn-yellow,
#cashmaticDebug .cm-btn-grey,
#cashmaticDebug #cmBtnOk { border: 0; border-radius: 9px; box-shadow: none; font-weight: 740; }
#romanNumpadModal .popup-box,
#romanMultiModal .popup-box { width: min(410px, calc(100vw - 24px)); padding: 20px; }
#romanNumpadModal #romanDisplay,
#romanMultiModal #romanMultiDisplay {
padding: 13px !important;
border: 1px solid rgba(60, 60, 67, .13);
border-radius: 10px !important;
background: #fff !important;
color: #1d1d1f !important;
font-size: 2.55rem !important;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
}
#romanNumpadModal .numpad,
#romanMultiModal .numpad { gap: 8px; }
#romanNumpadModal .numpad-btn,
#romanMultiModal .numpad-btn {
min-height: 58px;
padding: 10px;
border: 1px solid rgba(60, 60, 67, .12);
border-radius: 10px;
background: #fff;
color: #1d1d1f;
box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
font-size: 1.45rem;
font-weight: 690;
}
#romanNumpadModal .numpad-btn.btn-enter,
#romanMultiModal .numpad-btn.btn-enter { border-color: transparent; background: #2f8f51 !important; color: #fff; }
#romanNumpadModal .numpad-btn[style*="#c0392b"],
#romanMultiModal .numpad-btn[style*="#c0392b"] { border-color: transparent; background: #b42318 !important; color: #fff; }
#romanBoardModal .modal-content {
width: min(900px, calc(100vw - 24px));
max-width: 900px !important;
height: min(85vh, 820px) !important;
border: 1px solid rgba(60, 60, 67, .16);
border-radius: 18px;
background: #f2f2f7;
box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
}
#romanBoardModal .modal-header {
min-height: 60px;
padding: 10px 14px !important;
border: 0;
background: #242529 !important;
}
#romanBoardModal #romanTitle { font-size: 1.45rem !important; font-weight: 740; letter-spacing: 0; }
#romanBoardModal .btn-close-x-roman {
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: #e5e5ea;
color: #3a3a3c;
box-shadow: none;
}
#romanBoardModal .roman-summary {
gap: 8px;
padding: 10px 14px;
background: #fff;
color: #1d1d1f;
border-bottom: 1px solid rgba(60, 60, 67, .12);
font-size: 1rem;
}
#romanBoardModal .roman-summary > span {
flex: 1;
padding: 8px 10px;
border-radius: 8px;
background: #f2f2f7;
text-align: center;
}
#romanBoardModal > .modal-content > div[style*="background:#f4f4f4"],
#romanBoardModal > .modal-content > div[style*="background: #f4f4f4"] { background: #f2f2f7 !important; }
#romanBoardModal .roman-grid { gap: 10px; padding: 12px; }
#romanBoardModal .roman-btn {
padding: 15px;
border: 1px solid rgba(60, 60, 67, .14);
border-left: 5px solid #2f8f51;
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 6px rgba(15, 23, 42, .07);
}
#romanBoardModal .roman-btn h4 { color: #3a3a3c; font-size: 1rem; }
#romanBoardModal .roman-btn .amount { color: #1d1d1f; font-size: 1.75rem; }
#romanBoardModal .modal-footer {
padding: 10px;
border-top: 1px solid rgba(60, 60, 67, .12);
background: #fff;
}
#romanBoardModal .btn-roman-big {
min-height: 52px;
height: 52px;
border-radius: 10px;
box-shadow: none;
font-size: .84rem !important;
font-weight: 740;
letter-spacing: 0;
}
#separateModal .popup-box { width: min(520px, calc(100vw - 24px)); }
#separateModal #separateItemsList {
border: 1px solid rgba(60, 60, 67, .12) !important;
border-radius: 10px !important;
background: #fff !important;
}
#separateModal #separateItemsList .item-row { border-bottom-color: rgba(60, 60, 67, .10); }
#discountModal .discount-summary div,
#ticketAmountModal .ticket-summary-item,
#ticketAmountModal .calc-section,
#ticketBalanceModal > .popup-box > div[style*="background:#ecf0f1"] {
border: 1px solid rgba(60, 60, 67, .12);
border-radius: 10px;
background: #fff !important;
box-shadow: none;
}
#discountModal .price-btn,
#priceModal .price-btn,
#ticketAmountModal .price-btn,
#ticketAmountModal .btn-calc {
border-radius: 9px;
box-shadow: none;
}
@media (max-width: 700px) {
#paymentModal .payment-modal-box {
width: calc(100vw - 12px) !important;
height: calc(100dvh - 12px);
max-height: calc(100dvh - 12px);
padding: 12px !important;
border-radius: 16px;
}
#paymentModalTitle { font-size: 1.2rem !important; }
#paymentModal .payment-actions-panel { padding: 9px; }
#paymentModal .vip-pay-btn { min-height: 54px; height: 54px !important; font-size: .82rem !important; }
#romanBoardModal .modal-content {
width: calc(100vw - 10px);
height: calc(100dvh - 10px) !important;
border-radius: 14px;
}
#romanBoardModal .roman-summary { flex-wrap: wrap; }
#romanBoardModal .roman-summary > span { min-width: calc(50% - 8px); }
#romanBoardModal .roman-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#romanBoardModal .modal-footer { display: grid; grid-template-columns: 1fr 1fr; }
#romanBoardModal .modal-footer .btn-roman-big:last-child { grid-column: 1 / -1; }
#cashmaticDebug,
.sumup-floating-panel { left: 10px; max-width: calc(100vw - 20px); }
}
@media (max-width: 600px) {
body.room-home-beta2 { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
.room-home-beta2 .staff-dock-beta2 {
bottom: calc(5px + env(safe-area-inset-bottom, 0px));
width: calc(100vw - 10px);
min-height: 64px;
padding: 4px;
gap: 2px;
border-radius: 12px;
}
.room-home-beta2 .staff-dock-item-beta2 {
min-height: 56px;
padding: 4px 1px;
gap: 3px;
border-radius: 8px;
font-size: 0.56rem;
}
.room-home-beta2 .staff-dock-icon-beta2 { height: 20px; font-size: 1.02rem; }
.room-home-beta2 .top-bar.staff-more-sheet-beta2 {
width: 100%;
max-height: 78dvh;
padding: 8px 9px calc(10px + env(safe-area-inset-bottom, 0px));
border-radius: 16px 16px 0 0;
}
.room-home-beta2 .staff-more-grid-beta2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.room-home-beta2 .staff-more-sheet-beta2 .staff-more-action-beta2,
.room-home-beta2 .staff-more-sheet-beta2 .btn-style.staff-more-action-beta2 {
min-height: 48px;
height: 48px;
font-size: 0.72rem;
}
}
@media (prefers-reduced-motion: reduce) {
.room-home-beta2 .card.waiter-call,
.room-home-beta2 .card.bill-call { animation: none !important; }
.room-home-beta2 .staff-more-backdrop-beta2,
.room-home-beta2 .staff-more-sheet-beta2 { transition-duration: 0.01ms !important; }
.room-home-beta2 .staff-more-backdrop-beta2.is-closing,
.room-home-beta2 .staff-more-sheet-beta2.is-closing,
#paymentModal.open > .popup-box,
#sumupWaitModal.open > .sumup-wait-box,
#separateModal.open > .popup-box,
#romanNumpadModal.open > .popup-box,
#romanMultiModal.open > .popup-box { animation-duration: .01ms !important; }
.table-workspace-beta *,
.table-workspace-beta *::before,
.table-workspace-beta *::after { transition-duration: 0.01ms !important; }
}
/* Cassa Bar: customer editor shared with table checkout. */
.bar-sale-invoice-button { width:100%; min-height:40px; margin-top:6px; padding:7px 10px; border:2px solid #fdba74; border-radius:11px; background:#fff7ed; color:#9a3412; font-size:.82rem; font-weight:900; cursor:pointer; overflow-wrap:anywhere; }
.bar-sale-invoice-button.active { background:#ffedd5; border-color:#f97316; }
.bar-sale-payment .manual-receipt-toggle:disabled { cursor:default; }
#barSaleInvoiceModal .bar-sale-invoice-dialog { width:min(620px, 94vw); max-width:620px; max-height:90vh; max-height:90dvh; overflow-y:auto; padding:18px; text-align:left; }
.bar-sale-invoice-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bar-sale-invoice-head h2 { margin:0; color:#111827; font-size:1.3rem; }
.bar-sale-invoice-dialog > p { color:#475569; font-size:.9rem; line-height:1.4; }
#barSaleInvoiceHost .fattura-payment-box { overflow:visible; min-height:0; max-height:none; }
#barSaleInvoiceHost .fattura-results { max-height:200px; overflow-y:auto; }
.bar-sale-invoice-dialog > .btn-big-green { width:100%; margin-top:14px; min-height:48px; }
#cashmaticManualModal .bar-sale-checkout { overflow-y:auto; }
/* Keep tiles about 4% smaller than the original, with equal visible row/column gaps.
The grid matches the 10px body gutters and the existing 1400px maximum width. */
#gridContainer {
--staff-table-columns: 5;
--staff-table-original-gap: 10px;
--staff-table-grid-width: min(1400px, calc(100vw - 20px));
--staff-table-gap: calc(var(--staff-table-grid-width) * .04 / (var(--staff-table-columns) - 1) + var(--staff-table-original-gap) * .96);
gap: var(--staff-table-gap);
}
#gridContainer > .card {
width: 100%; max-width: 100%; justify-self: stretch;
min-height: 103.68px; padding: 14.4px 9.6px 10.56px;
box-shadow: 0 4px 10px rgba(15,23,42,.16), 0 1px 3px rgba(15,23,42,.08);
}
#gridContainer > .card h3 { font-size: 2.064rem; margin: 9.6px 0 4.8px; }
#gridContainer .status-text { min-height: 23.04px; padding: 0 7.68px; font-size: 0.6144rem; }
#gridContainer .time-badge-card { margin-top: 4.8px; padding-bottom: 3.84px; font-size: 0.6528rem; }
#gridContainer .coperti-badge, #gridContainer .menu-badge { top: 7.68px; }
#gridContainer .coperti-badge { left: 7.68px; min-height: 25.92px; padding: 0 7.68px; font-size: 0.8448rem; }
#gridContainer .menu-badge { right: 7.68px; min-height: 21.12px; padding: 0 5.76px; font-size: 0.5952rem; }
#gridContainer .pin-badge-card { right: 7.68px; bottom: 4.8px; font-size: 0.5568rem; }
@media (min-width: 1200px) { #gridContainer { --staff-table-columns: 6; } }
@media (min-width: 601px) and (max-width: 899px) { #gridContainer { --staff-table-columns: 4; } }
@media (max-width: 600px) {
#gridContainer { --staff-table-columns: 3; --staff-table-original-gap: 7px; }
#gridContainer > .card { min-height: 84.48px; padding: 11.52px 4.8px 7.68px; }
#gridContainer > .card h3 { font-size: 1.488rem; margin: 7.68px 0 3.84px; }
#gridContainer .status-text { min-height: 19.2px; padding: 0 4.8px; font-size: 0.5184rem; }
#gridContainer .time-badge-card { margin-top: 2.88px; font-size: 0.5376rem; }
#gridContainer .coperti-badge, #gridContainer .menu-badge { top: 4.8px; }
#gridContainer .coperti-badge { left: 4.8px; min-height: 23.04px; padding: 0 5.76px; font-size: 0.7296rem; }
#gridContainer .menu-badge { right: 4.8px; min-height: 17.28px; padding: 0 3.84px; font-size: 0.48rem; }
#gridContainer .pin-badge-card { right: 4.8px; bottom: 2.88px; font-size: 0.4608rem; }
}
#modalOverlay .btn-close-header .btn-close-label { display: inline; font-size: inherit; }
#notificationHistoryCount[hidden], #notificationHistoryReadStatus[hidden] { display: none !important; }
#notificationHistoryReadStatus { padding: 8px 12px; color: #9a3412; background: #fff7ed; font-size: .82rem; }
@media (max-width: 600px) {
#modalOverlay .btn-close-header { width: auto; min-width: 48px; padding: 0 8px; font-size: .78rem; }
}
/* Stable opening dialog: options scroll, both actions stay in reach. */
#setupModal {
padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
align-items: center;
}
#setupModal .setup-box {
display: flex; flex-direction: column; box-sizing: border-box;
width: 100%; max-width: 900px; height: 760px;
max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
min-height: 0; overflow: hidden;
}
#setupModal .setup-box > h2 { flex: 0 0 auto; margin: 0 0 12px; }
#setupModal .setup-options {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
padding: 0 3px 5px;
}
#setupModal .setup-actions {
flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 10px; padding-top: 12px; border-top: 1px solid #e2e8f0; background: #fff;
}
#setupModal .setup-actions > button {
width: 100%; min-width: 0; min-height: 48px; height: auto; margin: 0;
padding: 10px 12px; border: 0; border-radius: 10px;
font-family: inherit; font-size: 1.1rem; line-height: 1.2; font-weight: 850;
cursor: pointer; overflow-wrap: anywhere;
}
#setupModal .setup-exit { background: #334155; color: #fff; box-shadow: 0 3px 0 #1e293b; }
#setupModal .setup-exit:active { transform: translateY(2px); box-shadow: none; }
#setupModal .setup-exit:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
@media (max-width: 700px) {
#setupModal { padding: calc(8px + env(safe-area-inset-top, 0px)) 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
#setupModal .setup-box {
height: 580px;
max-height: calc(100vh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
#setupModal .setup-actions { gap: 8px; padding-top: 8px; }
#setupModal .setup-actions > button { min-height: 44px; font-size: .98rem; padding: 9px 8px; }
}
@media (max-width: 360px) {
#setupModal .setup-people-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#setupModal .setup-kids-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Menu choices stay immediately above Open/Exit, independently of children fields. */
#setupModal .setup-menu-section {
flex: 0 0 auto; min-height: 0; max-height: 45%;
overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain; padding: 0 3px 5px;
}
#setupModal .setup-menu-section .setup-section-title { margin-top: 8px; }
#setupModal .setup-menu-section .setup-grid { margin-bottom: 4px; }
@media (min-width: 500px) and (max-width: 700px) and (max-height: 480px) {
#setupModal .setup-menu-grid,
#setupModal .setup-menu-grid.setup-menu-grid-special { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Recovery details and action share one row; outer visibility stays managed by JS. */
#setupModal .table-recovery-layout {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(106px, 26%);
align-items: center; gap: 16px;
}
#setupModal .table-recovery-copy { min-width: 0; overflow-wrap: anywhere; }
#setupModal .table-recovery-btn {
width: 100%; min-width: 0; height: auto; min-height: 48px;
margin: 0; padding: 10px; font-size: .95rem; line-height: 1.2;
white-space: normal; overflow-wrap: anywhere;
}
@media (max-width: 700px) {
#setupModal .table-recovery-layout { gap: 10px; }
#setupModal .table-recovery-btn { min-height: 44px; padding: 9px 7px; font-size: .76rem; }
}
/* SumUp: reducing a panel only changes its size, never the payment state. */
.sumup-floating-panel.is-minimized .sumup-floating-body { display: none; }
.sumup-floating-head > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sumup-floating-head > span:nth-child(2) { font-size: .68rem; }
.sumup-panel-toggle { flex: 0 0 auto; border: 1px solid #85858c; border-radius: 7px; min-height: 34px; padding: 5px 8px; background: #3a3b40; color: #fff; font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
/* Protected open-table total lives only inside the operator panel. */
#operatorRoomTotals[hidden] { display:none!important; }
#operatorRoomTotals { margin: 12px; padding: 15px 16px; border:1px solid #b8d7d0; border-radius:15px; background:#edf8f4; color:#244840; }
#operatorRoomTotals > span { display:block; font-size:.8rem; font-weight:700; }
#operatorRoomTotalReveal { display:block; width:100%; text-align:left; margin:7px 0; border:0; padding:5px 0; background:transparent; color:#125747; font:inherit; font-size:1.7rem; font-weight:800; font-variant-numeric:tabular-nums; cursor:pointer; touch-action:manipulation; }
#operatorRoomTotalReveal:disabled { opacity:.65; cursor:wait; }
#operatorRoomTotalNote { margin:0; font-size:.76rem; line-height:1.45; }
html[data-staff-theme="dark"] #operatorRoomTotals { background:#384f4a; border-color:#69877c; color:#e0efe9; }
html[data-staff-theme="dark"] #operatorRoomTotalReveal { color:#adedd1; }