/* =========================================================
   NEXT LEVEL BEAUTY — Studio Portal (admin + reception)
   ========================================================= */
:root{
  --bg:            #120B10;
  --bg-elevated:   #1C1218;
  --bg-elevated-2: #241722;
  --bg-card:       #1A1117;
  --line:          rgba(248,243,239,0.09);
  --line-strong:   rgba(248,243,239,0.16);

  --pink:          #FF2E7E;
  --pink-soft:     #FF8FB8;
  --gold:          #CDA35D;
  --gold-soft:     #E7CB98;
  --green:         #59D98E;
  --red:           #FF6B6B;

  --ivory:         #F8F3EF;
  --muted:         #B9A6AF;
  --muted-2:       #83717A;

  --grad: linear-gradient(135deg, var(--pink) 0%, #FF6FA0 45%, var(--gold) 100%);

  --f-display: 'Fraunces', serif;
  --f-body: 'Manrope', -apple-system, sans-serif;
  --f-mono: 'Space Grotesk', monospace;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background: var(--bg); color: var(--ivory);
  font-family: var(--f-body); font-size:14.5px; line-height:1.5;
}
h1,h2,h3{ font-family: var(--f-display); font-weight:500; margin:0; letter-spacing:-0.01em; }
h1 em, h2 em{ font-style:italic; color: var(--pink-soft); font-weight:400; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
.muted{ color: var(--muted); }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-thumb{ background: var(--bg-elevated-2); border-radius:10px; }

/* ---------- buttons ---------- */
.btn-primary, .btn-ghost, .btn-add, .btn-small{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; font-weight:600; letter-spacing:.01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s, background .25s;
}
.btn-primary{ background: var(--grad); color:#17090F; padding:12px 22px; font-size:13.5px; }
.btn-primary:hover{ box-shadow: 0 10px 26px -8px rgba(255,46,126,0.55); }
.btn-ghost{ background:transparent; border:1px solid var(--line-strong); color: var(--ivory); padding:11px 20px; font-size:13.5px; }
.btn-ghost:hover{ border-color: var(--pink-soft); color: var(--pink-soft); }
.btn-add{ background: var(--bg-elevated-2); border:1px solid var(--line-strong); color: var(--ivory); padding:10px 18px; font-size:13px; }
.btn-add:hover{ border-color: var(--pink-soft); }
.btn-small{ padding:6px 13px; font-size:12px; border:1px solid var(--line-strong); background:transparent; color: var(--muted); }
.btn-small.btn-edit:hover{ border-color: var(--pink-soft); color: var(--pink-soft); }
.btn-small.btn-delete:hover{ border-color: var(--red); color: var(--red); }

/* ---------- login screen ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 0%, #241621 0%, #0d070b 70%);
  padding:24px;
}
.login-card{
  width:100%; max-width:380px;
  background: var(--bg-card); border:1px solid var(--line-strong);
  border-radius: var(--radius-l); padding:40px 34px;
}
.login-logo{ display:flex; align-items:center; gap:12px; margin-bottom:30px; }
.login-logo .mark{ font-size:22px; color: var(--pink); }
.login-logo strong{ font-family:var(--f-display); font-size:17px; display:block; }
.login-logo em{ font-style:italic; color:var(--pink-soft); font-weight:400; }
.login-logo span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.login-card h1{ font-size:26px; margin-top:6px; }
.login-card > p{ margin-top:8px; margin-bottom:26px; font-size:13.5px; }
.login-card label{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin:16px 0 8px; }
.login-card input{
  width:100%; background: var(--bg); border:1px solid var(--line-strong); border-radius: var(--radius-s);
  padding:12px 14px; color: var(--ivory); font-size:14px;
}
.login-card input:focus{ outline:none; border-color: var(--pink-soft); }
.login-card .btn-primary{ margin-top:24px; }
.form-error{ display:none; margin-top:14px; padding:10px 14px; border-radius: var(--radius-s); background: rgba(255,107,107,0.1); border:1px solid rgba(255,107,107,0.35); color: var(--red); font-size:13px; }
.back-link{ display:block; text-align:center; margin-top:22px; font-size:12.5px; color: var(--muted); text-decoration:none; }
.back-link:hover{ color: var(--pink-soft); }

/* ---------- app shell ---------- */
.admin-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:250px; flex-shrink:0; background: var(--bg-elevated);
  border-right:1px solid var(--line); padding:26px 18px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:0 8px 24px; }
.sidebar-brand .mark{ color: var(--pink); font-size:18px; }
.sidebar-brand span{ font-family:var(--f-display); font-size:15px; }
.sidebar-brand em{ font-style:italic; color: var(--pink-soft); }
.sidebar-brand small{ font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; color:var(--muted-2); text-transform:uppercase; display:block; }

.sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-section-label{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); padding:18px 12px 8px; }
.nav-link{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:none; border:none; color: var(--muted); font-size:13.5px;
  padding:11px 12px; border-radius: var(--radius-s); transition: all .25s;
}
.nav-link:hover{ background: var(--bg-elevated-2); color: var(--ivory); }
.nav-link.active{ background: rgba(255,46,126,0.12); color: var(--pink-soft); font-weight:600; }
.sidebar-footer{ display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); padding-top:14px; margin-top:10px; }
.logout-link{ color: var(--red); }
.logout-link:hover{ background: rgba(255,107,107,0.1); color: var(--red); }

.main-area{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background: rgba(18,11,16,0.85); backdrop-filter: blur(10px); z-index:20;
}
.topbar h1{ font-size:22px; }
.burger-toggle{ display:none; background:none; border:none; color:var(--ivory); font-size:20px; margin-right:14px; }
.topbar-user{ display:flex; align-items:center; gap:10px; position:relative; cursor:pointer; }
.topbar-user span#topbarUserName{ font-size:13.5px; font-weight:600; }
.role-pill{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft); border:1px solid var(--line-strong); padding:3px 9px; border-radius:999px; }
.avatar-circle{
  width:34px; height:34px; border-radius:50%; background: var(--grad); color:#17090F;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.avatar-menu{
  position:absolute; top:44px; right:0; background: var(--bg-card); border:1px solid var(--line-strong);
  border-radius: var(--radius-m); padding:6px; min-width:150px; box-shadow:0 20px 40px -12px rgba(0,0,0,0.6);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .25s var(--ease);
}
.avatar-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.avatar-menu-item{ width:100%; background:none; border:none; text-align:left; padding:10px 12px; border-radius: var(--radius-s); color: var(--red); font-size:13px; }
.avatar-menu-item:hover{ background: rgba(255,107,107,0.1); }

.content{ padding:32px; flex:1; }

/* ---------- stat cards ---------- */
.stats-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-bottom:28px; }
.stat-card{
  background: var(--bg-card); border:1px solid var(--line); border-radius: var(--radius-l); padding:24px;
}
.stat-card .label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.stat-card .value{ font-family:var(--f-display); font-size:36px; margin-top:10px; }

/* ---------- panels + tables ---------- */
.panel{ background: var(--bg-card); border:1px solid var(--line); border-radius: var(--radius-l); padding:26px; margin-bottom:22px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.panel-head h2{ font-size:19px; }

.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th{
  text-align:left; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2); padding:10px 14px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
.data-table td{ padding:14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table tr:last-child td{ border-bottom:none; }
.data-table tr:hover td{ background: rgba(255,255,255,0.015); }
.empty-row td{ text-align:center; color:var(--muted-2); padding:34px; }
.action-btns{ display:flex; gap:8px; }

.badge{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:999px; display:inline-block; }
.badge-pending{ background:rgba(231,203,152,0.14); color:var(--gold-soft); }
.badge-confirmed{ background:rgba(89,217,142,0.14); color:var(--green); }
.badge-completed{ background:rgba(255,255,255,0.08); color:var(--muted); }
.badge-cancelled{ background:rgba(255,107,107,0.14); color:var(--red); }

.thumb-preview{ width:44px; height:44px; border-radius:10px; object-fit:cover; border:1px solid var(--line-strong); }
.thumb-empty{ display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--muted-2); text-align:center; background:var(--bg-elevated-2); }

/* ---------- forms (dashboard + modal) ---------- */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin-bottom:7px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; background: var(--bg); border:1px solid var(--line-strong); border-radius: var(--radius-s);
  padding:11px 13px; color: var(--ivory); font-size:13.5px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color: var(--pink-soft); }
.form-hint{ font-size:11.5px; color:var(--muted-2); margin-top:6px; }
.current-photo img{ width:80px; height:80px; object-fit:cover; border-radius: var(--radius-s); margin-bottom:8px; border:1px solid var(--line-strong); }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(9,5,8,0.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:900;
  opacity:0; visibility:hidden; transition: all .35s var(--ease);
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background: var(--bg-card); border:1px solid var(--line-strong); border-radius: var(--radius-l);
  padding:34px; position:relative; transform: translateY(16px) scale(.98); transition: transform .35s var(--ease);
}
.modal-overlay.open .modal-box{ transform: translateY(0) scale(1); }
.modal-close{
  position:absolute; top:18px; right:18px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line-strong); background:none; color:var(--muted); transition:all .25s;
}
.modal-close:hover{ color: var(--ivory); border-color: var(--pink-soft); transform: rotate(90deg); }
.modal-box h2{ font-size:20px; margin-bottom:20px; padding-right:30px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:22px; }

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:26px; right:26px; background: var(--bg-card); border:1px solid var(--line-strong);
  border-left:3px solid var(--green); border-radius: var(--radius-m); padding:14px 20px; font-size:13.5px;
  transform: translateY(20px); opacity:0; visibility:hidden; transition: all .35s var(--ease); z-index:1000;
}
.toast.show{ transform:translateY(0); opacity:1; visibility:visible; }
.toast.error{ border-left-color: var(--red); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .sidebar{ position:fixed; left:0; top:0; height:100vh; z-index:60; transform:translateX(-100%); transition:transform .35s var(--ease); box-shadow:20px 0 50px rgba(0,0,0,0.5); }
  .sidebar.open{ transform:translateX(0); }
  .burger-toggle{ display:block; }
  .stats-grid{ grid-template-columns:1fr; }
  .content{ padding:20px; }
  .topbar{ padding:16px 20px; }
  .form-row-2{ grid-template-columns:1fr; }
  .topbar-user span#topbarUserName, .role-pill{ display:none; }
}


/* =========================================================
   v4 ADDITIONS — light skin, check-in, dashboard, messages,
   content pages, and full phone / tablet layouts
   ========================================================= */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
.no-scroll{ overflow:hidden; }
.form-error.show{ display:block; }
.loading, .empty-state{ padding:46px 20px; text-align:center; color:var(--muted-2); font-size:14px; }
.plain-link{ color:var(--muted); text-decoration:none; }
.plain-link:hover{ color:var(--pink-soft); }
.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:320px; }
small{ font-size:.7em; color:var(--muted-2); font-family:var(--f-body); }

/* ---------- light skin ---------- */
:root[data-theme="light"]{
  --bg:#FBF6F3; --bg-elevated:#FFFFFF; --bg-elevated-2:#F1E6E1; --bg-card:#FFFFFF;
  --line:rgba(60,30,45,0.10); --line-strong:rgba(60,30,45,0.20);
  --pink:#D81B67; --pink-soft:#C2185B; --gold:#A47A2C; --gold-soft:#8A6420;
  --green:#17803F; --red:#C0352B; --ivory:#2A1721; --muted:#6B5560; --muted-2:#85707B;
  color-scheme:light;
}
[data-theme="light"] .topbar{ background:rgba(251,246,243,0.88); }
[data-theme="light"] .modal-overlay{ background:rgba(60,30,45,0.45); }
[data-theme="light"] .sidebar{ box-shadow:none; }
[data-theme="light"] .stat-card, [data-theme="light"] .panel{ box-shadow:0 10px 28px -22px rgba(120,60,85,0.35); }
[data-theme="light"] .data-table tr:hover td{ background:rgba(194,24,91,0.04); }
[data-theme="light"] .btn-primary, [data-theme="light"] .btn-quick{ color:#fff; }
.theme-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ivory); font-size:17px; display:inline-flex; align-items:center; justify-content:center; margin-right:12px; flex-shrink:0; }
.theme-btn:hover{ border-color:var(--pink-soft); color:var(--pink-soft); }
.login-theme{ position:fixed; top:calc(16px + env(safe-area-inset-top)); right:16px; margin:0; }

/* ---------- shell + nav ---------- */
.topbar h1{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-badge{ margin-left:auto; background:var(--pink); color:#fff; font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 8px; font-family:var(--f-mono); }
.nav-link{ display:flex; align-items:center; gap:6px; text-align:left; width:100%; }
.is-reception .admin-only{ display:none !important; }
.sidebar-scrim{ display:none; }
.main-area{ min-width:0; flex:1; }
.content{ padding:32px; max-width:1500px; width:100%; }
.stats-grid{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.stat-card .value small{ font-size:14px; }
.stat-card .sub{ margin-top:6px; font-size:12.5px; color:var(--muted-2); }
.stat-alert{ border-color:var(--pink); box-shadow:0 0 0 1px var(--pink) inset; }

/* ---------- dashboard quick actions ---------- */
.quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
.btn-quick{
  display:flex; align-items:center; justify-content:center; gap:14px; min-height:74px; border-radius:var(--radius-l);
  font-family:var(--f-body); font-size:18px; font-weight:800; letter-spacing:.01em; border:0; color:#17090F; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.btn-quick span{ font-size:26px; line-height:1; }
.btn-quick:hover{ transform:translateY(-3px); }
.btn-quick-book{ background:var(--grad); box-shadow:0 18px 40px -18px rgba(255,46,126,0.7); }
.btn-quick-walkin{ background:linear-gradient(135deg,#E7CB98,#CDA35D); box-shadow:0 18px 40px -18px rgba(205,163,93,0.7); }
[data-theme="light"] .btn-quick-walkin{ color:#2A1721; }

/* ---------- "starting within the next hour" ---------- */
.soon-panel{
  margin-bottom:26px; padding:22px 24px; border-radius:var(--radius-l);
  background:linear-gradient(160deg, rgba(255,46,126,0.18), rgba(205,163,93,0.12));
  border:2px solid var(--pink); position:relative; overflow:hidden;
}
.soon-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.soon-head h2{ font-size:20px; flex:1; }
.soon-count{ background:var(--pink); color:#fff; border-radius:999px; min-width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.soon-item{ display:grid; grid-template-columns:130px 1fr auto; gap:18px; align-items:center; padding:14px 16px; margin-top:10px; border-radius:var(--radius-m); background:var(--bg-card); border:1px solid var(--line-strong); }
.soon-item.is-late{ border-color:var(--gold); }
.soon-time strong{ display:block; font-family:var(--f-display); font-size:22px; }
.soon-time span{ font-family:var(--f-mono); font-size:11.5px; color:var(--pink-soft); text-transform:uppercase; letter-spacing:.05em; }
.soon-item.is-late .soon-time span{ color:var(--gold-soft); }
.soon-info{ display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13.5px; }
.soon-act{ display:flex; gap:8px; align-items:center; }
.soon-empty{ padding:6px 2px; color:var(--muted); }
.soon-note{ margin-top:14px; font-size:12.5px; color:var(--muted); }
.live-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:22px; font-size:13px; }
.live-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px; background:rgba(89,217,142,0.12); color:var(--green); font-size:12.5px; }
.live-chip i{ width:7px; height:7px; border-radius:50%; background:var(--green); }

/* ---------- buttons / status ---------- */
.btn-small{ display:inline-flex; align-items:center; text-decoration:none; cursor:pointer; border-radius:999px; white-space:nowrap; min-height:34px; }
.btn-checkin{ background:var(--green); border-color:var(--green); color:#07210f; font-weight:700; }
[data-theme="light"] .btn-checkin{ color:#fff; }
.btn-checkin:hover{ filter:brightness(1.08); }
.btn-checkin:disabled{ opacity:.6; }
.btn-add-alt{ background:linear-gradient(135deg,#E7CB98,#CDA35D); color:#2A1721; }
.badge-checked_in{ background:rgba(89,217,142,0.16); color:var(--green); }
.badge-failed{ background:rgba(255,107,107,0.16); color:var(--red); }

/* ---------- toolbar / tabs / filters ---------- */
.toolbar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:16px; }
.toolbar-right{ display:flex; gap:10px; flex-wrap:wrap; }
.toolbar-note{ flex:1; min-width:240px; font-size:13.5px; }
.tab-row{ display:flex; gap:8px; flex-wrap:wrap; }
.tab{ padding:9px 16px; border-radius:999px; border:1px solid var(--line-strong); background:transparent; color:var(--muted); font-size:13px; cursor:pointer; }
.tab em{ font-style:normal; font-family:var(--f-mono); font-size:11px; margin-left:4px; color:var(--muted-2); }
.tab.is-active{ background:var(--grad); color:#17090F; border-color:transparent; font-weight:700; }
.tab.is-active em{ color:inherit; opacity:.75; }
.filters{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px; }
.filters input[type=search], .filters input[type=date], .filters select{ background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:var(--radius-s); color:var(--ivory); padding:10px 12px; font-size:13.5px; }
.filters input[type=search]{ flex:1; min-width:220px; max-width:380px; }
.filters label{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted-2); font-family:var(--f-mono); text-transform:uppercase; }
.range-total{ margin-left:auto; font-size:14px; }
.stats-inline{ display:flex; gap:26px; flex-wrap:wrap; }
.stats-inline div{ display:flex; flex-direction:column; }
.stats-inline span{ font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); }
.stats-inline strong{ font-family:var(--f-display); font-size:22px; }
.panel-head h2 small{ margin-left:6px; }

/* ---------- messages ---------- */
.day-head{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin:26px 0 10px; }
.msg-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-l); padding:20px 22px; margin-bottom:12px; }
.msg-card.is-new{ border-color:var(--pink); box-shadow:0 0 0 1px var(--pink) inset; }
.msg-card header{ display:flex; justify-content:space-between; gap:12px; }
.msg-meta{ font-size:12.5px; margin-top:3px; word-break:break-word; }
.msg-card p{ margin:12px 0 16px; font-size:14.5px; line-height:1.65; color:var(--ivory); word-break:break-word; }
.msg-card .action-btns{ flex-wrap:wrap; }

/* ---------- forms / modal ---------- */
.check-row .check-label{ display:flex; align-items:center; gap:10px; cursor:pointer; text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:14px; color:var(--ivory); margin:0; padding-top:24px; }
.check-row input{ width:18px; height:18px; accent-color:var(--pink); flex-shrink:0; }
.modal-box.wide{ max-width:760px; }
.modal-box{ -webkit-overflow-scrolling:touch; }
.modal-actions{ position:sticky; bottom:-34px; background:var(--bg-card); padding:14px 0 2px; margin-top:6px; }
.current-photo img{ max-width:160px; max-height:110px; border-radius:var(--radius-s); border:1px solid var(--line-strong); display:block; margin-bottom:8px; }
.svc-pick{ max-height:250px; overflow-y:auto; border:1px solid var(--line-strong); border-radius:var(--radius-s); padding:6px 14px 12px; background:var(--bg); }
.svc-pick-group h4{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--pink-soft); margin:14px 0 6px; }
.svc-pick-item{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); cursor:pointer; text-transform:none !important; letter-spacing:0 !important; font-family:var(--f-body) !important; font-size:14px !important; color:var(--ivory) !important; margin:0 !important; }
.svc-pick-item input{ width:18px; height:18px; accent-color:var(--pink); flex-shrink:0; }
.svc-pick-item span{ flex:1; }
.svc-pick-item em{ font-style:normal; font-size:12px; color:var(--muted-2); text-align:right; }

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .content{ padding:24px; }
  .soon-item{ grid-template-columns:110px 1fr; }
  .soon-act{ grid-column:1 / -1; }
}

/* ---------- phone + small tablet: drawer menu, stacked tables ---------- */
@media (max-width:900px){
  .sidebar{ width:min(290px, 86vw); padding-top:calc(26px + env(safe-area-inset-top)); z-index:80; }
  .sidebar-scrim.show{ display:block; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:70; }
  .topbar{ padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top)); gap:6px; }
  .topbar h1{ font-size:19px; }
  .theme-btn{ margin-right:8px; }
  .quick-actions{ grid-template-columns:1fr; }
  .btn-quick{ min-height:66px; font-size:17px; }
  .content{ padding:16px; padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .stat-card{ padding:16px; }
  .stat-card .value{ font-size:28px; }
  .soon-panel{ padding:16px; }
  .soon-item{ grid-template-columns:1fr; gap:10px; }
  .soon-time{ display:flex; align-items:baseline; gap:10px; }
  .filters input[type=search]{ max-width:none; min-width:0; width:100%; }
  .range-total{ margin-left:0; width:100%; }

  /* tables become stacked cards */
  .data-table, .data-table tbody, .data-table tr, .data-table td{ display:block; width:100%; }
  .data-table thead{ display:none; }
  .data-table tr{ padding:14px 16px; border-bottom:1px solid var(--line-strong); }
  .data-table tr:last-child{ border-bottom:none; }
  .data-table td{ padding:5px 0; border:0; display:flex; gap:12px; justify-content:space-between; align-items:flex-start; text-align:right; }
  .data-table td::before{ content:attr(data-label); font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); text-align:left; flex-shrink:0; padding-top:3px; }
  .data-table td:empty{ display:none; }
  .data-table td[data-label=""]::before, .data-table td[data-label="Actions"]::before{ display:none; }
  .data-table td[data-label=""], .data-table td[data-label="Actions"]{ justify-content:flex-start; padding-top:10px; }
  .clamp{ max-width:none; }
  .action-btns{ flex-wrap:wrap; }
  .table-wrap{ overflow:visible; }
  .panel{ padding:0; overflow:hidden; }
  .panel-head{ padding:16px; }
  .btn-small{ min-height:40px; padding:8px 16px; }
  .form-row-2{ grid-template-columns:1fr !important; }
  .check-row .check-label{ padding-top:4px; }

  /* modal becomes a full-height sheet */
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal-box, .modal-box.wide{ max-width:none; max-height:94vh; max-height:94dvh; border-radius:var(--radius-l) var(--radius-l) 0 0; padding:26px 18px calc(26px + env(safe-area-inset-bottom)); }
  .modal-actions{ bottom:calc(-26px - env(safe-area-inset-bottom)); padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
  input, select, textarea{ font-size:16px !important; }   /* stops iOS zooming into fields */
}
@media (max-width:420px){
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .topbar-user .avatar-circle{ width:34px; height:34px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* =========================================================
   LIVE ALERTS (v5): topbar icons, stacked alert cards, push banner
   ========================================================= */
.alert-btn{ position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ivory); display:inline-flex; align-items:center; justify-content:center; margin-right:10px; flex-shrink:0; cursor:pointer; transition:border-color .2s, color .2s; }
.alert-btn:hover{ border-color:var(--pink-soft); color:var(--pink-soft); }
.alert-btn.has-new{ color:var(--pink); border-color:var(--pink); }
.alert-btn.has-new.alert-msg{ color:var(--gold-soft); border-color:var(--gold); }
.alert-btn.has-new svg{ animation: nlbRing 1.4s ease-in-out 2; transform-origin: 50% 8%; }
@keyframes nlbRing{ 0%,100%{ transform:rotate(0) } 15%{ transform:rotate(14deg) } 30%{ transform:rotate(-12deg) } 45%{ transform:rotate(8deg) } 60%{ transform:rotate(-6deg) } }
.alert-dot{ position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--pink); color:#fff; font:700 10.5px/19px var(--f-mono); text-align:center; box-shadow:0 0 0 2px var(--bg); }
.alert-msg .alert-dot{ background:var(--gold); color:#2A1721; }

.alert-stack{ position:fixed; top:74px; right:18px; z-index:200; display:flex; flex-direction:column; gap:10px; width:min(380px, calc(100vw - 36px)); pointer-events:none; }
.alert-card{ pointer-events:auto; display:flex; gap:13px; align-items:flex-start; background:var(--bg-elevated-2); border:1px solid var(--line-strong); border-left:4px solid var(--pink); border-radius:var(--radius-m); padding:13px 15px; box-shadow:0 14px 40px rgba(0,0,0,.35); cursor:pointer; animation: nlbSlideIn .35s ease both; }
.alert-card.is-message{ border-left-color:var(--gold); }
.alert-card .ac-ic{ flex:0 0 38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(255,46,126,.16); color:var(--pink); }
.alert-card.is-message .ac-ic{ background:rgba(205,163,93,.2); color:var(--gold-soft); }
.alert-card strong{ display:block; font-size:14px; color:var(--ivory); }
.alert-card span.ac-body{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.45; }
.alert-card .ac-x{ margin-left:auto; background:none; border:0; color:var(--muted-2); font-size:15px; cursor:pointer; padding:0 2px; }
@keyframes nlbSlideIn{ from{ opacity:0; transform:translateX(30px) } to{ opacity:1; transform:none } }

.push-banner{ display:flex; align-items:center; gap:14px; margin:18px 32px 0; padding:12px 16px; border:1px solid var(--line-strong); border-left:4px solid var(--pink); border-radius:var(--radius-m); background:var(--bg-elevated); }
.push-banner[hidden]{ display:none; }
.push-banner-text{ flex:1; font-size:13.5px; color:var(--muted); line-height:1.5; }
.push-banner-text strong{ color:var(--ivory); }
.push-banner-x{ background:none; border:0; color:var(--muted-2); font-size:16px; cursor:pointer; }

.alerts-panel{ max-width:560px; padding:28px; }
.alerts-panel h3{ margin:0 0 6px; font-size:16px; }
.alerts-panel .al-state{ display:inline-block; font:600 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-bottom:12px; }
.al-state.on{ background:rgba(89,217,142,.15); color:var(--green); }
.al-state.off{ background:rgba(255,107,107,.14); color:var(--red); }
.alerts-panel .al-row{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px; }
.alerts-panel .al-check{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:14px; }
.alerts-panel .al-check input{ width:18px; height:18px; accent-color: var(--pink); }

@media (max-width: 900px){
  .alert-btn{ width:34px; height:34px; margin-right:6px; }
  .push-banner{ margin:14px 16px 0; flex-wrap:wrap; }
  .alert-stack{ top:64px; right:10px; }
}


/* =========================================================================
   v8 — MODERN DASHBOARD SKIN  (clean "Laravel-style" admin: neutral canvas,
   white cards, icon sidebar, KPI tiles, charts). Loaded last, so it wins.
   ========================================================================= */
:root{
  --f-display:'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --radius-s:9px; --radius-m:12px; --radius-l:16px;
  --shadow-sm:0 1px 2px rgba(16,18,40,.05), 0 1px 3px rgba(16,18,40,.04);
  --shadow-md:0 8px 24px -10px rgba(16,18,40,.18);
  /* dark skin — deep neutral, not black */
  --bg:#0F0D14; --bg-elevated:#171420; --bg-elevated-2:#1F1B2B; --bg-card:#171420;
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.14);
  --ivory:#F2EEF7; --muted:#ABA5BC; --muted-2:#7B7590;
  --blue:#5B8DEF; --violet:#8B6CF0;
}
:root[data-theme="light"]{
  --bg:#F5F6FA; --bg-elevated:#FFFFFF; --bg-elevated-2:#EEF0F6; --bg-card:#FFFFFF;
  --line:#E8EAF2; --line-strong:#D8DBE8;
  --pink:#E11D6B; --pink-soft:#C2185B; --gold:#B8860B; --gold-soft:#8A6410;
  --green:#12945A; --red:#D6334A; --blue:#3B6FD8; --violet:#6D4DD8;
  --ivory:#1C1A2B; --muted:#5B5F78; --muted-2:#8B8FA6;
}
body{ font-family:var(--f-body); letter-spacing:-.003em; }
h1,h2,h3{ font-weight:700; letter-spacing:-.02em; }
.is-reception .admin-only{ display:none !important; }

/* ---------- sidebar ---------- */
.sidebar{ width:264px; padding:20px 14px 16px; background:var(--bg-elevated); border-right:1px solid var(--line); }
.sidebar-brand{ padding:6px 10px 20px; gap:12px; }
.sidebar-brand .mark{ width:34px; height:34px; border-radius:10px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 8px 18px -8px var(--pink); }
.sidebar-brand span{ font-family:var(--f-display); font-weight:800; font-size:15.5px; line-height:1.15; }
.sidebar-brand small{ font-size:10.5px; letter-spacing:.06em; margin-top:2px; }
.nav-section-label{ font-size:10.5px; letter-spacing:.1em; padding:18px 12px 6px; color:var(--muted-2); font-weight:700; }
.nav-link{ gap:12px; padding:10px 12px; font-size:13.5px; font-weight:600; color:var(--muted); border-radius:10px; position:relative; }
.nav-link .ni{ width:19px; height:19px; flex-shrink:0; opacity:.85; }
.nav-link .nl-text{ flex:1; }
.nav-link:hover{ background:var(--bg-elevated-2); color:var(--ivory); }
.nav-link.active{ background:color-mix(in srgb, var(--pink) 11%, transparent); color:var(--pink-soft); font-weight:700; }
.nav-link.active::before{ content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:var(--pink); }
.nav-link.active .ni{ opacity:1; }
.nav-badge{ margin-left:auto; border-radius:999px; font-size:10.5px; padding:2px 8px; }
.sidebar-footer{ border-top:1px solid var(--line); }

/* ---------- top bar ---------- */
.topbar{ padding:14px 28px; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); gap:6px; }
.topbar h1{ font-size:19px; font-weight:800; }
.theme-btn, .alert-btn{ border-radius:11px; width:40px; height:40px; background:var(--bg-elevated); border:1px solid var(--line); color:var(--muted); box-shadow:var(--shadow-sm); }
.theme-btn:hover, .alert-btn:hover{ color:var(--pink-soft); border-color:var(--line-strong); }
.avatar-circle{ border-radius:11px; background:var(--grad); color:#fff; }
.role-pill{ border-radius:7px; font-family:var(--f-body); font-weight:700; letter-spacing:.02em; text-transform:none; font-size:11px; background:var(--bg-elevated-2); border:0; color:var(--muted); }
.content{ padding:28px; max-width:1560px; }

/* ---------- cards / panels / tables ---------- */
.panel, .card, .stat-card, .msg-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow-sm); }
.panel{ padding:20px; }
.panel-head h2, .card-head h3{ font-size:16px; font-weight:800; }
.data-table th{ font-size:11px; letter-spacing:.06em; font-weight:700; color:var(--muted-2); background:transparent; border-bottom:1px solid var(--line); text-transform:uppercase; }
.data-table td{ border-bottom:1px solid var(--line); }
.data-table tbody tr:hover td{ background:color-mix(in srgb, var(--pink) 4%, transparent); }
.badge{ font-family:var(--f-body); font-weight:700; font-size:11.5px; letter-spacing:0; text-transform:none; padding:4px 10px; }
.btn-primary, .btn-add, .tab.is-active{ box-shadow:0 6px 14px -8px var(--pink); }
.btn-primary{ color:#fff; border-radius:10px; font-weight:700; }
.btn-ghost, .btn-add{ border-radius:10px; font-weight:600; }
.btn-small{ font-weight:600; }
.tab{ font-weight:600; }
.tab.is-active{ color:#fff; }
.link-btn{ background:none; border:0; padding:0; color:var(--pink-soft); text-decoration:underline; cursor:pointer; font:inherit; }
.empty-state.small{ padding:26px 12px; font-size:13px; }
.modal-box{ border-radius:18px; box-shadow:0 30px 70px -20px rgba(16,18,40,.45); }
input, select, textarea{ border-radius:10px; }

/* ---------- dashboard ---------- */
.dash-hero{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:22px; padding:24px 26px; border-radius:var(--radius-l);
  background:linear-gradient(120deg, color-mix(in srgb, var(--pink) 14%, var(--bg-card)), var(--bg-card) 60%);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.dash-hero h2{ font-size:24px; font-weight:800; }
.dash-hero p{ margin:6px 0 0; color:var(--muted); font-size:14px; }
.dash-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-quick{ min-height:48px; padding:0 22px; border-radius:12px; font-size:14.5px; gap:10px; font-weight:800; }
.btn-quick span{ font-size:18px; }
.btn-quick-book{ color:#fff; }
.quick-actions{ display:none; }

.soon-panel{ border-radius:var(--radius-l); border:2px solid var(--pink); box-shadow:0 12px 30px -16px var(--pink); }
.soon-item{ border-radius:12px; }

.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:22px; }
.kpi{ display:flex; gap:14px; align-items:center; padding:18px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s; }
.kpi:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kpi-ic{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi-ic svg{ width:23px; height:23px; }
.kpi-body{ display:flex; flex-direction:column; min-width:0; }
.kpi-label{ font-size:12.5px; font-weight:600; color:var(--muted); }
.kpi-value{ font-size:26px; font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:2px 0; white-space:nowrap; }
.kpi-sub{ font-size:12px; color:var(--muted-2); }
.tone-pink .kpi-ic{ background:color-mix(in srgb,var(--pink) 13%,transparent); color:var(--pink); }
.tone-green .kpi-ic{ background:color-mix(in srgb,var(--green) 14%,transparent); color:var(--green); }
.tone-gold .kpi-ic{ background:color-mix(in srgb,var(--gold) 16%,transparent); color:var(--gold); }
.tone-red .kpi-ic{ background:color-mix(in srgb,var(--red) 13%,transparent); color:var(--red); }
.tone-blue .kpi-ic{ background:color-mix(in srgb,var(--blue) 14%,transparent); color:var(--blue); }
.tone-violet .kpi-ic{ background:color-mix(in srgb,var(--violet) 14%,transparent); color:var(--violet); }

.dash-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:18px; align-items:start; }
.dash-grid .span-2{ grid-column:span 2; }
.stack{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.card{ padding:20px; min-width:0; }
.card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.card-head h3 small{ font-weight:600; }
.card-head p{ margin:3px 0 0; font-size:12.5px; }
.card .data-table th:first-child, .card .data-table td:first-child{ padding-left:2px; }

.seg{ display:inline-flex; padding:3px; border-radius:10px; background:var(--bg-elevated-2); }
.seg-b{ border:0; background:transparent; color:var(--muted); font-weight:700; font-size:12.5px; padding:7px 14px; border-radius:8px; cursor:pointer; }
.seg-b.is-on{ background:var(--bg-card); color:var(--ivory); box-shadow:var(--shadow-sm); }

.chart-svg{ width:100%; height:auto; display:block; }
.ch-grid{ stroke:var(--line); stroke-width:1; }
.ch-ax{ fill:var(--muted-2); font-size:11px; font-family:var(--f-body); }
.ch-big{ fill:var(--ivory); font-size:26px; font-weight:800; font-family:var(--f-body); }
.ch-bar{ transition:opacity .2s; }
.ch-bar:hover{ opacity:.78; }
.donut-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.donut-wrap .chart-svg{ max-width:190px; }
.legend{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:9px; }
.legend li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.legend i{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.legend span{ flex:1; } .legend b{ color:var(--ivory); }

.toplist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.toplist li{ display:flex; gap:12px; align-items:center; }
.tl-n{ width:26px; height:26px; border-radius:8px; background:var(--bg-elevated-2); color:var(--muted); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toplist li > div{ flex:1; min-width:0; }
.tl-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; }
.tl-row span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-bar{ height:6px; border-radius:99px; background:var(--bg-elevated-2); margin-top:7px; overflow:hidden; }
.tl-bar i{ display:block; height:100%; border-radius:99px; background:var(--grad); }

/* video widget */
.vid-main{ border-radius:12px; overflow:hidden; background:#000; aspect-ratio:16/9; position:relative; }
.vid-poster{ all:unset; display:block; width:100%; height:100%; cursor:pointer; position:relative; }
.vid-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.vid-playbtn{ position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:var(--grad); box-shadow:0 10px 24px -6px rgba(0,0,0,.55); }
.vid-playbtn::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-38%,-50%); border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #fff; }
.vid-frame{ width:100%; height:100%; border:0; display:block; }
.vid-title{ display:flex; flex-direction:column; gap:2px; margin:12px 2px 0; font-size:13.5px; }
.vid-title span{ font-size:12.5px; color:var(--muted); }
.vid-list{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px; }
.vid-pick{ all:unset; cursor:pointer; flex:0 0 112px; display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); border-radius:10px; padding:4px; border:1px solid transparent; }
.vid-pick img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:7px; }
.vid-pick span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vid-pick.is-on{ border-color:var(--pink); color:var(--ivory); }

@media (max-width:1180px){ .dash-grid{ grid-template-columns:1fr 1fr; } .dash-grid .span-2{ grid-column:1 / -1; } }
@media (max-width:900px){
  .content{ padding:16px; }
  .topbar{ padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top)); }
  .dash-hero{ padding:18px; } .dash-hero h2{ font-size:20px; }
  .dash-hero-actions{ width:100%; } .dash-hero-actions .btn-quick{ flex:1; justify-content:center; min-width:0; padding:0 12px; font-size:13.5px; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .kpi{ padding:14px; gap:10px; } .kpi-ic{ width:38px; height:38px; } .kpi-value{ font-size:21px; }
  .dash-grid{ grid-template-columns:1fr; } .dash-grid .span-2{ grid-column:auto; }
  .nav-link.active::before{ left:-14px; }
}
@media (max-width:420px){ .kpi-grid{ grid-template-columns:1fr; } }