:root{
  --bg:#f6f5f1;
  --surface:#ffffff;
  --surface-2:#eeece4;
  --ink:#1c1a17;
  --ink-soft:#57534a;
  --ink-faint:#8d8778;
  --line:#e3e0d6;
  --line-strong:#d0cbbd;
  --accent:#2f4468;
  --accent-strong:#1f2f4d;
  --accent-tint:#e7eaf1;
  --on-accent:#f8f7f3;
  --good:#3f7a52;
  --good-bg:#e4efe6;
  --warn:#9a6a1f;
  --warn-bg:#f5ecd4;
  --critical:#a53a26;
  --critical-bg:#f6e3dd;
  --info:#33607e;
  --info-bg:#e3ecf1;
  --shadow:0 1px 2px rgba(34,26,18,.07), 0 10px 24px -14px rgba(34,26,18,.28);
  --radius:12px;
  --radius-sm:8px;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Manrope',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131210;
    --surface:#1c1a17;
    --surface-2:#211f1a;
    --ink:#f1eee7;
    --ink-soft:#b8b2a4;
    --ink-faint:#8a8476;
    --line:#332f27;
    --line-strong:#433e33;
    --accent:#8ea0c9;
    --accent-strong:#aebbdc;
    --accent-tint:#232b3d;
    --on-accent:#101420;
    --good:#71bd8b;
    --good-bg:rgba(113,189,139,.14);
    --warn:#e0b25a;
    --warn-bg:rgba(224,178,90,.14);
    --critical:#e8836a;
    --critical-bg:rgba(232,131,106,.14);
    --info:#7fb3d5;
    --info-bg:rgba(127,179,213,.14);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 26px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#131210;
  --surface:#1c1a17;
  --surface-2:#211f1a;
  --ink:#f1eee7;
  --ink-soft:#b8b2a4;
  --ink-faint:#8a8476;
  --line:#332f27;
  --line-strong:#433e33;
  --accent:#8ea0c9;
  --accent-strong:#aebbdc;
  --accent-tint:#232b3d;
  --on-accent:#101420;
  --good:#71bd8b;
  --good-bg:rgba(113,189,139,.14);
  --warn:#e0b25a;
  --warn-bg:rgba(224,178,90,.14);
  --critical:#e8836a;
  --critical-bg:rgba(232,131,106,.14);
  --info:#7fb3d5;
  --info-bg:rgba(127,179,213,.14);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 26px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:.2px;}
h1{text-wrap:balance;}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;font-size:14px;}
a{color:var(--accent-strong);}
[hidden]{display:none!important;}

.app{display:flex;min-height:100%;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:220px;flex:0 0 auto;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:18px 12px;
  gap:18px;
  position:sticky;top:0;
  height:100vh;height:100dvh;
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px;}
.brand-mark{font-size:22px;line-height:1;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.3px;}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--radius-sm);
  border:none;background:transparent;color:var(--ink-soft);
  font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;
  white-space:nowrap;
}
.nav-item .ic{width:18px;height:18px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;}
.nav-item .ic svg{width:17px;height:17px;}
.nav-item:hover{background:var(--surface-2);color:var(--ink);}
.nav-item.active{background:var(--accent-tint);color:var(--accent-strong);}
.nav-item .count{margin-left:auto;background:var(--critical);color:#fff;border-radius:99px;font-size:10.5px;font-weight:800;padding:1px 6px;}
.sidebar-foot{padding:8px;border-top:1px solid var(--line);padding-top:12px;color:var(--ink-faint);font-size:12px;display:flex;flex-direction:column;gap:8px;}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px 8px;gap:12px;flex-wrap:wrap;
}
.topbar .titlewrap{display:flex;flex-direction:column;gap:2px;min-width:0;}
.topbar .subtitle{color:var(--ink-faint);font-size:12.5px;}
.view{padding:14px 28px 48px;max-width:1180px;}

.banner{
  margin:0 28px 0;
  background:var(--accent-tint);border:1px solid var(--line-strong);
  color:var(--accent-strong);
  border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.banner.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn);}
.banner.critical{background:var(--critical-bg);color:var(--critical);border-color:var(--critical);}
.banner button{margin-left:auto;}

/* ---------- Buttons ---------- */
.btn{
  appearance:none;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);border-radius:var(--radius-sm);
  padding:9px 14px;font-size:13.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.btn:hover{border-color:var(--accent);color:var(--accent-strong);}
.btn:focus-visible, a:focus-visible, .nav-item:focus-visible, .cbar:focus-visible, .slot:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.btn-accent:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-soft);}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);}
.btn-danger{color:var(--critical);}
.btn-danger:hover{border-color:var(--critical);color:var(--critical);}
.btn-good{color:var(--good);}
.btn-good:hover{border-color:var(--good);color:var(--good);}
.btn-sm{padding:6px 10px;font-size:12.5px;border-radius:7px;}
.btn-block{width:100%;justify-content:center;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- Cards / stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
.stat-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:6px;
}
.stat-tile .lbl{font-size:12px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.stat-tile .val{font-family:var(--font-mono);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;}
.stat-tile .sub{font-size:12px;color:var(--ink-soft);}
.stat-tile.warn .val{color:var(--critical);}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;}
.card.warn{border-color:var(--warn);}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap;}
.card-head h2{font-size:16px;}
.card-body{padding:6px 8px 8px;}
.card-body.pad{padding:16px 18px;}

/* ---------- Lists ---------- */
.list{display:flex;flex-direction:column;}
.list-item{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-sm);
  cursor:default;
}
.list-item + .list-item{border-top:1px solid var(--line);}
.list-item.clickable{cursor:pointer;}
.list-item.clickable:hover{background:var(--surface-2);}
.li-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.li-title{font-weight:700;font-size:13.8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.li-sub{font-size:12.3px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.li-meta{text-align:right;display:flex;flex-direction:column;gap:2px;align-items:flex-end;flex:0 0 auto;}
.li-amount{font-family:var(--font-mono);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums;}
.li-time{font-family:var(--font-mono);font-size:16px;font-weight:600;width:56px;flex:0 0 auto;text-align:center;color:var(--accent-strong);}
.li-actions{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;}

.empty{padding:38px 20px;text-align:center;color:var(--ink-faint);}
.empty .ic{display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.empty .ic svg{width:28px;height:28px;}
.empty b{color:var(--ink-soft);display:block;font-size:13.5px;margin-bottom:3px;}

/* ---------- Badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap;}
.badge-good{background:var(--good-bg);color:var(--good);}
.badge-warn{background:var(--warn-bg);color:var(--warn);}
.badge-critical{background:var(--critical-bg);color:var(--critical);}
.badge-info{background:var(--info-bg);color:var(--info);}
.badge-neutral{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;}
.field label{font-size:12px;font-weight:700;color:var(--ink-soft);}
.field input,.field select,.field textarea{
  border:1px solid var(--line-strong);border-radius:8px;padding:9px 10px;
  background:var(--surface);color:var(--ink);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);}
.field .hint{font-size:11.5px;color:var(--ink-faint);}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;min-width:0;}
.radiogrp{display:flex;gap:8px;flex-wrap:wrap;}
.radiogrp label{
  border:1px solid var(--line-strong);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--ink-soft);
}
.radiogrp input{width:auto;}
.radiogrp input:checked + span{color:var(--accent-strong);}
.radiogrp label:has(input:checked){border-color:var(--accent);background:var(--accent-tint);color:var(--accent-strong);}
.formerr{color:var(--critical);font-size:12.5px;font-weight:600;min-height:16px;}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,15,9,.45);
  display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 16px;overflow-y:auto;z-index:50;
}
.modal{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  width:100%;max-width:460px;padding:22px;
}
.modal.wide{max-width:600px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-head h3{font-size:17px;}
.modal-close{background:none;border:none;font-size:18px;color:var(--ink-faint);cursor:pointer;line-height:1;padding:4px;}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}

/* ---------- Chart ---------- */
.chart{display:flex;align-items:flex-end;gap:10px;height:104px;padding:4px 2px 0;border-bottom:1px solid var(--line);}
.cbar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.cbar{
  width:100%;max-width:28px;border-radius:5px 5px 2px 2px;background:var(--accent-tint);
  border:none;cursor:pointer;position:relative;min-height:8px;
}
.cbar.today{background:var(--accent);}
.cbar-lbl{font-size:10.5px;color:var(--ink-faint);font-weight:600;}

/* ---------- Table-ish rows for stock ---------- */
.stockrow .qty{font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums;}

/* ---------- Login screen ---------- */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);}
.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 28px;}
.login-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px;}
.login-brand .brand-mark{font-size:30px;}
.login-brand .brand-name{font-family:var(--font-display);font-weight:700;font-size:24px;}
.login-sub{text-align:center;color:var(--ink-faint);font-size:12.5px;margin-bottom:22px;}

/* ---------- Public booking page ---------- */
.book-shell{max-width:560px;margin:0 auto;padding:20px 16px 60px;}
.book-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 0 22px;}
.book-head .brand-mark{font-size:34px;}
.book-head h1{font-size:22px;}
.steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:18px;}
.step-dot{width:7px;height:7px;border-radius:99px;background:var(--line-strong);}
.step-dot.active{background:var(--accent);}
.svc-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);cursor:pointer;margin-bottom:10px;width:100%;text-align:left;
}
.svc-card:hover{border-color:var(--accent);}
.svc-card .svc-name{font-weight:700;font-size:14.5px;}
.svc-card .svc-meta{font-size:12px;color:var(--ink-soft);}
.svc-card .svc-price{margin-left:auto;font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--accent-strong);flex:0 0 auto;}
.daystrip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;}
.day-pill{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid var(--line-strong);border-radius:12px;padding:10px 14px;background:var(--surface);cursor:pointer;
  min-width:56px;
}
.day-pill .dow{font-size:11px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;}
.day-pill .dnum{font-family:var(--font-mono);font-weight:700;font-size:16px;}
.day-pill.active{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-strong);}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;}
.slot{
  border:1px solid var(--line-strong);border-radius:9px;padding:10px 6px;background:var(--surface);
  font-family:var(--font-mono);font-weight:600;font-size:13.5px;cursor:pointer;text-align:center;
}
.slot:hover{border-color:var(--accent);}
.slot.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.slot[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through;}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.summary-row:last-child{border-bottom:none;}
.summary-row b{font-weight:700;}
.confirm-hero{text-align:center;padding:30px 10px;}
.confirm-hero .ic{font-size:44px;display:block;margin-bottom:10px;}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .app{flex-direction:column;}

  /* Slim top bar: just brand + language switch + logout. The tab nav itself
     lives in a fixed bar at the BOTTOM of the screen instead (thumb-reach,
     and it no longer eats into the content area while scrolling). */
  .sidebar{
    width:100%;height:auto;position:sticky;top:0;z-index:10;
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:10px 14px;gap:10px;
    border-right:none;border-bottom:1px solid var(--line);
  }
  .brand{flex:0 0 auto;}
  .brand-name{font-size:16px;}

  .sidebar-foot{
    border-top:none;padding:0;margin:0;
    flex-direction:row;align-items:center;gap:10px;
    flex:0 0 auto;width:auto;
  }
  .sidebar-foot #barberLabel{display:none;} /* saves space; page title already gives context */

  .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    flex-direction:row;flex:0 0 auto;
    background:var(--surface);border-top:1px solid var(--line);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 -2px 14px rgba(0,0,0,.18);
  }
  .nav-item{padding:8px 11px;position:relative;flex:0 0 auto;}
  .nav-item span:not(.ic):not(.count){display:none;}
  .nav-item .count{position:absolute;top:3px;right:5px;margin-left:0;}

  .topbar{padding:16px 16px 6px;}
  .view{padding:10px 16px calc(74px + env(safe-area-inset-bottom));}
  .banner{margin:0 16px 0;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .field-row{flex-direction:column;gap:0;}
  .list-item{flex-wrap:wrap;row-gap:8px;}
  .list-item > *{order:2;}
  .list-item .li-main{flex-basis:100%;order:1;}
  .list-item .li-actions{order:3;flex-basis:100%;justify-content:flex-end;flex-wrap:wrap;}
}
@media (max-width:420px){
  .stat-grid{grid-template-columns:1fr;}
}