/* ============================================================================
   dentalOS v5 — the design system.
   Every value here is either sampled from the approved dashboard
   (ui-sandbox/redesign/) or derived from it. No screen invents a colour.
   ============================================================================ */

:root{
  /* ---- brand, sampled from the reference shot ---- */
  --accent:#8C9CFF; --accent-2:#99A7FF; --accent-soft:#B2C2FF;
  --accent-wash:#CCD6FF; --accent-tint:#E6EBFF; --accent-pale:#F1F4FF;
  --accent-deep:#3336F6;            /* the big figure */
  --badge:#3336F6;                  /* a badge carrying white text, not the focus ring */
  --accent-text:#2F41B8;            /* labels and link-ish text */
  --navy:#141628;                   /* the mark, the dock's live tab, tooltips */

  /* ---- ground and surface ---- */
  --bg:#EEF3FE; --surface:#FFFFFF; --surface-alt:#F8FAFF; --surface-sunk:#F1F4FD;
  --border:#E4EAFB; --border-strong:#D5DEF6;

  /* ---- ink ---- */
  --text:#0E1020; --text-2:#6D72AB; --text-3:#8A90C2;

  /* ---- semantic ---- */
  --ok:#0E9E73;   --ok-bg:#E4FAF1;
  --warn:#D9890B; --warn-bg:#FEF5E5;
  --bad:#D5342F;  --bad-bg:#FDECEB;
  --info:#3C56C8; --info-bg:#DDE4FD;

  /* ---- the four areas, sampled ---- */
  --c-treat:#8C9CFF; --c-lab:#F9A33F; --c-plan:#2ED9A4; --c-pat:#FB6FC0;
  --c-treat-bg:#E6EBFF; --c-lab-bg:#FEE8D5; --c-plan-bg:#CFF6E9; --c-pat-bg:#FCDBF1;

  /* ---- avatar tints, rotating ---- */
  --av1:#DDE4FD; --av1f:#3C56C8; --av2:#FEE8D5; --av2f:#C97F1A;
  --av3:#CFF6E9; --av3f:#0E9E73; --av4:#FCDBF1; --av4f:#C7417C;
  --av5:#E3E6FD; --av5f:#4450C8;

  /* ---- shape ---- */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:17px; --r-xl:24px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,22,40,.05);
  --sh-2:0 4px 14px rgba(32,44,120,.10);
  --sh-3:0 12px 34px rgba(32,44,120,.18);

  /* ---- type ---- */
  --font:"Montserrat","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --t-hero:33px; --t-h1:27px; --t-h2:22px; --t-h3:17px;
  --t-body:14px; --t-sm:13px; --t-xs:12px;

  /* ---- rhythm ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:26px; --s7:34px;
  --gutter:30px;                     /* the one number every full-width section aligns to */
}

/* The user measured this: the first draft at 75% browser zoom was right.
   html gets 100vh/.75 so the scaled page is exactly one viewport tall. */
html{zoom:.75;height:133.3333vh;overflow:hidden}
*{box-sizing:border-box}
body{
  margin:0;height:100%;display:flex;flex-direction:column;overflow:hidden;
  font-family:var(--font);font-size:var(--t-body);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;padding:0}
a{color:var(--accent-text);text-decoration:none}
h1,h2,h3,p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px;border-radius:4px}

/* ============================ the shell ============================ */
.topbar{
  flex:none;position:relative;display:flex;align-items:center;gap:13px;
  padding:7px var(--s5);min-height:46px;overflow:hidden;background:#F4F7FD;
  border-bottom:1px solid #E7EDFB;
}
.topbar>.crest{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.topbar>*:not(.crest){position:relative;z-index:1}
.spacer{flex:1}

.brand{display:flex;align-items:center;gap:8px}
.brand .mark{width:34px;height:34px;flex:none}
.brand .word{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1}
.brand .word .os{color:var(--accent-2)}
.brand .by{font-size:8px;font-weight:700;color:#7E8CF0;align-self:flex-end;margin:0 0 2px -3px}

.quick{display:flex;align-items:center;gap:7px}
.qbtn{position:relative;width:30px;height:30px;border-radius:9px;background:var(--surface);
  display:grid;place-items:center;box-shadow:var(--sh-1);border:1px solid var(--border);
  color:var(--accent-text);transition:transform .16s,box-shadow .16s}
.qbtn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.qbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.qbtn .plus{position:absolute;top:-4px;right:-4px;width:13px;height:13px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:9px;font-weight:700;line-height:13px;
  text-align:center;border:1.5px solid #EEF2FE}
.qbtn.on .plus{background:var(--badge)}

.bell{position:relative;width:28px;height:28px;display:grid;place-items:center;margin-left:2px}
.bell .count{position:absolute;top:-2px;right:-3px;min-width:14px;height:14px;border-radius:999px;
  background:#E5484D;color:#fff;font-size:9px;font-weight:700;line-height:14px;text-align:center;
  padding:0 3px;border:1.5px solid #EEF2FE}
.vrule{width:1px;height:22px;background:var(--border-strong);margin:0 4px}
.me{display:flex;align-items:center;gap:7px}
.me .pic{width:26px;height:26px;border-radius:50%;background:var(--accent-tint);
  display:grid;place-items:center;color:var(--accent-text)}
.me .who b{display:block;font-size:10.5px;font-weight:700;line-height:1.3}
.me .who span{display:block;font-size:8.5px;color:var(--text-2);font-weight:500;line-height:1.3}

/* ---- the page header strip (greeting, or a page's title and its actions) ---- */
.phead{flex:none;display:flex;align-items:flex-end;gap:14px;padding:10px var(--gutter) 8px}
.phead .eyebrow{font-size:10px;font-weight:600;color:var(--accent-text);margin:0 0 1px}
.phead h1{font-size:var(--t-hero);font-weight:800;letter-spacing:-.7px;line-height:1.05}
.phead .sub{margin-top:3px;font-size:10px;font-weight:500;color:var(--text-2)}
.phead .sub b{color:var(--accent-text);font-weight:600}

/* ---- the scroll body: pages live here; the page frame itself never scrolls ---- */
.main{flex:1;min-height:0;display:flex;flex-direction:column}
.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--s3)}
.scroll::-webkit-scrollbar{width:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--accent-wash);border-radius:999px;border:3px solid transparent;background-clip:content-box}
.scroll::-webkit-scrollbar-track{background:transparent}

/* Every full-width section lines up with the two dashboard cards. */
.band{padding:0 var(--gutter);margin-bottom:var(--s3)}
.band:last-child{margin-bottom:0}

/* ============================ surfaces ============================ */
.card{background:linear-gradient(180deg,#FDFDFF 0%,#F7F9FF 100%);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);min-height:0;display:flex;flex-direction:column}
.card.flat{box-shadow:none}
.card.lift{box-shadow:var(--sh-2)}
.card>.chead{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4) 0}
.card>.chead h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.5px}
.card>.cbody{padding:var(--s3) var(--s4) var(--s4);min-height:0;flex:1}
.panel{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r)}

/* ============================ controls ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;padding:10px 15px;font-size:var(--t-body);
  font-weight:700;box-shadow:var(--sh-1);transition:transform .14s,box-shadow .14s,background .14s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:none}
.btn svg{color:var(--accent-text);flex:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(140,156,255,.45)}
.btn.primary svg{color:#fff}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--accent-tint);transform:none;box-shadow:none}
.btn.danger{color:var(--bad)} .btn.danger svg{color:var(--bad)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--sh-1)}
.btn.sm{padding:7px 11px;font-size:var(--t-sm);border-radius:9px}

.iconbtn{width:46px;height:46px;border-radius:14px;background:var(--surface);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--accent-text);box-shadow:var(--sh-1);
  transition:transform .16s,box-shadow .16s}
.iconbtn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.iconbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.iconbtn.sm{width:34px;height:34px;border-radius:10px}

.segs{display:flex;align-items:center;gap:2px;background:var(--surface-sunk);border-radius:15px;padding:5px}
.segs button{padding:9px 17px;border-radius:11px;font-size:var(--t-body);font-weight:600;
  color:var(--accent-text);white-space:nowrap;transition:background .18s,color .18s}
.segs button.on{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(140,156,255,.45)}
.segs .div{width:1px;height:18px;background:var(--border-strong);flex:none}

.pill{display:inline-flex;align-items:center;gap:7px;border-radius:11px;padding:10px 15px;
  font-size:var(--t-body);font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.mute{background:var(--surface-sunk);color:var(--text-2)}
.pill.sm{padding:5px 10px;font-size:var(--t-xs);border-radius:8px}

.av{border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;letter-spacing:.2px;
  width:52px;height:52px;font-size:16px}
.av.sm{width:36px;height:36px;font-size:12px}
.av.xs{width:26px;height:26px;font-size:10px}

.kebab{width:26px;height:36px;display:grid;place-items:center;color:var(--accent-text);border-radius:8px}
.kebab:hover{background:var(--accent-tint)}

/* ============================ forms ============================
   Every field states its rule before it is filled, and shows the fault
   under the field, never only on submit. */
.form{display:grid;gap:var(--s4)}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s4)}
.field{display:grid;gap:5px;min-width:0}
.field>label{font-size:var(--t-sm);font-weight:700;color:var(--text)}
.field>label .req{color:var(--bad);margin-left:2px}
.field .hint{font-size:var(--t-xs);font-weight:500;color:var(--text-3)}
.field .ctl{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1.5px solid var(--border-strong);border-radius:var(--r-sm);padding:0 12px;
  transition:border-color .16s,box-shadow .16s}
.field .ctl:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(140,156,255,.22)}
.field .ctl>svg{color:var(--text-3);flex:none}
.field .ctl .pre{font-size:var(--t-body);font-weight:700;color:var(--text-2);flex:none}
.field input,.field select,.field textarea{
  flex:1;min-width:0;border:0;outline:0;background:none;padding:11px 0;font-weight:600}
.field textarea{resize:vertical;min-height:76px;padding:11px 0}
.field select{cursor:pointer;padding-right:4px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);font-weight:500}
.field.bad .ctl{border-color:var(--bad);box-shadow:0 0 0 3px rgba(213,52,47,.14)}
.field .err{display:none;font-size:var(--t-xs);font-weight:600;color:var(--bad)}
.field.bad .err{display:block}
.field.ok .ctl{border-color:#9FE0C6}
.field input[type=number]{-moz-appearance:textfield}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.checks{display:flex;flex-wrap:wrap;gap:var(--s2)}
.check{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-strong);background:var(--surface);font-weight:600;cursor:pointer}
.check input{accent-color:var(--accent)}
.check.on{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-text)}

/* ============================ lists and tables ============================ */
.rows{display:flex;flex-direction:column;gap:7px}
.lrow{display:flex;align-items:center;gap:var(--s4);background:var(--surface-alt);
  border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;
  transition:border-color .14s,box-shadow .14s,background .14s}
.lrow:hover{border-color:var(--accent-soft);box-shadow:var(--sh-2);background:var(--surface)}
.lrow .grow{min-width:0;flex:1}
.lrow .grow b{display:block;font-size:var(--t-h3);font-weight:700;letter-spacing:-.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .grow span{display:block;margin-top:3px;font-size:var(--t-body);font-weight:500;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .acts{display:flex;align-items:center;gap:9px;flex:none}
.lrow.tight{padding:9px 12px}

table.grid{width:100%;border-collapse:separate;border-spacing:0}
table.grid th{text-align:left;font-size:var(--t-xs);font-weight:700;color:var(--text-2);
  padding:0 12px 8px;white-space:nowrap}
table.grid td{padding:11px 12px;background:var(--surface-alt);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);font-weight:600}
table.grid tr td:first-child{border-left:1px solid var(--border);border-radius:var(--r) 0 0 var(--r)}
table.grid tr td:last-child{border-right:1px solid var(--border);border-radius:0 var(--r) var(--r) 0}
table.grid tr:hover td{background:var(--surface)}
table.grid .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- empty, loading and error, which every list must have ---- */
.state{display:grid;place-items:center;gap:var(--s3);padding:var(--s7) var(--s4);text-align:center;color:var(--text-2)}
.state .ico{width:54px;height:54px;border-radius:50%;background:var(--accent-tint);
  display:grid;place-items:center;color:var(--accent)}
.state b{font-size:var(--t-h3);color:var(--text)}
.state p{font-size:var(--t-body);max-width:380px}
.skel{background:linear-gradient(90deg,var(--surface-sunk) 25%,#E8EDFB 37%,var(--surface-sunk) 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ============================ dialogs ============================ */
.scrim{position:fixed;inset:0;background:rgba(18,22,48,.42);backdrop-filter:blur(3px);
  z-index:900;opacity:0;transition:opacity .2s ease}
.scrim.on{opacity:1}
.dlg{position:fixed;z-index:901;left:50%;top:50%;transform:translate(-50%,-48%) scale(.97);
  width:min(620px,calc(100vw - 48px));max-height:min(78vh,760px);display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  opacity:0;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.9,.3,1)}
.dlg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dlg.wide{width:min(900px,calc(100vw - 48px))}
.dlg .dhead{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) var(--s5) var(--s3)}
.dlg .dhead h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.4px}
/* A dialog never grows the page and never changes height: it is bounded by the two bars
   and scrolls inside itself. Sideways scrolling is refused by default — a dialog that
   genuinely cannot be laid out any other way opts in with .dbody.wide. */
.dlg .dbody{padding:0 var(--s5);overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;
  overscroll-behavior:contain}
.dlg .dbody.wide{overflow-x:auto}
.dlg .dbody::-webkit-scrollbar{width:9px}
.dlg .dbody::-webkit-scrollbar-thumb{background:var(--accent-wash);border-radius:999px;
  border:3px solid transparent;background-clip:content-box}
.dlg .dbody>*{max-width:100%}
.dlg .dbody table.grid{width:100%;table-layout:auto}
.dlg .dfoot{display:flex;align-items:center;gap:var(--s3);justify-content:flex-end;
  padding:var(--s4) var(--s5) var(--s5)}
.dlg .dfoot .spacer{flex:1}

/* ============================ tooltips, on a layer of their own ============================ */
.tipbox{position:fixed;z-index:2147483647;top:0;left:0;pointer-events:none;background:var(--navy);
  color:#fff;font-family:var(--font);font-size:var(--t-xs);font-weight:600;white-space:nowrap;
  padding:6px 11px;border-radius:var(--r-xs);box-shadow:var(--sh-3);
  opacity:0;transform:translateY(3px);transition:opacity .13s,transform .13s}
.tipbox.on{opacity:1;transform:translateY(0)}
.tipbox::after{content:"";position:absolute;left:var(--ax,50%);transform:translateX(-50%);border:6px solid transparent}
.tipbox.above::after{top:100%;border-top-color:var(--navy)}
.tipbox.below::after{bottom:100%;border-bottom-color:var(--navy)}

/* ============================ the dock ============================ */
.dock{flex:none;margin:10px auto 12px;display:flex;flex-direction:column;align-items:center;gap:9px;
  max-width:calc(100vw - 32px)}
/* the pill carries the design; the dock itself is only the stack that holds it */
.dockbar{display:flex;align-items:center;padding:7px 10px;
  background:linear-gradient(180deg,#DEE5FE 0%,#D2DCFC 100%);border-radius:var(--r-pill);
  box-shadow:0 14px 38px rgba(43,55,120,.20),0 2px 6px rgba(20,22,40,.06);max-width:100%}
.dsearch{display:none;width:100%}
.dock .it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 15px;border-radius:22px;color:var(--text);white-space:nowrap;
  transition:background .16s,color .16s,transform .16s}
.dock .it svg{width:23px;height:23px}
.dock .it span{font-size:13px;font-weight:700;letter-spacing:-.1px}
.dock .it:hover{background:rgba(255,255,255,.55);transform:translateY(-1px)}
.dock .it.on{background:var(--navy);color:#fff;padding:11px 19px;border-radius:26px}
.dock .it.on:hover{background:var(--navy);transform:none}
.dock .sep{width:1px;height:34px;background:rgba(90,104,180,.24);flex:none;margin:0 2px}
.dock .search{display:flex;align-items:center;gap:11px;background:var(--surface);border-radius:var(--r-pill);
  padding:11px 14px 11px 18px;margin:0 8px;min-width:300px;flex:1;box-shadow:0 1px 3px rgba(20,22,40,.07);cursor:text}
.dock .search .mag,.dock .search .tool{color:var(--accent-text);display:grid;place-items:center}
.dock .search .ph{flex:1;font-size:15px;font-weight:600;color:#8A93D4;text-align:left}
.dock .search .tool{padding:2px;border-radius:7px}
.dock .search .tool:hover{background:var(--accent-tint)}
.dock .search .hair{width:1px;height:22px;background:var(--border-strong);flex:none}

@media (max-width:1180px){
  .dock .it span{display:none} .dock .it{padding:10px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}}

/* The clinic status pill in the page header — defined here because every page may show it. */
.statuspill{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 11px;
  box-shadow:var(--sh-1);font-size:10px;font-weight:700;white-space:nowrap}
.statuspill .ico{color:var(--accent-text);display:grid;place-items:center}
.statuspill .cv{color:var(--text-3);display:grid;place-items:center}
.statuspill .sep{width:1px;height:13px;background:var(--border-strong);flex:none}
.statuspill .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.phead h1{font-size:var(--t-hero);font-weight:800;letter-spacing:-.7px;line-height:1.05}

/* ============================================================
   The navbar and the page header, both 20% taller (the user, 2026-10-31):
   they were reading short against the reference. Everything inside them is
   scaled by the same fifth so the proportions hold.
   ============================================================ */
.topbar{min-height:55px;padding:8px 24px;gap:16px}
.brand{gap:10px}
.brand .mark{width:41px;height:41px}
.brand .word{font-size:22px}
.brand .by{font-size:10px;margin:0 0 3px -4px}
.quick{gap:8px}
.qbtn{width:36px;height:36px;border-radius:11px}
.qbtn .plus{width:16px;height:16px;font-size:11px;line-height:16px;top:-5px;right:-5px}
.bell{width:34px;height:34px}
.bell .count{min-width:17px;height:17px;font-size:10.5px;line-height:17px}
.vrule{height:26px}
.me{gap:9px}
.me .pic{width:31px;height:31px}
.me .who b{font-size:12.6px}
.me .who span{font-size:10.2px}

.phead{padding:12px var(--gutter) 10px;gap:17px}
.phead .eyebrow{font-size:12px;margin:0 0 2px}
.phead h1{font-size:40px;letter-spacing:-.9px}
.phead .sub{margin-top:4px;font-size:12px}
.statuspill{padding:7px 13px;gap:10px;font-size:12px}
.statuspill .sep{height:16px}
.statuspill .dot{width:7px;height:7px}

/* ============================================================
   A dialog always sits between the navbar and the dock, both of which stay
   visible whatever is open. --navh and --dockh are measured at runtime, and
   html is 100vh/.75 tall, so inside the zoomed page the viewport is --vph, not 100vh:
   100vh here means the unzoomed height and would place everything three quarters up. */
:root{--vph:133.3333vh}
.dlg{
  max-width:min(var(--dockw,900px), calc(100vw - 48px));
  top:calc(var(--navh,58px) + (var(--vph) - var(--navh,58px) - var(--dockh,96px)) / 2);
  max-height:calc(var(--vph) - var(--navh,58px) - var(--dockh,96px) - 32px);
}
.spanel{top:calc(var(--navh,58px) + 14px);
  max-height:calc(var(--vph) - var(--navh,58px) - var(--dockh,96px) - 28px)}
.npanel{top:calc(var(--navh,58px) + 8px);
  max-height:calc(var(--vph) - var(--navh,58px) - var(--dockh,96px) - 24px)}

/* ============================================================
   The navbar and the dock are never dimmed, never blurred and never covered.
   Blurring them would take away the one thing that is always meant to work, so
   the scrim stops short of both and the two bars sit above it.
   ============================================================ */
.topbar{position:relative;z-index:902}
.dock{position:relative;z-index:902}
.scrim{
  top:var(--navh,58px);
  bottom:var(--dockh,96px);
  left:0;right:0;
}

/* A dialog is laid out in one column that can always shrink, so it never scrolls
   sideways. A table too wide to rearrange opts in with .dbody.wide. */
.dlg .dbody .form,.dlg .dbody>*{min-width:0}
.form .row2>*,.form .row3>*{min-width:0}
.field input,.field select,.field textarea{width:100%;min-width:0}
.field input[type=date],.field input[type=time]{min-width:0;max-width:100%}
.dlg .dbody .tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.dlg .dbody .lrow{flex-wrap:wrap}

/* ============================================================
   The dock on a phone: two rows. The search is lifted out onto its own row with
   no background, and the pill below keeps the icons alone, in the same order,
   without their labels — which is the only way they all fit across a phone.
   ============================================================ */
@media (max-width:760px){
  .dock{gap:10px;width:100%;max-width:none;padding:0 12px}
  .dock.two-row .dsearch{display:block}
  .dock .it span:last-child{display:none}        /* the labels go */
  .dock .it{padding:11px}
  .dock .it.on{padding:12px;border-radius:50%}
  .dockbar{width:100%;justify-content:space-between;padding:6px 8px;border-radius:30px}
  .dockbar .sep{display:none}
  /* the search on its own row, plain, with no pill behind it */
  .dsearch .search{width:100%;min-width:0;margin:0;border-radius:var(--r-pill);
    background:var(--surface);box-shadow:0 2px 10px rgba(32,44,120,.12);padding:12px 16px}
  .dsearch .search .ph{font-size:15px}
}

/* ============================================================
   The scrim reaches the bottom of the window, so the empty band around the dock
   is dimmed with everything else. Only the pill itself stays crisp, because the
   dock paints above the scrim and is transparent apart from the pill.
   ============================================================ */
.scrim{bottom:0}

/* ============================================================
   The navbar again, a quarter taller, with every part scaled to match: it was
   still reading short against the artifact.
   ============================================================ */
.topbar{min-height:72px;padding:10px 26px;gap:18px}
.brand{gap:12px}
.brand .mark{width:51px;height:51px}
.brand .word{font-size:27px;letter-spacing:-.4px}
.brand .by{font-size:12px;margin:0 0 4px -4px}
.quick{gap:10px}
.qbtn{width:45px;height:45px;border-radius:14px}
.qbtn .plus{width:19px;height:19px;font-size:13px;line-height:19px;top:-6px;right:-6px;border-width:2px}
.bell{width:42px;height:42px}
.bell .count{min-width:20px;height:20px;font-size:12px;line-height:20px;border-width:2px}
.vrule{height:32px}
.me{gap:11px}
.me .pic{width:39px;height:39px}
.me .who b{font-size:15.5px}
.me .who span{font-size:12.5px}

/* ============================================================
   Dark. Not black and not grey: a deep blue-black of the same family as the
   brand, so the accent still belongs on it. The accent is lifted, because
   #8C9CFF text on a dark ground needs to be brighter to stay readable.
   ============================================================ */
:root[data-theme="dark"]{
  --bg:#13151E; --surface:#1B1E2A; --surface-alt:#202435; --surface-sunk:#171A24;
  --border:#2A2F42; --border-strong:#39405A;
  --text:#ECEFF9; --text-2:#A6ACC9; --text-3:#7E85A6;
  --accent:#8C9CFF; --accent-2:#9FACFF; --accent-soft:#6E7CD8;
  --accent-wash:#2E3658; --accent-tint:#242B47; --accent-pale:#1E2334;
  --accent-deep:#A9B5FF; --accent-text:#AEB9FF;
  /* --accent-deep is light here so the focus ring shows on a dark page, which is
     the opposite of what a badge under white text needs: white on #A9B5FF is
     1.96:1, worse than the same badge in light mode. The badge gets its own token. */
  --badge:#5A68B4;
  --navy:#2C3350;
  --ok:#3DD6A3;  --ok-bg:#16332B;
  --warn:#F2B55C; --warn-bg:#352A17;
  --bad:#FF7A72;  --bad-bg:#3A1E1E;
  --info:#9FB0FF; --info-bg:#232A47;
  --mute-bg:#232736;
  --av1:#2B3450; --av1f:#A9B8FF; --av2:#3A2E1E; --av2f:#F0B46A;
  --av3:#163229; --av3f:#56D9AC; --av4:#3A2133; --av4f:#F49BC8; --av5:#262C47; --av5f:#A9B5FF;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 20px rgba(0,0,0,.45);
  --sh-3:0 24px 60px rgba(0,0,0,.6);
}

:root[data-theme="dark"] .topbar{background:#171A26;border-bottom-color:#262B3C}
:root[data-theme="dark"] .card{background:linear-gradient(180deg,#1C202D 0%,#191C27 100%)}
:root[data-theme="dark"] .dock{filter:none}
:root[data-theme="dark"] .dockbar{background:linear-gradient(180deg,#262C44 0%,#1F2437 100%);
  box-shadow:0 14px 38px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4)}
:root[data-theme="dark"] .dock .it.on{background:#0E1018}
:root[data-theme="dark"] .dock .sep{background:rgba(160,174,230,.22)}
:root[data-theme="dark"] .dock .search{background:#2A3048}
:root[data-theme="dark"] .dock .search .ph{color:#9AA3CC}
:root[data-theme="dark"] .brand .mark circle{fill:#E8ECFB}
:root[data-theme="dark"] .brand .word{color:var(--text)}
:root[data-theme="dark"] .qbtn .plus,:root[data-theme="dark"] .bell .count{border-color:#171A26}
:root[data-theme="dark"] .scrim{background:rgba(6,8,14,.56)}
:root[data-theme="dark"] .tile-c{background:#222739;
  box-shadow:0 2px 6px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3)}
:root[data-theme="dark"] .tile-c:hover{box-shadow:0 8px 22px rgba(0,0,0,.55)}
:root[data-theme="dark"] .ev.blue{background:#20304F;border-color:#5D7CC4} 
:root[data-theme="dark"] .ev.green{background:#16332B;border-color:#2F9B78}
:root[data-theme="dark"] .ev.amber{background:#35291A;border-color:#C08A3C}
:root[data-theme="dark"] .ev.pink{background:#3A2030;border-color:#C2659B}
:root[data-theme="dark"] .ev.lav{background:#272C49;border-color:#7A84CC}
:root[data-theme="dark"] .ev .t{color:var(--text)}
:root[data-theme="dark"] .tooth svg path[fill="#FFFFFF"]{fill:#262B3D}
:root[data-theme="dark"] .paybig.owed{background:#352A17;border-color:#5C4A24}
:root[data-theme="dark"] .focushero.in,:root[data-theme="dark"] .focushero{
  background:linear-gradient(104deg,var(--fbg) 0%,var(--surface) 70%)}