/* Streetward business dashboard. Same tokens as the sales site: warm paper, ink, signal yellow. */
:root{--bg:#f4f1ea;--card:#fff;--card-2:#faf8f3;--ink:#16170f;--muted:#6d6b62;--line:#e6e1d5;--line-2:#d9d3c4;--brand:#16170f;--brand-ink:#fff;--signal:#f2b705;--signal-ink:#16170f;
  --ok:#1d7a44;--ok-bg:#e5f3ea;--warn:#8a5a00;--warn-bg:#fdf1d4;--bad:#b3261e;--bad-bg:#fbe6e4;--r:14px;--shadow:0 1px 2px rgba(22,23,15,.04),0 8px 24px -12px rgba(22,23,15,.12);color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#121310;--card:#1a1b17;--card-2:#20211c;--ink:#efece4;--muted:#a3a094;--line:#2c2d27;--line-2:#3a3b33;--brand:#f2b705;--brand-ink:#16170f;
  --ok:#7fd49c;--ok-bg:#1c2e22;--warn:#f0c766;--warn-bg:#33291a;--bad:#ff8a80;--bad-bg:#3a1f1d;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -12px rgba(0,0,0,.5);color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 "Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
[hidden]{display:none!important}
h1{font-size:28px;line-height:1.15;letter-spacing:-.02em;margin:0 0 6px;font-weight:650}
h2{font-size:16px;letter-spacing:-.01em;margin:0 0 14px;font-weight:650}
h3{font-size:15px;margin:0 0 8px}
a{color:inherit}
.brand{font-weight:700;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:9px;font-size:16px}
.brand::before{content:"";width:28px;height:28px;flex:none;background:url("/mark.svg") center/contain no-repeat;margin:-3px -2px -3px -3px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.btn{font:inherit;font-weight:600;font-size:14px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);min-height:40px;padding:8px 16px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{opacity:.9}
.btn.ghost{background:transparent}
.btn.small{min-height:32px;padding:4px 12px;font-size:13px}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.5;cursor:default}
label{display:grid;gap:5px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.01em}
input,select,textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:8px 11px;min-height:40px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 35%,transparent)}
textarea{min-height:80px}
input[type=checkbox]{min-height:auto;width:18px;height:18px;accent-color:var(--brand)}
.check{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;font-size:14px}
.err{color:var(--bad);min-height:1.2em;margin:8px 0 0}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* sign-in */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(1200px 600px at 80% -10%,color-mix(in srgb,var(--signal) 18%,transparent),transparent 60%),var(--bg)}
.login-card{width:100%;max-width:400px;display:grid;gap:14px;padding:32px}
.login-card h1{font-size:24px;margin-bottom:4px}

/* top bar */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 28px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.top nav a{text-decoration:none;padding:7px 12px;border-radius:999px;color:var(--muted);font-weight:550;font-size:14px;transition:color .15s,background .15s}
.top nav a:hover{color:var(--ink);background:var(--card-2)}
.top nav a[aria-current=page]{background:var(--ink);color:var(--card)}
@media (prefers-color-scheme:dark){.top nav a[aria-current=page]{background:var(--signal);color:#16170f}}
.top select{min-height:34px;font-size:13px}

/* layout */
.view{max-width:1200px;margin:0 auto;padding:32px 28px 96px;outline:none}
.view>h1{margin-bottom:22px}
.grid{display:grid;gap:16px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.mt{margin-top:16px}
.row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.row>.muted{align-self:center}.spacer{flex:1}.hint{font-size:13px;margin:10px 0 12px}
.week .day{cursor:copy}.week .day:hover{background:color-mix(in srgb,var(--signal) 5%,transparent)}
.panel form .row>label{flex:1;min-width:140px}

/* overview */
.hello{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.hello p{margin:0}
.eyebrow{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.stat{text-decoration:none;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden;transition:transform .15s,border-color .15s}
.stat:hover{transform:translateY(-2px);border-color:var(--line-2)}
.stat .muted{font-size:13px;font-weight:600}
.stat b{display:block;font-size:40px;line-height:1.05;letter-spacing:-.03em;font-weight:650;margin:6px 0 2px}
.stat.hot{background:var(--ink);color:var(--card);border-color:var(--ink)}
.stat.hot .muted{color:color-mix(in srgb,var(--card) 70%,transparent)}
.stat.hot::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--signal);opacity:.9}
@media (prefers-color-scheme:dark){.stat.hot{background:var(--signal);color:#16170f;border-color:var(--signal)}.stat.hot .muted{color:rgba(22,23,15,.65)}.stat.hot::after{background:#16170f;opacity:.12}}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-top:16px}
.agenda{list-style:none;margin:0;padding:0}
.agenda li{display:grid;grid-template-columns:86px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.agenda li:first-child{border-top:0;padding-top:2px}
.agenda .when{font-weight:650;font-size:14px;line-height:1.25}
.agenda .when span{display:block;color:var(--muted);font-weight:500;font-size:12px}
.agenda .who{font-weight:600}
.agenda .who span{display:block;color:var(--muted);font-weight:400;font-size:13px}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.card-head h2{margin:0}
.card-head a{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.card-head a:hover{color:var(--ink)}
.empty{padding:28px 0;text-align:center;color:var(--muted)}

/* tables */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:650;border-bottom:1px solid var(--line);padding:12px 14px;background:var(--card-2)}
.table td{border-bottom:1px solid var(--line);padding:13px 14px;vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table tr.click{cursor:pointer}.table tr.click:hover td{background:var(--card-2)}
.card .table{border:0;box-shadow:none;border-radius:0}
.table textarea{min-height:38px;height:38px;width:100%;max-width:320px;resize:vertical;font-size:13px;padding:8px 10px}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:3px 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.pill.pending{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.pill.confirmed,.pill.completed{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.pill.cancelled,.pill.no_show{color:var(--bad);background:var(--bad-bg);border-color:transparent}

.kv{display:grid;grid-template-columns:140px 1fr;gap:9px 14px;margin:0;font-size:14px}.panel .kv{margin-bottom:18px}.panel h3{margin:22px 0 8px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.panel{position:fixed;inset:0 0 0 auto;width:min(500px,100%);background:var(--card);border-left:1px solid var(--line);z-index:10;overflow:auto;padding:28px;box-shadow:-30px 0 60px rgba(0,0,0,.18);animation:slide .22s ease-out}
@keyframes slide{from{transform:translateX(24px);opacity:0}}
.events{list-style:none;padding:0;margin:0;font-size:13px}.events li{padding:8px 0;border-bottom:1px solid var(--line)}

/* calendar */
.week{display:grid;grid-template-columns:56px repeat(7,minmax(120px,1fr));overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.week .hd{position:sticky;top:0;padding:10px 8px;font-size:12px;font-weight:650;border-bottom:1px solid var(--line);background:var(--card-2);text-align:center;letter-spacing:.02em}
.week .times,.week .day{position:relative;border-left:1px solid var(--line)}
.week .times{border-left:0}
.week .hr{position:absolute;left:0;right:0;border-top:1px solid var(--line);font-size:11px;color:var(--muted);padding-left:6px}
.week .ev{position:absolute;left:4px;right:4px;border-radius:8px;padding:4px 8px;font-size:12px;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:var(--ink);color:var(--card);cursor:pointer;border:0;border-left:3px solid var(--signal);text-align:left;font-family:inherit;font-weight:550;box-shadow:0 4px 10px -4px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){.week .ev{background:#2d2e27;color:var(--ink)}}
.week .ev.pending{background:var(--warn-bg);color:var(--warn);border-left-color:var(--warn)}
.week .ev.closed{background:repeating-linear-gradient(45deg,var(--card-2),var(--card-2) 6px,var(--line) 6px,var(--line) 12px);cursor:default;border-left:0;box-shadow:none}

.hours-grid{display:grid;gap:10px}
.hours-grid .day{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.hours-grid .periods{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hours-grid input[type=time]{min-height:34px;padding:4px 8px}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,8px);background:var(--ink);color:var(--card);padding:11px 18px;border-radius:999px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:20;font-weight:550;font-size:14px;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.note{background:var(--card-2);border:1px dashed var(--line-2);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.split{grid-template-columns:1fr}}
@media (max-width:760px){.top{padding:10px 14px;gap:10px}.top .brand{flex:1}.top nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.top nav a{white-space:nowrap}.view{padding:20px 14px 60px}h1{font-size:24px}.kv{grid-template-columns:1fr}.table .hide-sm{display:none}.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.stats .stat{padding:14px 12px;font-size:12px;line-height:1.3}.stats .stat .muted{font-size:12px}.stats .stat b{font-size:28px;margin:4px 0 2px}.stat.hot::after{width:60px;height:60px;right:-20px;top:-20px}.hello .row .btn{min-height:36px;padding:6px 14px}.agenda li{grid-template-columns:70px 1fr}.agenda li .pill{grid-column:2;justify-self:start}}

/* website visits */
.vchart{display:block;width:100%;height:170px;margin-top:6px}
.vchart .fill,.hbars .fill{fill:var(--ink)}
@media (prefers-color-scheme:dark){.vchart .fill,.hbars .fill{fill:var(--signal)}}
.vchart .track,.hbars .track{fill:var(--line)}
.vchart rect:hover{opacity:.75}
.chart-x{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;margin-top:8px}
.hbars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hbars li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(60px,1fr) 34px;gap:10px;align-items:center;font-size:14px}
.hbars .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbars svg{width:100%;height:8px;display:block}
.hbars b{text-align:right;font-weight:650}