/* ==========================================================================
   Luxe Booking — front-end dashboard
   Generated from the approved dashboard design, with every selector scoped
   under .lbd so the WordPress theme cannot bleed in and the dashboard
   cannot bleed out. Do not add unscoped rules to this file.
   ========================================================================== */

/* ==========================================================================
   The X Blend — barber appointment dashboard
   Desktop: fixed dark sidebar + content area.
   Mobile:  slide-out drawer + fixed bottom navigation.
   ========================================================================== */



.lbd{
  --gold:#c9922e;
  --gold-soft:#f3e2c0;
  --sidebar:#0e0e0e;
  --sidebar-2:#1a1a1a;

  --page:#f4f4f5;
  --card:#ffffff;

  --ink:#18181b;
  --ink-2:#52525b;
  --ink-3:#8b8b95;

  --line:#e7e7ea;
  --line-2:#f1f1f3;

  --amber:#d97706;  --amber-bg:#fef3c7;
  --violet:#6d28d9; --violet-bg:#ede9fe;
  --green:#059669;  --green-bg:#d1fae5;
  --red:#dc2626;    --red-bg:#fee2e2;

  --pending-ink:#b45309; --pending-bg:#fef3c7; --pending-bar:#f59e0b;
  --done-ink:#047857;    --done-bg:#d1fae5;    --done-bar:#10b981;
  --cancel-ink:#b91c1c;  --cancel-bg:#fee2e2;  --cancel-bar:#ef4444;

  --r:12px;
  --shadow:0 1px 2px rgba(24,24,27,.04),0 1px 3px rgba(24,24,27,.07);
  --shadow-lg:0 18px 44px rgba(24,24,27,.2);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --nav-h:64px;
}

.lbd *,.lbd *::before,.lbd *::after{box-sizing:border-box}

/* ==========================================================================
   Theme armour
   The dashboard's own rules are scoped to .lbd so they can't leak out into
   the site. This block handles the other direction: themes style bare
   elements globally ("button{white-space:nowrap}", uppercase buttons, tall
   line-heights, underlined links), and those rules inherit straight into
   here and break the layout. Everything below resets what themes most often
   set, at a low enough specificity that the component rules further down
   still win.
   ========================================================================== */
.lbd button,.lbd input,.lbd select,.lbd textarea,.lbd a,
.lbd span,.lbd p,.lbd b,.lbd i,.lbd em,.lbd small,.lbd dt,.lbd dd{
  white-space:normal;
  letter-spacing:normal;
  text-transform:none;
  font-family:inherit;
  max-width:100%;
}
.lbd button,.lbd input,.lbd select,.lbd textarea{
  line-height:normal;
  text-shadow:none;
  float:none;
}
.lbd a{text-decoration:none;box-shadow:none}
.lbd a:hover{text-decoration:none}
.lbd h1,.lbd h2,.lbd h3,.lbd h4{
  font-family:inherit;letter-spacing:-.02em;text-transform:none;margin:0;
}
/* Long words and unbroken strings (emails, long service names) wrap instead
   of pushing the layout wider than its container. */
.lbd .modal__panel,.lbd .bk,.lbd .sc,.lbd .bp,.lbd .panel,.lbd .empty{
  overflow-wrap:break-word;
}
/* A grid or flex child defaults to min-width:auto, which refuses to shrink
   below its content and is the usual cause of a stray sideways scrollbar. */
.lbd .bd,.lbd .choice__i,.lbd .bpick__i,.lbd .sc,.lbd .bp,.lbd .stat,.lbd .bk__head{
  min-width:0;
}
.lbd .modal__panel{overflow-x:hidden}
.lbd{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.lbd h1,.lbd h2,.lbd h3,.lbd h4,.lbd p,.lbd dl,.lbd dd,.lbd ul,.lbd li{margin:0;padding:0;list-style:none}
.lbd a{color:inherit;text-decoration:none}
.lbd button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.lbd :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.lbd .num{font-variant-numeric:tabular-nums}
.lbd .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.lbd svg{flex:0 0 auto}
/* ---------- Sidebar ---------- */




.lbd .side{
  position:fixed;inset:0 auto 0 0;width:268px;z-index:60;
  background:var(--sidebar);color:#fff;
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.8,.3,1);
}
.lbd .side.open{transform:translateX(0)}

.lbd .brand{display:flex;align-items:center;gap:11px;padding:22px 20px 20px}
.lbd .brand__mark{width:38px;height:38px;color:var(--gold)}
.lbd .brand__t{font-size:15.5px;font-weight:800;letter-spacing:.03em;line-height:1;white-space:nowrap}
.lbd .brand__s{font-size:9.5px;font-weight:600;letter-spacing:.24em;color:var(--gold);margin-top:4px}

.lbd .nav{padding:8px 12px;display:grid;gap:3px;align-content:start;flex:1;overflow-y:auto}
.lbd .nav__i{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 11px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:#a1a1aa;text-align:left;white-space:nowrap;
  min-width:0;
  transition:background .15s ease,color .15s ease;
}
.lbd .nav__i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lbd .nav__i:hover{background:var(--sidebar-2);color:#fff}
.lbd .nav__i[aria-current="true"]{background:var(--gold);color:#1a1204;font-weight:600}
.lbd .nav__n{margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:999px}
.lbd .nav__i[aria-current="true"] .nav__n{background:rgba(0,0,0,.16)}

.lbd .who{display:flex;align-items:center;gap:11px;margin:8px 12px 16px;padding:12px;border-top:1px solid #262626}
.lbd .who__a{width:38px;height:38px;border-radius:50%;background:var(--gold);color:#1a1204;display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 auto}
.lbd .who__n{font-size:14px;font-weight:600}
.lbd .who__r{font-size:11.5px;color:#8b8b95}

.lbd .veil{position:fixed;inset:0;background:rgba(9,9,11,.5);z-index:55;opacity:0;visibility:hidden;transition:.2s}
.lbd .veil.on{opacity:1;visibility:visible}
/* ---------- Shell ---------- */




.lbd .main{min-height:100vh;padding-bottom:calc(var(--nav-h) + 18px)}
.lbd .pad{padding:0 16px}

.lbd .top{
  position:sticky;top:0;z-index:40;
  background:rgba(244,244,245,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:14px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.lbd .burger{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink-2)}
.lbd .burger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.lbd .hello{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.lbd .hello span{display:none}
.lbd .hello__s{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.lbd .top__gap{flex:1}

.lbd .bell{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink-2)}
.lbd .bell svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lbd .bell b{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:999px;
  background:var(--amber);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;padding:0 5px;border:2px solid var(--page);
}

.lbd .bell.is-busy svg{animation:lbd-spin .7s linear infinite}
@keyframes lbd-spin{to{transform:rotate(360deg)}}

.lbd .notif-wrap{position:relative}
.lbd .notif{
  position:absolute;top:48px;right:0;z-index:60;width:min(320px,88vw);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.lbd .notif[hidden]{display:none}
.lbd .notif__h{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-2);
  font-size:13.5px;font-weight:700;
}
.lbd .notif__h .linkbtn{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.lbd .ni{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line-2);text-align:left;width:100%}
.lbd .ni:last-child{border-bottom:0}
.lbd .ni:hover{background:var(--surface-2, #fafafa)}
.lbd .ni__d{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:5px;flex:0 0 auto}
.lbd .ni.read .ni__d{background:var(--line)}
.lbd .ni > span:last-child{display:block;min-width:0}
.lbd .ni__t{display:block;font-size:13.5px;font-weight:600;line-height:1.35}
.lbd .ni__s{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.lbd .ni__w{display:block;font-size:11px;color:var(--ink-3);margin-top:4px;opacity:.8}
/* ---------- Stat tiles ---------- */




.lbd .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;padding:16px 16px 0}
.lbd .stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;
}
.lbd .stat__i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.lbd .stat__i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lbd .stat__v{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.lbd .stat__k{font-size:12px;color:var(--ink-3);margin-top:1px}
.lbd .i-amber{background:var(--amber-bg);color:var(--amber)}
.lbd .i-violet{background:var(--violet-bg);color:var(--violet)}
.lbd .i-green{background:var(--green-bg);color:var(--green)}
.lbd .i-red{background:var(--red-bg);color:var(--red)}
/* ---------- Tabs ---------- */




.lbd .tabs{margin-top:18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.lbd .tabs::-webkit-scrollbar{display:none}

/* The strip hides its scrollbar, which is right on touch but leaves a mouse
   with no way to move it — a wheel scrolls vertically, and there's no bar to
   drag. The script adds wheel and drag scrolling; these rules supply the
   matching affordances: a soft fade on whichever side has more tabs, and a
   grab cursor once the strip actually overflows. */
.lbd .tabs{overscroll-behavior-x:contain}
.lbd .tabs.is-scrollable{cursor:grab}
.lbd .tabs.is-scrollable.is-dragging{cursor:grabbing;user-select:none}
.lbd .tabs.is-scrollable.has-more-right{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent 100%);
}
.lbd .tabs.is-scrollable.has-more-left{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px);
  mask-image:linear-gradient(90deg,transparent 0,#000 44px);
}
.lbd .tabs.is-scrollable.has-more-left.has-more-right{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
}
.lbd .tabs.is-dragging .tab{pointer-events:none}
.lbd .tabs__in{display:flex;gap:4px;padding:0 16px;min-width:max-content}
.lbd .tab{
  position:relative;padding:12px 12px 13px;
  font-size:14.5px;font-weight:500;color:var(--ink-3);white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
}
.lbd .tab[aria-selected="true"]{color:var(--ink);font-weight:600}
.lbd .tab[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2.5px;background:var(--ink);border-radius:3px}
.lbd .tab__n{font-size:11.5px;font-weight:700;background:var(--line);color:var(--ink-2);padding:2px 7px;border-radius:999px}
.lbd .tab[aria-selected="true"] .tab__n{background:var(--ink);color:#fff}
/* ---------- Filters ---------- */




.lbd .filters{display:flex;flex-wrap:wrap;gap:9px;padding:16px}
.lbd .filters > select{flex:1 1 130px;min-width:0}
.lbd .frow{display:flex;gap:9px;flex:1 1 100%;min-width:0}
.lbd .frow .f-search{flex:1 1 auto;min-width:0}
/* On a phone the date filter collapses to a tappable calendar icon. */



.lbd .dfield{position:relative;flex:0 0 46px;height:44px}
.lbd .dfield input[type=date]{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;color:transparent;background:var(--card);
}
.lbd .dfield input[type=date]::-webkit-datetime-edit{color:transparent}
.lbd .dfield input[type=date]::-webkit-calendar-picker-indicator{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
.lbd .dfield__i{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--ink-3);pointer-events:none;
}
.lbd .dfield__i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lbd .dfield.set input[type=date]{border-color:var(--ink)}
.lbd .dfield.set .dfield__i{color:var(--ink)}
.lbd .dfield.set::after{
  content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--gold);border:1.5px solid var(--card);
}
.lbd select,.lbd input[type=date],.lbd input[type=search]{
  width:100%;min-height:44px;padding:10px 13px;
  border:1px solid var(--line);border-radius:10px;background-color:var(--card);
  font-family:var(--sans);font-size:15px;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.lbd select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%238b8b95' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;
  /* Category names run long ("ALL HAIRCUT SERVICES"); trail off rather than
     sit clipped mid-word behind the arrow. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lbd input:focus,.lbd select:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(24,24,27,.07)}
.lbd .f-wide{grid-column:1/-1}
.lbd .f-search{position:relative;grid-column:1/-1}
.lbd .f-search input{padding-right:44px}
.lbd .f-search__i{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);display:grid}
.lbd .f-search__i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.lbd .f-clear{
  grid-column:1/-1;min-height:44px;border-radius:10px;background:var(--ink);color:#fff;
  font-size:14.5px;font-weight:600;display:none;align-items:center;justify-content:center;gap:8px;
}
.lbd .f-clear.on{display:flex}

.lbd .rrow{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px 2px}
.lbd .rchip{
  display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:0 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);
  font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;
}
.lbd .rchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.lbd .rchip[aria-pressed="true"] .tab__n{background:rgba(255,255,255,.22);color:#fff}
/* ---------- Day heading ---------- */




.lbd .day{
  display:flex;align-items:baseline;gap:10px;
  padding:6px 16px 10px;
}
.lbd .day__t{font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.01em}
.lbd .day__n{font-size:12px;color:var(--ink-3);margin-left:auto}
/* ---------- Booking card ---------- */




.lbd .list{display:grid;gap:11px;padding:0 16px}

.lbd .bk{
  background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--pending-bar);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
}
.lbd .bk.st-completed{border-left-color:var(--done-bar)}
.lbd .bk.st-cancelled{border-left-color:var(--cancel-bar)}
.lbd .bk.st-cancelled{opacity:.78}

.lbd .bk__head{
  display:grid;grid-template-columns:1fr auto;
  gap:8px 10px;padding:10px 12px;align-items:center;
}
.lbd .bk__head > .tm{grid-column:1;grid-row:1;justify-self:start}
.lbd .bk__head > .stk{grid-column:2;grid-row:1;justify-self:end}
.lbd .bk__head > .bd{grid-column:1/-1;grid-row:2}
.lbd .bk__head > .who-row{grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;gap:6px}

.lbd .tm{
  display:inline-flex;align-items:baseline;gap:4px;
  background:var(--ink);color:#fff;border-radius:8px;
  padding:5px 9px;white-space:nowrap;
}
.lbd .tm__h{font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.lbd .tm__sep{font-size:12px;opacity:.65}

.lbd .bd{min-width:0}
.lbd .bd__svc{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.lbd .bd__svc em{font-style:normal;color:var(--ink-3);font-weight:600}
.lbd .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.lbd .chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--ink-2);
  background:var(--line-2);border:1px solid var(--line);
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}
.lbd .chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lbd .chip--n{background:var(--violet-bg);border-color:transparent;color:var(--violet)}
.lbd .bd__who{font-size:14px;color:var(--ink);margin-top:4px;font-weight:600;letter-spacing:-.01em}
.lbd .bd__who b{font-weight:600;color:var(--ink)}

.lbd .pill{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.lbd .st-pending .pill{background:var(--pending-bg);color:var(--pending-ink)}
.lbd .st-completed .pill{background:var(--done-bg);color:var(--done-ink)}
.lbd .st-cancelled .pill{background:var(--cancel-bg);color:var(--cancel-ink)}
/* actions */



.lbd .bk__acts{display:grid;grid-template-columns:1fr 1fr auto auto;gap:7px;padding:0 12px 11px}
.lbd .who-row .chip{background:var(--card)}
.lbd .act{
  min-height:38px;padding:0 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);
  font-size:13.5px;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background .15s ease,transform .08s ease;
}
.lbd .act:active{transform:scale(.98)}
.lbd .act svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lbd .act--ok{color:var(--done-ink);border-color:#a7f3d0;background:#f0fdf9}
.lbd .act--ok:hover{background:var(--done-bg)}
.lbd .act--no{color:var(--cancel-ink);border-color:#fecaca;background:#fffafa}
.lbd .act--no:hover{background:var(--cancel-bg)}
.lbd .act--back{grid-column:span 2}
.lbd .act--rs{width:38px;padding:0}
.lbd .act--rs span{display:none}

/* An appointment with nobody recorded against it is missing from the barber
   filter and from everyone's statistics, so the button that fixes it is
   given a nudge rather than sitting quietly next to the others. */
.lbd .act--needs{color:var(--gold-ink,#8a6516);border-color:var(--gold-soft,#f0dfb6);background:#fffdf6}
.lbd .act--needs:hover{background:#fdf8ec}
.lbd .act--exp{width:38px;padding:0;color:var(--ink-3)}
.lbd .act--exp svg{transition:transform .2s ease}
.lbd .act--exp[aria-expanded="true"] svg{transform:rotate(180deg)}
/* expanded */



.lbd .bk__more{border-top:1px solid var(--line-2);background:#fafafa;padding:13px 14px}
.lbd .bk__more[hidden]{display:none}
.lbd .svcs{display:grid;gap:6px;margin-bottom:12px}
.lbd .svcs__r{display:flex;gap:10px;font-size:13.5px;color:var(--ink-2)}
.lbd .svcs__r span:first-child{flex:1;min-width:0;color:var(--ink);font-weight:500}
.lbd .svcs__r i{font-style:normal;color:var(--ink-3);white-space:nowrap}
.lbd .svcs__t{
  display:flex;gap:10px;margin-top:4px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:14.5px;font-weight:700;
}
.lbd .svcs__t span:last-child{margin-left:auto;color:var(--gold)}

.lbd .kv{display:grid;grid-template-columns:76px 1fr;gap:9px 12px;font-size:14px}
.lbd .kv dt{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.lbd .kv dd{font-weight:500;word-break:break-word}
.lbd .kv dd a{color:var(--ink);border-bottom:1px solid var(--line)}
.lbd .msg{
  margin-top:12px;padding:10px 12px;background:var(--card);
  border:1px solid var(--line-2);border-left:3px solid var(--gold);border-radius:0 9px 9px 0;
  font-size:13.5px;color:var(--ink-2);
}
.lbd .msg b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}

.lbd .flag{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--cancel-ink);background:var(--cancel-bg);padding:3px 8px;border-radius:6px}
/* ---------- Empty ---------- */




.lbd .empty{margin:0 16px;text-align:center;padding:44px 24px;color:var(--ink-3);background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}
.lbd .empty b{display:block;font-size:17px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.lbd .empty p{font-size:14px}

.lbd .foot{padding:16px;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.lbd .foot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
/* ---------- Barber statistics ---------- */




.lbd .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin:0 16px 12px}
.lbd .panel__t{font-size:15px;font-weight:700;letter-spacing:-.01em}
.lbd .panel__s{font-size:12.5px;color:var(--ink-3);margin-top:2px}

.lbd .top-barber{display:flex;align-items:center;gap:13px;margin-top:14px;padding:13px;border-radius:10px;background:linear-gradient(180deg,#fffdf6,#fff);border:1px solid var(--gold-soft)}
.lbd .top-barber__a{width:44px;height:44px;border-radius:50%;background:var(--gold);color:#1a1204;display:grid;place-items:center;font-weight:800;font-size:15px;flex:0 0 auto}
.lbd .top-barber__n{font-size:16px;font-weight:700}
.lbd .top-barber__m{font-size:12.5px;color:var(--ink-3)}
.lbd .top-barber__b{margin-left:auto;text-align:right}
.lbd .top-barber__b b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em}
.lbd .top-barber__b span{font-size:11px;color:var(--ink-3)}

.lbd .bars{display:grid;gap:13px;margin-top:16px}
.lbd .bar__h{display:flex;align-items:baseline;gap:8px;font-size:13.5px;margin-bottom:5px}
.lbd .bar__h b{font-weight:600}
.lbd .bar__h span{margin-left:auto;color:var(--ink-3);font-size:12.5px}
.lbd .bar__t{height:9px;border-radius:999px;background:var(--line-2);overflow:hidden}
.lbd .bar__f{height:100%;border-radius:999px;background:var(--gold);transition:width .5s cubic-bezier(.2,.8,.3,1)}

.lbd .bstats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:0 16px 12px}
.lbd .bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px}
.lbd .bcard__h{display:flex;align-items:center;gap:10px}
.lbd .bcard__a{width:36px;height:36px;border-radius:50%;background:var(--line-2);color:var(--ink-2);display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto}
.lbd .bcard__n{font-size:14.5px;font-weight:700}
.lbd .bcard__g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;text-align:center}
.lbd .bcard__g div{background:var(--line-2);border-radius:9px;padding:8px 4px}
.lbd .bcard__g b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
.lbd .bcard__g span{font-size:10.5px;color:var(--ink-3);font-weight:600;letter-spacing:.03em}
.lbd .bcard__f{margin-top:10px;font-size:13px;color:var(--ink-3);display:flex}
.lbd .bcard__f b{margin-left:auto;color:var(--gold);font-weight:700}
/* ---------- Barber avatars ---------- */





.lbd .ava{
  border-radius:50%;overflow:hidden;flex:0 0 auto;
  display:grid;place-items:center;
  font-weight:700;color:#fff;letter-spacing:-.01em;
  background:var(--ink-3);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.lbd .ava img{width:100%;height:100%;object-fit:cover;display:block}
.lbd .ava--xs{width:22px;height:22px;font-size:9.5px}
.lbd .ava--sm{width:30px;height:30px;font-size:11.5px}
.lbd .ava--md{width:44px;height:44px;font-size:15px}
.lbd .ava--lg{width:66px;height:66px;font-size:22px;box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--gold-soft)}
.lbd .c-1{background:#8b5cf6}.lbd .c-2{background:#0ea5e9}.lbd .c-3{background:#f59e0b}
.lbd .c-4{background:#10b981}.lbd .c-5{background:#ec4899}.lbd .c-6{background:#6366f1}

.lbd .chip--b{padding-left:3px;gap:6px}
.lbd .chip--why{background:var(--cancel-bg);border-color:transparent;color:var(--cancel-ink)}
/* ---------- Barber management ---------- */




.lbd .bman{display:grid;gap:11px;margin:0 16px 14px}
.lbd .bman__bar{display:grid;grid-template-columns:1fr;gap:9px}
.lbd .bman__bar .f-search{grid-column:auto}

.lbd .bgrid{display:grid;grid-template-columns:1fr;gap:11px}
.lbd .bp{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px;text-align:left;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.lbd .bp:hover{border-color:var(--ink-3)}
.lbd .bp[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,146,46,.14)}
.lbd .bp__h{display:flex;align-items:center;gap:12px}
.lbd .bp__n{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.lbd .bp__r{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.lbd .bp__badge{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--line-2);color:var(--ink-2)}
.lbd .bp__badge.on{background:var(--gold);color:#1a1204}
.lbd .bp__g{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:13px;text-align:center}
.lbd .bp__g div{background:var(--line-2);border-radius:9px;padding:8px 2px}
.lbd .bp__g b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
.lbd .bp__g span{font-size:9.5px;color:var(--ink-3);font-weight:700;letter-spacing:.04em}
.lbd .bp__next{margin-top:11px;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.lbd .bp__next svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.lbd .bhead{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px;margin:0 16px 12px;
}
.lbd .bhead__n{font-size:19px;font-weight:700;letter-spacing:-.02em}
.lbd .bhead__r{font-size:13px;color:var(--ink-3)}
.lbd .bhead__b{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.lbd .pstats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:0 16px 14px;
}
.lbd .pstats div{
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow);padding:12px 10px;text-align:center;
}
.lbd .pstats b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.lbd .pstats span{font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-3)}
/* ---------- Reschedule modal ---------- */




.lbd .modal{position:fixed;inset:0;z-index:90;display:none}
.lbd .modal.on{display:block}
.lbd .modal__veil{position:absolute;inset:0;background:rgba(9,9,11,.55)}
.lbd .modal__panel{
  position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow-y:auto;
  background:var(--card);border-radius:18px 18px 0 0;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);
  animation:lbd-rise .22s ease-out;
}
@keyframes lbd-rise{from{transform:translateY(22px);opacity:0}}
.lbd .modal__grab{width:38px;height:4px;border-radius:999px;background:var(--line);margin:6px auto 14px}
.lbd .modal__t{font-size:18px;font-weight:700;letter-spacing:-.02em}
.lbd .modal__s{font-size:13px;color:var(--ink-3);margin-top:2px}
.lbd .modal__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;color:var(--ink-3);display:grid;place-items:center}
.lbd .modal__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.lbd .fld{margin-top:14px}
.lbd .fld__l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}

.lbd .bpick{display:grid;gap:7px}
.lbd .bpick__i{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--card);
  font-size:14px;font-weight:500;
}
.lbd .bpick__i[aria-pressed="true"]{border-color:var(--gold);background:#fffdf6;box-shadow:0 0 0 3px rgba(201,146,46,.12)}
.lbd .bpick__i small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:500}
.lbd .bpick__i .tag{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3)}

.lbd .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lbd .slot{
  min-height:42px;border:1px solid var(--line);border-radius:9px;background:var(--card);
  font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
}
.lbd .slot i{font-style:normal;font-size:11px;font-weight:600;color:var(--ink-3)}
.lbd .slot[aria-pressed="true"] i{color:rgba(255,255,255,.7)}
.lbd .slot:hover:not([disabled]){border-color:var(--ink-3)}
.lbd .slot[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.lbd .slot[disabled]{opacity:.34;cursor:not-allowed;text-decoration:line-through}
.lbd .slot--none{grid-column:1/-1;padding:16px;text-align:center;font-size:13.5px;color:var(--ink-3);border:1px dashed var(--line);border-radius:10px}

.lbd .rs-sum{
  margin-top:16px;padding:13px;border-radius:11px;
  background:#fafafa;border:1px solid var(--line);
  display:grid;gap:9px;
}
.lbd .rs-row{display:flex;align-items:center;gap:10px;font-size:13.5px}
.lbd .rs-row__k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);min-width:44px}
.lbd .rs-row b{font-weight:600}
.lbd .rs-arrow{display:flex;justify-content:center;color:var(--ink-3)}
.lbd .rs-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lbd .rs-warn{
  margin-top:12px;padding:10px 12px;border-radius:9px;font-size:13px;
  background:var(--cancel-bg);color:var(--cancel-ink);border:1px solid #fecaca;
}
.lbd .rs-ok{background:var(--done-bg);color:var(--done-ink);border-color:#a7f3d0}

.lbd .modal__acts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.lbd .mbtn{min-height:46px;border-radius:10px;font-size:14.5px;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--ink-2)}
.lbd .mbtn--go{background:var(--ink);border-color:var(--ink);color:#fff}
.lbd .mbtn--go[disabled]{opacity:.4;cursor:not-allowed}

.lbd .stk{display:inline-flex;align-items:center;gap:6px}
.lbd .moved,.lbd .hasmsg{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--violet-bg);color:var(--violet);flex:0 0 auto;
}
.lbd .hasmsg{background:#fdf3e0;color:#a06a08}
.lbd .hasmsg svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lbd .act--exp{position:relative}
.lbd .act--exp.has-note::after{
  content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
  background:var(--gold);border:1.5px solid var(--card);
}
.lbd .moved svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ---------- Availability chips ---------- */





.lbd .av{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.lbd .av::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.lbd .av-on{background:var(--done-bg);color:var(--done-ink)}
.lbd .av-off{background:var(--line-2);color:var(--ink-2)}
.lbd .av-leave{background:var(--violet-bg);color:var(--violet)}
.lbd .av-unavailable{background:var(--pending-bg);color:var(--pending-ink)}
.lbd .av-inactive{background:var(--cancel-bg);color:var(--cancel-ink)}

.lbd .is-off{opacity:.55;filter:grayscale(.55)}
/* ---------- Workload strip inside a barber profile ---------- */




.lbd .wl{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 16px 14px}
.lbd .wl button{
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow);padding:12px 10px;text-align:center;
}
.lbd .wl button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 3px rgba(24,24,27,.08)}
.lbd .wl b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.lbd .wl span{font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-3)}

.lbd .banner{
  margin:0 16px 12px;padding:13px 15px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.lbd .banner__t{font-size:13.5px;color:var(--ink-2)}
.lbd .banner__t b{font-weight:700;color:var(--ink)}
.lbd .banner .act{margin-left:auto}
/* ---------- Staff ---------- */




.lbd .sgrid{display:grid;grid-template-columns:1fr;gap:11px;margin:0 16px 14px}
.lbd .sc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:15px;
}
.lbd .sc__h{display:flex;align-items:center;gap:12px}
.lbd .sc__n{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.lbd .sc__r{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.lbd .sc__hours{margin-top:12px;display:grid;gap:5px}
.lbd .sc__d{display:flex;gap:10px;font-size:12.5px;color:var(--ink-2)}
.lbd .sc__d span:first-child{width:38px;color:var(--ink-3);font-weight:600}
.lbd .sc__d b{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.lbd .sc__d.rest b{color:var(--ink-3);font-weight:500}
.lbd .sc__b{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.lbd .sc__b .act{flex:1 1 auto}

.lbd .addstaff{
  width:calc(100% - 32px);margin:0 16px 16px;min-height:48px;border-radius:var(--r);
  border:1px dashed var(--ink-3);background:var(--card);color:var(--ink-2);
  font-size:14.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;
}
.lbd .addstaff:hover{border-color:var(--ink);color:var(--ink)}
.lbd .addstaff svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* scheduling: one block per day, any number of shifts inside it */



.lbd .days{display:grid;gap:9px}
.lbd .dayblk{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:var(--card)}
.lbd .dayblk.off{background:var(--line-2);border-style:dashed}
.lbd .dayblk__h{display:flex;align-items:center;gap:10px}
.lbd .dayblk__d{font-size:13.5px;font-weight:700}
.lbd .dayblk__o{font-size:12px;color:var(--ink-3)}
.lbd .dayblk__h .tog{margin-left:auto}

.lbd .shrow{display:grid;grid-template-columns:1fr auto 1fr auto;gap:7px;align-items:center;margin-top:9px}
.lbd .shrow__to{font-size:12px;color:var(--ink-3)}
.lbd .shrow input[type=time]{min-height:40px;padding:6px 9px;font-size:14px}
.lbd .shrow__x{width:40px;padding:0;min-height:40px}

.lbd .addshift{
  margin-top:9px;width:100%;min-height:38px;border-radius:9px;
  border:1px dashed var(--line);background:transparent;color:var(--ink-2);
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;
}
.lbd .addshift:hover{border-color:var(--ink-3);color:var(--ink)}
.lbd .addshift svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
/* removal choices */



.lbd .choice{display:grid;gap:10px;margin-top:16px}
.lbd .choice__i{
  position:relative;display:block;text-align:left;width:100%;
  border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--card);
}
.lbd .choice__i:hover{border-color:var(--ink);background:#fafafa}
.lbd .choice__t{display:block;font-size:14.5px;font-weight:700}
.lbd .choice__s{display:block;font-size:13px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.lbd .choice__tag{
  position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:var(--done-bg);color:var(--done-ink);padding:3px 8px;border-radius:999px;
}
.lbd .choice__i:last-child:hover{border-color:var(--cancel-bar);background:#fffafa}
.lbd .tog{
  width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;
  flex:0 0 auto;transition:background .18s ease;
}
.lbd .tog::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s ease;
}
.lbd .tog[aria-pressed="true"]{background:var(--done-bar)}
.lbd .tog[aria-pressed="true"]::after{transform:translateX(18px)}

.lbd .photo-row{display:flex;align-items:center;gap:14px}
.lbd .photo-row input[type=file]{font-size:13px}
/* ---------- Customer booking preview ---------- */




.lbd .bkflow{margin:0 16px 14px;display:grid;gap:11px}
.lbd .pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px;
}
.lbd .pcard__t{font-size:15px;font-weight:700;letter-spacing:-.01em}
.lbd .pcard__s{font-size:12.5px;color:var(--ink-3);margin-top:2px}

.lbd .svcpick{display:grid;gap:7px;margin-top:12px}
.lbd .svcpick button{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;background:var(--card);font-size:14px;text-align:left;
}
.lbd .svcpick button[aria-pressed="true"]{border-color:var(--ink);background:#fafafa}
.lbd .svcpick .tick{
  width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line);flex:0 0 auto;
  display:grid;place-items:center;color:transparent;
}
.lbd .svcpick button[aria-pressed="true"] .tick{background:var(--ink);border-color:var(--ink);color:#fff}
.lbd .svcpick .tick svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lbd .svcpick .meta{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap}

.lbd .bchoose{display:grid;gap:9px;margin-top:12px}
.lbd .bchoose__i{
  display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;
  padding:12px;background:var(--card);text-align:left;width:100%;
}
.lbd .bchoose__i.is-on{border-color:var(--gold);background:#fffdf6;box-shadow:0 0 0 3px rgba(201,146,46,.12)}
.lbd .bchoose__meta{min-width:0;flex:1}
.lbd .bchoose__n{font-size:14.5px;font-weight:700;line-height:1.25}
.lbd .bchoose__r{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
.lbd .bchoose__x{margin-left:auto;text-align:right;display:grid;gap:6px;justify-items:end}
.lbd .linkbtn{
  font-size:12px;font-weight:700;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;
}
.lbd .cart{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--line);font-size:14px;
}
.lbd .cart b{font-weight:700}
.lbd .cart .sum{margin-left:auto;font-weight:700;color:var(--gold)}
/* ---------- Bottom nav (mobile) ---------- */




.lbd .bnav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--nav-h);
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
.lbd .bnav__i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--ink-3)}
.lbd .bnav__i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lbd .bnav__i[aria-current="true"]{color:var(--gold)}
/* ---------- Toast ---------- */




.lbd .toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px);transform:translate(-50%,180%);z-index:80;
  background:var(--ink);color:#fff;padding:11px 14px 11px 18px;border-radius:999px;
  font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:12px;max-width:92vw;
  visibility:hidden;opacity:0;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),opacity .2s,visibility .25s;
}
.lbd .toast.up{transform:translate(-50%,0);visibility:visible;opacity:1}
.lbd .toast button{font-size:13px;font-weight:700;background:rgba(255,255,255,.17);padding:5px 11px;border-radius:999px}
/* ==========================================================================
   Tablet
   ========================================================================== */




@media (min-width:680px){
  .lbd .stats{grid-template-columns:repeat(4,1fr);padding:20px 24px 0}
  .lbd .top,.lbd .tabs__in,.lbd .filters,.lbd .list,.lbd .day,.lbd .foot,.lbd .empty,.lbd .panel,.lbd .bstats,.lbd .rrow{padding-left:24px;padding-right:24px}
  .lbd .empty,.lbd .panel{margin-left:24px;margin-right:24px;padding-left:24px;padding-right:24px}
  .lbd .bstats{grid-template-columns:repeat(2,1fr)}
  .lbd .bgrid{grid-template-columns:repeat(2,1fr)}
  .lbd .sgrid{grid-template-columns:repeat(2,1fr);margin-left:24px;margin-right:24px}
  .lbd .wl{grid-template-columns:repeat(3,1fr);margin-left:24px;margin-right:24px}
  .lbd .banner,.lbd .bkflow{margin-left:24px;margin-right:24px}
  .lbd .addstaff{width:calc(100% - 48px);margin-left:24px;margin-right:24px}
  .lbd .svcpick{grid-template-columns:repeat(2,1fr)}
  .lbd .bchoose{grid-template-columns:repeat(2,1fr)}
  .lbd .pstats{grid-template-columns:repeat(5,1fr);margin-left:24px;margin-right:24px}
  .lbd .bman{margin-left:24px;margin-right:24px}
  .lbd .bhead{margin-left:24px;margin-right:24px}
  .lbd .bman__bar{grid-template-columns:1.4fr 1fr auto}
  .lbd .slots{grid-template-columns:repeat(4,1fr)}
  .lbd .bpick{grid-template-columns:repeat(2,1fr)}
  .lbd .modal__panel{
    left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(620px,92vw);border-radius:16px;max-height:88vh;padding:22px 24px 24px;
  }
  .lbd .modal__grab{display:none}
  .lbd .modal__acts{justify-content:end;grid-template-columns:auto auto}
  .lbd .mbtn{padding:0 22px}
  .lbd .filters{grid-template-columns:1.35fr 1fr 1.6fr auto}
  .lbd .frow{flex:1 1 320px}
  .lbd .dfield{flex:0 0 156px}
  .lbd .dfield input[type=date]{padding:9px 13px;color:var(--ink)}
  .lbd .dfield input[type=date]::-webkit-datetime-edit{color:var(--ink)}
  .lbd .dfield__i{display:none}
  .lbd .dfield.set::after{display:none}
  .lbd .f-clear{padding:0 18px}

  .lbd .bk__head{padding:16px 18px;align-items:center}
  .lbd .bk__acts{
    display:flex;flex-wrap:wrap;justify-content:flex-end;
    padding:0 18px 16px;margin-top:-4px;
  }
  .lbd .act--back{grid-column:auto}
  .lbd .act--rs{width:auto;padding:0 13px;gap:6px}
  .lbd .act--rs span{display:inline}
  .lbd .bk__more{padding:14px 18px}
  .lbd .kv{grid-template-columns:86px 1fr 86px 1fr}
  .lbd .hello{font-size:21px}
  .lbd .hello span{display:inline}
}
/* ==========================================================================
   Desktop — sidebar becomes permanent, cards go one row
   ========================================================================== */




@media (min-width:1024px){
  .lbd .side{transform:none}
  .lbd .veil{display:none}
  .lbd .burger{display:none}
  .lbd .main{margin-left:268px;padding-bottom:32px}
  .lbd .bnav{display:none}
  .lbd .toast{bottom:24px;left:calc(50% + 134px)}

  .lbd .top{padding:20px 28px}
  .lbd .stats{padding:22px 28px 0;gap:14px}
  .lbd .tabs__in,.lbd .filters,.lbd .list,.lbd .day,.lbd .foot,.lbd .empty,.lbd .panel,.lbd .bstats,.lbd .rrow{padding-left:28px;padding-right:28px}
  .lbd .empty,.lbd .panel{margin-left:28px;margin-right:28px;padding-left:22px;padding-right:22px}
  .lbd .bstats{grid-template-columns:repeat(3,1fr)}
  .lbd .bgrid{grid-template-columns:repeat(3,1fr)}
  .lbd .sgrid{grid-template-columns:repeat(3,1fr);margin-left:28px;margin-right:28px}
  .lbd .wl{grid-template-columns:repeat(6,1fr);margin-left:28px;margin-right:28px}
  .lbd .banner,.lbd .bkflow{margin-left:28px;margin-right:28px}
  .lbd .addstaff{width:calc(100% - 56px);margin-left:28px;margin-right:28px}
  .lbd .bchoose{grid-template-columns:repeat(3,1fr)}
  .lbd .pstats{margin-left:28px;margin-right:28px}
  .lbd .bman{margin-left:28px;margin-right:28px}
  .lbd .bhead{margin-left:28px;margin-right:28px}
  .lbd .slots{grid-template-columns:repeat(6,1fr)}
  .lbd .bpick{grid-template-columns:repeat(3,1fr)}
  .lbd .hello{font-size:24px}
  .lbd .stat{padding:16px 18px}
  .lbd .stat__v{font-size:27px}
/* head on one row; actions sit below until the card is wide enough */


  
  .lbd .bk__head{
    grid-template-columns:auto minmax(150px,1.5fr) minmax(120px,.9fr) minmax(88px,auto);
    gap:14px;padding:14px 16px 10px;align-items:center;
  }
  .lbd .bk__head > .tm{
    grid-column:1;grid-row:1;
    flex-direction:column;align-items:center;gap:2px;
    padding:7px 10px;min-width:86px;
  }
  .lbd .tm__sep{display:none}
  .lbd .bk__head > .bd{grid-column:2;grid-row:1}
  .lbd .bk__head > .who-row{grid-column:3;grid-row:1;align-self:center}
  .lbd .bk__head > .stk{grid-column:4;grid-row:1;justify-self:start}
  .lbd .tm__h{font-size:13.5px}
  .lbd .bk__acts{
    display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
    padding:0 16px 14px;
  }
  .lbd .bd__who{margin-top:6px}
  .lbd .bk__more{padding:16px 20px 18px}
  .lbd .bstats .bcard__g b{font-size:18px}
}

@media (min-width:1280px){
  .lbd .bk{display:grid;grid-template-columns:1fr auto;align-items:center}
  .lbd .bk__head{grid-row:1;grid-column:1;padding:14px 0 14px 16px}
  .lbd .bk__acts{grid-row:1;grid-column:2;flex-wrap:nowrap;padding:14px 16px 14px 0;align-self:center}
  .lbd .bk__more{grid-row:2;grid-column:1/-1}
}

@media (min-width:1400px){
  .lbd .main{max-width:1560px}
}

@media (prefers-reduced-motion:reduce){
  .lbd *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

@media print{
  .lbd .side,.lbd .bnav,.lbd .top,.lbd .tabs,.lbd .filters,.lbd .bk__acts,.lbd .toast{display:none!important}
  .lbd .main{margin:0}
  .lbd .bk__more[hidden]{display:block!important}
  .lbd .bk{break-inside:avoid}
}


/* ==========================================================================
   Wrapper + WordPress integration
   The design was written as a stand-alone page. These rules re-create that
   page context inside a theme, and let the dashboard sit either full-screen
   (its own route / a canvas template) or embedded in a normal page.
   ========================================================================== */

.lbd{
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
.lbd img{max-width:100%;height:auto}
.lbd input,.lbd select,.lbd textarea{font-family:inherit}

/* Full-screen mode: the dashboard owns the viewport. */
.lbd--full{min-height:100vh}

/* Embedded mode: keep the sidebar and bottom bar inside the shortcode block
   instead of pinning them to the browser window. */
.lbd--embed{overflow:hidden;border-radius:14px;border:1px solid var(--line)}
.lbd--embed .side{position:absolute}
.lbd--embed .veil{position:absolute}
.lbd--embed .main{min-height:720px}
@media (min-width:1024px){
  .lbd--embed .side{position:absolute}
}

/* Loading state */
.lbd-boot{padding:48px 24px;text-align:center;color:var(--ink-3);font-size:14px}

/* ==========================================================================
   Sign-in
   Shown at the dashboard's own URL to anyone not signed in, and to signed-in
   accounts without access. Same visual language as the dashboard, so staff
   land somewhere that already looks like the shop's own tool.

   Every rule is prefixed with .lbd-signin on purpose: the theme-armour block
   above uses element selectors like ".lbd a" and ".lbd input", which would
   otherwise outrank a single class here and, for instance, repaint the
   sign-in button's label in the body colour.
   ========================================================================== */

.lbd-signin{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:32px 20px;
  background:
    radial-gradient(1100px 520px at 50% -10%, #23232a 0%, transparent 70%),
    linear-gradient(180deg,#18181b 0%,#0f0f11 100%);
}

.lbd-signin .lbd-signin__card{
  width:100%;max-width:420px;padding:32px 30px 30px;
  background:var(--card);border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.2);
}

.lbd-signin .lbd-signin__brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.lbd-signin .lbd-signin__mark{width:38px;height:38px;color:var(--gold);flex:none}
.lbd-signin .lbd-signin__name{
  font-size:16px;font-weight:800;letter-spacing:.02em;color:var(--ink);line-height:1.2;
}
.lbd-signin .lbd-signin__sub{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;
  color:var(--gold-ink,#8a6516);margin-top:3px;
}

.lbd-signin .lbd-signin__t{
  font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0;
}
.lbd-signin .lbd-signin__p{
  font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:7px 0 22px;
}

.lbd-signin .lbd-signin__err{
  margin-bottom:18px;padding:11px 13px;border-radius:10px;
  background:var(--cancel-bg);color:var(--cancel-ink);
  border:1px solid #fecaca;font-size:13px;line-height:1.45;
}

.lbd-signin .lbd-signin__l{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.lbd-signin .lbd-signin__i{
  display:block;width:100%;min-height:46px;padding:11px 14px;margin:0 0 16px;
  border:1px solid var(--line);border-radius:11px;
  background:var(--surface-2,#fafafa);
  font-family:inherit;font-size:15px;line-height:1.4;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.lbd-signin .lbd-signin__i:focus{
  border-color:var(--gold);background:var(--card);outline:none;
  box-shadow:0 0 0 3px rgba(201,146,46,.16);
}

.lbd-signin .lbd-signin__remember{
  display:flex;align-items:center;gap:9px;margin:2px 0 20px;
  font-size:13.5px;color:var(--ink-2);cursor:pointer;
}
.lbd-signin .lbd-signin__remember input{
  width:16px;height:16px;margin:0;accent-color:var(--gold);
}

/* Used both as a submit button and as a link, so it centres its label either
   way rather than relying on a button's default alignment. */
.lbd-signin .lbd-signin__btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:48px;padding:12px 16px;
  border:0;border-radius:11px;
  background:var(--ink);color:#fff;text-align:center;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;transition:background .15s ease,transform .08s ease;
}
.lbd-signin .lbd-signin__btn:hover{background:#000;color:#fff}
.lbd-signin .lbd-signin__btn:active{transform:scale(.99)}

.lbd-signin .lbd-signin__link{
  display:block;margin-top:18px;text-align:center;
  font-size:13px;color:var(--ink-3);
}
.lbd-signin .lbd-signin__link:hover{color:var(--ink)}

.lbd-signin .lbd-signin__foot{margin-top:22px;font-size:12.5px}
.lbd-signin .lbd-signin__foot a{color:rgba(255,255,255,.5)}
.lbd-signin .lbd-signin__foot a:hover{color:rgba(255,255,255,.85)}

@media (max-width:420px){
  .lbd-signin{padding:20px 14px}
  .lbd-signin .lbd-signin__card{padding:26px 22px 24px;border-radius:16px}
  .lbd-signin .lbd-signin__t{font-size:20px}
}

/* Saving indicator used while an action is in flight */
.lbd .is-saving{opacity:.55;pointer-events:none}.lbd-busy{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:lbd-slide 1s linear infinite;
}
@keyframes lbd-slide{0%{background-position:-40% 0}100%{background-position:140% 0}
}