/* ============================================================
   SKINBERRY CRM — dashboard styles
   Same family as the site (sand, cream, rose, ink; Fraunces for
   headings), tuned for a screen that is read all day: Jost at a
   heavier weight, denser rows, hairline rules.
============================================================ */

:root{
  --bg:#F5EEE6; --card:#FFFDF9; --sand:#EFE3D6; --cream:#F8F1E9; --shell:#E4D2C1;
  --ink:#2E211B; --ink-2:#5C4A3F; --muted:#86705F; --line:rgba(54,39,32,.11); --line-2:rgba(54,39,32,.22);
  --rose:#C8505B; --rose-dark:#AE414C; --rose-tint:#F8E3E4; --leaf:#557A2E; --clay:#B98A6B; --bad:#A33A3A;
  --wa:#1E8A4C; --wa-dark:#17733F; --side:#2E211B;
  --chart:#C8505B; --grid:rgba(54,39,32,.09);
  --display:"Fraunces",Georgia,serif;
  --ui:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r:14px; --r-sm:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.2}
p{margin:0}
a{color:inherit}
a:not([class]){color:var(--rose-dark);text-decoration:none}
a:not([class]):hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
code{font-size:.85em;background:var(--sand);padding:.05em .35em;border-radius:5px}
hr{border:0;border-top:1px solid var(--line);margin:1.2rem 0}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.block{display:block}
.nowrap{white-space:nowrap}
.late{color:var(--bad)}
.grow{flex:1 1 auto;min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ic{flex:0 0 auto;display:block}
form.inline{display:inline;margin:0}

/* ============ shell ============ */
body.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.side{
  position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--side);color:#E9DDD0;
  display:flex;flex-direction:column;padding:1.2rem .75rem calc(1rem + env(safe-area-inset-bottom,0px));
}
.side-brand{display:block;padding:.2rem .6rem 1.1rem}
.side-brand img{height:44px;width:auto;display:block}
.side-h{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,221,208,.45);margin:1rem .75rem .35rem}
.side-nav a{
  display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:10px;
  text-decoration:none;color:rgba(233,221,208,.82);font-size:.94rem;position:relative;
  transition:background .2s var(--ease),color .2s;
}
.side-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.side-nav a.on{background:rgba(255,255,255,.1);color:#fff}
.side-nav a.on::before{content:"";position:absolute;left:-.75rem;top:.45rem;bottom:.45rem;width:3px;border-radius:0 3px 3px 0;background:var(--rose)}
.side-nav a span{flex:1}
.badge{font-style:normal;font-size:.72rem;font-weight:600;min-width:1.5rem;height:1.35rem;padding:0 .4rem;border-radius:99px;
  background:var(--rose);color:#fff;display:inline-grid;place-items:center}
.side-me{margin-top:auto;display:flex;align-items:center;gap:.6rem;padding:.9rem .5rem .4rem;border-top:1px solid rgba(255,255,255,.1)}
.side-me-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.side-me-t b{font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-me-t small{font-size:.75rem;color:rgba(233,221,208,.55)}
.side-me .icon-btn{color:rgba(233,221,208,.7)}
.side-me .icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.side-site{font-size:.78rem;color:rgba(233,221,208,.5);text-decoration:none;padding:.3rem .5rem}
.side-site:hover{color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;
  padding:.75rem 1.6rem;padding-top:calc(.75rem + env(safe-area-inset-top,0px));
  background:rgba(245,238,230,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top-title{font-family:var(--display);font-weight:400;font-size:1.55rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top-search{flex:1;max-width:420px;margin-left:auto;display:flex;align-items:center;gap:.5rem;
  background:var(--card);border:1px solid var(--line);border-radius:99px;padding:0 .9rem;color:var(--muted)}
.top-search input{flex:1;min-width:0;border:0;background:none;padding:.5rem 0;outline:none;color:var(--ink);font-size:.9rem}
.top-search:focus-within{border-color:var(--rose)}
.top-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn.menu-btn{display:none}
.content{padding:1.4rem 1.6rem 3.5rem;width:100%;max-width:1440px}
.scrim{position:fixed;inset:0;background:rgba(30,20,15,.45);z-index:39}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border:1px solid var(--rose);background:var(--rose);color:#fff;border-radius:99px;
  padding:.62rem 1.2rem;font-size:.92rem;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s,color .2s;min-height:40px;
}
.btn:hover{background:var(--rose-dark);border-color:var(--rose-dark)}
.btn-sm{padding:.4rem .85rem;font-size:.84rem;min-height:34px}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--card);border-color:var(--ink-2);color:var(--ink)}
.btn-wa{background:var(--wa);border-color:var(--wa)}
.btn-wa:hover{background:var(--wa-dark);border-color:var(--wa-dark)}
.btn-link{background:none;border:0;padding:0;color:var(--muted);font-size:.86rem;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:.35rem}
.btn-link:hover{color:var(--ink)}
.btn-link.danger{color:var(--bad)}
.btn-link.small{font-size:inherit}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:0;background:none;color:var(--muted);text-decoration:none}
.icon-btn:hover{background:var(--sand);color:var(--ink)}

/* ============ flash ============ */
.flash{border-radius:12px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.92rem;border:1px solid}
.flash-ok{background:#EAF2E1;border-color:#C9DDB3;color:#3B5A1D}
.flash-error{background:#F9E6E4;border-color:#EBC3BE;color:#8A2E2E}
.flash-info{background:#F7EEDF;border-color:#E8D5B5;color:#6E4E1E}

/* ============ cards, grids ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.25rem;margin-bottom:1.1rem}
.card.flush{padding:0;overflow:hidden}
.card-h{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.85rem}
.card-h h3{font-size:1.02rem;font-weight:500}
.card-h.pad{padding:1.05rem 1.25rem .2rem}
.card-sub{font-size:.8rem;color:var(--muted)}
.card-h .more{margin-left:auto;font-size:.84rem;color:var(--muted);text-decoration:none;white-space:nowrap}
.card-h .more:hover{color:var(--rose-dark)}
.pad{padding-left:1.25rem;padding-right:1.25rem}

.cols{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:1.1rem;align-items:start}
.cols.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.col-main,.col-side{min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.stack{display:flex;flex-direction:column;gap:.75rem}

/* ============ greeting + tiles ============ */
.hello{margin:.2rem 0 1.2rem}
.hello h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.01em}
.hello h2 em{font-style:italic;color:var(--rose)}
.hello p{color:var(--muted);font-size:.92rem;margin-top:.2rem;display:flex;align-items:center;gap:.5rem}
.dot{width:8px;height:8px;border-radius:99px;background:var(--clay);display:inline-block;flex:0 0 auto}
.dot.on{background:var(--leaf);box-shadow:0 0 0 3px rgba(85,122,46,.18)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:.8rem;margin-bottom:1.2rem}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1.1rem;
  display:flex;flex-direction:column;gap:.2rem;text-decoration:none;min-width:0;transition:border-color .2s,transform .2s var(--ease)}
a.tile:hover{border-color:var(--line-2);transform:translateY(-1px)}
.tile-l{font-size:.8rem;color:var(--muted)}
.tile-v{font-size:1.7rem;font-weight:500;line-height:1.15;letter-spacing:-.015em;overflow-wrap:anywhere}
.tile-s{font-size:.78rem;color:var(--muted)}
.dl{font-style:normal;font-weight:500}
.dl.up{color:var(--leaf)} .dl.down{color:var(--bad)}

/* ============ lists ============ */
.list{list-style:none;margin:0;padding:0}
.li{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-top:1px solid var(--line);min-width:0}
.li:first-child{border-top:0;padding-top:.2rem}
.li-main{flex:1;min-width:0;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.li-main b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-main small{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
a.li-main:hover b{color:var(--rose-dark)}
.li-meta{font-size:.8rem;color:var(--muted);white-space:nowrap}
.li.is-done .li-main b{text-decoration:line-through;color:var(--muted)}
.li.is-off{opacity:.55}
.agenda .ag-time{width:3.1rem;font-size:.86rem;font-weight:500;font-variant-numeric:tabular-nums;flex:0 0 auto}
.agenda .ag-bar{width:3px;align-self:stretch;border-radius:3px;flex:0 0 auto}

.av{width:36px;height:36px;border-radius:99px;display:inline-grid;place-items:center;flex:0 0 auto;
  font-size:.8rem;font-weight:600;line-height:1;color:var(--ink-2);letter-spacing:.02em}
.av-sm{width:30px;height:30px;font-size:.72rem}
.av-lg{width:54px;height:54px;font-size:1.05rem}
.side .av{color:var(--ink)}

.tick-btn{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-2);background:var(--card);padding:0;display:grid;place-items:center;flex:0 0 auto}
.tick-btn:hover{border-color:var(--leaf)}
.is-done .tick-btn{background:var(--leaf);border-color:var(--leaf)}
.is-done .tick-btn .tick{width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(43deg)}

.empty{text-align:center;padding:1.8rem 1rem;color:var(--muted);font-size:.9rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.empty-t{color:var(--ink-2);font-weight:500}
.empty .btn{margin-top:.5rem}

/* ============ pills + tags ============ */
.pill{font-family:var(--ui);display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:500;padding:.18rem .6rem .18rem .5rem;border-radius:99px;white-space:nowrap;vertical-align:middle}
.pill i{width:6px;height:6px;border-radius:99px;background:currentColor}
.st-new{background:#FBE2E4;color:#982C38}
.st-contacted{background:#F7EAD3;color:#7D5117}
.st-confirmed{background:#E0E8F3;color:#2D4B76}
.st-completed{background:#E2ECD6;color:#42641F}
.st-no_show{background:#EEE4DC;color:#674E40}
.st-cancelled{background:#ECE8E5;color:#7D706A}
.tag{display:inline-block;font-size:.72rem;padding:.08rem .5rem;border-radius:6px;background:var(--sand);color:var(--ink-2);margin:0 .2rem .2rem 0;vertical-align:middle;font-weight:500}
.tags{margin-top:.6rem}

/* ============ tabs + filters ============ */
.tabs{display:flex;gap:.25rem;overflow-x:auto;margin-bottom:.9rem;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;text-decoration:none;color:var(--muted);font-size:.9rem;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--rose);font-weight:500}
.tabs em{font-style:normal;font-size:.74rem;color:var(--muted);background:var(--sand);border-radius:99px;padding:0 .45rem;min-width:1.4rem;text-align:center}
.tabs em:empty{display:none}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem}
.fld-inline{display:flex;align-items:center;gap:.45rem;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0 .7rem;color:var(--muted);font-size:.84rem}
.fld-inline input,.fld-inline select{border:0;background:none;padding:.5rem 0;outline:none;color:var(--ink);font-size:.9rem;min-width:0}
.fld-inline.grow{flex:1 1 240px}
.fld-inline.grow input{flex:1}
.fld-inline:focus-within{border-color:var(--rose)}
.count{font-size:.84rem;margin:-.3rem 0 .7rem}
.pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem;font-size:.86rem}
.custom-range{display:inline-flex;align-items:center;gap:.4rem}
.custom-range input{border:1px solid var(--line);border-radius:10px;padding:.4rem .5rem;background:var(--card)}

/* ============ tables ============ */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-weight:500;font-size:.76rem;color:var(--muted);padding:.65rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card)}
.tbl td{padding:.62rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr[data-href]{cursor:pointer}
.tbl tbody tr:hover td{background:#FBF6F0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .num-l{font-variant-numeric:tabular-nums}
.tbl .actions{text-align:right;white-space:nowrap;width:1%}
.tbl th:first-child,.tbl td:first-child{padding-left:1.25rem}
.tbl th:last-child,.tbl td:last-child{padding-right:1.1rem}
.tbl-sm{font-size:.86rem}
.tbl-sm td{padding:.45rem .6rem}
.card:not(.flush) .tbl-sm td:first-child{padding-left:0}
.who{display:flex;align-items:center;gap:.65rem;text-decoration:none;min-width:0}
.who > span:not(.av){display:flex;flex-direction:column;line-height:1.3;min-width:0}
.who b{font-weight:500;white-space:nowrap}
.who small{font-size:.78rem;color:var(--muted);white-space:nowrap}
.who:hover b{color:var(--rose-dark)}
.st-select{appearance:none;-webkit-appearance:none;border:0;border-radius:99px;font-size:.76rem;font-weight:500;padding:.25rem 1.6rem .25rem .7rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) 55%,calc(100% - 7px) 55%;background-size:4px 4px;background-repeat:no-repeat}

.tbl-edit td{padding:.35rem .5rem}
.tbl-edit input:not([type=checkbox]):not([type=color]){width:100%;min-width:7rem;border:1px solid transparent;background:transparent;border-radius:8px;padding:.4rem .5rem}
.tbl-edit input:not([type=checkbox]):not([type=color]):hover{border-color:var(--line)}
.tbl-edit input:not([readonly]):focus{border-color:var(--rose);background:#fff;outline:none}
.tbl-edit input.w-num{min-width:4.5rem;width:5.5rem}
.tbl-edit input[type=checkbox]{width:18px;height:18px;accent-color:var(--rose)}
.tbl-edit input[type=color]{width:38px;height:28px;border:1px solid var(--line);border-radius:6px;padding:1px;background:none}
.tbl-edit tr.off td{opacity:.55}
.tbl-edit tr.new-row td{background:var(--cream)}
.tbl th small{font-weight:400}

/* ============ forms ============ */
.fld{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem;min-width:0}
.fld > span{font-size:.8rem;color:var(--ink-2);font-weight:500}
.fld > span i{font-style:normal;font-weight:400;color:var(--muted)}
.fld input,.fld select,.fld textarea,.task-form input,.note-form textarea{
  width:100%;border:1px solid var(--line-2);background:#fff;border-radius:var(--r-sm);padding:.58rem .75rem;font-size:.94rem;
  transition:border-color .2s,box-shadow .2s;min-width:0;
}
.fld textarea,.note-form textarea{resize:vertical;min-height:2.8rem;line-height:1.45}
.fld input:focus,.fld select:focus,.fld textarea:focus,.task-form input:focus,.note-form textarea:focus{border-color:var(--rose);outline:none;box-shadow:0 0 0 3px rgba(200,80,91,.14)}
.fld input[readonly]{background:var(--cream)}
.check{display:flex;align-items:flex-start;gap:.55rem;font-size:.9rem;cursor:pointer;margin:.3rem 0 .8rem}
.check input{width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--rose);flex:0 0 auto}
.form-foot{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;margin-top:.4rem}
.form-foot.pad{padding-top:.9rem;padding-bottom:1.1rem;border-top:1px solid var(--line)}
.hint{font-size:.8rem;color:var(--muted);margin:-.3rem 0 .8rem}
.form-foot .hint{margin:0}
.warn{font-size:.84rem;color:#7D5117;background:#F7EAD3;border-radius:8px;padding:.45rem .7rem;margin:-.2rem 0 .8rem}
.lookup{font-size:.84rem;border-radius:8px;padding:.5rem .75rem;margin:-.2rem 0 .8rem;background:#E0E8F3;color:#2D4B76}
.chosen{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:12px;background:var(--cream)}
.chosen > span:not(.av){flex:1;display:flex;flex-direction:column;line-height:1.3}
.chosen small{color:var(--muted);font-size:.8rem}
fieldset.days{border:0;padding:0;margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
fieldset.days legend{font-size:.8rem;color:var(--ink-2);font-weight:500;margin-bottom:.35rem;padding:0}
fieldset.days .check{margin:0}

.pay-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem;margin-top:.9rem}
.pay-form .fld{margin:0;flex:0 1 9rem}
.pay-form .fld.grow{flex:1 1 12rem}
.card > .pay-form:first-child{margin-top:0}
.note-form{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;margin-bottom:1rem}
.task-form{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.task-form input[name=title]{flex:1 1 10rem}
.task-form input[type=date]{flex:0 1 9.5rem}
.add-task{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem}
.add-task .fld{margin:0;flex:0 1 13rem}
.add-task .fld.grow{flex:1 1 16rem}
.add-user{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.add-user h4{font-size:.95rem}

/* ============ booking + client pages ============ */
.bk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.bk-who{display:flex;align-items:center;gap:.9rem;min-width:0}
.bk-who h2{font-family:var(--display);font-weight:400;font-size:1.6rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.bk-who h2 a{text-decoration:none;color:inherit}
.bk-who h2 a:hover{color:var(--rose-dark)}
.bk-who p{font-size:.88rem;margin-top:.15rem}
.bk-moves{display:flex;flex-wrap:wrap;gap:.45rem}

.facts{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.2rem;margin:0;font-size:.92rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.facts.tight{font-size:.88rem;gap:.35rem 1rem}
.quote{border-left:3px solid var(--shell);padding-left:.8rem;color:var(--ink-2)}
.medical{background:#FBEDE3;border:1px solid #F0D3BD;border-radius:12px;padding:.75rem .9rem;margin:.9rem 0 1.1rem;font-size:.88rem}
.medical b{display:block;font-weight:500;color:#8C3F16;font-size:.8rem;letter-spacing:.02em;margin-bottom:.2rem}
.card .medical:last-child{margin-bottom:0}

.tpls{list-style:none;margin:0;padding:0}
.tpls li{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem 0;border-top:1px solid var(--line)}
.tpls li:first-child{border-top:0;padding-top:0}
.tpls details{flex:1;min-width:0}
.tpls summary{cursor:pointer;font-size:.9rem;padding:.35rem 0;list-style:none}
.tpls summary::-webkit-details-marker{display:none}
.tpls summary::after{content:" ▾";color:var(--muted);font-size:.75rem}
.tpls details[open] summary::after{content:" ▴"}
.tpls summary em{font-style:normal;font-size:.7rem;color:var(--wa);background:#E1F1E7;border-radius:99px;padding:.05rem .45rem;margin-left:.3rem}
.tpl-text{font-size:.84rem;color:var(--ink-2);background:var(--cream);border-radius:10px;padding:.6rem .75rem;margin-top:.3rem;white-space:pre-line}
.tpl-text[dir=rtl]{font-family:"Almarai",var(--ui);text-align:right}
.tpls .btn{margin-top:.1rem}
.tpl-edit{padding:.3rem 0 .6rem}
.tpl-edit h4{font-size:.92rem;margin-bottom:.5rem}
.tpl-edit textarea[dir=rtl]{font-family:"Almarai",var(--ui)}
.tpl-sample{font-size:.8rem;color:var(--muted);margin:-.4rem 0 .6rem}

.tl{list-style:none;margin:0;padding:0 0 0 .9rem;border-left:1px solid var(--line)}
.tl li{position:relative;padding:0 0 .9rem .3rem}
.tl li::before{content:"";position:absolute;left:calc(-.9rem - 4px);top:.45rem;width:7px;height:7px;border-radius:99px;background:var(--shell)}
.tl li.tl-note::before{background:var(--rose)}
.tl-note{font-size:.9rem;background:var(--cream);border-radius:10px;padding:.5rem .7rem;overflow-wrap:anywhere}
.tl-event{font-size:.86rem;color:var(--ink-2)}
.tl-meta{font-size:.74rem;color:var(--muted)}

details.pop{position:relative}
details.pop summary{list-style:none}
details.pop summary::-webkit-details-marker{display:none}
.pop-body{position:absolute;right:0;top:calc(100% + .4rem);z-index:10;width:min(300px,80vw);background:var(--card);border:1px solid var(--line-2);
  border-radius:12px;padding:1rem;box-shadow:0 18px 40px -20px rgba(46,33,27,.5);display:flex;flex-direction:column;gap:1rem}
.pop-body .fld{margin:0}
.status-line{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin-bottom:.4rem}

/* ============ charts ============
   One series, one colour. Hairline grid, 4px-rounded data end, square at
   the baseline, 2px gap between neighbours, bars capped at 24px. */
.cc{margin:1.4rem 0 0;--h:190px}
.cc-plot{position:relative;height:var(--h);margin-left:2.6rem}
.cc-grid span{position:absolute;left:0;right:0;border-top:1px solid var(--grid)}
.cc-grid span:first-child{border-top-color:var(--line-2)}
.cc-grid em{position:absolute;right:100%;margin-right:.55rem;transform:translateY(-50%);font-style:normal;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.cc-col{flex:1;height:100%;position:relative;display:flex;align-items:flex-end;justify-content:center;border-radius:4px}
.cc-col:hover,.cc-col:focus-visible{background:rgba(54,39,32,.04);outline:none}
.cc-col i{display:block;width:100%;max-width:24px;min-height:2px;background:var(--chart);border-radius:4px 4px 0 0}
.cc-col:hover i,.cc-col:focus-visible i{background:var(--rose-dark)}
.cc-col b{position:absolute;left:50%;transform:translate(-50%,-4px);font-size:.72rem;font-weight:500;color:var(--ink-2);white-space:nowrap;pointer-events:none}
.cc-x{display:flex;gap:2px;margin:.4rem 0 0 2.6rem}
.cc-x span{flex:1;font-size:.7rem;color:var(--muted);white-space:nowrap;min-width:0;display:flex;justify-content:center}
.cc-x span:last-child{justify-content:flex-end}   /* the newest label hangs inward, never past the edge */

.hb{display:flex;flex-direction:column;gap:.15rem}
.hb-row{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.32rem .3rem;border-radius:8px}
.hb-row:hover,.hb-row:focus-visible{background:rgba(54,39,32,.04);outline:none}
.hb-l{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-t{height:12px;display:flex}
.hb-t i{display:block;height:100%;min-width:2px;background:var(--chart);border-radius:0 4px 4px 0}
.hb-row:hover .hb-t i{background:var(--rose-dark)}
.hb-v{font-size:.82rem;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;min-width:2rem}

.as-table{margin-top:.9rem;font-size:.82rem}
.as-table summary{cursor:pointer;color:var(--muted)}
.as-table .tbl{margin-top:.5rem}

.tip{position:fixed;z-index:100;pointer-events:none;background:var(--ink);color:#F8F1E9;font-size:.78rem;padding:.4rem .65rem;border-radius:8px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);max-width:280px;transform:translate(-50%,calc(-100% - 10px))}

/* ============ calendar ============ */
.cal-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem}
.cal-nav{display:flex;align-items:center;gap:.35rem}
.cal-nav h2{font-family:var(--display);font-weight:400;font-size:1.3rem;margin-left:.6rem}
.cal-filter select{border:1px solid var(--line);border-radius:10px;padding:.45rem .7rem;background:var(--card)}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.8rem;color:var(--muted);margin-bottom:.8rem}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend i.unassigned{background:#8A7566}
.legend i.tentative{border:1.5px dashed var(--muted);background:transparent}

.cal-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.cal{min-width:calc(56px + var(--days) * 130px)}
.cal-head,.cal-body{display:grid;grid-template-columns:56px repeat(var(--days),minmax(0,1fr))}
.cal-head{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:3}
.cal-dh{padding:.6rem .7rem;border-left:1px solid var(--line);min-width:0}
.cal-dh b{font-weight:500;font-size:.88rem;display:block}
.cal-dh b span{font-size:1.1rem}
.cal-dh small{font-size:.74rem;color:var(--muted)}
.cal-dh small a{text-decoration:none}
.cal-dh.today b{color:var(--rose-dark)}
.cal-body{height:calc(var(--hour) * var(--hours) + 8px);padding-top:8px}
.cal-times{position:relative}
.cal-times span{display:block;height:var(--hour);font-size:.7rem;color:var(--muted);text-align:right;padding-right:.55rem;transform:translateY(-.55em);font-variant-numeric:tabular-nums}
.cal-day{position:relative;border-left:1px solid var(--line);
  background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px),linear-gradient(to bottom,rgba(54,39,32,.045) 1px,transparent 1px);
  background-size:100% var(--hour),100% calc(var(--hour) / 2)}
.cal-day.today{background-color:#FFF8F2}
.cal-day.past{background-color:#FAF6F1}
.cal-slot{position:absolute;left:0;right:0;height:calc(var(--hour) / 2);display:flex;align-items:center;padding:0 .5rem;text-decoration:none;z-index:1}
.cal-slot span{opacity:0;font-size:.72rem;color:var(--rose-dark);transition:opacity .15s}
.cal-slot:hover{background:rgba(200,80,91,.06)}
.cal-slot:hover span,.cal-slot:focus-visible span{opacity:1}
.ev{position:absolute;z-index:2;border-radius:7px;padding:.2rem .45rem;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  background:#F4ECE4;background:color-mix(in srgb,var(--c) 15%,#fff);border-left:3px solid var(--c);line-height:1.25;
  transition:box-shadow .15s}
.ev:hover{box-shadow:0 8px 18px -10px rgba(46,33,27,.55);z-index:4}
.ev b{font-size:.76rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev small{font-size:.7rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.tentative{background:#fff;border:1.5px dashed var(--c);border-left-width:3px}
.ev.st-no_show{opacity:.55}
.ev.st-no_show b{text-decoration:line-through}
.ev-mark{position:absolute;right:.35rem;top:.2rem;font-style:normal;font-size:.72rem;color:var(--ink-2)}
.cal-now{position:absolute;left:0;right:0;height:2px;background:var(--rose);z-index:3}
.cal-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:99px;background:var(--rose)}
.cal-agenda{display:none}

/* ============ gate (sign in, setup) ============ */
body.gate{min-height:100vh;display:grid;place-items:center;padding:1.5rem 1rem;background:var(--sand)}
.gate-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:2rem 1.8rem;box-shadow:0 30px 60px -40px rgba(46,33,27,.5)}
.gate-logo{height:56px;width:auto;display:block;margin-bottom:1.4rem}
.gate-card h1{font-family:var(--display);font-weight:400;font-size:1.9rem;margin-bottom:.3rem}
.gate-card h1 em{font-style:italic;color:var(--rose)}
.gate-card > .muted{margin-bottom:1.3rem;font-size:.92rem}
.gate-card .stack{gap:0}
.gate-card .fld{margin-bottom:.85rem}
.gate-card .btn{margin-top:.4rem}
.gate-foot{font-size:.84rem;margin-top:1.2rem;text-align:center}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

/* ============ responsive ============ */
@media (max-width:1180px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .cols.even{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  body.app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;width:264px;transform:translateX(-102%);transition:transform .3s var(--ease);
    padding-top:calc(1.2rem + env(safe-area-inset-top,0px))}
  .side.open{transform:none;box-shadow:20px 0 50px -20px rgba(0,0,0,.5)}
  .icon-btn.menu-btn{display:inline-grid;margin-left:-.4rem}
  .top{padding-left:1rem;padding-right:1rem;gap:.6rem}
  .top-search{display:none}
  .top-actions{margin-left:auto}
  .content{padding:1rem 1rem 3rem}
}
@media (max-width:760px){
  .cal-wrap,.legend{display:none}
  .cal-agenda{display:block}
  .grid3{grid-template-columns:1fr 1fr}
  .top-title{font-size:1.3rem}
  .top-actions .btn span{display:none}
  .top-actions .btn{padding:.4rem .6rem}
  .hide-sm{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-v{font-size:1.4rem}
  .bk-who h2{font-size:1.35rem}
  .hb-row{grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) auto}
}
@media (max-width:520px){
  .grid2,.grid3,.row2{grid-template-columns:minmax(0,1fr)}
  .card{padding:1rem}
  .card-h.pad{padding:.95rem 1rem .2rem}
  .tbl th:first-child,.tbl td:first-child{padding-left:1rem}
  .li .btn-wa span{display:none}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts dt{margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}
@media print{
  .side,.top,.filters,.tabs,.pager,form button,.note-form,.task-form{display:none!important}
  body.app{display:block}
  .card{break-inside:avoid;border-color:#ccc}
}

/* ============ toast: a request arrived while the page was open ============ */
.toast{position:fixed;right:1.2rem;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));z-index:90;max-width:min(340px,calc(100vw - 2rem));
  background:var(--ink);color:#F8F1E9;border-radius:14px;padding:.85rem 1.1rem;text-decoration:none;display:flex;flex-direction:column;gap:.1rem;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);border-left:4px solid var(--rose);
  opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.toast.in{opacity:1;transform:none}
.toast b{font-weight:500}
.toast span{font-size:.86rem;color:rgba(248,241,233,.8)}

/* ============ phones: long tables become stacked rows ============
   m-main = the person, m-side = the quick action beside them,
   m-sub = supporting lines, m-end = the status control, m-hide = dropped. */
@media (max-width:640px){
  .tbl-m thead{display:none}
  .tbl-m,.tbl-m tbody{display:block}
  .tbl-m tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.2rem .75rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
  .tbl-m tbody tr:last-child{border-bottom:0}
  .tbl-m td{display:block;padding:0!important;border:0!important;background:none!important;min-width:0}
  .tbl-m td.m-hide{display:none}
  .tbl-m td.m-main{grid-column:1;grid-row:1}
  .tbl-m td.m-side{grid-column:2;grid-row:1;justify-self:end;width:auto}
  .tbl-m td.m-sub{grid-column:1;font-size:.84rem;color:var(--ink-2);padding-left:calc(30px + .65rem)!important}
  .tbl-m td.m-sub:empty{display:none}
  .tbl-m td.m-end{grid-column:2;grid-row:2 / span 2;justify-self:end}
  .tbl-m td[data-m]::before{content:attr(data-m) " ";color:var(--muted)}
  .tbl-m td.m-sub small.block{display:inline}
  .tbl-m td.m-sub small.block::before{content:" · "}
}

/* booking page on narrow screens: who it is and the WhatsApp buttons come
   before the long appointment form — that is what reception reaches for */
@media (max-width:1180px){
  .bk-cols{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .bk-cols > .col-main,.bk-cols > .col-side{display:contents}
  .bk-cols .o-client{order:1} .bk-cols .o-wa{order:2} .bk-cols .o-form{order:3}
  .bk-cols .o-asked{order:4} .bk-cols .o-pay{order:5} .bk-cols .o-tl{order:6} .bk-cols .o-del{order:7}
}