:root{
  --porcelain:#f9f7f3; --porcelain-2:#f2efe8;
  --forest:#142820; --forest-mid:#1e3828; --forest-soft:#2a4a38;
  --terra:#c4714a; --terra-dk:#b55e38;
  --teal:#3a8070; --teal-lt:#5fb09c;
  --sage:#edf0e8; --sage-line:#dbe0d4;
  --rose:#e8a0b4;
  --ink:#21302a; --muted:#6b7a72; --line:#d9d6cd;
  --ok:#2f7d4f; --green-row:#e7f1e3; --green-line:#bcd8b8;
  --shadow:0 8px 30px rgba(20,40,32,.10);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--porcelain);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Fraunces","Bodoni Moda",Georgia,serif;font-weight:600;color:var(--forest);margin:0}

/* ---------- auth (Zoom-style) ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.auth-card{width:100%;max-width:430px}
.auth-card h1{font-size:clamp(34px,6vw,48px);text-align:center;letter-spacing:-.5px;margin-bottom:28px}
.field{position:relative;margin-bottom:14px}
.field label{position:absolute;top:8px;left:16px;font-size:12px;color:var(--muted)}
.field input{
  width:100%;border:1.5px solid var(--line);border-radius:12px;
  padding:26px 16px 10px;font-size:16px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(58,128,112,.15)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border:0;border-radius:12px;padding:15px 18px;font-size:16px;font-weight:600;
  cursor:pointer;transition:transform .05s, background .15s, opacity .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--terra);color:#fff}
.btn-primary:hover{background:var(--terra-dk)}
.btn-ghost{background:#fff;color:var(--forest);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;margin:26px 0 18px}
.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}
.providers{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.prov{width:64px;text-align:center}
.prov a,.prov span{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 6px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;font-size:22px;
}
.prov.disabled span{opacity:.45}
.prov small{display:block;color:var(--muted);font-size:12px}
.prov a:hover{border-color:var(--teal);text-decoration:none}
.auth-foot{text-align:center;margin-top:22px;color:var(--muted);font-size:14px}
.error-msg{color:#b3261e;font-size:14px;min-height:18px;margin:2px 4px 8px}
.brandline{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;color:var(--muted);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.brandline .dot{width:8px;height:8px;border-radius:50%;background:var(--terra)}

/* ---------- app shell ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:var(--forest);color:#fff;
}
.topbar .logo{font-family:"Fraunces",serif;font-size:20px;color:#fff}
.topbar .logo b{color:var(--terra)}
.topbar nav{display:flex;align-items:center;gap:18px;font-size:14px}
.topbar nav a{color:#cfe0d8}
.topbar nav a:hover{color:#fff}
.container{max-width:1080px;margin:0 auto;padding:26px 20px 60px}
.page-title{font-size:clamp(26px,4vw,36px);margin-bottom:4px}
.page-sub{color:var(--muted);margin-bottom:22px}

/* ---------- booking grid (signature) ---------- */
.svc-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.svc{
  border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;
  cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px;
}
.svc[aria-selected="true"]{border-color:var(--teal);box-shadow:0 0 0 3px rgba(58,128,112,.14)}
.swatch{width:14px;height:14px;border-radius:4px;flex:none}
.party{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.party button{
  width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  font-weight:600;cursor:pointer;color:var(--forest)
}
.party button[aria-pressed="true"]{background:var(--forest);color:#fff;border-color:var(--forest)}
.party button[disabled]{opacity:.35;cursor:not-allowed}
.price-pill{margin-left:auto;background:var(--sage);border:1px solid var(--sage-line);
  border-radius:999px;padding:8px 16px;font-weight:600;color:var(--forest)}

.picker{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
@media(max-width:720px){.picker{grid-template-columns:1fr;gap:18px}}
.cal{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-title{font-family:"Fraunces",serif;font-size:18px;color:var(--forest)}
.cal-nav{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--line);background:#fff;
  color:var(--forest);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:border-color .12s,color .12s}
.cal-nav:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.cal-nav:disabled{opacity:.3;cursor:not-allowed}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-dow span{text-align:center;font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{position:relative;aspect-ratio:1;border:0;background:transparent;border-radius:10px;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;
  display:grid;place-items:center;transition:background .12s,color .12s}
.cal-day.empty{visibility:hidden}
.cal-day.off{color:#cdcabf;cursor:default}
.cal-day.avail:hover{background:var(--sage)}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--sage-line)}
.cal-day.sel{background:var(--forest);color:#fff}
.cal-day.sel .dot{background:#fff}
.cal-day .dot{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--terra)}
.cal-legend{display:flex;align-items:center;gap:7px;margin-top:14px;color:var(--muted);font-size:12px}
.cal-legend .dot{width:6px;height:6px;border-radius:50%;background:var(--terra);display:inline-block}
.times{min-height:220px}
.times-head{font-family:"Fraunces",serif;font-size:18px;color:var(--forest);margin-bottom:14px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.times-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px}
.time-pill{border:1.5px solid var(--sage-line);background:#fff;border-radius:10px;padding:13px 8px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--forest);cursor:pointer;
  transition:border-color .12s,background .12s,transform .05s}
.time-pill:hover{border-color:var(--teal);background:var(--sage)}
.time-pill:active{transform:translateY(1px)}
.times-empty{grid-column:1/-1;color:var(--muted);font-size:14px;padding:22px 4px}

/* ---------- tables / admin ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
@media(max-width:640px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stat .n{font-family:"Fraunces",serif;font-size:32px;color:var(--forest)}
.stat .l{color:var(--muted);font-size:13px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}
.card h3{margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--forest)}
.row-paid{background:var(--green-row)}

/* ---------- misc ---------- */
.notice{background:#fff;border:1px solid var(--line);border-left:4px solid var(--terra);
  border-radius:10px;padding:14px 16px;margin-bottom:18px;color:var(--ink)}
.modal-bg{position:fixed;inset:0;background:rgba(20,40,32,.45);display:none;place-items:center;z-index:50;padding:18px}
.modal-bg.show{display:grid}
.modal{background:#fff;border-radius:18px;max-width:460px;width:100%;padding:30px;text-align:center;box-shadow:var(--shadow)}
.modal h2{margin-bottom:10px}
.zelle-num{font-family:"Fraunces",serif;font-size:30px;color:var(--terra-dk);margin:10px 0}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- notification center ---------- */
.badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;
  background:var(--terra);color:#fff;font-size:11px;font-weight:700;text-align:center;
  line-height:16px;vertical-align:middle}
.topbar nav .badge{background:var(--terra)}
.alert-btn{font-family:inherit;font-size:13px;color:#cfe0d8;background:transparent;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 12px;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.alert-btn:hover{border-color:#fff;color:#fff}
.alert-btn.on{border-color:var(--teal-lt);color:var(--teal-lt)}
.nc{display:grid;grid-template-columns:260px 1fr;gap:16px;margin-top:14px;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:340px}
.nc-list{border-right:1px solid var(--line);background:var(--porcelain);
  max-height:460px;overflow-y:auto}
.nc-item{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .12s}
.nc-item:hover{background:#fff}
.nc-item.active{background:#fff;box-shadow:inset 3px 0 0 var(--teal)}
.nc-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nc-item-subj{font-weight:600;color:var(--forest);font-size:14px}
.nc-item-sub{color:var(--teal);font-size:12px;margin-top:1px}
.nc-item-last{color:var(--muted);font-size:12px;margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nc-view{display:flex;flex-direction:column;min-height:340px}
.nc-empty{color:var(--muted);font-size:14px;padding:26px;text-align:center;margin:auto}
.nc-subject{font-family:"Fraunces",serif;font-size:17px;color:var(--forest);
  padding:14px 16px;border-bottom:1px solid var(--line)}
.nc-resched{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--line);background:var(--porcelain)}
.nc-resched input{padding:7px 10px;border:1.5px solid var(--line);border-radius:9px;font-size:13px}
.nc-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
  max-height:380px}
.nc-msg{max-width:78%;display:flex;flex-direction:column}
.nc-msg.me{align-self:flex-end;align-items:flex-end}
.nc-msg.them{align-self:flex-start;align-items:flex-start}
.nc-msg.sys{align-self:center;align-items:center;max-width:92%}
.nc-who{font-size:11px;color:var(--muted);margin:0 4px 3px}
.nc-bubble{padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.45;
  white-space:pre-wrap;word-break:break-word}
.nc-msg.me .nc-bubble{background:var(--forest);color:#fff;border-bottom-right-radius:4px}
.nc-msg.them .nc-bubble{background:var(--porcelain-2);color:var(--ink);
  border:1px solid var(--line);border-bottom-left-radius:4px}
.nc-msg.sys .nc-bubble{background:var(--sage);color:var(--forest);border:1px solid var(--sage-line);
  font-size:13px;text-align:center;border-radius:10px}
.nc-time{font-size:11px;color:var(--muted);margin:3px 4px 0}
.nc-compose{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line);
  align-items:flex-end}
.nc-compose textarea{flex:1;border:1.5px solid var(--line);border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical;outline:none}
.nc-compose textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(58,128,112,.15)}
@media(max-width:680px){.nc{grid-template-columns:1fr}.nc-list{max-height:200px}}

/* =========================================================
   RESPONSIVE TOPBAR — mobile nav fix
   ========================================================= */
@media(max-width:768px){
  .topbar{
    flex-wrap:wrap;
    gap:10px;
    padding:12px 16px;
  }
  .topbar .logo{
    font-size:17px;
    flex:1 1 auto;
  }
  .topbar nav{
    width:100%;
    flex-wrap:wrap;
    gap:10px 14px;
    font-size:13px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .topbar nav a,
  .topbar nav span,
  .topbar nav button{
    white-space:nowrap;
  }
  /* Sign out always visible — bump to its own line if needed */
  .topbar nav a[href*="logout"]{
    margin-left:auto;
    color:#f9c4a4;
    font-weight:600;
  }
}

@media(max-width:480px){
  .topbar nav{
    gap:8px 12px;
    font-size:12px;
  }
  .topbar .logo{
    font-size:15px;
  }
}

/* Push / Enable alerts button — always visible on mobile */
.alert-btn{
  white-space:nowrap;
}
@media(max-width:768px){
  #pushBtn{
    display:inline-block !important; /* override inline display:none on mobile so user can tap */
    font-size:12px;
    padding:4px 10px;
  }
}

/* =========================================================
   BOOKING PAGE — small viewport fixes
   ========================================================= */
@media(max-width:600px){
  .svc-row{gap:8px}
  .svc{font-size:13px;padding:9px 12px}
  .party button{width:36px;height:36px;font-size:14px}
  .price-pill{font-size:14px;padding:7px 13px}
  .container{padding:18px 14px 60px}
  .page-title{font-size:22px}
}

/* =========================================================
   STAT GRID — 1 col on very small screens
   ========================================================= */
@media(max-width:400px){
  .stat-row{grid-template-columns:1fr}
}

/* =========================================================
   TABLE OVERFLOW — horizontal scroll on mobile
   ========================================================= */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{min-width:520px}

/* =========================================================
   MODAL — full width on mobile
   ========================================================= */
@media(max-width:500px){
  .modal{padding:22px 16px;border-radius:14px}
  .zelle-num{font-size:24px}
}

/* =========================================================
   BURGER MENU + RESPONSIVE TOPBAR (replaces old mobile nav)
   ========================================================= */

/* Desktop — burger hidden, nav inline */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 9px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

/* Nav — desktop stays as flex row */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--forest);
  color: #fff;
  position: relative;
}
.topbar .logo {
  font-family: "Fraunces", serif;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
  white-space: nowrap;
}
.topbar .logo b { color: var(--terra); }

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  flex-wrap: nowrap;
}
.topbar-nav a { color: #cfe0d8; white-space: nowrap; }
.topbar-nav a:hover { color: #fff; }
.topbar-name {
  color: #9fc;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.topbar-signout {
  color: #f9c4a4 !important;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Mobile ── */
@media (max-width: 768px) {

  /* Show burger, hide nothing else yet */
  .burger { display: flex; }

  /* Nav becomes a slide-down panel — hidden by default */
  .topbar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--forest-mid);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    z-index: 200;
    border-top: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }
  .topbar-nav.open { display: flex; }

  /* Each nav item gets a full-width tap target */
  .topbar-nav a,
  .topbar-nav .topbar-name,
  .topbar-nav .alert-btn,
  .topbar-nav .topbar-signout {
    width: 100%;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: 15px;
  }
  .topbar-nav a { color: #cfe0d8; }
  .topbar-nav .topbar-signout {
    color: #f9c4a4 !important;
    font-weight: 600;
  }
  .topbar-name {
    max-width: 100%;
    color: rgba(255,255,255,.45);
    font-size: 12px;
    padding: 10px 20px 4px;
  }
  .alert-btn {
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: #cfe0d8;
    font-family: inherit;
  }

  /* Prevent horizontal scroll — clip content to viewport */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .container { padding: 18px 14px 60px; }
  .topbar { padding: 12px 16px; }
}

/* ── Very small screens ── */
@media (max-width: 380px) {
  .topbar .logo { font-size: 16px; }
}

/* =========================================================
   GLOBAL HORIZONTAL SCROLL FIX
   ========================================================= */
html, body { overflow-x: hidden; }
.container { overflow-x: hidden; }