/* Avilo Furniture — Today (BRIEF-v3 Loop 2 L1). Phone first (375 px): one column of cards, each with a big count, its
   title and up to 3 tappable rows (≥ 56 px); two columns from 720 px, three from 1100 px. Tone = the card's left edge and
   count colour: red (late / overdue), amber (due now), blue (work queue), gray (for your information). */
.td{--td-red:var(--danger);--td-amber:#B45309;--td-blue:#1D4ED8;--td-gray:var(--muted)}
:root[data-theme="dark"] .td{--td-amber:#FCD34D;--td-blue:#93B4FF}
@media (prefers-color-scheme:dark){:root[data-theme="auto"] .td{--td-amber:#FCD34D;--td-blue:#93B4FF}}

.td-head h1 small{display:block;font:600 13px/1.3 var(--font);color:var(--muted);margin-top:2px}
.td-head .td-scan{flex:none;gap:6px;padding:0 12px} /* r30 audit: icon + "Scan" */
/* Manager's correction C4: "Add walk-in client" at the very top of Today (sales / admin / franchise / billing) */
.td-addclient{margin:0 0 14px;min-height:56px;font-size:16.5px;border-radius:var(--r)}
.td-addclient .i{width:22px;height:22px}
.td-hello{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.td-hello b{font:700 17px/1.3 var(--font-head)}
.td-hello span{font-size:14px;color:var(--muted)}

.td-cards{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media (min-width:720px){.td-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.td-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

.td-card{--tone:var(--td-blue);position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-1);overflow:hidden}
.td-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tone)}
.td-card.t-red{--tone:var(--td-red)}.td-card.t-amber{--tone:var(--td-amber)}.td-card.t-blue{--tone:var(--td-blue)}.td-card.t-gray{--tone:var(--td-gray)}
.td-chead{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 12px 10px 18px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.td-chead:hover{background:var(--surface-2)}
.td-chead .grow{flex:1;min-width:0}
.td-chead b{display:block;font:700 16px/1.25 var(--font-head)}
.td-chead small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.td-chead > .i{flex:none;color:var(--muted)}
.td-count{flex:none;min-width:44px;font:800 30px/1 var(--font-head);color:var(--tone);text-align:center}
.td-card.t-gray .td-count{color:var(--ink-2)}

.td-rows{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.td-card .td-rows{padding-left:6px}
.td-row{display:flex;align-items:center;gap:6px;padding:0 8px 0 0;border-bottom:1px solid var(--line-2)}
.td-row:last-child{border-bottom:0}
.td-rmain{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:56px;padding:8px 6px 8px 10px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.td-rmain:hover{background:var(--surface-2)}
.td-rmain .grow{flex:1;min-width:0}
.td-rmain b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-rmain small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.td-pics{flex:none;display:flex;align-items:center}
.td-pics img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--surface-2);border:2px solid var(--surface)}
.td-pics img + img{margin-left:-14px}
.td-pics.none{width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--muted);justify-content:center}
.td-badge{flex:none;font-style:normal;font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);white-space:nowrap;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.td-badge.late{background:var(--danger-soft);color:var(--danger)}
.td-badge.now{background:#FEF3C7;color:#92400E}
:root[data-theme="dark"] .td-badge.now{background:#3A2C10;color:#FCD34D}
.td-act{flex:none;min-height:44px}
/* A follow-up row: Bought · Not now · Lost under it (as on More → Enquiries), three across even at 375 px */
.td-row.td-erow{flex-wrap:wrap}
.td-eacts{flex:1 0 100%;display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:6px;padding:0 0 10px 10px}
.td-eacts .btn{min-height:44px;padding:8px 6px;font-size:14px;justify-content:center;white-space:nowrap}
.td-eacts .td-lost{color:var(--danger)}
.td-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;border:0;border-top:1px solid var(--line-2);background:none;font:600 14px var(--font);color:var(--ink-2);cursor:pointer}
.td-more:hover{background:var(--surface-2)}

.td-skel{min-height:150px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:td-sh 1.2s linear infinite}
@keyframes td-sh{to{background-position:-200% 0}}
.td-clear .i.lg{color:var(--ok)}
.td-clear .btn{margin-top:14px}

/* The full list of one card (a sheet) */
.td-list .td-rows{border-top:0}
.td-list .td-row{padding-right:0}
.td-loading{display:flex;align-items:center;gap:8px;margin:12px 0 0}
.td-loading .spin{width:18px;height:18px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}

/* Round 4 — a screen opened from a Today card: the bar is the active filter (accent edge), with Back to Today on the left */
.todaybar.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.todaybar .tdback{width:40px;min-width:40px;padding:0;margin:-2px 0 -2px -6px}
.todaybar .err-text{font-size:12.5px}

/* Round 5 — "Ready to send 3 · waiting 2": deliver-together orders still waiting are counted apart; in the card's list (and
   New dispatch from Today) they sit under their own "Waiting" heading. Also the refund / stopped-job cards use plain rows. */
.td-chead .td-wait{font:600 13px/1.3 var(--font);color:var(--muted);white-space:nowrap}
.td-group{display:flex;align-items:center;gap:6px;margin:16px 0 4px;padding:0 4px;font:700 13px/1.3 var(--font);color:var(--muted);text-transform:none}
.td-group .i{flex:none}

/* R15-1 #8: "Coming up" — this week's call-backs, jobs with you, phones waiting (never counted) */
.td-coming{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;margin:0 0 14px;box-shadow:var(--shadow-1)}
.td-clear+.td-coming{max-width:520px;margin:8px auto 0}
.td-comingh{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:700 14px/1.3 var(--font-head);color:var(--ink-2)}
.td-crow{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 2px;border:0;border-top:1px solid var(--line-2);background:none;text-align:left;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.td-comingh+.td-crow{border-top:0}
.td-crow .grow{flex:1;min-width:0}
.td-crow .i{flex:none;color:var(--muted)}
.td-cphones{cursor:default;flex-wrap:wrap}
.td-cphones .btn{min-height:44px}
.td-cphones .grow{flex:1 1 calc(100% - 30px)} /* r30 audit: the name line takes the full width at 360 px, Approve / Reject sit under it */

/* r20 item 1: "Turn on notifications" (push.js) */
.td-push:empty{display:none}
.td-push{margin:8px 0}
.td-push .push-on{gap:8px}
.td-push .push-err{display:block;margin-top:6px;color:var(--danger,#b42318)}
.td-push .push-note{margin:0}
/* r23: today's walk-ins under "Add walk-in client" */
.td-walkins{padding:10px 12px;margin:0 0 14px}
.td-walkins .wk-list{margin-top:4px}
/* r29 (owner screenshot 2026-10-12): "+ Add walk-in" and "All walk-ins" side by side, equal width, thumb size at 360–412 px */
.td-addrow{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 14px}
.td-addrow.two{grid-template-columns:1fr 1fr}
.td-addrow .td-addclient,.td-addrow .td-allwk{margin:0;min-height:56px;font-size:16px;border-radius:var(--r);padding:0 10px;justify-content:center;white-space:nowrap}
.td-addrow .i{width:20px;height:20px}
/* r29: Close my day — the card on Sales' Today, the red card for yesterday, the owner's one line */
.td-dc{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin:0 0 14px;padding:12px 12px 12px 14px;border:1px solid var(--line-2);border-left:4px solid var(--td-amber);
  border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-1);text-align:left;font:inherit;color:inherit;cursor:pointer}
.td-dc .grow{flex:1;min-width:0}
.td-dc b{display:block;font:700 16px/1.25 var(--font-head)}
.td-dc small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.td-dc.done{border-left-color:var(--ok)}
.td-dc.done > .i:first-child{color:var(--ok);width:26px;height:26px}
.td-dcn{flex:none;min-width:58px;font:800 15px/1.15 var(--font-head);color:var(--td-amber);text-align:center}
.td-dcbar{display:block;height:6px;margin-top:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.td-dcbar i{display:block;height:100%;background:var(--td-amber);border-radius:99px}
.td-dcy .grow small{display:block;font-size:13px;opacity:.85}
.td-dcy .btn{flex:none}
.td-dcboss{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:12px;border-radius:var(--r);border:1px solid var(--danger-soft);background:var(--danger-soft);color:var(--danger);font:inherit;text-align:left;cursor:pointer}
/* the sheet */
.td-dcsheet{display:flex;flex-direction:column;gap:12px}
.td-dcsec{border:1px solid var(--line-2);border-radius:var(--r);padding:12px;background:var(--surface)}
.td-dch{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:700 16px/1.25 var(--font-head)}
.td-dcno,.td-dcok{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-3);font:800 14px/1 var(--font-head)}
.td-dcok{background:var(--ok);color:#fff}
.td-dcok .i{width:16px;height:16px}
.td-dcfact{margin:0 0 8px;font-size:14px}
.td-dclist{list-style:none;margin:0 0 10px;padding:0;font-size:14px}
.td-dclist li{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.td-dclist li span{flex:none;min-width:64px;color:var(--muted)}
.td-dcstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.td-dcstats span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:var(--r-sm);background:var(--surface-2);font-size:12.5px;color:var(--muted);text-align:center}
.td-dcstats b{font:800 24px/1 var(--font-head);color:var(--ink)}
.td-dcrow{padding:10px 0;border-top:1px solid var(--line-2)}
.td-dcrow b{display:block;font-size:15px}
.td-dcrow small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.td-dcrow .td-dcwhen{color:var(--td-amber);font-weight:600}
.td-dcrow.set .td-dcwhen{color:var(--ok)}
.td-dcchips{margin-top:8px;flex-wrap:wrap}
.td-dcpick{position:relative;gap:6px}
.td-dcpick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.td-tick{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin-top:6px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font:inherit;font-size:15px;font-weight:600;text-align:left;color:inherit;cursor:pointer}
.td-tick .rbox{flex:none;display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--muted);border-radius:7px;background:var(--surface)}
.td-tick.on{border-color:var(--ok);background:var(--ok-soft)}
.td-tick.on .rbox{background:var(--ok);border-color:var(--ok);color:#fff}
.td-tick[aria-disabled="true"]{opacity:.55}
.td-tick:disabled{cursor:default}
.td-dcwarn{margin:6px 0 0}
.td-dcmsg{flex:1 1 100%;margin:0 0 6px;font-size:13px;color:var(--muted)}
.td-dcopen{list-style:none;margin:8px 0 0;padding:0}
.td-dcopen li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2);font-weight:600}
/* Daily tasks (owner / admin) */
.td-dtdays{margin:0 0 12px}
.td-dtpeople .td-badge{max-width:55%}
.td-badge.ok{background:var(--ok-soft);color:var(--ok)}
.td-dttask{padding:8px 4px 8px 10px;gap:8px}
.td-dttask .grow{flex:1;min-width:0}
.td-dttask b{display:block;font-size:15px}
.td-dttask small{display:block;font-size:13px;color:var(--muted)}
.td-dtadd{margin-top:14px;padding:12px}
.td-dtadd h4{margin:0 0 8px}
.td-dtlbl{margin:10px 0 4px;font-size:13px;font-weight:700;color:var(--muted)}
.td-dtadd .btn{margin-top:12px}
/* r30 audit: a read-only Close my day sheet shows plain "Done ✓" / "Not done" */
.td-dcro{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-weight:700;color:var(--muted)}
.td-dcro.on{color:var(--ok)}
/* r32 (DESIGN-r32 B.M14 / B.M17 / B.M20): the order desk's Today — grey "Client will tell the date" / "not known (old sheet)",
   the clean-up cards' row buttons (Pick vendor · Step · Already sent · Cancelled / Sent on… · Still here / close the job · keep),
   and the "Order to dispatch — your sheet" shortcut. Chrome 109: plain colours only. */
.td-badge.gray{background:var(--surface-2);color:var(--muted)}
.td-eacts.td-lacts{grid-template-columns:repeat(2,minmax(0,1fr))}
.td-eacts.td-lacts.two{grid-template-columns:1.4fr 1fr}
@media (min-width:720px){.td-eacts.td-lacts:not(.two){grid-template-columns:repeat(4,minmax(0,1fr))}}
.td-eacts.td-lacts .btn{white-space:normal;line-height:1.2;padding:8px 6px;min-height:48px}
.td-reports{margin:-4px 0 14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-1);min-height:52px}
.td-reports .i{color:var(--muted)}
.td-reports .grow{font-size:14.5px}
.td-reports b{font-weight:700}