/* ==========================================================================
   WP TABLEY STAFF APP — mobile-first, dark violet theme
   ========================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
    margin: 0; padding: 0; height: 100%;
    font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: #150e26;
    color: #f3f1fa;
    overscroll-behavior: none;
}
/* Nessuna barra di scorrimento visibile: si scorre come su smartphone
   (touch, o trascinando col mouse dove previsto) */
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
html, body { overflow-x: hidden; }
.app-screen { min-height: 100vh; min-height: 100dvh; }

/* --- Splash -------------------------------------------------------------- */
#app-splash {
    position: fixed; inset: 0; z-index: 100;
    background: linear-gradient(160deg, #1e1233, #2d1a52);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; transition: opacity .4s;
}
#app-splash.hide { opacity: 0; pointer-events: none; }
.splash-logo { font-size: 64px; animation: pulse 1.4s ease infinite; }
.splash-name { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.splash-name span { color: #a78bfa; font-weight: 400; }
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.12);} }

/* --- Login PIN ----------------------------------------------------------- */
#app-login {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #1e1233, #2d1a52);
    padding: 24px;
}
.login-card { width: 100%; max-width: 340px; text-align: center; }
.login-logo { font-size: 54px; margin-bottom: 6px; }
.login-card h1 { font-size: 26px; margin: 0 0 4px; font-weight: 800; }
.login-card h1 em { font-style: normal; color: #a78bfa; font-weight: 400; }
.login-sub { color: #9d94bd; margin: 0 0 22px; font-size: 14px; }
#pin-dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 8px; min-height: 16px; }
#pin-dots span {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #5b4a8a; transition: background .15s, border-color .15s;
}
#pin-dots span.on { background: #a78bfa; border-color: #a78bfa; }
#pin-input {
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px; left: -9999px;
}
.login-err { color: #fca5a5; font-size: 13px; min-height: 20px; margin-bottom: 10px; font-weight: 600; }
.pin-pad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    max-width: 280px; margin: 0 auto 18px;
}
.pin-pad button {
    aspect-ratio: 1.35; border: none; border-radius: 14px;
    background: rgba(255,255,255,.07); color: #f3f1fa;
    font-size: 24px; font-weight: 700; cursor: pointer;
    transition: background .15s, transform .1s;
    touch-action: manipulation;
}
.pin-pad button:active { background: #6d1fd6; transform: scale(.95); }
.pin-pad .pad-fn { font-size: 19px; color: #a78bfa; }
.login-hint { color: #7a6f9e; font-size: 12px; line-height: 1.6; margin: 0; }

/* --- Header -------------------------------------------------------------- */
#app-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 10px;
    padding-top: calc(14px + env(safe-area-inset-top));
    background: #1e1233;
    border-bottom: 1px solid #322356;
    position: sticky; top: 0; z-index: 20;
}
.hdr-title { font-size: 19px; }
.hdr-title b { font-weight: 800; }
.hdr-date { font-size: 12px; color: #a78bfa; font-weight: 600; text-transform: capitalize; }

/* --- Tabs ---------------------------------------------------------------- */
#app-tabs {
    display: flex; gap: 6px; padding: 10px 14px 6px;
    position: sticky; top: 0; z-index: 19;
}
.app-tab {
    flex: 1; padding: 10px 0; border: none; border-radius: 10px;
    background: #241741; color: #9d94bd; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: background .2s, color .2s;
}
.app-tab.active { background: #6d1fd6; color: #fff; }

/* --- Ricerca ------------------------------------------------------------- */
#app-search { display: flex; gap: 8px; padding: 6px 14px 10px; }
#search-input {
    flex: 1; min-width: 0; padding: 11px 14px 11px 38px; border-radius: 12px;
    border: 1px solid #322356; background: #1e1233; color: #f3f1fa;
    font-size: 15px; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 12px center;
}
#search-input:focus { border-color: #6d1fd6; }
#search-input::-webkit-search-decoration,
#search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Drag-scroll col mouse: cursore "mano" sulle zone scrollabili */
#app-list, #det-body, #form-body, .sheet { cursor: grab; }
body.wptb-dragging, body.wptb-dragging * { cursor: grabbing !important; user-select: none !important; }
#btn-refresh {
    width: 46px; border: none; border-radius: 12px;
    background: #241741; color: #a78bfa; font-size: 20px; cursor: pointer;
}
#btn-refresh:active { background: #6d1fd6; color: #fff; }

/* --- Lista --------------------------------------------------------------- */
#app-list { padding: 4px 14px 110px; }
.list-empty {
    text-align: center; color: #7a6f9e; padding: 60px 20px; font-size: 15px; line-height: 1.7;
}
.day-sep {
    font-size: 12px; font-weight: 800; color: #a78bfa; letter-spacing: .8px;
    text-transform: uppercase; margin: 18px 4px 8px;
}
.pcard {
    display: flex; align-items: center; gap: 12px;
    background: #1e1233; border: 1px solid #2b1d4e; border-radius: 14px;
    padding: 13px 14px; margin-bottom: 9px; cursor: pointer;
    transition: border-color .2s, transform .1s;
}
.pcard:active { transform: scale(.985); border-color: #6d1fd6; }
.pcard-time {
    min-width: 52px; text-align: center;
    font-size: 17px; font-weight: 800; color: #c4b5fd; line-height: 1.15;
}
.pcard-time small { display: block; font-size: 10px; color: #7a6f9e; font-weight: 600; }
.pcard-info { flex: 1; min-width: 0; }
.pcard-name { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-meta { font-size: 12.5px; color: #9d94bd; margin-top: 3px; }
.pcard-meta b { color: #c4b5fd; }
.pcard-stato {
    font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
.st-in_attesa { background: #453217; color: #fbbf24; }
.st-confermato { background: #123a2c; color: #34d399; }
.st-ordinato { background: #1e2a52; color: #60a5fa; }
.st-finito { background: #2d2d3f; color: #9ca3af; }
.st-annullato { background: #452023; color: #f87171; }
.pcard.dim { opacity: .45; }

/* --- FAB nuova ----------------------------------------------------------- */
#btn-nuova {
    position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom));
    width: 58px; height: 58px; border-radius: 50%; border: none;
    background: #6d1fd6; color: #fff; font-size: 30px; font-weight: 400;
    box-shadow: 0 6px 22px rgba(109,31,214,.5); cursor: pointer; z-index: 30;
}
#btn-nuova:active { transform: scale(.92); }

/* --- Bottom sheet -------------------------------------------------------- */
#sheet-overlay {
    position: fixed; inset: 0; background: rgba(10,5,24,.72);
    opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 40;
}
#sheet-overlay.show { opacity: 1; pointer-events: auto; }
.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: #211639; border-radius: 22px 22px 0 0;
    max-height: 86dvh; overflow-y: auto;
    transform: translateY(105%); transition: transform .3s cubic-bezier(.25,.8,.25,1);
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
}
.sheet.show { transform: translateY(0); }
.sheet-handle {
    width: 42px; height: 5px; border-radius: 3px; background: #4a3a78;
    margin: 6px auto 14px;
}
.sheet-title { font-size: 18px; font-weight: 800; margin-bottom: 14px; }

/* Dettaglio */
.det-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.det-nome { font-size: 20px; font-weight: 800; }
.det-quando { color: #a78bfa; font-size: 14px; font-weight: 600; margin-top: 2px; }
.det-row { display: flex; gap: 10px; font-size: 14px; padding: 7px 0; color: #cfc8e6; border-bottom: 1px solid #2b1d4e; }
.det-row:last-child { border-bottom: none; }
.det-row .lbl { min-width: 96px; color: #7a6f9e; font-size: 12.5px; font-weight: 700; text-transform: uppercase; padding-top: 1px; }
.det-note { background: #2b1d4e; border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 13.5px; line-height: 1.55; color: #e8e2f7; }
.det-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn-act {
    flex: 1 1 44%; padding: 13px 8px; border: none; border-radius: 12px;
    font-size: 14px; font-weight: 700; cursor: pointer; color: #fff;
}
.btn-act.ok { background: #059669; }
.btn-act.blue { background: #2563eb; }
.btn-act.grey { background: #4b4763; }
.btn-act.warn { background: #b45309; }
.btn-act.del { background: #b91c1c; }
.btn-act:disabled { opacity: .4; }

/* --- Form ---------------------------------------------------------------- */
.sheet-form { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.frow { display: flex; gap: 8px; margin-bottom: 9px; }
.frow input, .frow select { flex: 1; min-width: 0; }
.sheet-form input, .sheet-form select, .sheet-form textarea {
    width: 100%; padding: 12px 13px; border-radius: 11px;
    border: 1px solid #322356; background: #170f2a; color: #f3f1fa;
    font-size: 15px; font-family: inherit; outline: none;
}
.sheet-form input:focus, .sheet-form select:focus, .sheet-form textarea:focus { border-color: #6d1fd6; }
.sheet-form textarea { resize: none; margin-bottom: 4px; }
.btn-mini {
    border: none; border-radius: 11px; padding: 0 16px;
    background: #322356; color: #c4b5fd; font-weight: 700; font-size: 13px; cursor: pointer;
    white-space: nowrap;
}
#f-tavoli { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 10px; min-height: 0; }
.tchip {
    padding: 9px 13px; border-radius: 22px; border: 1.5px solid #322356;
    background: #170f2a; color: #cfc8e6; font-size: 13.5px; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.tchip small { color: #7a6f9e; font-weight: 600; margin-left: 3px; }
.tchip.sel { background: #6d1fd6; border-color: #6d1fd6; color: #fff; }
.tchip.sel small { color: #d8ccf6; }
.tchip.occ { opacity: .4; text-decoration: line-through; }
#f-err { color: #fca5a5; font-size: 13px; min-height: 18px; margin-bottom: 8px; font-weight: 600; }
.f-actions { display: flex; gap: 9px; }
.btn-main {
    flex: 2; padding: 14px; border: none; border-radius: 13px;
    background: #6d1fd6; color: #fff; font-size: 15.5px; font-weight: 800; cursor: pointer;
}
.btn-main:active { background: #5b18b5; }
.btn-main:disabled { opacity: .5; }
.btn-ghost {
    flex: 1; padding: 14px; border: 1px solid #322356; border-radius: 13px;
    background: transparent; color: #9d94bd; font-size: 15px; font-weight: 700; cursor: pointer;
}

/* --- Toast --------------------------------------------------------------- */
#app-toast {
    position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(20px);
    background: #10b981; color: #fff; font-size: 14px; font-weight: 700;
    padding: 12px 22px; border-radius: 24px; opacity: 0;
    transition: opacity .25s, transform .25s; z-index: 60; pointer-events: none;
    max-width: 86vw; text-align: center;
}
#app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#app-toast.err { background: #dc2626; }

/* Desktop/tablet largo: colonna centrata */
@media (min-width: 700px) {
    #app-list, #app-tabs, #app-search { max-width: 640px; margin-left: auto; margin-right: auto; }
    .sheet { max-width: 560px; left: 50%; transform: translateX(-50%) translateY(105%); }
    .sheet.show { transform: translateX(-50%) translateY(0); }
}