/* Tokens from the Altegio YC DS Figma (Button 1.1 + variables) */
:root { --bg:#f8f9fb; --card:#fff; --ink:#2B3134; --g900:#2B3134; --g700:#444951; --g500:#71757F; --g400:#9AA3B1; --g300:#C6CBD3; --line:#E0E3EB; --line-soft:#EFF1F5; --hover:#F4F5F8; --yellow:#FFCB00; --yellow-press:#FFA800; --yellow-dis:#FFEA99; --yellow-h:#FFCB00; --shadow-y:0 1px 2px rgba(162,137,40,.35); --green:#1c813f; --green-soft:#f2fcf5; --green-line:#d1f2dd; --red:#E33B2E; --red-soft:#fef2f2; }
* { box-sizing:border-box; }
/* Type scale: YC DS Typography (H1 24/32 · H2 20/24 · H3 16/24 · H4 14/20 · M1/M2 14 · H5/S 12/16 · XS 11/14) */
body { margin:0; font-family:"Inter",-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); font-size:14px; line-height:20px; }
.hidden { display:none !important; }

header { height:60px; background:var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding:0 16px; }
header h1 { font-size:20px; line-height:24px; font-weight:500; color:var(--g900); margin:0; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-logo { width:28px; height:28px; flex:none; }
header .right { margin-left:auto; display:flex; gap:10px; align-items:center; }
.who { font-size:12px; line-height:16px; color:var(--g500); font-weight:500; }
/* Tertiary button (YC DS, size S): white, grey border, 32px, 12/16 Medium */
select.lang, .hbtn { height:32px; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:12px; font-weight:500; line-height:16px; color:var(--g900); padding:0 8px; cursor:pointer; font-family:inherit; }
.hbtn:hover { background:var(--line); }
.hbtn:active { background:var(--g300); }
.hbtn:disabled { color:var(--g300); background:var(--card); cursor:default; }
main { max-width:760px; margin:0 auto; padding:24px 16px 100px; }

/* bottom navigation (mobile-app style icon bar) */
.bottombar { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:1px solid var(--line); display:flex; justify-content:space-around; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); z-index:80; }
.bb-item { border:0; background:none; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; line-height:14px; font-weight:500; color:var(--g500); cursor:pointer; padding:4px 12px; border-radius:8px; min-width:64px; }
.bb-item:hover { color:var(--g900); background:var(--hover); }
.bb-item .bb-ic { font-size:18px; line-height:20px; display:flex; align-items:center; justify-content:center; height:20px; }
.bb-item .bb-ic .bbsvg { width:21px; height:21px; display:block; }
.bb-item.filtered .bb-ic { color:var(--yellow-press); }

/* bottom sheet (status filters) */
.sheet-wrap { position:fixed; inset:0; background:rgba(43,49,52,.4); z-index:85; display:flex; align-items:flex-end; }
.sheet { background:var(--card); width:100%; max-width:760px; margin:0 auto; border-radius:16px 16px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); position:relative; }
.sheet h3 { margin:0 0 12px; font-size:20px; line-height:24px; font-weight:500; color:var(--g900); }
.sheet-x { position:absolute; top:12px; right:12px; border:0; background:none; font-size:14px; color:var(--g500); cursor:pointer; padding:8px; border-radius:8px; }
.sheet-x:hover { color:var(--g900); }
.fsect { margin:16px 0 6px; font-size:14px; line-height:20px; font-weight:500; color:var(--g500); }
.frow { display:flex; align-items:center; gap:14px; padding:10px 4px; font-size:16px; line-height:24px; color:var(--g900); cursor:pointer; border-radius:8px; }
.frow:hover { background:var(--hover); }
.frow .fic { width:24px; text-align:center; font-weight:600; font-size:18px; }
.frow .fchk { margin-left:auto; font-weight:600; }
.frow .fchk.off { visibility:hidden; }
.fic-wait { color:#D97F02; }
.fic-here { color:#219C2B; }
.fic-no { color:#F72C32; }
.fic-conf { color:#583CF1; }
.fic-paid { color:#444951; }

/* Top Banner 1.1 (YC DS, system-info): full-width, min 56px, centered M2 text */
.topbanner { min-height:56px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 48px 12px 16px; background:#FEEFEF; color:var(--ink); font-size:14px; line-height:20px; position:relative; }
.topbanner .tbicon { color:#F96065; flex:none; }
.topbanner .tbclose { position:absolute; right:16px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--g500); cursor:pointer; font-size:14px; padding:8px; border-radius:8px; }
.topbanner .tbclose:hover { color:var(--g900); }

.login-wrap { max-width:380px; margin:8vh auto; }
.login-langbar { text-align:right; margin-bottom:10px; }
/* multi-salon picker (Altegio-app style location list) */
.salonlist { margin-top:12px; max-height:46vh; overflow-y:auto; }
.salonrow { display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:8px; cursor:pointer; }
.salonrow:hover { background:var(--hover); }
.salonrow .slogo { width:40px; height:40px; border-radius:8px; object-fit:cover; flex:none; background:#EDEDFC; }
.salonrow .slogo.init { display:flex; align-items:center; justify-content:center; color:#B5B5FC; }
.salonrow .smain { min-width:0; flex:1; }
.salonrow .sname2 { font-size:14px; line-height:20px; font-weight:500; color:var(--g900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.salonrow .ssub { font-size:12px; line-height:16px; color:var(--g500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pickCard .linkbtn { margin-top:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px 24px; }
.card h2 { margin:0 0 4px; font-size:20px; line-height:24px; font-weight:500; color:var(--g900); }
.card .sub { color:var(--g500); font-size:12px; line-height:16px; margin-bottom:20px; }
/* Input 1.1 (YC DS): label 12/16 grey above, 4px gap; field radius 8, border Lines,
   placeholder #9AA3B1, hover darker border, focus yellow. Login form = M (48px),
   working fields = S (32px). */
label { display:block; font-size:12px; line-height:16px; color:var(--g500); margin:14px 0 4px; }
input { width:100%; height:48px; border:1px solid var(--line); border-radius:8px; padding:0 12px; font-size:16px; line-height:24px; font-family:inherit; outline:none; }
input::placeholder { color:var(--g400); }
input:hover:not(:focus) { border-color:var(--g300); }
input:disabled { background:var(--hover); color:var(--g400); }
input:focus { border-color:var(--yellow); box-shadow:0 0 0 1px var(--yellow); }

/* Select/Field 1.1 (YC DS): same field as Input S; open/focus = yellow ring */
select { font-family:inherit; color:var(--g900); }
select:focus { border-color:var(--yellow); box-shadow:0 0 0 1px var(--yellow); outline:none; }

/* Textarea 1.1 (YC DS): 92px = 4 lines of 14/20, inner scroll (no autogrow) */
textarea { width:100%; height:92px; border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:14px; line-height:20px; font-family:inherit; color:var(--ink); background:var(--card); outline:none; resize:none; }
textarea::placeholder { color:var(--g400); }
textarea:hover:not(:focus) { border-color:var(--g300); }
textarea:focus { border-color:var(--yellow); box-shadow:0 0 0 1px var(--yellow); }
textarea:disabled { background:var(--hover); color:var(--g400); }
/* Primary button (YC DS, size M): #FFCB00, 48px, 16/24 Medium, radius 8 */
.btn-primary { width:100%; height:48px; margin-top:20px; background:var(--yellow); color:var(--ink); border:0; border-radius:8px; font-size:16px; line-height:24px; font-weight:500; padding:0 12px; cursor:pointer; font-family:inherit; }
.btn-primary:hover { background:var(--yellow); box-shadow:var(--shadow-y); }
.btn-primary:active { background:var(--yellow-press); box-shadow:none; }
.btn-primary:disabled { background:var(--yellow-dis); color:rgba(43,49,52,.45); box-shadow:none; cursor:wait; }
.err { color:var(--red); background:var(--red-soft); border:1px solid #fecaca; border-radius:8px; padding:10px 12px; font-size:12px; line-height:16px; margin-top:14px; }
.hint { font-size:11px; color:var(--g400); margin-top:6px; }

.listtitle { font-size:16px; line-height:24px; font-weight:500; color:var(--g900); margin:0 0 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.listtitle .cnt { color:var(--g500); font-weight:400; font-size:12px; }
/* Date picker (YC DS): field button + calendar popover, selected day = yellow */
.dpwrap { position:relative; }
.daypick { height:32px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font-family:inherit; font-size:14px; line-height:20px; color:var(--g900); background:var(--card); cursor:pointer; display:flex; align-items:center; gap:8px; }
.daypick:hover { border-color:var(--g300); }
.daypick .dpchev { color:var(--g400); font-size:10px; }
.dpcal { position:absolute; right:0; top:100%; margin-top:6px; width:288px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 32px -8px rgba(33,47,65,.25); padding:20px; z-index:40; }
.dphead { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.dpgroup { display:flex; align-items:center; gap:2px; }
.dpname { font-size:14px; line-height:20px; font-weight:500; color:var(--g900); text-align:center; text-transform:capitalize; padding:0 4px; }
.dpnav { border:0; background:none; color:var(--g400); cursor:pointer; font-size:14px; padding:4px 8px; border-radius:6px; font-family:inherit; }
.dpnav:hover { background:var(--hover); color:var(--g900); }
.dpweek { display:grid; grid-template-columns:repeat(7,32px); justify-content:space-between; margin-bottom:4px; }
.dpweek span { height:24px; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:16px; color:var(--g400); text-transform:lowercase; }
.dpgrid { display:grid; grid-template-columns:repeat(7,32px); gap:2px 0; justify-content:space-between; }
.dpday { width:32px; height:32px; border-radius:6px; border:0; background:var(--card); font-family:inherit; font-size:12px; line-height:16px; font-weight:500; color:var(--g900); cursor:pointer; }
.dpday:hover { background:var(--hover); }
.dpday.out { color:var(--g400); }
.dpday.today { box-shadow:inset 0 0 0 1px var(--g300); }
.dpday.sel { background:var(--yellow); }
.visit { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; gap:16px; }
.vtime { font-weight:500; font-size:14px; line-height:20px; min-width:44px; color:var(--g900); }
.visit .who2 { font-weight:500; font-size:14px; color:var(--g900); }
.visit .meta { color:var(--g500); font-size:12px; margin-top:2px; }
/* Visit status pills (Statuses spec): amber clock / green + / red − / violet ✓ */
.badge { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:16px; padding:4px 10px; border-radius:8px; font-weight:400; white-space:nowrap; }
.badge .bic { font-weight:600; }
.badge.st-wait { background:#FFF2BF; color:#D97F02; }
.badge.st-here { background:#E9F7E9; color:#219C2B; }
.badge.st-no { background:#FEEFEF; color:#F72C32; }
.badge.st-conf { background:#EDEDFC; color:#583CF1; }
.badge.st-paid { background:var(--g700); color:#fff; }
.empty { color:var(--g500); padding:20px 4px; }
.visit { cursor:pointer; }
.visit:hover { border-color:var(--g400); }
.chev { color:var(--g400); margin-left:4px; }

/* detail / consumables */
.backrow { margin-bottom:14px; }
.svc-head { margin:6px 0 18px; }
.svc-title { font-size:16px; font-weight:500; color:var(--g900); }
.svc-meta { color:var(--g500); font-size:12px; margin-top:3px; }
.chead, .crow { display:grid; grid-template-columns:1fr 150px 120px 84px 30px; gap:10px; align-items:center; }
.chead { font-size:12px; color:var(--g500); padding-bottom:6px; border-bottom:1px solid var(--line-soft); margin-bottom:10px; }
.crow { margin-bottom:10px; }
.crow input, .crow select { height:32px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font-size:14px; font-family:inherit; width:100%; outline:none; background:var(--card); }
.crow select:hover { border-color:var(--g300); }
.crow input:focus, .crow select:focus { border-color:var(--yellow); box-shadow:0 0 0 1px var(--yellow); }
.crow .cost { font-size:14px; line-height:20px; color:var(--g900); white-space:nowrap; }
.crow .rm { border:0; background:none; color:var(--g400); cursor:pointer; font-size:16px; }
.crow .rm:hover { color:var(--red); }
.qtywrap { display:flex; align-items:center; gap:6px; }
.qtywrap .unit { font-size:12px; color:var(--g500); }
/* Quaternary button (YC DS): text-only; hover = dark pill */
.addlink { border:0; background:none; color:var(--g900); font-weight:500; cursor:pointer; font-size:12px; line-height:16px; padding:8px; border-radius:8px; font-family:inherit; }
.addlink:hover { background:var(--g500); color:#fff; }
.addlink:active { background:var(--g700); color:#fff; }
.sect { border-top:1px solid var(--line-soft); margin-top:18px; padding-top:14px; }
.sect h3 { font-size:14px; line-height:20px; font-weight:500; color:var(--g900); margin:0 0 10px; }
.foot { border-top:1px solid var(--line-soft); margin-top:18px; padding-top:16px; display:flex; align-items:center; gap:14px; }
.foot .btn-primary { width:auto; margin:0 0 0 auto; }
.result { margin-top:14px; border-radius:8px; padding:12px 14px; font-size:14px; line-height:20px; border:1px solid var(--line); }
.result.ok { background:var(--green-soft); border-color:var(--green-line); }
.result.err { background:var(--red-soft); color:var(--red); border-color:#fecaca; }
.result table { width:100%; border-collapse:collapse; margin-top:6px; }
.result td { padding:4px 6px; border-top:1px solid var(--green-line); }
.result td:last-child { text-align:right; font-weight:500; }

/* SERVICE lines on the bill (salons that don't bill products) */
.svcsalerow { display:grid; grid-template-columns:1fr 150px 30px; gap:10px; align-items:center; margin-bottom:10px; }
.svcsalerow input { height:32px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font-size:14px; font-family:inherit; width:100%; outline:none; background:var(--card); }
.svcsalerow input:focus { border-color:var(--yellow); box-shadow:0 0 0 1px var(--yellow); }
.svcsalerow .rm { border:0; background:none; color:var(--g400); cursor:pointer; font-size:16px; }
.svcsalerow .rm:hover { color:var(--red); }

/* product search dropdown (Altegio-style) */
.gsearch .dropdown { min-width:min(420px, 86vw); }
.gopt { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; min-height:36px; border-radius:8px; cursor:pointer; }
.gopt:hover { background:var(--hover); }
.gopt .gmain { min-width:0; }
.gopt .gtitle { display:block; font-size:14px; color:var(--g900); }
.gopt .gtitle b { font-weight:700; }
.gopt .gsub { display:block; font-size:12px; color:var(--g500); margin-top:2px; }
.gopt .gprice { font-size:14px; font-weight:500; color:var(--g900); white-space:nowrap; }
.gsearch .dropdown .empty { padding:12px; font-size:12px; line-height:16px; }

/* confirmation modal (YC DS patterns: H2 title, M2 text, Primary + Tertiary actions) */
.modal-wrap { position:fixed; inset:0; background:rgba(43,49,52,.4); display:flex; align-items:center; justify-content:center; z-index:90; padding:16px; }
.modal { background:var(--card); border-radius:16px; padding:24px; max-width:360px; width:100%; box-shadow:0 24px 48px -12px rgba(33,47,65,.35); }
.modal h3 { margin:0 0 8px; font-size:20px; line-height:24px; font-weight:500; color:var(--g900); }
.modal-text { margin:0 0 20px; font-size:14px; line-height:20px; color:var(--g500); }
.modal-actions { display:flex; gap:10px; align-items:center; }
.modal-actions .btn-primary { width:auto; margin:0; }

/* Toast (YC DS): dark card, 24px icon disc, white H4 header + light M2 description */
#toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; z-index:100; }
.toast { display:flex; gap:12px; align-items:flex-start; background:var(--g700); border:1px solid var(--g500); border-radius:12px; padding:12px; max-width:444px; box-shadow:0 8px 24px rgba(33,47,65,.25); }
.toast .ticon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:600; flex:none; }
.toast.success .ticon { background:#52D45D; }
.toast.neutral .ticon { background:var(--g500); }
.toast.warning .ticon { background:var(--yellow-press); }
.toast.error .ticon { background:#F96065; }
.toast .tbody { min-width:0; }
.toast .thead { display:block; font-size:14px; line-height:20px; font-weight:500; color:#fff; padding:2px 0; }
.toast .tdesc { display:block; font-size:14px; line-height:20px; color:var(--g300); }
.toast .tclose { border:0; background:none; color:var(--g300); cursor:pointer; padding:4px; border-radius:8px; font-size:12px; }
.toast .tclose:hover { color:#fff; }

/* already-recorded (Altegio read-back) section */
.savedbox { background:var(--green-soft); border:1px solid var(--green-line); border-radius:8px; padding:12px 16px; margin-bottom:16px; }
.savedbox h3 { font-size:12px; font-weight:500; color:var(--green); margin:0 0 6px; }
.savedrow { display:flex; gap:14px; font-size:14px; line-height:20px; padding:3px 0; color:var(--g900); }
.savedrow span:first-child { flex:1; min-width:0; }
.savedrow span:not(:first-child) { white-space:nowrap; color:var(--g700); }
.savedcap { font-size:11px; color:var(--g500); margin:8px 0 2px; border-top:1px solid var(--green-line); padding-top:8px; }

/* detail controls */
.ctrls { display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; }
.fld { position:relative; }
.fld > label { display:block; font-size:12px; line-height:16px; color:var(--g500); margin-bottom:4px; }
.limitwrap { display:flex; align-items:center; gap:6px; }
.limitwrap input { width:90px; height:32px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font-size:14px; font-family:inherit; outline:none; }
.limitwrap .unit { font-size:12px; color:var(--g500); }
.overusebox { display:flex; align-items:center; gap:10px; height:32px; }
.overusebox .otext { font-size:12px; color:var(--red); }
.overusebox .oktext { font-size:12px; color:var(--green); font-weight:500; }
/* Primary button (YC DS, size S): 32px, 12/16 Medium */
.btn-bill { padding:0 8px; height:32px; background:var(--yellow); color:var(--ink); border:0; border-radius:8px; font-weight:500; font-size:12px; line-height:16px; cursor:pointer; font-family:inherit; }
.btn-bill:hover { background:var(--yellow); box-shadow:var(--shadow-y); }
.btn-bill:active { background:var(--yellow-press); box-shadow:none; }
.prevdrop { position:absolute; top:100%; left:0; margin-top:6px; width:min(420px,86vw); max-height:300px; overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 16px 24px -8px rgba(0,0,0,.15); z-index:20; padding:4px; }
.prevdrop .pr { padding:10px 12px; border-radius:6px; cursor:pointer; border-bottom:1px solid var(--line-soft); }
.prevdrop .pr:last-child { border-bottom:0; }
.prevdrop .pr:hover { background:var(--hover); }
.prevdrop .pr .d { font-size:14px; line-height:20px; color:var(--g900); font-weight:500; }
.prevdrop .pr .it { font-size:12px; color:var(--g500); margin-top:2px; }
.prevdrop .empty { padding:12px; color:var(--g400); font-size:12px; text-align:center; }
.rowactions { display:flex; align-items:center; gap:16px; border-top:1px solid var(--line-soft); padding-top:12px; margin-top:6px; }
.extrasel { border:0; background:none; color:var(--g900); font-weight:500; font-size:12px; line-height:16px; padding:8px; border-radius:8px; cursor:pointer; font-family:inherit; }
.extrasel:hover { background:var(--g500); color:#fff; }
.constotal { margin-left:auto; font-size:14px; line-height:20px; color:var(--g900); }
.extrahead { font-size:12px; font-weight:500; color:var(--g500); border-top:1px solid var(--line-soft); padding:10px 0 6px; }

/* topbar icon buttons */
.hbtn.icon { width:32px; padding:0; font-size:14px; }

/* PIN lock screen (iPad-style numpad) */
.lock-wrap { max-width:340px; margin:8vh auto 0; text-align:center; }
.lock-title { font-size:20px; line-height:24px; font-weight:500; color:var(--g900); }
.lock-dots { display:flex; justify-content:center; gap:14px; margin:22px 0 6px; min-height:14px; }
.lock-dots .dot { width:13px; height:13px; border-radius:50%; border:1.5px solid var(--g400); }
.lock-dots .dot.fill { background:var(--g900); border-color:var(--g900); }
.lock-dots.shake { animation:shake .45s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.lock-err { min-height:18px; font-size:12px; line-height:16px; color:var(--red); margin-bottom:4px; }
.numpad { display:grid; grid-template-columns:repeat(3,76px); gap:14px; justify-content:center; margin-top:14px; }
.np { width:76px; height:76px; border-radius:50%; border:1px solid var(--line); background:var(--card); font-size:26px; color:var(--g900); cursor:pointer; font-family:inherit; }
.np:hover { background:var(--hover); }
.np:active { background:var(--line); border-color:var(--g400); }
.np-aux { font-size:20px; color:var(--g500); }
.np.np-ghost { visibility:hidden; pointer-events:none; }
.linkbtn { border:0; background:none; color:var(--g500); font-size:12px; font-weight:500; line-height:16px; margin-top:26px; padding:8px; border-radius:8px; cursor:pointer; font-family:inherit; }
.linkbtn:hover { background:var(--g500); color:#fff; }

/* settings: sidebar-tab layout (one section at a time; nav wraps on top for mobile) */
main:has(#settingsView:not(.hidden)) { max-width:1100px; }
.setlayout { display:flex; gap:20px; align-items:flex-start; }
.setnav { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px; width:220px; flex:none; }
.setnav-item { text-align:left; border:0; background:none; font-family:inherit; font-size:14px; line-height:20px; color:var(--g900); padding:10px 12px; border-radius:8px; cursor:pointer; }
.setnav-item:hover { background:var(--hover); }
.setnav-item.active { background:var(--line-soft); font-weight:500; }
/* Back to appointments = Tertiary button (YC DS): outlined, NOT yellow (Drawbridge ask) */
.setnav-item.back { margin-top:10px; background:var(--card); color:var(--g900); font-weight:500; text-align:center; border-radius:8px; border:1px solid var(--line); }
.setnav-item.back:hover { background:var(--line); }
.setnav-item.back:active { background:var(--g300); }
.setcontent { flex:1; min-width:0; }
/* The sidebar goes horizontal already at 900px: on iPad portrait (~768-834px) the
   vertical nav left only ~500px for the content while the tc-editor rows need ~510px
   minimum — the fields overflowed the card. Full-width content fixes it. */
@media (max-width:900px) {
  .setlayout { display:block; }
  .setnav { flex-direction:row; flex-wrap:wrap; width:auto; margin-bottom:16px; gap:2px; }
  .setnav-item.back { margin-top:0; padding-top:10px; border-top:0; }
}

.pagetitle { font-size:20px; line-height:24px; font-weight:500; color:var(--g900); margin:0 0 16px; }
.setcard { margin-bottom:16px; padding:20px 22px; }
.setcard h3 { margin:0 0 4px; font-size:14px; line-height:20px; font-weight:500; color:var(--g900); }
.setcard .sub { color:var(--g500); font-size:12px; margin-bottom:12px; }
.setcard .hint { margin-top:10px; }
.setsel { height:32px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font-size:14px; font-family:inherit; background:var(--card); min-width:180px; }
.setsel:hover { border-color:var(--g300); }
.pinrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.switch.pinmaster { margin-bottom:12px; }
.pininput { width:118px; height:32px; font-size:15px; text-align:center; letter-spacing:5px; font-weight:600; font-variant-numeric:tabular-nums; }
.pininput::placeholder { letter-spacing:0; font-weight:400; font-size:13px; }
/* Tag 1.1: green = set, grey = unset */
.pinstate { font-size:11px; line-height:14px; font-weight:500; padding:2px 6px; border-radius:5px; white-space:nowrap; }
.pinstate.set { background:#E9F7E9; color:#219C2B; }
.pinstate.unset { background:#EAEEF4; color:var(--g700); }
.pinstate.warn { background:#FFF2BF; color:#D97F02; }
.pinmsg { font-size:12px; }
.pinmsg.ok { color:var(--green); }
.pinmsg.err { color:var(--red); }
.staffrow { padding:12px 0; border-bottom:1px solid var(--line-soft); }
.staffrow:last-child { border-bottom:0; }
.staffrow .sname { flex:1 1 160px; min-width:140px; font-size:14px; font-weight:500; color:var(--g900); }
.staffrow .srole { display:block; font-size:11px; color:var(--g500); font-weight:400; }
/* Toggle 1.2 (YC DS): 32×18 pill, white 14px knob with outer shadow, ON = yellow */
.switch { display:flex; align-items:center; gap:8px; font-size:14px; line-height:20px; color:var(--g900); cursor:pointer; white-space:nowrap; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.tgl { width:32px; height:18px; border-radius:9px; background:var(--line); position:relative; flex:none; transition:background .15s; }
.tgl::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(33,47,65,.35); transition:left .15s; }
.switch:hover input:not(:checked) + .tgl { background:var(--g300); }
.switch:active input:not(:checked) + .tgl { background:var(--g400); }
.switch input:checked + .tgl { background:var(--yellow); }
.switch:active input:checked + .tgl { background:var(--yellow-press); }
.switch input:checked + .tgl::after { left:16px; }

/* Avatar 1.1 (YC DS), size M: 32×32 rounded square (radius 6), violet initials fallback */
.sav { width:32px; height:32px; border-radius:6px; object-fit:cover; flex:none; background:#EDEDFC; }
.sav.init { display:flex; align-items:center; justify-content:center; color:#B5B5FC; font-weight:500; font-size:12px; }

/* settings: technological cards */
.tcbar { display:flex; justify-content:flex-end; margin-bottom:12px; }
.tccard { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:10px; background:var(--card); }
.tccard.alt { background:var(--bg); }
.tccard .tcmain { flex:1; min-width:0; }
.tccard .tcname { font-size:14px; font-weight:500; color:var(--g900); }
.tccard .tcitems { font-size:12px; color:var(--g500); margin-top:4px; line-height:1.6; }
.tccard .tcrule { font-size:12px; color:var(--g700); margin-top:6px; }
.tcalt-title { font-size:14px; line-height:20px; font-weight:500; color:var(--g900); margin:18px 0 10px; }
.tcalt-title .cnt { color:var(--g500); font-weight:400; font-size:11px; }
.tcedit { border:1px solid var(--line); border-radius:8px; padding:16px; background:var(--card); }
/* Labels go ABOVE the fields (Input 1.1 pattern) — also keeps the item rows
   from overflowing the card on narrow layouts. */
.tcgrid { display:grid; grid-template-columns:1fr; }
.tcgrid > label { font-size:12px; line-height:16px; color:var(--g500); margin:14px 0 4px; }
.tcgrid > label:first-child { margin-top:0; }
.tcgrid > input { height:32px; font-size:14px; line-height:20px; }
.tcrow { display:grid; grid-template-columns:minmax(160px,1fr) 80px 105px 105px 28px; gap:8px; align-items:center; margin-bottom:8px; }
.tcrow.tch { font-size:11px; color:var(--g500); margin-bottom:6px; border-bottom:1px solid var(--line-soft); padding-bottom:4px; }
.tcrow input { height:32px; font-size:14px; }
.tcrow .qty { display:flex; align-items:center; gap:5px; }
.tcrow .qty .unit { font-size:11px; color:var(--g500); }
.prodbox { position:relative; display:flex; align-items:center; }
.prodbox .clr { position:absolute; right:6px; border:0; background:none; color:var(--g400); cursor:pointer; font-size:12px; line-height:16px; }
.prodbox .clr:hover { color:var(--red); }
.prodbox .chevr { position:absolute; right:8px; color:var(--g400); pointer-events:none; }
.prodbox .dropdown { position:absolute; top:100%; left:0; right:0; min-width:280px; margin-top:4px; max-height:280px; overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 16px 24px -8px rgba(0,0,0,.15); z-index:30; padding:4px; }
.ddcat { display:flex; align-items:center; gap:6px; padding:8px 10px; font-size:14px; line-height:20px; font-weight:500; color:var(--g900); border-bottom:1px solid var(--line-soft); }
.ddcat .ddcatname { flex:1; cursor:pointer; }
.ddcat .ddcatname:hover { color:var(--green); }
.ddcat .ddtoggle { cursor:pointer; color:var(--g400); padding:2px 6px; }
.ddprod { display:flex; justify-content:space-between; gap:8px; padding:8px 10px 8px 20px; min-height:36px; align-items:center; font-size:14px; line-height:20px; cursor:pointer; border-radius:6px; }
.ddprod:hover { background:var(--green-soft); }
.ddprod .ddmeta { font-size:11px; color:var(--g500); white-space:nowrap; }
/* Tag 1.1 (YC DS), size S: 11/14 Medium, light bg + accent text */
.chip { font-size:11px; line-height:14px; font-weight:500; padding:2px 6px; border-radius:5px; background:#EAEEF4; color:var(--g900); white-space:nowrap; }
.chip.cat { background:#EDEDFC; color:#583CF1; }
.chip.dim { opacity:.4; }
/* Radiobutton 1.2 (YC DS): 18px circle, #D1D5DC border, selected = yellow disc */
.tcpricing .radio { display:flex; align-items:center; gap:8px; font-size:14px; line-height:20px; color:var(--g900); padding:5px 0; cursor:pointer; }
.tcpricing .radio.dis { color:var(--g400); cursor:default; }
.tcpricing .radio input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.tcpricing .rdo { width:18px; height:18px; border-radius:50%; border:1px solid #D1D5DC; background:var(--card); flex:none; position:relative; }
.tcpricing .radio:hover input:not(:disabled) + .rdo { border-color:var(--g400); }
.tcpricing .radio input:checked + .rdo::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--yellow); }
.tcpricing .radio:active input:checked:not(:disabled) + .rdo::after { background:var(--yellow-press); }
.tcpricing .radio.dis .rdo { background:var(--hover); border-color:var(--line); }
.tcpricing .mk { width:64px; height:32px; font-size:14px; }
/* info icon + CSS tooltip (YC DS Tooltip): hover/focus shows the explainer */
.info { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; border:1px solid var(--g400); color:var(--g500); font-size:11px; line-height:14px; font-style:italic; font-weight:600; cursor:help; position:relative; margin-left:4px; flex:none; }
.info:hover { border-color:var(--g700); color:var(--g700); }
.info:hover::after { content:attr(data-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%); width:280px; background:var(--g700); color:#fff; font-size:12px; line-height:16px; font-weight:400; font-style:normal; padding:8px 10px; border-radius:8px; box-shadow:0 8px 24px rgba(33,47,65,.25); z-index:60; white-space:normal; }
/* 'service_sale' rule: indented service picker under its radio */
.tcosvc { margin:4px 0 6px 26px; }
/* 'markup' rule: per-product/category override rows */
.tcmkrow { display:grid; grid-template-columns:minmax(160px,1fr) 80px 110px 28px; gap:8px; align-items:center; margin-bottom:8px; max-width:560px; }
.tcmkrow .qty { display:flex; align-items:center; gap:5px; font-size:14px; color:var(--g700); }
.tcmkrow input { height:32px; font-size:14px; line-height:20px; }
.tcactions { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.tcactions .btn-primary.tcsave { width:auto; margin:0; }
/* comment is optional — 2 lines is enough (Drawbridge ask) */
.tcgrid textarea { height:52px; }
/* service assignment tags (Altegio resources-style picker, Tag 1.1 M) */
.svctags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.svctags:empty { display:none; }
.chip.svctag { display:inline-flex; align-items:center; gap:4px; font-size:12px; line-height:16px; padding:4px 8px; font-weight:400; }
.chip.svctag button { border:0; background:none; cursor:pointer; color:var(--g500); font-size:11px; line-height:14px; padding:0 1px; font-family:inherit; }
.chip.svctag button:hover { color:var(--red); }
.svcbox { max-width:420px; }
.svcbox input { height:32px; font-size:14px; }

/* settings: services accordion */
.acc { border:1px solid var(--line); border-radius:8px; margin-bottom:10px; background:var(--card); overflow:hidden; }
.acchead { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; cursor:pointer; }
.acchead:hover { background:var(--hover); }
.acctitle { font-size:14px; font-weight:500; color:var(--g900); }
.accsub { font-size:11px; color:var(--g500); margin-top:2px; }
.svcrow { display:grid; grid-template-columns:minmax(140px,1.4fr) 110px 80px minmax(160px,1.2fr) 70px; gap:8px; align-items:center; padding:9px 14px; border-top:1px solid var(--line-soft); font-size:14px; line-height:20px; }
.svcrow.svch { font-size:11px; color:var(--g500); }
.svcrow select { height:32px; border:1px solid var(--line); border-radius:8px; padding:0 8px; font-size:14px; font-family:inherit; background:var(--card); width:100%; }
.svcrow select:hover { border-color:var(--g300); }

/* ===== Responsive: the layout adapts to the device screen. ≥768px (iPad/desktop)
   keeps the column layout above; ≤640px (phones) restacks every grid row so nothing
   overflows. 641–767px inherits the desktop grid (fits: main is 760px max). ===== */
.toast { max-width:min(444px, calc(100vw - 32px)); }
.visit > div:not(.vtime):not(.sav) { min-width:0; flex:1; }

@media (max-width:640px) {
  main { padding:16px 12px 96px; }
  .who { max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .visit { gap:10px; padding:12px 14px; }
  .visit .who2, .visit .meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* consumable + sale rows: product full width on top (✕ beside it), fields below */
  .chead { display:none; }
  .crow {
    grid-template-columns:minmax(0,1fr) 96px 84px 32px;
    grid-template-areas:"prod prod prod rm" "store qty cost cost";
    row-gap:8px; margin-bottom:14px;
  }
  .crow > :nth-child(1) { grid-area:prod; }
  .crow > :nth-child(2) { grid-area:store; min-width:0; }
  .crow > :nth-child(3) { grid-area:qty; }
  .crow > :nth-child(4) { grid-area:cost; justify-self:end; }
  .crow > :nth-child(4):is(.qtywrap) { justify-self:stretch; }
  .crow > :nth-child(5) { grid-area:rm; justify-self:end; }

  /* tech-card editor rows: search on top, chip + qty/limit (with labels) below */
  .tcrow.tch { display:none; }
  .tcrow {
    grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) 32px;
    grid-template-areas:"prod prod prod rm" "chip qty lim lim";
    row-gap:8px;
  }
  .tcrow > :nth-child(1) { grid-area:prod; }
  .tcrow > :nth-child(2) { grid-area:chip; align-self:end; padding-bottom:7px; }
  .tcrow > :nth-child(3) { grid-area:qty; }
  .tcrow > :nth-child(4) { grid-area:lim; }
  .tcrow > :nth-child(5) { grid-area:rm; justify-self:end; }
  .tcrow .qty { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 5px; align-items:center; }
  .tcrow .qty::before { content:attr(data-l); grid-column:1 / -1; font-size:11px; line-height:14px; color:var(--g500); }

  /* service assignment rows: name, then price/duration/staff, then the card select */
  .svcrow.svch { display:none; }
  .svcrow {
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"name name staff" "price dur dur" "sel sel sel";
    row-gap:6px;
  }
  .svcrow > :nth-child(1) { grid-area:name; font-weight:500; }
  .svcrow > :nth-child(2) { grid-area:price; }
  .svcrow > :nth-child(3) { grid-area:dur; }
  .svcrow > :nth-child(4) { grid-area:sel; }
  .svcrow > :nth-child(5) { grid-area:staff; justify-self:end; }

  .svcsalerow { grid-template-columns:minmax(0,1fr) 130px 32px; }
  .tcmkrow { grid-template-columns:auto minmax(0,1fr) 32px; grid-template-areas:"prod prod rm" "chip x x"; row-gap:8px; }
  .tcmkrow > :nth-child(1) { grid-area:prod; }
  .tcmkrow > :nth-child(2) { grid-area:chip; align-self:center; }
  .tcmkrow > :nth-child(3) { grid-area:x; }
  .tcmkrow > :nth-child(4) { grid-area:rm; justify-self:end; }

  .foot { flex-wrap:wrap; }
}