/* ═══════════════════════════════════════════
   ZENITH APP — Design System
═══════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --accent:#C8603A;
  --accent-lt:#E07B5A;
  --accent-dk:#A34E2E;
  --bone:#FAFAF8;
  --cream:#F5EDE4;
  --ink:#1A1208;
  --ink-lt:#2D2418;
  --mid:#6B5A4A;
  --lt:#B8A090;
  --white:#FFFFFF;
  --warm-dark:#3D2A1E;
  --warm-darker:#2A1D14;
  --green:#48BB78;
  --green-lt:rgba(72,187,120,0.1);
  --red:#E53E3E;
  --red-lt:rgba(229,62,62,0.08);
  --orange:#F57C00;
  --orange-lt:rgba(245,124,0,0.08);
  --shadow-sm:0 2px 8px rgba(26,18,8,0.06);
  --shadow-md:0 8px 24px rgba(26,18,8,0.08);
  --shadow-lg:0 16px 48px rgba(26,18,8,0.12);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
  --sidebar-w:260px;
  --topbar-h:64px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--bone);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ═══════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════ */
#loading-screen{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:var(--bone);
  gap:32px;
  transition:opacity 0.4s ease;
}
#loading-screen.hide{opacity:0;pointer-events:none}
.ld-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;font-weight:500;
  letter-spacing:4px;text-transform:uppercase;
  color:var(--ink);
}
.ld-spinner{
  width:28px;height:28px;
  border:3px solid rgba(200,96,58,0.15);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════
   AUTH
═══════════════════════════════════════════ */
#auth-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:32px 16px;
  background:linear-gradient(180deg,var(--cream) 0%,var(--bone) 100%);
}
.auth-box{
  width:100%;max-width:400px;
  background:var(--white);
  padding:48px 40px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(26,18,8,0.06);
  box-shadow:var(--shadow-md);
}
.auth-logo{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:500;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:32px;
}
.auth-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.8rem;font-weight:500;
  color:var(--ink);margin-bottom:8px;
}
.auth-sub{
  font-size:.9rem;color:var(--mid);
  margin-bottom:28px;line-height:1.6;
}

/* ═══════════════════════════════════════════
   FORMS
═══════════════════════════════════════════ */
.field{margin-bottom:18px}
.field label{
  display:block;
  font-size:.72rem;font-weight:600;
  letter-spacing:0.5px;text-transform:uppercase;
  color:var(--mid);margin-bottom:8px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  font-size:.92rem;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--bone);
  border:1.5px solid rgba(26,18,8,0.1);
  border-radius:var(--radius-sm);
  transition:var(--transition);
  outline:none;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  background:var(--white);
  box-shadow:0 0 0 3px rgba(200,96,58,0.08);
}
.field textarea{resize:vertical;min-height:80px}
.field input::placeholder{color:var(--lt)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:480px){.grid-2{grid-template-columns:1fr}}

.global-err{
  font-size:.82rem;color:var(--red);
  background:var(--red-lt);
  padding:12px 16px;border-radius:var(--radius-sm);
  margin-bottom:16px;
  display:none;
}
.global-err.show{display:block}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;
  font-size:.78rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  border:none;border-radius:var(--radius-sm);
  cursor:pointer;text-decoration:none;
  transition:var(--transition);
  font-family:'Inter',sans-serif;
}
.btn-primary{
  background:var(--accent);color:var(--white);
}
.btn-primary:hover{
  background:var(--accent-lt);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn-ghost{
  background:transparent;color:var(--mid);
  border:1.5px solid rgba(26,18,8,0.12);
}
.btn-ghost:hover{
  border-color:var(--accent);color:var(--accent);
}
.btn-sm{padding:10px 18px;font-size:.72rem}
.btn-danger{background:var(--red-lt);color:var(--red);border:1px solid rgba(229,62,62,0.15)}
.btn-danger:hover{background:var(--red);color:var(--white)}
.w-full{width:100%}
.mt-8{margin-top:8px}

/* ═══════════════════════════════════════════
   PIN LOGIN
═══════════════════════════════════════════ */
.emp-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;
}
.emp-card{
  display:flex;flex-direction:column;
  align-items:center;gap:10px;
  padding:20px 12px;
  background:var(--bone);
  border:1.5px solid rgba(26,18,8,0.06);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:var(--transition);
}
.emp-card:hover{
  border-color:var(--accent);
  background:var(--white);
  transform:translateY(-4px);
  box-shadow:var(--shadow-sm);
}
.emp-card .avatar{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
}
.emp-card .name{
  font-size:.78rem;font-weight:600;
  color:var(--ink);text-align:center;
}

.pin-display{
  display:flex;justify-content:center;gap:14px;
  margin-bottom:20px;
}
.pin-dot{
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid rgba(26,18,8,0.15);
  background:transparent;
  transition:var(--transition);
}
.pin-dot.active{
  background:var(--accent);
  border-color:var(--accent);
}
.pin-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  max-width:240px;
  margin:0 auto 20px;
}
.pin-grid button{
  padding:16px;
  font-size:1.2rem;font-weight:600;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--bone);
  border:1.5px solid rgba(26,18,8,0.08);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:var(--transition);
}
.pin-grid button:hover{
  background:var(--cream);
  border-color:var(--accent);
}
.pin-grid button:active{
  transform:scale(0.95);
}

/* ═══════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════ */
#app{
  display:flex;
  min-height:100vh;
}

/* Sidebar */
#sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--white);
  border-right:1px solid rgba(26,18,8,0.06);
  display:flex;flex-direction:column;
  z-index:100;
  transition:transform 0.3s ease;
}
.sb-header{
  padding:28px 24px 20px;
  border-bottom:1px solid rgba(26,18,8,0.06);
}
.sb-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:500;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--ink);
}
.sb-type{
  display:inline-flex;
  font-size:.6rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  padding:4px 10px;
  border-radius:20px;
  background:rgba(200,96,58,0.08);
  color:var(--accent);
  margin-top:8px;
}
.sb-salon{
  font-size:.82rem;font-weight:500;
  color:var(--mid);margin-top:8px;
}
.sb-user{
  display:flex;align-items:center;gap:12px;
  padding:20px 24px;
  border-bottom:1px solid rgba(26,18,8,0.06);
}
.sb-avatar{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
.sb-uname{
  font-size:.85rem;font-weight:600;
  color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-role{
  font-size:.7rem;font-weight:500;
  color:var(--lt);text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Sidebar Nav */
.sb-nav{
  flex:1;overflow-y:auto;
  padding:16px 12px;
}
.sb-nav a,.sb-nav button{
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:12px 16px;
  font-size:.82rem;font-weight:500;
  color:var(--mid);
  background:transparent;
  border:none;border-radius:var(--radius-sm);
  cursor:pointer;text-decoration:none;
  text-align:left;
  font-family:'Inter',sans-serif;
  transition:var(--transition);
}
.sb-nav a:hover,.sb-nav button:hover{
  background:var(--bone);
  color:var(--ink);
}
.sb-nav a.active,.sb-nav button.active{
  background:rgba(200,96,58,0.08);
  color:var(--accent);
  font-weight:600;
}
.sb-nav .nav-icon{
  font-size:1.1rem;
  width:24px;text-align:center;
}
.sb-nav .nav-label{font-size:.82rem}

/* Sidebar Footer */
.sb-footer{
  padding:16px 12px;
  border-top:1px solid rgba(26,18,8,0.06);
  display:flex;flex-direction:column;gap:4px;
}
.sb-action{
  display:flex;align-items:center;gap:10px;
  width:100%;
  padding:10px 16px;
  font-size:.78rem;font-weight:500;
  color:var(--lt);
  background:transparent;
  border:none;border-radius:var(--radius-sm);
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:var(--transition);
}
.sb-action:hover{background:var(--bone);color:var(--mid)}

/* Main Area */
#main{
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;flex-direction:column;
  min-height:100vh;
}

/* Trial Banner */
#trial-banner{
  display:none;
  align-items:center;justify-content:center;gap:16px;
  padding:12px 24px;
  background:var(--orange-lt);
  border-bottom:1px solid rgba(245,124,0,0.15);
  font-size:.82rem;color:var(--ink);
}
#trial-banner.show{display:flex}
.trial-text{font-weight:400}

/* Topbar */
#topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
  height:var(--topbar-h);
  background:var(--white);
  border-bottom:1px solid rgba(26,18,8,0.06);
  position:sticky;top:0;z-index:50;
}
.tb-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:500;
  color:var(--ink);
}
#tb-actions{display:flex;gap:10px}

/* Content */
#content{
  flex:1;
  padding:32px;
  overflow-y:auto;
}

/* ═══════════════════════════════════════════
   MODALS
═══════════════════════════════════════════ */
.modal-bg{
  position:fixed;inset:0;z-index:2000;
  display:none;align-items:center;justify-content:center;
  background:rgba(26,18,8,0.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:24px;
}
.modal-bg.open{display:flex}
.modal{
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  width:100%;max-width:520px;
  max-height:90vh;
  display:flex;flex-direction:column;
  animation:modalIn 0.25s ease;
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(20px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 28px 0;
}
.modal-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:500;
  color:var(--ink);
}
.modal-close{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  background:var(--bone);
  border:none;border-radius:50%;
  color:var(--mid);cursor:pointer;
  transition:var(--transition);
}
.modal-close:hover{background:var(--cream);color:var(--ink);transform:rotate(90deg)}
.modal-body{
  padding:24px 28px;
  overflow-y:auto;
  flex:1;
}
.modal-footer{
  display:flex;justify-content:flex-end;gap:12px;
  padding:16px 28px 24px;
  border-top:1px solid rgba(26,18,8,0.06);
}

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */
#toast{
  position:fixed;
  bottom:32px;left:50%;
  transform:translateX(-50%) translateY(100px);
  padding:14px 28px;
  font-size:.85rem;font-weight:500;
  color:var(--white);
  background:var(--ink);
  border-radius:50px;
  box-shadow:var(--shadow-lg);
  z-index:5000;
  opacity:0;
  transition:all 0.3s ease;
  pointer-events:none;
}
#toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
#toast.success{background:var(--green)}
#toast.error{background:var(--red)}

/* ═══════════════════════════════════════════
   CARDS / CONTENT ELEMENTS
═══════════════════════════════════════════ */
.card{
  background:var(--white);
  border:1px solid rgba(26,18,8,0.06);
  border-radius:var(--radius-md);
  padding:24px;
  transition:var(--transition);
}
.card:hover{
  box-shadow:var(--shadow-sm);
  border-color:rgba(200,96,58,0.1);
}
.card-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;font-weight:500;
  color:var(--ink);margin-bottom:8px;
}
.card-sub{font-size:.85rem;color:var(--mid);line-height:1.6}

/* Stat cards */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  margin-bottom:32px;
}
.stat-card{
  background:var(--white);
  border:1px solid rgba(26,18,8,0.06);
  border-radius:var(--radius-md);
  padding:24px;
}
.stat-card .stat-label{
  font-size:.72rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  color:var(--lt);margin-bottom:8px;
}
.stat-card .stat-value{
  font-family:'Cormorant Garamond',serif;
  font-size:2.2rem;font-weight:400;
  color:var(--ink);
}
.stat-card .stat-sub{
  font-size:.78rem;color:var(--mid);margin-top:4px;
}

/* Tables */
.table-wrap{
  overflow-x:auto;
  background:var(--white);
  border:1px solid rgba(26,18,8,0.06);
  border-radius:var(--radius-md);
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
}
th{
  text-align:left;
  padding:14px 20px;
  font-size:.7rem;font-weight:600;
  letter-spacing:0.5px;text-transform:uppercase;
  color:var(--lt);
  background:var(--bone);
  border-bottom:1px solid rgba(26,18,8,0.06);
}
td{
  padding:14px 20px;
  color:var(--ink);
  border-bottom:1px solid rgba(26,18,8,0.04);
}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(200,96,58,0.02)}

/* Status badges */
.badge{
  display:inline-flex;align-items:center;
  padding:4px 12px;
  font-size:.7rem;font-weight:600;
  letter-spacing:0.5px;text-transform:uppercase;
  border-radius:20px;
}
.badge-success{background:var(--green-lt);color:#276749}
.badge-warning{background:var(--orange-lt);color:#7A4A00}
.badge-danger{background:var(--red-lt);color:#9B2C2C}
.badge-neutral{background:rgba(26,18,8,0.06);color:var(--mid)}

/* Empty state */
.empty-state{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:80px 32px;
  text-align:center;
}
.empty-state .empty-icon{font-size:3rem;margin-bottom:16px;opacity:0.4}
.empty-state .empty-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;font-weight:500;
  color:var(--ink);margin-bottom:8px;
}
.empty-state .empty-sub{
  font-size:.9rem;color:var(--mid);
  max-width:360px;margin-bottom:24px;
}

/* ═══════════════════════════════════════════
   CALENDAR (shared)
═══════════════════════════════════════════ */
.cal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;
}
.cal-header .cal-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:500;
  color:var(--ink);
}
.cal-nav{display:flex;gap:8px}
.cal-nav button{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bone);
  border:1px solid rgba(26,18,8,0.08);
  border-radius:var(--radius-sm);
  cursor:pointer;font-size:1rem;
  color:var(--mid);
  transition:var(--transition);
}
.cal-nav button:hover{border-color:var(--accent);color:var(--accent)}

/* ═══════════════════════════════════════════
   MOBILE TOGGLE
═══════════════════════════════════════════ */
#menu-toggle{
  display:none;
  position:fixed;top:16px;left:16px;z-index:200;
  width:44px;height:44px;
  background:var(--white);
  border:1px solid rgba(26,18,8,0.08);
  border-radius:var(--radius-sm);
  font-size:1.2rem;color:var(--ink);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  align-items:center;justify-content:center;
  transition:var(--transition);
}
#menu-toggle:hover{border-color:var(--accent);color:var(--accent)}

#sb-overlay{
  display:none;
  position:fixed;inset:0;z-index:90;
  background:rgba(26,18,8,0.4);
  backdrop-filter:blur(4px);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:768px){
  #menu-toggle{display:flex}
  
  #sidebar{
    transform:translateX(-100%);
  }
  #sidebar.open{transform:translateX(0)}
  #sb-overlay.open{display:block}
  
  #main{margin-left:0}
  
  #topbar{
    padding:0 16px;
    padding-left:60px;
  }
  #content{padding:20px 16px}
  
  .stats-grid{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  
  .modal{max-width:100%;margin:16px}
  .modal-body{padding:20px}
  .modal-header{padding:20px 20px 0}
  .modal-footer{padding:16px 20px 20px}

  .auth-box{padding:36px 28px}
  
  #trial-banner{flex-direction:column;gap:10px;text-align:center}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .emp-list{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .auth-box{padding:28px 20px}
}

/* ═══════════════════════════════════════════
   HIDDEN ATTRIBUTE SUPPORT (override defaults)
═══════════════════════════════════════════ */
[hidden]{display:none !important}

/* ═══════════════════════════════════════════
   AUTH — extra classes
═══════════════════════════════════════════ */
.auth-footer-text{
  text-align:center;
  margin-top:20px;
  font-size:.82rem;
  color:var(--mid);
}
.auth-link{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
}
.auth-link:hover{color:var(--accent-lt)}

/* PIN — header layout */
.pin-header{
  margin-bottom:24px;
}
.pin-header .auth-title{margin-bottom:6px}
.pin-type-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.65rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;
  background:rgba(200,96,58,0.08);
  color:var(--accent);
}
.pin-instruction{
  text-align:center;
  font-size:.82rem;
  color:var(--mid);
  margin:24px 0 18px;
}

/* ═══════════════════════════════════════════
   SIDEBAR — extra classes
═══════════════════════════════════════════ */
.sb-user-info{
  min-width:0;
  flex:1;
}
.sb-action-icon{
  font-size:1rem;
  width:20px;
  text-align:center;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ═══════════════════════════════════════════
   TRIAL — button variant
═══════════════════════════════════════════ */
.btn-trial{
  background:rgba(245,124,0,0.15);
  color:#7A4A00;
  border:1px solid rgba(245,124,0,0.25);
}
.btn-trial:hover{
  background:rgba(245,124,0,0.25);
  border-color:rgba(245,124,0,0.4);
  transform:translateY(-1px);
}

/* ═══════════════════════════════════════════
   FORM — color picker layout
═══════════════════════════════════════════ */
.field-color input[type="color"]{
  height:48px;
  padding:4px;
  cursor:pointer;
}

/* ═══════════════════════════════════════════
   MENU TOGGLE — hamburger icon
═══════════════════════════════════════════ */
#menu-toggle{font-size:0}
#menu-toggle .menu-icon,
#menu-toggle .menu-icon::before,
#menu-toggle .menu-icon::after{
  display:block;
  width:18px;height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:var(--transition);
}
#menu-toggle .menu-icon{
  position:relative;
  margin:0 auto;
}
#menu-toggle .menu-icon::before,
#menu-toggle .menu-icon::after{
  content:'';
  position:absolute;left:0;
}
#menu-toggle .menu-icon::before{top:-6px}
#menu-toggle .menu-icon::after{top:6px}
#menu-toggle:hover .menu-icon,
#menu-toggle:hover .menu-icon::before,
#menu-toggle:hover .menu-icon::after{background:var(--accent)}

/* ═══════════════════════════════════════════
   FIX — modal-bg con .open invece di [hidden]
   (richiede che JS faccia el.classList.toggle('open'))
═══════════════════════════════════════════ */
/* già definito sopra: .modal-bg{display:none} + .modal-bg.open{display:flex} ✓ */

/* ═══════════════════════════════════════════════════════════════
   AGGIUNTE — Classi mancanti usate dai moduli JS
═══════════════════════════════════════════════════════════════ */

/* Aggiunte alle CSS vars */
:root{
  --border:rgba(26,18,8,0.08);
  --ok:#48BB78;
  --warn:#F57C00;
  --err:#E53E3E;
}

/* ───── Theme accent dinamico (body.salon / body.casa) ───── */
body.casa #sb-type-badge{background:rgba(200,96,58,0.12);color:var(--accent-lt)}

/* ───── EXPIRED OVERLAY ───── */
.expired-overlay{
  position:fixed;inset:0;z-index:9000;
  background:var(--bone);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.expired-box{
  background:var(--white);
  padding:48px 40px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(26,18,8,0.06);
  box-shadow:var(--shadow-md);
  max-width:420px;width:100%;
  text-align:center;
}
.expired-icon{font-size:3.5rem;margin-bottom:16px}
.expired-title{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;font-weight:500;
  color:var(--ink);margin-bottom:12px;
}
.expired-sub{
  color:var(--mid);
  line-height:1.7;
  margin-bottom:28px;
}
.expired-box .btn{margin:6px 4px;display:inline-flex}

/* ───── SIDEBAR ITEMS (compat .sb-item / .sb-icon / .sb-section) ───── */
.sb-section{
  font-size:.62rem;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--lt);
  padding:18px 16px 8px;
  margin-top:4px;
}
.sb-section:first-child{margin-top:0;padding-top:8px}
.sb-item{
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:11px 16px;
  font-size:.85rem;font-weight:500;
  color:var(--mid);
  background:transparent;
  border:none;border-radius:var(--radius-sm);
  cursor:pointer;text-align:left;
  font-family:'Inter',sans-serif;
  transition:var(--transition);
}
.sb-item:hover{background:var(--bone);color:var(--ink)}
.sb-item.active{
  background:rgba(200,96,58,0.10);
  color:var(--accent);
  font-weight:600;
}
.sb-icon{
  font-size:1.05rem;
  width:22px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sb-item .nav-label{flex:1}

/* ───── CARDS — header/body separati ───── */
.card{padding:0;overflow:hidden}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  gap:12px;
}
.card-header .card-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;font-weight:500;
  color:var(--ink);
  margin:0;
}
.card-body{padding:24px}

/* ───── TABLES (alias .tbl) ───── */
.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
}
.tbl thead th{
  text-align:left;
  padding:14px 24px;
  font-size:.68rem;font-weight:600;
  letter-spacing:0.8px;text-transform:uppercase;
  color:var(--lt);
  background:var(--bone);
  border-bottom:1px solid var(--border);
}
.tbl tbody td{
  padding:14px 24px;
  color:var(--ink);
  border-bottom:1px solid rgba(26,18,8,0.04);
  vertical-align:middle;
}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:rgba(200,96,58,0.025)}

/* ───── BADGES ruolo ───── */
.badge-admin{background:rgba(200,96,58,0.12);color:var(--accent);padding:4px 12px;border-radius:20px;font-size:.68rem;font-weight:600;letter-spacing:0.5px;text-transform:uppercase}
.badge-staff{background:rgba(26,18,8,0.06);color:var(--mid);padding:4px 12px;border-radius:20px;font-size:.68rem;font-weight:600;letter-spacing:0.5px;text-transform:uppercase}

/* ───── UTILITY ───── */
.text-mid{color:var(--mid)}
.mb-12{margin-bottom:12px}
.mt-8{margin-top:8px}

/* ───── PROFILE rows ───── */
.profile-section{margin-bottom:28px}
.profile-section:last-child{margin-bottom:0}
.profile-section-title{
  font-size:.65rem;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--lt);
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.profile-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(26,18,8,0.04);
}
.profile-row:last-child{border-bottom:none}
.profile-key{font-size:.82rem;color:var(--mid)}
.profile-val{font-size:.88rem;font-weight:500;color:var(--ink)}
.code-block{
  font-family:'SF Mono',Menlo,monospace;
  font-size:.82rem;
  background:var(--bone);
  border:1px solid var(--border);
  padding:12px 14px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  word-break:break-all;
}

/* ───── EMPTY (compat .empty) ───── */
.empty{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:64px 32px;
  text-align:center;
}
.empty-icon{font-size:3rem;margin-bottom:16px;opacity:0.4}
.empty-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:500;
  color:var(--ink);margin-bottom:6px;
}
.empty-sub{
  font-size:.88rem;color:var(--mid);
  max-width:360px;
}

/* ═══════════════════════════════════════════
   CALENDARIO (Salon)
═══════════════════════════════════════════ */
.cal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.cal-month{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;font-weight:500;
  color:var(--ink);
  text-transform:capitalize;
}
.cal-nav{display:flex;gap:6px}
.cal-nav-btn{
  min-width:36px;height:36px;
  padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bone);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:.85rem;font-weight:500;
  color:var(--mid);
  font-family:'Inter',sans-serif;
  transition:var(--transition);
}
.cal-nav-btn:hover{border-color:var(--accent);color:var(--accent)}

.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}
.cal-day-name{
  font-size:.65rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  color:var(--lt);
  text-align:center;
  padding:8px 0;
}
.cal-day{
  position:relative;
  min-height:64px;
  padding:8px;
  background:var(--bone);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:var(--transition);
  display:flex;flex-direction:column;justify-content:space-between;
}
.cal-day:hover{
  background:var(--cream);
  border-color:var(--accent);
  transform:translateY(-2px);
}
.cal-day.other-month{opacity:0.35}
.cal-day.today{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}
.cal-day.today .cal-day-num{color:var(--white)}
.cal-day.has-appt{border-color:rgba(200,96,58,0.3)}
.cal-day.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(200,96,58,0.25);background:var(--cream)}
.cal-day-num{
  font-size:.85rem;font-weight:600;
  color:var(--ink);
}
.cal-dots{
  display:flex;gap:3px;
  flex-wrap:wrap;
}
.cal-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
}

/* ═══════════════════════════════════════════
   DAY PANEL (sotto il calendario)
═══════════════════════════════════════════ */
.day-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 12px;
  gap:12px;
}
.day-panel-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;font-weight:500;
  color:var(--ink);
  text-transform:capitalize;
}

/* ═══════════════════════════════════════════
   APPUNTAMENTI (Salon day view)
═══════════════════════════════════════════ */
.appt-list{display:flex;flex-direction:column;gap:10px}
.appt-item{
  display:flex;align-items:stretch;gap:14px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 16px;
  transition:var(--transition);
}
.appt-item:hover{box-shadow:var(--shadow-sm);border-color:rgba(200,96,58,0.2)}
.appt-time{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:500;
  color:var(--ink);
  min-width:64px;
  display:flex;align-items:center;
}
.appt-bar{
  width:3px;border-radius:2px;
  background:var(--accent);
  flex-shrink:0;
}
.appt-info{flex:1;min-width:0}
.appt-client{
  font-size:.95rem;font-weight:600;
  color:var(--ink);
  margin-bottom:3px;
}
.appt-meta{font-size:.78rem;color:var(--mid)}
.appt-note{
  font-size:.78rem;color:var(--mid);
  font-style:italic;
  margin-top:4px;
}
.appt-del{align-self:center;flex-shrink:0}
.appt-item--clickable{cursor:pointer}
.appt-item--clickable:hover{transform:translateY(-1px)}
.appt-chevron{align-self:center;font-size:1.2rem;color:var(--lt);flex-shrink:0;margin-left:4px}

/* ═══════════════════════════════════════════
   DETTAGLIO APPUNTAMENTO
═══════════════════════════════════════════ */
.detail-rows{display:flex;flex-direction:column;gap:14px}
.detail-row{display:flex;align-items:baseline;gap:12px}
.detail-label{
  font-size:.72rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  color:var(--lt);min-width:72px;flex-shrink:0;
}
.detail-val{font-size:.95rem;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.detail-link{color:var(--accent);text-decoration:none}
.detail-link:hover{text-decoration:underline}
.detail-price{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:500}
.detail-badge{
  display:inline-block;
  padding:2px 8px;
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:20px;
  font-size:.72rem;font-weight:500;
  color:var(--mid);
}
.detail-svc{display:inline-flex;align-items:center;gap:5px}
.detail-svc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.detail-notes{
  margin-top:4px;
  padding:12px 14px;
  background:var(--cream);
  border-left:3px solid var(--border);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.88rem;color:var(--mid);font-style:italic;
}

/* ═══════════════════════════════════════════
   CAMERE (Casa home)
═══════════════════════════════════════════ */
.room-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}
.room-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  transition:var(--transition);
}
.room-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(200,96,58,0.2);
}
.room-card-head{
  display:flex;align-items:center;gap:14px;
  padding:20px 22px;
  border-bottom:1px solid var(--border);
}
.room-av{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
}
.room-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;font-weight:500;
  color:var(--ink);
}
.room-guests{font-size:.75rem;color:var(--mid)}
.room-card-body{padding:18px 22px}
.room-price{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;font-weight:500;
  color:var(--accent);
}
.room-price-sub{
  font-size:.82rem;color:var(--lt);
  font-family:'Inter',sans-serif;
}
.room-occupancy{margin-top:10px}
.room-occ-label{
  font-size:.7rem;font-weight:500;
  color:var(--mid);
  margin-bottom:6px;
}
.occ-strip{
  display:grid;
  grid-template-columns:repeat(30,1fr);
  gap:2px;
  height:8px;
}
.occ-day{
  background:rgba(26,18,8,0.06);
  border-radius:2px;
}
.occ-day.booked{background:var(--accent)}

/* ═══════════════════════════════════════════
   PRENOTAZIONI (Casa booking list)
═══════════════════════════════════════════ */
.booking-list{display:flex;flex-direction:column;gap:10px}
.booking-card{
  display:flex;gap:14px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px 18px;
  transition:var(--transition);
}
.booking-card:hover{box-shadow:var(--shadow-sm);border-color:rgba(200,96,58,0.2)}
.booking-stripe{
  width:3px;border-radius:2px;
  background:var(--accent);
  flex-shrink:0;
}
.booking-info{flex:1;min-width:0}
.booking-dates{
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;font-weight:500;
  color:var(--ink);
  margin-bottom:3px;
}
.booking-client{
  font-size:.92rem;font-weight:600;
  color:var(--ink);
  margin-bottom:3px;
}
.booking-meta{font-size:.78rem;color:var(--mid)}
.booking-room-tag{
  display:inline-flex;align-items:center;
  margin-top:6px;
  font-size:.72rem;font-weight:500;
  color:var(--accent);
  background:rgba(200,96,58,0.08);
  padding:3px 10px;
  border-radius:20px;
}
.booking-del{align-self:center;flex-shrink:0}

/* ═══════════════════════════════════════════
   ROOM STATUS DOT (card home)
═══════════════════════════════════════════ */
.room-card-head{position:relative}
.room-status-dot{
  position:absolute;top:0;right:0;
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--white);
}
.room-status-dot.busy{background:#e05252}
.room-status-dot.free{background:#52c07a}
.room-next-bk{margin-top:10px;font-size:.74rem;color:var(--mid)}

/* ═══════════════════════════════════════════
   SECTION LABEL (lista prenotazioni)
═══════════════════════════════════════════ */
.section-label{
  font-size:.65rem;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--lt);
  margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.booking-card{cursor:pointer}
.booking-card:hover .appt-chevron{color:var(--accent)}

/* ═══════════════════════════════════════════
   CALENDARIO CAMERA (Casa vacanze)
═══════════════════════════════════════════ */
.rcal-info{
  display:flex;flex-wrap:wrap;gap:16px;
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-weight:500;color:var(--ink);
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.rcal-info span{display:flex;align-items:center;gap:4px}

.rcal-booked{cursor:pointer}
.rcal-booked:hover{filter:brightness(.94)}
.rcal-departure{cursor:pointer}
.rcal-departure:hover{filter:brightness(.94)}
.rcal-dep-label{font-style:normal}
.rcal-legend-dep{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;
  border:1.5px dashed;
  border-radius:3px;
  font-size:.65rem;
}

.rcal-checkin .cal-day-num{font-weight:700}

.rcal-name{
  font-size:.6rem;font-weight:700;
  letter-spacing:.2px;
  margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.1;
}

.rcal-bar{
  height:3px;border-radius:2px;
  margin-top:auto;
  width:100%;
}

.rcal-legend{
  display:flex;align-items:center;gap:8px;
  margin-top:12px;
  font-size:.72rem;color:var(--mid);
}
.rcal-legend-dot{
  width:10px;height:10px;
  border-radius:50%;
  flex-shrink:0;
}
.rcal-legend-sep{color:var(--border)}

/* ═══════════════════════════════════════════
   RESPONSIVE — calendar / room grid
═══════════════════════════════════════════ */
@media(max-width:768px){
  .cal-day{min-height:52px;padding:6px}
  .cal-day-num{font-size:.75rem}
  .room-grid{grid-template-columns:1fr}
  .appt-item{flex-direction:column;gap:8px}
  .appt-bar{width:100%;height:3px}
  .appt-time{min-width:auto}
  .booking-card{flex-direction:row}
  .booking-stripe{width:3px;height:auto}
  .rcal-info{gap:10px;font-size:1rem}
  .rcal-name{font-size:.55rem}
  .card-header{padding:16px 20px;flex-wrap:wrap}
  .card-body{padding:18px}
}