/* staff dashboard additions */
body.staff{background:var(--paper)}
.who{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem}
.who button{border:1px solid rgb(255 255 255/.3);background:transparent;color:#f4efe4;border-radius:10px;padding:5px 12px;cursor:pointer}
.tabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px);z-index:15;display:flex;gap:6px;overflow-x:auto;padding-block:10px;background:var(--paper);-webkit-overflow-scrolling:touch}
.tabs button{flex:none;border:1.5px solid var(--line-2);background:var(--surface);border-radius:999px;padding:8px 16px;font-weight:800;cursor:pointer;min-height:40px;white-space:nowrap}
.tabs button[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#f4efe4}
.tabs button .dot{display:inline-block;min-width:20px;height:20px;border-radius:99px;background:var(--brass);color:var(--on-brass);font-size:.75rem;line-height:20px;text-align:center;margin-inline-start:6px;padding:0 5px}
.login{max-width:420px;margin:40px auto}
.login .card{padding:24px}
.daybar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between}
.daybar .dd{display:flex;align-items:center;gap:6px}
.daybar h2{font-size:1.3rem;min-width:9ch;text-align:center}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;align-items:start}
.col h3{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ap{position:relative;border:1px solid var(--line);border-inline-start:5px solid var(--brass);border-radius:14px;padding:10px 12px;background:var(--surface);display:grid;gap:6px;animation:rise .35s both}
.ap+.ap,.ap+.gap,.gap+.ap,.gap+.gap{margin-top:8px}
.ap.done{border-inline-start-color:var(--ok);background:#f6fbf8}
.ap.no_show{border-inline-start-color:var(--bad);background:#fdf6f5}
.ap.cancelled{border-inline-start-color:var(--line-2);opacity:.6}
.ap.now{box-shadow:0 0 0 2px var(--brass),var(--shadow)}
.ap .t{font-family:var(--f-num);font-weight:700}
.ap .top1{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.ap .acts{display:flex;gap:6px;flex-wrap:wrap}
.gap{border:1.5px dashed var(--line-2);border-radius:12px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-weight:700;font-size:.9rem}
.off{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 8px,var(--surface-2) 8px,var(--surface-2) 16px);border:1px solid var(--line);border-radius:12px;padding:8px 12px;display:flex;justify-content:space-between;gap:8px;align-items:center;font-weight:700;color:var(--muted)}
.bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(14px,1fr));gap:4px;align-items:end;height:140px;margin-top:10px}
.bars>div{display:grid;align-content:end;height:100%;gap:3px;text-align:center;font-size:.65rem;color:var(--muted)}
.bars i{display:block;background:linear-gradient(var(--brass-2),var(--brass));border-radius:5px 5px 0 0;min-height:2px;transform-origin:bottom;animation:grow .8s both}
@keyframes grow{from{transform:scaleY(0)}}
.hbar2{display:grid;grid-template-columns:minmax(80px,auto) 1fr auto;gap:10px;align-items:center;margin-top:8px}
.hbar2 i{display:block;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--brass),var(--brass-2));transform-origin:right;animation:growx .8s both}
@keyframes growx{from{transform:scaleX(0)}}
.hoursgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:8px}
.hrow{display:grid;grid-template-columns:50px 1fr 1fr;gap:6px;align-items:center}
.hrow label{font-weight:800}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}
.thumbs .th{position:relative;width:96px}
.thumbs img{width:96px;height:96px;object-fit:cover;border-radius:12px}
.thumbs button{position:absolute;top:4px;inset-inline-start:4px}
.swatch{width:42px;height:42px;padding:0;border:1.5px solid var(--line-2);border-radius:12px;background:none}
.srow{display:grid;grid-template-columns:1.6fr .7fr .7fr auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
@media (max-width:640px){.srow{grid-template-columns:1fr 1fr}.srow .input:first-child{grid-column:1/-1}}
.srch{max-width:360px}
.lcard{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.lcard:first-child{border-top:0}

.ap .acts{padding-top:8px;border-top:1px dashed var(--line)}
.ap.now{background:linear-gradient(90deg,#fff8e6,#fff)}
.ap.cancelled{opacity:.75}
.ap .t{font-size:1.02rem}