/* Booking engine v2 staff app — phone-first, Elly Blonde brand tokens. */
:root{
  --ground:#141114; --surface:#1e1a1d; --surface2:#282226; --line:#3a3136;
  --grid-h:rgba(255,255,255,.13); --grid-s:rgba(255,255,255,.05);
  --text:#f5eef1; --muted:#a4969c; --accent:#c9748a; --accent-soft:rgba(201,116,138,.14);
  --ok:#8db894; --warn:#d9a05b; --danger:#c96f6f;
  /* schedule block fills: bg / border / time-ink per status, per theme */
  --bw-bg:rgba(217,160,91,.20);  --bw-ln:rgba(217,160,91,.8);  --bw-ink:#eec288;
  --ba-bg:rgba(201,116,138,.24); --ba-ln:rgba(201,116,138,.85);--ba-ink:#eea9bd;
  --bd-bg:rgba(141,184,148,.20); --bd-ln:rgba(141,184,148,.8); --bd-ink:#abd6b2;
  --bn-bg:rgba(201,111,111,.18); --bn-ln:rgba(201,111,111,.8); --bn-ink:#e39a9a;
  --serif:"Didot","Bodoni MT","Playfair Display",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme: light){
  :root{ --ground:#f7f2f4; --surface:#ffffff; --surface2:#f1e9ec; --line:#d9c9ce;
         --grid-h:rgba(36,31,34,.14); --grid-s:rgba(36,31,34,.055);
         --text:#241f22; --muted:#8a7a80; --accent:#b25a72; --accent-soft:rgba(178,90,114,.12);
         --bw-bg:#f8e5c4; --bw-ln:#c08a2e; --bw-ink:#7d5410;
         --ba-bg:#f8d9e2; --ba-ln:#b25a72; --ba-ink:#8e3d55;
         --bd-bg:#d8ecdc; --bd-ln:#4d9061; --bd-ink:#28603a;
         --bn-bg:#f5d6d6; --bn-ln:#b34d4d; --bn-ink:#8e3434; }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
#app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--surface)}
@media(min-width:520px){ #app{border-left:1px solid var(--line);border-right:1px solid var(--line)} }

.center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:36px;text-align:center}
.center form,.center .error,.center .notice{width:100%;max-width:380px}
@media (min-width: 900px){
  .center .wordmark{font-size:2.3rem}
  .center .tagline{font-size:.66rem;margin-bottom:48px}
}
.wordmark{font-family:var(--serif);font-size:1.9rem;margin-bottom:2px}
.wordmark em{font-style:normal;color:var(--accent)}
.tagline{text-transform:uppercase;letter-spacing:.18em;font-size:.6rem;color:var(--muted);margin-bottom:40px}

.field{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:10px;text-align:left}
.field label{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:4px}
/* 16px minimum: below that iOS zooms the page on focus. appearance:none kills
   the native white input/select chrome that fights the dark theme. */
.field input,.field select{appearance:none;-webkit-appearance:none;background:transparent;border:none;border-radius:0;color:var(--text);font-size:16px;line-height:1.35;font-family:var(--sans);width:100%;padding:2px 0;outline:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:24px}
.field:focus-within{border-color:var(--accent)}
/* Autofill paints fields white/yellow; repaint with our surface + text. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--surface2) inset;-webkit-text-fill-color:var(--text);caret-color:var(--text);border-radius:0;transition:background-color 99999s ease-out}

.btn{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;border-radius:999px;padding:12px 18px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.block{width:100%;margin-top:14px;padding:14px}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:default}

.error{background:rgba(201,111,111,.12);border:1px solid rgba(201,111,111,.4);color:var(--danger);font-size:.78rem;border-radius:10px;padding:10px 12px;margin:0 0 12px;text-align:left}
.notice{background:var(--accent-soft);border:1px solid var(--accent);color:var(--text);font-size:.8rem;border-radius:10px;padding:12px;margin:0 0 12px;text-align:left;word-break:break-all}
.notice b{color:var(--accent)}

/* app frame */
.apphead{padding:calc(env(safe-area-inset-top) + 10px) 16px 8px;border-bottom:1px solid var(--line)}
.apphead .who{float:right;font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;padding-top:5px}
.brand{font-family:var(--serif);font-size:.85rem;opacity:.85}
.brand em{font-style:normal;color:var(--accent)}
.apphead h2{font-size:1.08rem;margin:0;font-weight:700}
.apphead h2 .hcount{font-size:.85rem;font-weight:600;color:var(--accent);white-space:nowrap}

.screen{flex:1;overflow-y:auto;padding:14px 18px calc(env(safe-area-inset-bottom) + 90px)}
.placeholder{color:var(--muted);font-size:.84rem;line-height:1.6;padding:32px 8px;text-align:center;font-style:italic}

/* staff list */
.person{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}
.person.off{opacity:.45}
.ava{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1rem;flex-shrink:0}
.person .nm{font-size:.88rem;font-weight:600}
.person .rl{font-size:.7rem;color:var(--muted);margin-top:2px}
.person .right{margin-left:auto;text-align:right;flex-shrink:0}
.person .lg{font-size:.64rem;color:var(--muted);display:block}
.person button{background:none;border:none;color:var(--accent);font-size:.7rem;cursor:pointer;padding:4px 0 0;letter-spacing:.04em;font-family:var(--sans)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:5px}
.dot.off{background:var(--muted);opacity:.6}

/* add / edit sheet — slides up on mount (.in added a frame after insert) */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .28s ease;z-index:40}
.scrim.in{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;background:var(--surface);border-radius:22px 22px 0 0;border-top:1px solid var(--line);padding:18px 18px calc(env(safe-area-inset-bottom) + 22px);max-height:88%;overflow-y:auto;z-index:41;transform:translateY(105%);transition:transform .34s cubic-bezier(.32,.72,.33,1)}
.sheet.in{transform:none}
body.sheet-open{overflow:hidden}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0 0 14px}
.sheet h3.linkname{cursor:pointer}
.sheetkind{font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:4px;font-weight:600}
.sheetback{display:block;background:none;border:none;color:var(--accent);font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.03em;padding:0 0 12px;cursor:pointer}
.golink{color:var(--accent);font-size:1.05rem}
@media (prefers-reduced-motion: reduce){ .sheet,.scrim{transition:none} }
.sheet .row{display:flex;gap:8px}
.sheet .row .field{flex:1}

/* tabs */
.tabs{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;display:flex;border-top:1px solid var(--line);background:var(--surface);padding-bottom:env(safe-area-inset-bottom);z-index:20}
.tab{flex:1;padding:12px 0 14px;text-align:center;background:none;border:none;color:var(--text);opacity:.6;cursor:pointer;font-family:var(--sans)}
.tab .ic{font-size:1.35rem;display:block;margin-bottom:4px;line-height:1}
.tab .ic svg{width:21px;height:21px;display:inline-block;vertical-align:-2px}
.tab .lb{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.tab.on{color:var(--accent);opacity:1}

/* ── Lịch header band: segmented zoom, nav cluster, chips in one row ── */
.seg{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex-shrink:0}
.seg button{background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:7px 14px;cursor:pointer}
.seg button.on{background:var(--accent-soft);color:var(--accent)}
.subrow{display:flex;align-items:center;gap:8px;padding:10px 16px 6px}
.subrow .chips{flex:1;min-width:0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.subrow .chips::-webkit-scrollbar{display:none}
.navclu{display:flex;gap:5px;flex-shrink:0;align-items:center}
.navclu button{background:var(--surface2);border:1px solid var(--line);color:var(--text);width:30px;height:30px;border-radius:50%;font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.navclu #d-pick svg{width:15px;height:15px}
.navclu .pickwrap{margin-left:0}

/* Day mode: the grid owns all remaining height instead of a fixed calc. */
.screen.cal-screen{display:flex;flex-direction:column;overflow:hidden;padding-top:8px;padding-bottom:calc(env(safe-area-inset-bottom) + 76px)}
.cal-screen .cal-scroll{flex:1;max-height:none;min-height:0;margin-bottom:8px}
.cal-screen .foot{flex-shrink:0;padding:4px 0 0}
.cal-screen .legend{flex-shrink:0}

/* Floating add button + its two actions */
.fab{position:fixed;right:18px;bottom:calc(env(safe-area-inset-bottom) + 88px);width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;font-size:1.8rem;line-height:1;border:none;box-shadow:0 8px 22px rgba(0,0,0,.4);z-index:35;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.fab.open{transform:rotate(45deg)}
.fabmenu{position:fixed;right:18px;bottom:calc(env(safe-area-inset-bottom) + 154px);display:none;flex-direction:column;gap:10px;z-index:35;align-items:flex-end}
.fabmenu.open{display:flex}
.fabmenu button{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.04em;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.35)}
body.no-tabs .fab{bottom:calc(env(safe-area-inset-bottom) + 20px)}
body.no-tabs .fabmenu{bottom:calc(env(safe-area-inset-bottom) + 86px)}
body.no-tabs .screen{padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}
@media (min-width: 900px){ .fab,.fabmenu{right:calc(50vw - 550px + 22px)} }
@media (prefers-reduced-motion: reduce){ .fab{transition:none} }

/* ── Resource day grid ── */
.cal-scroll{overflow:auto;max-height:calc(100dvh - 305px);min-height:340px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overscroll-behavior:contain;margin-bottom:12px}
.cal{display:flex;position:relative;width:max-content;min-width:100%}
.cal-gutter{position:sticky;left:0;z-index:4;background:var(--surface);flex:0 0 48px;border-right:1px solid var(--line)}
.cal-corner{position:sticky;top:0;z-index:5;height:40px;background:var(--surface);border-bottom:1px solid var(--line)}
.cal-hour{height:64px;font-size:.72rem;color:var(--muted);text-align:right;padding:3px 7px 0 0;font-variant-numeric:tabular-nums;box-sizing:border-box}
.cal-col{flex:1 0 150px;min-width:150px;border-right:1px solid var(--line)}
.cal-colhead{position:sticky;top:0;z-index:3;height:40px;line-height:40px;box-sizing:border-box;background:var(--surface);border-bottom:1px solid var(--line);text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.03em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.cal-colbody{position:relative;background:repeating-linear-gradient(to bottom,
  var(--grid-h) 0, var(--grid-h) 1px, transparent 1px, transparent 32px,
  var(--grid-s) 32px, var(--grid-s) 33px, transparent 33px, transparent 64px)}
.cal-col:nth-child(odd) .cal-colbody{background-color:rgba(127,127,127,.035)}
.cal-hour{font-weight:600}
/* Touch taps must land on a real date input for the native picker to open;
   desktop keeps the button + showPicker() (input body clicks do nothing there). */
.pickwrap{position:relative;display:inline-block;margin-left:6px}
.pickwrap #d-pick{margin-left:0}
.datejump{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:16px;-webkit-appearance:none}
@media (hover: hover) and (pointer: fine){ .datejump{pointer-events:none} }
/* Status colors: amber = waiting, pink = in the chair, green = done/paid. */
.cal-block{--bbg:var(--bw-bg);--bln:var(--bw-ln);--bik:var(--bw-ink);position:absolute;left:3px;right:3px;box-sizing:border-box;background:var(--bbg);border:1px solid var(--bln);border-left:4px solid var(--bln);border-radius:10px;padding:5px 8px;overflow:hidden;cursor:pointer;line-height:1.3;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.cal-block.arrived{--bbg:var(--ba-bg);--bln:var(--ba-ln);--bik:var(--ba-ink)}
.cal-block b{display:block;font-size:.74rem;font-weight:700;color:var(--bik);font-variant-numeric:tabular-nums}
.cal-block .nm{display:block;font-size:.84rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-block .sv{display:block;font-size:.72rem;color:var(--text);opacity:.68;overflow:hidden}
.cal-block.done{--bbg:var(--bd-bg);--bln:var(--bd-ln);--bik:var(--bd-ink);opacity:.95}
.cal-block.noshow{--bbg:var(--bn-bg);--bln:var(--bn-ln);--bik:var(--bn-ink);opacity:.9}
.cal-block.noshow .nm{text-decoration:line-through;text-decoration-color:var(--danger)}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:0 2px 8px;font-size:.74rem;color:var(--muted)}
.legend .lg{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.lg-wait{background:var(--bw-ln)} .lg-arr{background:var(--ba-ln)} .lg-done{background:var(--bd-ln)} .lg-ns{background:var(--bn-ln)}
.lg-off{background:repeating-linear-gradient(45deg,var(--muted) 0,var(--muted) 2px,transparent 2px,transparent 4px)}
.stdot{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--warn);margin-top:5px}
.stdot.arrived{background:var(--accent)} .stdot.done{background:var(--ok)} .stdot.noshow{background:var(--danger)}
.stx{color:var(--warn)} .stx.arrived{color:var(--accent)} .stx.done{color:var(--ok)} .stx.noshow{color:var(--danger)}
.cal-now{position:absolute;left:0;right:0;height:2px;background:var(--accent);z-index:2;pointer-events:none;box-shadow:0 0 8px var(--accent)}
/* drag handles: touch-action none so resizing never fights the scroll */
.cal-block .rz{position:absolute;left:0;right:0;height:13px;touch-action:none;cursor:ns-resize;z-index:3}
.rz-t{top:-2px} .rz-b{bottom:-2px}
.rz::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:2px;background:var(--muted);opacity:.55}
.rz-t::after{top:3px} .rz-b::after{bottom:3px}
.rz-label{position:absolute;top:-26px;left:0;background:var(--text);color:var(--ground);font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:7px;font-variant-numeric:tabular-nums;z-index:6;white-space:nowrap;pointer-events:none}
.cal-block.cal-off{background:repeating-linear-gradient(45deg, var(--surface2) 0, var(--surface2) 6px, var(--surface) 6px, var(--surface) 12px);border-left-color:var(--muted);opacity:.9;z-index:0;box-shadow:none}
.cal-block.cal-off .nm{color:var(--muted);font-size:.76rem}
.cal-block.cal-off .sv{font-size:.7rem}
.wrow-off{opacity:.85}
.wrow-off .wt{color:var(--muted);font-weight:600}
.actrow{margin:2px 0 4px}
.actrow .btn{padding:13px 6px}

/* ── Phase 1: schedule + requests ── */
.headrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;clear:both}
.headrow h2{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width: 519px){ .hlbl{display:none} }
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 18px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;padding:8px 15px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:none;cursor:pointer;font-family:var(--sans)}
.chip.on{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}

.appt{background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:14px;padding:13px 15px;margin-bottom:10px;cursor:pointer}
.appt.done{border-left-color:var(--muted);opacity:.7}
.appt.noshow{border-left-color:var(--danger);opacity:.7}
.appt .row1{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem;font-weight:600;gap:10px}
.appt .row1 .time{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700;font-size:.95rem;white-space:nowrap}
.appt .svc{font-size:.86rem;color:var(--muted);margin-top:4px;line-height:1.5}
.appt .meta{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:4px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.tag.plain{background:var(--surface);border:1px solid var(--line);color:var(--muted)}

.wday{margin-bottom:8px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wday .wtoggle{all:unset;display:flex;justify-content:space-between;width:100%;padding:14px 16px;cursor:pointer;box-sizing:border-box;font-family:var(--sans)}
.wday .d{font-size:.95rem;font-weight:600;color:var(--text)}
.wday .d span{color:var(--muted);font-weight:400;font-size:.82rem;margin-left:6px}
.wday .n{font-size:.8rem;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.wday .rows{border-top:1px solid var(--line);padding:10px 16px;display:none}
.wday.open .rows{display:block}
.wrow{display:flex;gap:12px;font-size:.88rem;padding:8px 0;color:var(--muted);cursor:pointer;line-height:1.45}
.wrow b{color:var(--text);font-weight:600}
.wrow .wt{font-variant-numeric:tabular-nums;width:96px;flex-shrink:0;color:var(--accent);font-weight:700}

.req{background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:14px;padding:14px;margin-bottom:12px}
.req .row1{display:flex;justify-content:space-between;align-items:baseline}
.req .name{font-weight:600;font-size:1rem}
.req .ago{font-size:.72rem;color:var(--muted)}
.req .svc{font-size:.86rem;color:var(--muted);margin:6px 0;line-height:1.55}
.req .want{font-size:.86rem;margin:4px 0 10px}
.req .want b{color:var(--accent);font-weight:700}
.contact{display:flex;gap:8px;flex-wrap:wrap}
.contactmail{font-size:.78rem;color:var(--muted);margin-top:8px;word-break:break-all}
.contactmail.warn{color:var(--warn)}
.contact a{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.req .contact{margin-bottom:12px}
.photostrip{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.photostrip a{display:block;flex-shrink:0}
.photostrip img{width:62px;height:62px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.field .photostrip{margin:6px 0 0}
.acts{display:flex;gap:8px;margin-top:10px}
.acts .btn{flex:1;padding:11px 6px}

.sheet .for{font-size:.86rem;color:var(--muted);margin:-6px 0 14px}
.durchips{display:flex;gap:6px;flex-wrap:wrap;padding-top:4px}
.lineitems .li{display:flex;justify-content:space-between;font-size:.9rem;padding:9px 2px;border-bottom:1px solid var(--line);gap:10px}
.lineitems .li .p{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lineitems .li button{background:none;border:none;color:var(--danger);font-size:.9rem;cursor:pointer;padding:0 2px}
.conflict{display:none;background:rgba(217,160,91,.12);border:1px solid rgba(217,160,91,.4);color:var(--warn);font-size:.74rem;border-radius:10px;padding:9px 12px;margin:0 0 10px}
.conflict.show{display:block}
.svc-results{display:flex;flex-direction:column;max-height:230px;overflow-y:auto;margin-top:4px}
.svc-result{all:unset;box-sizing:border-box;display:block;width:100%;padding:10px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.svc-result:focus-visible{outline:2px solid var(--accent)}
.svc-result .rn{display:block;font-size:.9rem;font-weight:600;color:var(--text)}
.svc-result .rc{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.svc-empty{font-size:.8rem;color:var(--muted);font-style:italic;padding:10px 2px}
.checkrow label{display:flex;align-items:center;gap:8px;font-size:.82rem;text-transform:none;letter-spacing:0;color:var(--text)}
.checkrow input{width:auto}
.nbadge{position:absolute;top:-9px;left:calc(50% + 8px);background:var(--accent);color:#fff;font-size:.76rem;line-height:1;font-weight:700;border-radius:999px;padding:4px 7px;min-width:23px;text-align:center;box-sizing:border-box;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface)}
.tab .ic{position:relative}
.freeadd{align-items:center;gap:8px}
.freeadd input{flex:1}
.freeadd input#s-freeprice{flex:0 0 84px}
.freeadd .btn{flex-shrink:0;padding:9px 16px}
.lineitems .li.empty{color:var(--muted);font-style:italic;border-bottom:none}

.toast{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 84px);max-width:448px;margin:0 auto;background:var(--text);color:var(--ground);font-size:.78rem;border-radius:12px;padding:12px 16px;opacity:0;transform:translateY(8px);transition:all .3s;pointer-events:none;text-align:center;z-index:50}
.toast.show{opacity:1;transform:none}
.foot{font-size:.62rem;color:var(--muted);text-align:center;padding:10px 0 4px}
.updbar{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translateX(-50%);z-index:60;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:9px 18px;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.03em;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
@media (prefers-reduced-motion: reduce){ .toast{transition:none} }

/* ── Customers (CRM v1) ── */
.csearch{padding:12px 18px 4px}
.csearch input{width:100%;box-sizing:border-box;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;color:var(--text);font-size:16px;font-family:var(--sans);outline:none;-webkit-appearance:none}
.csearch input:focus{border-color:var(--accent)}
.field textarea{width:100%;box-sizing:border-box;background:transparent;border:none;color:var(--text);font-size:16px;line-height:1.5;font-family:var(--sans);outline:none;resize:vertical;padding:2px 0}
.custlist .wrow{cursor:pointer}
.custnote{font-size:.84rem;color:var(--warn);background:rgba(217,160,91,.1);border:1px solid rgba(217,160,91,.35);border-radius:10px;padding:9px 12px;margin:-4px 0 14px;line-height:1.5}
@media (min-width: 900px){ .csearch{max-width:720px;margin:0 auto} }

/* ── Manager stats ── */
.stiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.stile{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.stile b{display:block;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.stile b.neg{color:var(--danger)}
.stile span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ssec{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:18px 0 10px;font-weight:600}
.srow{margin-bottom:12px}
.srow.zero{opacity:.45}
.srtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.sname{font-size:.88rem;font-weight:600}
.sname.warn-name{color:var(--warn)}
.sval{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sval .ns{color:var(--danger);font-style:normal}
.sbar{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}
.sbar i{display:block;height:100%;border-radius:999px;background:var(--accent);min-width:2px}
.srow.zero .sbar i{min-width:0}
.sbar.warn i{background:var(--warn)}

/* ── Hover states: real pointers only (touch would stick them on) ── */
@media (hover: hover) and (pointer: fine){
  .btn,.chip,.tab,.cal-block,.wrow,.svc-result,.headnav button,.person button,
  .wday .wtoggle,.foot a,.contact a{transition:background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease,transform .15s ease,box-shadow .15s ease}
  .btn:hover{border-color:var(--accent);color:var(--text)}
  .btn.primary:hover{filter:brightness(1.1);color:#fff}
  .chip:hover:not(.on){border-color:var(--accent);color:var(--text)}
  .tab:hover{opacity:1}
  .headnav button:hover{border-color:var(--accent)}
  .cal-block:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.35)}
  .cal-block.cal-off:hover{border-color:var(--muted);transform:none}
  .wrow:hover{background:var(--surface2)}
  .wrow:hover b,.wrow:hover .wt{color:var(--accent)}
  .wday .wtoggle:hover{background:var(--surface2)}
  .svc-result:hover{background:var(--surface2)}
  .person button:hover{text-decoration:underline}
  .lineitems .li button:hover{filter:brightness(1.25)}
  .contact a:hover{border-color:var(--accent);color:var(--accent)}
  .foot a:hover{color:var(--accent)!important}
}
@media (prefers-reduced-motion: reduce){
  .cal-block:hover{transform:none}
}

/* ── Desktop: mobile-first layout widens; day grid gets the extra room ── */
@media (min-width: 900px){
  #app{max-width:1100px}
  .tabs{max-width:1100px}
  .toast{max-width:520px}
  .cal-scroll{max-height:calc(100dvh - 285px)}
  /* Reading surfaces stay a comfortable column; the grid goes full width. */
  .screen .req,.screen .wday,.screen .placeholder,.screen .error,
  .screen .actrow,.screen > .btn.block,#list{max-width:720px;margin-left:auto;margin-right:auto}
  .cal-block{font-size:.8rem}
}