/* ════════════════════════════════════════════════════════════════
WELCOO ADMIN — blocco stile (drop-in)
Sostituisci il contenuto del tuo con questo.
Markup, id, classi e JavaScript restano invariati.
Richiede nel (già presente nel tuo file):
════════════════════════════════════════════════════════════════ */
:root {
/* Brand (from Welcoo design system) */
--brand-blue:#4D90BF; --brand-blue-hover:#3E7BA6; --brand-blue-active:#356A90;
--ink:#2A4A66; --ink-soft:#4A6480;
--blue-50:#F4F8FB; --blue-100:#E6F0F7; --blue-200:#D2E3EF;
--teal:#2BA89B; --teal-soft:#E4F4F1;
--sand:#D6A56E; --sand-soft:#F7EEE2;
/* Mapped to original variable names — DO NOT rename (JS/HTML depend on them) */
--border:#E4ECF2; --bg2:#F4F8FB; --text:#2A4A66; --muted:#7089A0;
--danger:#C2503E; --success:#1F8A5B; --admin-accent:#4D90BF;
--surface:#ffffff; --bg:#F7FAFC;
--shadow-xs:0 1px 2px rgba(27,49,69,.05);
--shadow-sm:0 1px 2px rgba(27,49,69,.06), 0 3px 10px rgba(27,49,69,.05);
--shadow-md:0 2px 6px rgba(27,49,69,.06), 0 12px 28px rgba(27,49,69,.08);
--shadow-lg:0 18px 50px rgba(27,49,69,.16);
--shadow-primary:0 6px 20px rgba(77,144,191,.32);
--r-sm:10px; --r-md:13px; --r-lg:18px; --r-xl:24px;
--ease:cubic-bezier(.32,.72,.34,1);
--dur:.32s;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
font-family:'Montserrat',sans-serif; font-weight:300;
color:var(--text); min-height:100vh;
background:
radial-gradient(1200px 600px at 100% -10%, rgba(77,144,191,.06), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(43,168,155,.05), transparent 55%),
linear-gradient(180deg,#ffffff 0%, var(--bg) 100%);
background-attachment:fixed;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::placeholder { color:#A9BCCB; font-style:italic; opacity:1; }
::selection { background:rgba(77,144,191,.22); }
/* Refined scrollbars */
*::-webkit-scrollbar { width:11px; height:11px; }
*::-webkit-scrollbar-thumb { background:rgba(42,74,102,.18); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:rgba(42,74,102,.32); background-clip:content-box; }
*::-webkit-scrollbar-track { background:transparent; }
@keyframes wc-fade { from { opacity:0; } to { opacity:1; } }
@keyframes wc-rise { from { transform:translateY(16px); } to { transform:none; } }
@keyframes wc-pop { from { transform:scale(.97) translateY(8px); } to { transform:none; } }
@keyframes wc-slide-down { from { transform:translateY(-10px); } to { transform:none; } }
@keyframes wc-spin { to { transform:rotate(360deg); } }
@keyframes wc-shimmer { 0% { background-position:-460px 0; } 100% { background-position:460px 0; } }
@keyframes wc-ring { 0%{ box-shadow:0 0 0 0 rgba(77,144,191,.35);} 100%{ box-shadow:0 0 0 14px rgba(77,144,191,0);} }
/* ── LOGIN ─────────────────────────────────────────── */
#login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
background:
radial-gradient(1100px 600px at 50% -20%, rgba(77,144,191,.16), transparent 60%),
linear-gradient(160deg,#EAF3FA 0%, #F7FBFD 45%, #ffffff 100%);
position:relative; overflow:hidden;
}
#login-screen::before, #login-screen::after {
content:''; position:absolute; border-radius:50%; pointer-events:none;
background:radial-gradient(circle at 35% 35%, rgba(77,144,191,.18), rgba(77,144,191,0) 70%);
animation:wc-fade 1.2s var(--ease);
}
#login-screen::before { width:520px; height:520px; top:-180px; right:-120px; }
#login-screen::after { width:420px; height:420px; bottom:-160px; left:-100px;
background:radial-gradient(circle at 35% 35%, rgba(43,168,155,.14), rgba(43,168,155,0) 70%); }
.login-card {
background:rgba(255,255,255,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.7); padding:44px 40px 40px; width:100%; max-width:392px;
border-radius:var(--r-xl); box-shadow:var(--shadow-lg); position:relative; z-index:1;
animation:wc-pop .7s var(--ease);
}
.login-card::before { /* ring mark watermark */
content:''; position:absolute; top:-46px; left:50%; transform:translateX(-50%);
width:64px; height:64px; border-radius:50%;
background:var(--brand-blue);
box-shadow:0 10px 30px rgba(77,144,191,.4), inset 0 0 0 0 #fff;
display:block;
-webkit-mask:radial-gradient(circle at 38% 50%, transparent 14px, #000 15px), radial-gradient(circle at 62% 50%, transparent 14px, #000 15px);
-webkit-mask-composite:source-in; mask-composite:intersect;
}
.login-title {
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg, var(--brand-blue) 0%, #5A9FCB 100%);
margin:-44px -40px 28px; padding:32px 40px; border-radius:var(--r-xl) var(--r-xl) 0 0;
color:#fff; font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:500; letter-spacing:.04em; text-transform:lowercase;
}
.login-title img { height:64px; display:block; }
.login-sub { font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); margin-bottom:34px; text-align:center; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; font-weight:600; }
.field input { width:100%; border:1.5px solid var(--border); padding:14px 16px; font-family:'Montserrat',sans-serif; font-size:.9rem; outline:none; background:#fff; border-radius:var(--r-md); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.field input:focus { border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(77,144,191,.16); background:#fff; }
.login-btn { width:100%; background:var(--brand-blue); color:#fff; border:none; padding:16px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; margin-top:10px; border-radius:var(--r-md); box-shadow:var(--shadow-primary); transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.login-btn:hover { background:var(--brand-blue-hover); transform:translateY(-2px); box-shadow:0 10px 26px rgba(77,144,191,.4); }
.login-btn:active { transform:translateY(0) scale(.99); background:var(--brand-blue-active); }
.login-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.login-error { font-size:.76rem; color:var(--danger); margin-top:14px; display:none; text-align:center; }
.login-error.show { display:block; animation:wc-slide-down .3s var(--ease); }
/* ── ADMIN SHELL ───────────────────────────────────── */
#admin-screen { display:none; }
.topbar {
background:linear-gradient(135deg, var(--brand-blue) 0%, #5A9FCB 55%, var(--brand-blue-active) 100%);
color:#fff; padding:7px 28px; display:flex; align-items:center; justify-content:space-between;
position:sticky; top:0; z-index:60; box-shadow:0 6px 22px rgba(42,74,102,.18);
}
.topbar-title { display:flex; align-items:center; color:#fff; font-family:'Cormorant Garamond',serif; font-size:1.5rem; letter-spacing:.05em; text-transform:lowercase; font-weight:500; }
.topbar-title img { height:56px; display:block; }
.topbar-right { display:flex; align-items:center; gap:18px; }
.topbar-user { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; opacity:.78; }
.logout-link { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; cursor:pointer; text-decoration:none; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); padding:7px 14px; border-radius:99px; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.logout-link:hover { background:rgba(255,255,255,.26); transform:translateY(-1px); }
.admin-topbar-lang { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; padding:7px 12px; font-size:.66rem; letter-spacing:.06em; cursor:pointer; border-radius:99px; transition:background var(--dur) var(--ease); }
.admin-topbar-lang:hover { background:rgba(255,255,255,.26); }
.admin-topbar-lang option { color:var(--ink); }
#impersonation-banner { background:linear-gradient(90deg,#F5C76B,#EBB14C); color:#5a3d00; padding:11px 24px; font-size:.82rem; font-weight:600; align-items:center; gap:12px; justify-content:space-between; animation:wc-slide-down .4s var(--ease); box-shadow:inset 0 -1px 0 rgba(0,0,0,.06); }
.admin-content { max-width:1180px; margin:0 auto; padding:36px 28px 80px; animation:wc-rise .5s var(--ease); }
/* ── TABS ──────────────────────────────────────────── */
.tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:34px; gap:2px; position:relative; }
.tab { padding:13px 18px; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--muted); font-weight:600; background:none; border-top:none; border-left:none; border-right:none; border-radius:8px 8px 0 0; position:relative; transition:color var(--dur) var(--ease), background var(--dur) var(--ease); white-space:nowrap; }
.tab:hover { color:var(--ink); background:var(--blue-50); }
.tab.active { color:var(--brand-blue); border-bottom-color:var(--brand-blue); font-weight:700; }
.tab.active::after { content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--brand-blue); border-radius:2px; animation:wc-fade .35s var(--ease); }
/* ── HEADINGS & FORMS ──────────────────────────────── */
.section-title { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:500; letter-spacing:.01em; margin-bottom:22px; color:var(--ink); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:18px; }
.form-field label { display:block; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; font-weight:600; }
.form-field input, .form-field select, .form-field textarea { width:100%; border:1.5px solid var(--border); padding:11px 13px; font-family:'Montserrat',sans-serif; font-size:.85rem; outline:none; background:#fff; border-radius:var(--r-sm); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(77,144,191,.14); }
.form-field input[type="checkbox"], .form-field input[type="radio"] { width:16px; height:16px; padding:0; border:1px solid var(--border); flex-shrink:0; cursor:pointer; accent-color:var(--brand-blue); }
label.checkbox-row { display:flex; align-items:center; gap:9px; text-transform:none; letter-spacing:normal; font-size:.8rem; color:var(--ink); cursor:pointer; }
label.checkbox-row input[type="checkbox"] { width:16px; height:16px; flex-shrink:0; cursor:pointer; accent-color:var(--brand-blue); }
.field-hint { font-size:.68rem; color:var(--muted); margin-top:6px; line-height:1.5; font-family:'Montserrat',sans-serif; text-transform:none; letter-spacing:normal; }
.active-toggle-bar { display:flex; align-items:center; gap:11px; padding:14px 18px; background:var(--blue-50); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:22px; font-size:.85rem; font-weight:600; color:var(--ink); cursor:pointer; text-transform:none; letter-spacing:normal; transition:background var(--dur) var(--ease); }
.active-toggle-bar:hover { background:var(--blue-100); }
.active-toggle-bar input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; cursor:pointer; accent-color:var(--brand-blue); }
/* ── BUTTONS ───────────────────────────────────────── */
.btn { background:var(--brand-blue); color:#fff; border:none; padding:12px 22px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:var(--r-sm); box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn:hover { background:var(--brand-blue-hover); transform:translateY(-2px); box-shadow:var(--shadow-primary); }
.btn:active { transform:translateY(0) scale(.98); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-danger { background:var(--danger); }
.btn-danger:hover { background:#A93E2E; box-shadow:0 6px 18px rgba(194,80,62,.32); }
.btn-sm { padding:7px 13px; font-size:.6rem; border-radius:8px; }
.btn-ai { background:linear-gradient(120deg,#5AA0D2,#4D90BF); color:#fff; border:none; padding:7px 13px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border-radius:99px; white-space:nowrap; box-shadow:0 3px 10px rgba(77,144,191,.28); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn-ai:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(77,144,191,.38); }
.btn-ai:disabled { opacity:.5; cursor:default; transform:none; box-shadow:none; }
.ai-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ai-section-header .ai-source-select { font-size:.72rem; padding:5px 9px; border:1px solid var(--border); border-radius:8px; }
.form-result { margin-top:18px; padding:20px; border:1px solid var(--blue-200); background:var(--blue-50); display:none; border-radius:var(--r-md); }
.form-result.show { display:block; animation:wc-pop .4s var(--ease); }
.result-code { font-family:'Cormorant Garamond',serif; font-size:2.2rem; letter-spacing:.26em; color:var(--ink); }
.result-pin { font-size:.85rem; color:var(--muted); margin-top:4px; }
/* ── MODAL ─────────────────────────────────────────── */
.admin-modal-overlay { position:fixed; inset:0; z-index:200; background:rgba(20,38,56,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:0; }
.admin-modal-overlay.open { display:flex; animation:wc-fade .25s var(--ease); }
#modal-direction, #modal-rule { z-index:210; }
#modal-dir-step { z-index:220; }
.admin-modal { background:#fff; border:1px solid var(--border); width:80vw; max-width:80vw; max-height:84vh; position:relative; margin:auto; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); animation:wc-pop .4s var(--ease); }
.admin-modal.modal-inactive .admin-modal-body { background:var(--bg2); }
.admin-modal-header { padding:22px 26px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.admin-modal-title { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:500; letter-spacing:.02em; color:var(--ink); }
.admin-modal-close { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--muted); padding:2px 6px; line-height:1; border-radius:8px; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.admin-modal-close:hover { background:var(--blue-50); color:var(--ink); }
.admin-modal-body { padding:26px; overflow-y:auto; flex:1; }
.admin-modal-footer { padding:16px 26px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:12px; flex-shrink:0; background:#fff; }
.cap-toggle { appearance:none; -webkit-appearance:none; position:relative; width:46px; height:26px; background:#CBD8E2; border-radius:99px; cursor:pointer; transition:background var(--dur) var(--ease); flex-shrink:0; }
.cap-toggle:checked { background:var(--brand-blue); }
.cap-toggle::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform var(--dur) var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.cap-toggle:checked::after { transform:translateX(20px); }
/* ── LANG TABS ─────────────────────────────────────── */
.admin-lang-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:18px; gap:2px; }
.admin-lang-tab { padding:8px 15px; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--muted); font-weight:600; background:none; white-space:nowrap; border-radius:7px 7px 0 0; transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.admin-lang-tab:hover { color:var(--ink); background:var(--blue-50); }
.admin-lang-tab.active { color:var(--brand-blue); border-bottom-color:var(--brand-blue); font-weight:700; }
.admin-lang-pane { display:none; }
.admin-lang-pane.active { display:block; animation:wc-fade .3s var(--ease); }
#modal-wz-step .admin-modal-body { display:flex; flex-direction:column; padding-bottom:14px; }
#modal-wz-step .admin-modal-body > div { flex:1; display:flex; flex-direction:column; min-height:0; }
#modal-wz-step #wz-lang-tabs-container { flex:1; display:flex; flex-direction:column; min-height:0; }
#modal-wz-step .admin-lang-pane.active { flex:1; display:flex; flex-direction:column; min-height:0; }
#modal-wz-step .admin-lang-pane .form-field:last-child { flex:1; display:flex; flex-direction:column; min-height:0; }
#modal-wz-step .admin-lang-pane .form-field:last-child textarea { flex:1; resize:none; min-height:80px; }
#modal-wz-step .form-field label { display:block; margin-bottom:6px; }
#modal-wz-step .form-field { margin-bottom:16px; }
/* ── WIZARD ────────────────────────────────────────── */
.wz-edge-box { background:var(--blue-50); border:1px solid var(--border); border-radius:var(--r-sm); padding:9px 16px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); text-align:center; }
.wz-flow-connector { width:2px; height:18px; background:linear-gradient(var(--border),var(--border)); margin:0 auto; }
.wz-drop-zone { height:12px; border-radius:6px; transition:all .15s var(--ease); margin:0 4px; }
.wz-drop-zone.wz-drag-over { height:30px; background:rgba(77,144,191,.12); border:2px dashed var(--brand-blue); }
.wz-flow-step { background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:11px 13px; display:flex; align-items:center; gap:9px; cursor:grab; position:relative; transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); box-shadow:var(--shadow-xs); }
.wz-flow-step:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--blue-200); }
.wz-flow-step.wz-dragging { opacity:.4; }
.wz-step-num { width:24px; height:24px; border-radius:50%; background:var(--blue-50); display:flex; align-items:center; justify-content:center; font-size:.66rem; font-weight:700; color:var(--brand-blue); flex-shrink:0; }
.wz-step-info { flex:1; min-width:0; }
.wz-step-name { font-size:.82rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.wz-step-type { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.wz-step-actions { display:flex; gap:4px; flex-shrink:0; }
.wz-subtab-bar { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:22px; }
.wz-subtab { padding:9px 18px; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; cursor:pointer; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--muted); background:none; white-space:nowrap; border-radius:7px 7px 0 0; transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.wz-subtab:hover { color:var(--ink); background:var(--blue-50); }
.wz-subtab.active { color:var(--brand-blue); border-bottom-color:var(--brand-blue); }
.wz-palette-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:11px 15px; display:flex; align-items:center; gap:11px; cursor:grab; user-select:none; position:relative; box-shadow:var(--shadow-xs); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.wz-palette-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.wz-palette-card.wz-palette-used { opacity:.45; cursor:default; box-shadow:none; transform:none; }
.wz-palette-label { font-size:.82rem; font-weight:500; color:var(--ink); }
.wz-palette-desc { font-size:.7rem; color:var(--muted); }
.wz-badge-fixed { display:inline-block; font-size:.56rem; padding:2px 6px; border-radius:99px; background:var(--sand-soft); color:#9A6B36; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-left:4px; }
.wz-photo-preview-box { width:100%; aspect-ratio:1/1; height:auto; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-md); cursor:grab; user-select:none; position:relative; background:var(--bg2); }
.wz-photo-preview-box img { width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; }
.wz-photo-preview-box.wz-no-photo { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.78rem; }
/* ── TABLE ─────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); background:#fff; }
table { width:100%; border-collapse:collapse; font-size:.8rem; }
th { background:var(--blue-50); padding:13px 16px; text-align:left; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; border-bottom:1px solid var(--border); }
td { padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--ink); transition:background .15s var(--ease); }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background .15s var(--ease); }
tr:hover td { background:var(--blue-50); }
.badge { display:inline-block; padding:4px 10px; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; border-radius:99px; }
.badge-active { background:var(--teal-soft); color:#147A66; }
.badge-expired { background:#FBE7E2; color:var(--danger); }
.badge-future { background:var(--blue-100); color:var(--brand-blue-active); }
.code-mono { font-family:'Cormorant Garamond',serif; font-size:1.18rem; letter-spacing:.12em; color:var(--ink); font-weight:600; }
.pin-mono { font-family:'Courier New',monospace; font-size:.85rem; letter-spacing:.1em; }
.emoji-picker-wrap { position:relative; display:inline-block; }
.emoji-trigger { font-size:1.6rem; width:54px; height:46px; border:1.5px solid var(--border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.emoji-trigger:hover { border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(77,144,191,.12); }
.emoji-grid { position:absolute; top:52px; left:0; z-index:500; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-lg); padding:12px; display:none; grid-template-columns:repeat(8,32px); gap:4px; width:312px; flex-wrap:wrap; border-radius:var(--r-md); }
.emoji-grid.open { display:grid; animation:wc-pop .25s var(--ease); }
.emoji-grid button { font-size:1.2rem; width:32px; height:32px; background:none; border:none; cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease); }
.emoji-grid button:hover { background:var(--blue-50); }
.loading { text-align:center; padding:34px; color:var(--muted); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; position:relative; }
.loading::after { content:''; display:inline-block; width:16px; height:16px; margin-left:10px; border:2px solid var(--blue-200); border-top-color:var(--brand-blue); border-radius:50%; vertical-align:middle; animation:wc-spin .8s linear infinite; }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:wc-rise .4s var(--ease); }
.alert { padding:13px 18px; margin-bottom:16px; font-size:.78rem; border-radius:var(--r-md); animation:wc-slide-down .3s var(--ease); }
.alert-success { background:var(--teal-soft); border:1px solid #A8DDD3; color:#147A66; }
.alert-error { background:#FBE7E2; border:1px solid #EFB3A8; color:var(--danger); }
.empty-state { text-align:center; padding:34px; color:var(--muted); font-size:.85rem; }
/* ── DASHBOARD ─────────────────────────────────────── */
.dash-section { margin-bottom:30px; }
.dash-section-title { font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:14px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.dash-card { background:#fff; border:1px solid var(--border); padding:24px 26px; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dash-card:hover { box-shadow:var(--shadow-md); }
.dash-card-current { border-left:4px solid var(--teal); }
.dash-card-empty { color:var(--muted); text-align:center; padding:38px 24px; }
.dash-guest { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:500; letter-spacing:.02em; margin-bottom:3px; color:var(--ink); }
.dash-dates { font-size:.72rem; color:var(--muted); margin-bottom:16px; line-height:1.6; }
.dash-meta-row { display:flex; align-items:flex-start; gap:30px; flex-wrap:wrap; margin-bottom:14px; }
.dash-meta-item { min-width:80px; }
.dash-meta-label { font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; font-weight:700; }
.dash-meta-value { font-size:.9rem; font-weight:600; color:var(--ink); }
.dash-pin-value { font-family:'Courier New',monospace; font-size:1.5rem; letter-spacing:.16em; font-weight:700; color:var(--ink); }
.dash-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); align-items:center; }
.dash-upcoming-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:12px; }
.dash-upcoming-card { background:#fff; border:1px solid var(--border); border-left:3px solid var(--brand-blue); padding:16px 18px; border-radius:var(--r-md); box-shadow:var(--shadow-xs); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dash-upcoming-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.dash-quick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:12px; }
.dash-quick-btn { background:#fff; border:1px solid var(--border); padding:18px; text-align:left; cursor:pointer; font-family:'Montserrat',sans-serif; width:100%; border-radius:var(--r-md); box-shadow:var(--shadow-xs); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dash-quick-btn:hover { border-color:var(--blue-200); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.dash-quick-icon { font-size:1.5rem; margin-bottom:9px; display:block; }
.dash-quick-label { font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink); display:block; }
.dash-quick-sub { font-size:.7rem; color:var(--muted); margin-top:4px; display:block; min-height:1em; }
.dash-alert { display:flex; align-items:center; gap:13px; padding:13px 18px; margin-bottom:9px; border:1px solid; font-size:.78rem; border-radius:var(--r-md); animation:wc-slide-down .35s var(--ease); }
.dash-alert-warn { background:#FFF7E6; border-color:#F2CD7A; color:#8A6516; }
.dash-alert-danger { background:#FBE7E2; border-color:#EFB3A8; color:var(--danger); }
.dash-countdown { font-size:.68rem; color:var(--muted); font-style:italic; margin-left:auto; white-space:nowrap; }
/* ── ANALYTICS ─────────────────────────────────────── */
.an-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.an-demo-btn { display:flex; align-items:center; gap:9px; padding:9px 17px; border:1.5px solid var(--border); background:#fff; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:all var(--dur) var(--ease); border-radius:99px; color:var(--ink); }
.an-demo-btn.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.an-demo-dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:background var(--dur) var(--ease); }
.an-demo-btn.on .an-demo-dot { background:#4caf50; box-shadow:0 0 0 0 rgba(76,175,80,.5); animation:wc-ring 1.6s infinite; }
.an-period-group { display:flex; gap:5px; flex-wrap:wrap; }
.an-period-btn { padding:8px 15px; border:1.5px solid var(--border); background:#fff; font-family:'Montserrat',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:all var(--dur) var(--ease); border-radius:99px; color:var(--ink); }
.an-period-btn:hover { border-color:var(--brand-blue); color:var(--brand-blue); }
.an-period-btn.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.an-custom-range { display:none; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:22px; padding:14px 18px; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); }
.an-custom-range.show { display:flex; }
.an-custom-range input[type=date] { padding:7px 11px; border:1.5px solid var(--border); font-family:'Montserrat',sans-serif; font-size:.78rem; outline:none; border-radius:8px; }
.an-custom-range input[type=date]:focus { border-color:var(--brand-blue); }
.an-apply-btn { padding:8px 18px; background:var(--ink); color:#fff; border:none; font-family:'Montserrat',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; border-radius:99px; }
.an-period-label { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.an-kpi-section { margin-bottom:30px; }
.an-kpi-label { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:700; }
.an-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.an-kpi-card { background:#fff; border:1px solid var(--border); padding:20px 22px; position:relative; overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); animation:wc-rise .5s var(--ease); }
.an-kpi-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.an-kpi-card.highlight { background:linear-gradient(150deg,#2A4A66,#1C344A); color:#fff; }
.an-kpi-card.highlight .an-kpi-title { color:rgba(255,255,255,.6); }
.an-kpi-title { font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:11px; }
.an-kpi-value { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:400; line-height:1; }
.an-kpi-sub { font-size:.68rem; color:var(--muted); margin-top:6px; }
.an-kpi-card.highlight .an-kpi-sub { color:rgba(255,255,255,.5); }
.an-kpi-bar { position:absolute; bottom:0; left:0; height:3px; background:var(--brand-blue); transition:width 1s var(--ease); border-radius:0 3px 3px 0; }
.an-kpi-card.highlight .an-kpi-bar { background:#7FBDE3; }
.an-chart-section { margin-bottom:26px; }
.an-chart-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.an-chart-card { background:#fff; border:1px solid var(--border); padding:22px 26px; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.an-chart-card.full { grid-column:1/-1; }
.an-chart-title { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; font-weight:700; }
.an-chart-wrap { position:relative; }
.an-demo-banner { background:var(--sand-soft); border:1px solid #E4C79A; padding:11px 18px; font-size:.72rem; color:#8A6516; margin-bottom:22px; display:flex; align-items:center; gap:8px; border-radius:var(--r-md); }
.an-cal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.an-cal-month { background:#fff; border:1px solid var(--border); padding:16px 18px; border-radius:var(--r-md); box-shadow:var(--shadow-xs); }
.an-cal-month-title { font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.an-cal-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.an-cal-dow span { font-size:.58rem; text-align:center; color:var(--muted); font-weight:700; letter-spacing:.04em; }
.an-cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.an-cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:400; cursor:default; border-radius:6px; transition:opacity .15s; }
.an-cal-day.free-past { color:#B7C7D2; }
.an-cal-day.free-future{ color:var(--ink); background:var(--blue-50); }
.an-cal-day.occupied-past { background:#A9BCCB; color:#fff; font-weight:600; }
.an-cal-day.occupied-future { background:var(--ink); color:#fff; font-weight:600; }
.an-cal-day.today { outline:2px solid var(--brand-blue); font-weight:700; }
.an-cal-day.closed { background:var(--danger); color:#fff; font-weight:600; }
/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
.admin-content { padding:28px 22px 70px; }
.an-kpi-grid { grid-template-columns:1fr 1fr; }
.an-chart-row { grid-template-columns:1fr; }
.an-cal-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
.admin-modal { width:95vw; max-width:95vw; max-height:90vh; border-radius:var(--r-lg); }
.an-toolbar { flex-direction:column; align-items:stretch; }
.form-grid-3 { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
.admin-content { padding:20px 16px 64px; }
.topbar { padding:10px 18px; }
.topbar-title { font-size:1.3rem; }
.topbar-user { display:none; }
.tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; gap:0; scrollbar-width:none; -webkit-mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); }
.tabs::-webkit-scrollbar { display:none; }
.tab { padding:11px 13px; white-space:nowrap; letter-spacing:.1em; }
.form-grid, .form-grid-3 { grid-template-columns:1fr !important; }
.section-title { font-size:1.4rem; }
table { font-size:.72rem; }
th, td { padding:10px 10px; }
.btn-sm { padding:6px 9px; font-size:.55rem; }
.badge { font-size:.5rem; padding:3px 7px; }
.an-kpi-grid { grid-template-columns:1fr 1fr; }
.an-cal-grid { grid-template-columns:1fr; }
.col-hide-mobile { display:none; }
#widgets-list > div { flex-wrap:wrap; }
#push-send-btn { width:100%; }
.form-field label { font-size:.65rem; }
.emoji-grid { width:calc(100vw - 48px); max-width:280px; grid-template-columns:repeat(6,32px); }
#pages-list > div > div:first-child { flex-wrap:wrap; }
.admin-lang-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; scrollbar-width:none; }
.admin-lang-tabs::-webkit-scrollbar { display:none; }
.dash-guest { font-size:1.5rem; }
.dash-meta-row { gap:18px; }
.dash-quick-grid { grid-template-columns:1fr 1fr; }
.dash-upcoming-grid { grid-template-columns:1fr; }
.login-card { padding:36px 26px 30px; }
.login-title { font-size:2.2rem; }
}
@media (max-width: 400px) {
.an-kpi-grid { grid-template-columns:1fr; }
.dash-quick-grid { grid-template-columns:1fr; }
.an-kpi-value { font-size:1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
/* ── ICON BUTTONS (Phosphor) — abbinato a welcoo-icons.js ── */
.wc-iconbtn { display:inline-flex !important; align-items:center; justify-content:center; line-height:1; }
.wc-iconbtn .ph { font-size:1.02rem; line-height:1; display:block; }
.btn-sm.wc-iconbtn { min-width:32px; }
.admin-modal-close.wc-iconbtn .ph { font-size:1.2rem; }
.tv-drag-handle.wc-iconbtn, .wz-drag-handle.wc-iconbtn { color:var(--muted); cursor:grab; }
/* armonizza i colori inline legacy con il brand */
.btn-sm[style*="3949ab"] { background:var(--brand-blue) !important; }
.btn-sm[style*="background:#555"], .btn-sm[style*=":#555"] { background:var(--ink-soft) !important; }
/* ── TAB BARS: contieni in orizzontale (niente scroll di pagina su tablet) ── */
.tabs, .wz-subtab-bar,
div:has(> button.tab), div:has(> button.wz-subtab) {
overflow-x:auto; overflow-y:hidden; max-width:100%;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tabs::-webkit-scrollbar, .wz-subtab-bar::-webkit-scrollbar,
div:has(> button.tab)::-webkit-scrollbar, div:has(> button.wz-subtab)::-webkit-scrollbar { display:none; }
/* ── EXTRA POLISH ────────────────────────────────── */
html { scroll-behavior:smooth; }
.login-card::before { display:none; } /* il logo header sostituisce la filigrana ad anelli */
/* Pallini di stato ospite — generati da welcoo-icons.js */
.wc-sdot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; position:relative; top:-1px; }
.wc-sdot-grey { background:#C2D0DC; box-shadow:inset 0 0 0 1px #AEC0CF; }
.wc-sdot-amber { background:var(--sand); }
.wc-sdot-orange { background:#E08A3C; }
.wc-sdot-blue { background:var(--brand-blue); }
.wc-sdot-green { background:var(--teal); animation:wc-dotpulse 2.4s var(--ease) infinite; }
@keyframes wc-dotpulse { 0%{ box-shadow:0 0 0 0 rgba(43,168,155,.5);} 70%{ box-shadow:0 0 0 6px rgba(43,168,155,0);} 100%{ box-shadow:0 0 0 0 rgba(43,168,155,0);} }
/* Riflesso sui pulsanti primari */
.btn:not(.wc-iconbtn) { position:relative; overflow:hidden; }
.btn:not(.wc-iconbtn)::after { content:''; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); transition:left .55s var(--ease); pointer-events:none; }
.btn:not(.wc-iconbtn):hover::after { left:150%; }
/* Entrata a cascata dei KPI */
.an-kpi-card:nth-child(2){ animation-delay:.05s; }
.an-kpi-card:nth-child(3){ animation-delay:.10s; }
.an-kpi-card:nth-child(4){ animation-delay:.15s; }
.an-kpi-card:nth-child(5){ animation-delay:.20s; }
.an-kpi-card:nth-child(6){ animation-delay:.25s; }
.an-kpi-card:nth-child(7){ animation-delay:.30s; }
.an-kpi-card:nth-child(8){ animation-delay:.35s; }
/* Hover sulle card di analytics */
.an-chart-card, .an-cal-month { transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.an-chart-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.an-cal-month:hover { box-shadow:var(--shadow-sm); }
/* Focus ring elegante da tastiera */
button:focus-visible, a:focus-visible, .logout-link:focus-visible, .tab:focus-visible, select:focus-visible { outline:none; box-shadow:0 0 0 4px rgba(77,144,191,.28); border-radius:8px; }
/* Micro-animazioni */
.badge { animation:wc-pop .3s var(--ease); }
.wc-iconbtn .ph { transition:transform var(--dur) var(--ease); }
.wc-iconbtn:hover .ph { transform:scale(1.12); }
@media (max-width:640px){ .login-title img{ height:52px; } .login-title{ padding:26px 26px; margin:-36px -26px 28px; } .topbar-title img{ height:48px; } }
/* ── CUSTOM STATUS PICKER ──────────────────────────────── */
.wc-status-pick { position:relative; display:inline-block; font-family:'Montserrat',sans-serif; }
.wc-status-current {
display:inline-flex; align-items:center; gap:5px; padding:4px 8px 4px 6px;
border:1.5px solid var(--border); border-radius:var(--r-sm);
background:#fff; color:var(--ink); cursor:pointer;
font-family:inherit; font-size:0.72rem; font-weight:400; white-space:nowrap;
transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wc-status-current:hover { border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(77,144,191,.12); }
.wc-spick-caret { font-size:0.55rem; opacity:0.38; margin-left:2px; line-height:1; }
.wc-status-dropdown {
display:none; position:fixed; z-index:1200;
background:#fff; border:1.5px solid var(--border); border-radius:var(--r-sm);
box-shadow:var(--shadow-md); min-width:152px; overflow:hidden;
}
.wc-status-dropdown.wc-status-open { display:block; animation:wc-pop .18s var(--ease); }
.wc-status-opt {
display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer;
font-size:0.72rem; font-family:'Montserrat',sans-serif; color:var(--ink);
transition:background .12s;
}
.wc-status-opt:hover { background:var(--blue-50); }
.wc-status-opt.wc-status-selected { background:var(--blue-100); font-weight:600; }
/* ── Campi obbligatori: asterisco, banner errore, animazione ──────────── */
.lbl-required::after {
content: ' *';
color: #dc2626;
font-weight: 700;
}
.field-invalid {
border-color: #dc2626 !important;
box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
animation: wc-shake 0.4s var(--ease, ease);
}
@keyframes wc-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-5px); }
40%, 80% { transform: translateX(5px); }
}
.form-error-banner {
display: none;
align-items: center;
gap: 9px;
background: #fdecec;
border: 1px solid rgba(220,38,38,0.35);
color: #b3201f;
font-size: 0.82rem;
font-weight: 500;
padding: 12px 15px;
border-radius: var(--r-sm, 8px);
margin-bottom: 16px;
animation: wc-pop 0.2s var(--ease, ease);
}
.form-error-banner.show { display: flex; }
.form-error-banner::before {
content: '⚠️';
font-size: 1rem;
flex-shrink: 0;
}
/* ── Bottoni azione solo-icona (tabella appartamenti, ecc.) ──────────── */
.apt-iconbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0;
border: 1px solid var(--border); border-radius: 8px;
background: #fff; cursor: pointer; font-size: 1rem; line-height: 1;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.apt-iconbtn:hover { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(77,144,191,.12); }
.apt-iconbtn:active { transform: scale(.94); }
/* ── Glifi icone capability ──────────────────────────────────────────
Attive: tinta blu MANTENENDO il dettaglio interno (come le grigie).
grayscale azzera il colore preservando la luminanza, sepia dà una tinta
uniforme, hue-rotate la porta sul blu, saturate ne regola l'intensità. */
.cap-glyph-on {
filter: grayscale(1) sepia(1) saturate(4) hue-rotate(172deg) brightness(0.95) contrast(1.05);
}
.cap-glyph-off {
filter: grayscale(1) brightness(0.55);
opacity: 0.5;
}