/* GLeX — clinic CRM prototype.
 *
 * Loaded only on the unlisted /crm pages, on top of glex.css: the same tokens
 * and components, plus the app chrome a public page never needs — the section
 * sidebar, case rows, the case stepper and approval trail, dialogs, toasts and
 * the dashboard charts. The desktop layout follows the clinic-cabinet screen
 * of the design code (§12, "04 · Десктоп · кабінет клініки"); statuses, the
 * dialog and the toast follow §08 and §10.
 *
 * Structure: frame → page head → controls → queue → case → approvals →
 * archive → dashboard → clinic profile → picker → overlays.
 */

/* Chart colours. Context bars recede, the current period carries the accent
   (blue = active state, design code rule 02). Both pairs were run through the
   dataviz validator: hue separation passes in both themes; the light context
   gray sits below 3:1 against the card, which is allowed only because every
   chart also prints its values and has a table view. */
:root{
  --chart-context:#A3ACB6; --chart-ink:#4B5560; --chart-accent:var(--blue);
  --overlay:rgba(16,24,32,.42);
}
:root[data-theme="dark"]{
  --chart-context:#5E6B78; --chart-ink:#C3CCD5;
  --overlay:rgba(0,0,0,.6);
}

/* ── frame ─────────────────────────────────────────────────────────────── */
.crm{display:grid; gap:var(--s-5); align-items:start; padding-top:var(--s-5)}
@media (min-width:1000px){ .crm{grid-template-columns:236px minmax(0,1fr)} }
.crm-main{min-width:0; display:grid; gap:var(--s-5); align-content:start}

.crm-side{
  display:grid; gap:var(--s-4); align-content:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s-4);
}
@media (min-width:1000px){ .crm-side{position:sticky; top:96px} }
.crm-side__clinic{font-size:13.5px; line-height:1.45; color:var(--faint)}
.crm-side__clinic b{display:block; font-size:15px; color:var(--title)}

.crm-nav{display:grid; gap:2px}
.crm-nav a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
  min-height:44px; padding:0 12px; border-radius:var(--r-field);
  color:var(--muted); text-decoration:none; font-size:15px; font-weight:500;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
@media (hover:hover){ .crm-nav a:hover{color:var(--blue); background:var(--blue-tint)} }
.crm-nav a:focus-visible{outline:none; box-shadow:var(--focus)}
.crm-nav a[aria-current="page"]{background:var(--blue-tint); color:var(--blue-strong); font-weight:600}
.crm-nav__n{font-family:var(--mono); font-size:12px; color:var(--faint)}
.crm-nav a[aria-current="page"] .crm-nav__n{color:inherit}
.crm-nav__sep{height:1px; background:var(--line); margin:var(--s-2) 0}

.crm-role{display:grid; gap:6px}
.crm-role label{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
                text-transform:uppercase; color:var(--faint)}
.crm-side__foot{font-size:13px; line-height:1.5; color:var(--faint)}
.linkish{appearance:none; background:none; border:0; padding:0; font:inherit; text-align:left;
         color:var(--blue); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.linkish:focus-visible{outline:none; box-shadow:var(--focus); border-radius:4px}

/* Below 1000px the sidebar becomes a strip: sections scroll sideways, the
   role switch sits under them. The page itself never scrolls sideways. */
@media (max-width:999px){
  .crm-side{padding:var(--s-3); gap:var(--s-3)}
  .crm-side__clinic{display:none}
  .crm-nav{display:flex; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--s-1))}
  .crm-nav::-webkit-scrollbar{display:none}
  .crm-nav a{flex:none; min-height:40px; white-space:nowrap}
  .crm-nav__sep{display:none}
  .crm-role{grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--s-3)}
}

/* ── page head ─────────────────────────────────────────────────────────── */
.crm-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
          gap:var(--s-3) var(--s-5)}
.crm-head h1{font-size:clamp(26px,3vw,32px); letter-spacing:-.02em}
.crm-head p{margin-top:var(--s-2); color:var(--muted); max-width:62ch}
.crm-head__actions{display:flex; flex-wrap:wrap; gap:var(--s-2)}

.demo-note{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-1) var(--s-3)}

/* ── controls ──────────────────────────────────────────────────────────── */
.input,.select,.textarea{
  width:100%; min-height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-field);
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:15.5px;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.textarea{padding:12px 14px; min-height:120px; line-height:1.5; resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--blue); box-shadow:var(--focus)}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.textarea[readonly]{background:var(--surface-alt); color:var(--muted)}
.select{appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px}
.select--sm,.input--sm{min-height:40px; font-size:14.5px}

.field{display:grid; gap:6px}
.field > span:first-child,.field__label{font-size:14px; font-weight:600; color:var(--ink)}
.field__hint{font-size:13.5px; color:var(--faint)}

.toolbar{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); align-items:center}
.toolbar .input,.toolbar .select{width:auto; flex:1 1 180px; min-width:0}
.toolbar .input{flex-basis:240px}

/* Switch — a checkbox that looks like what it does. */
.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:15px;
        color:var(--ink); min-height:40px}
.switch input{appearance:none; width:40px; height:24px; margin:0; flex:none; position:relative;
  border-radius:var(--r-pill); background:var(--line); cursor:pointer;
  transition:background var(--fast) var(--ease)}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform var(--fast) var(--ease)}
.switch input:checked{background:var(--blue)}
.switch input:checked::after{transform:translateX(16px)}
.switch input:focus-visible{outline:none; box-shadow:var(--focus)}
.switch input:disabled{opacity:.55; cursor:default}

/* Checkbox rows — consent and dialog options (design code §05). */
.check{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
       font-size:15px; line-height:1.5; color:var(--muted); cursor:pointer}
.check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--blue); cursor:pointer}
.check b{color:var(--title); font-weight:600}

.chips{display:flex; flex-wrap:wrap; gap:var(--s-2)}
.chip--sm{padding:6px 12px; font-size:14px}

.btn--danger{border-color:var(--err); color:var(--err)}
@media (hover:hover){ .btn--danger:hover{background:var(--err-tint)} }
.btn--ghost{border-color:var(--line); color:var(--ink)}
@media (hover:hover){ .btn--ghost:hover{border-color:var(--blue); color:var(--blue); background:var(--surface)} }

/* KPI tiles (dataviz: label, value, optional note; proportional figures). */
.kpis{display:grid; gap:var(--s-3); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){ .kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Six tiles read as two rows of three: the main column is too narrow for a
   single row of six without wrapping every label. */
.kpis--6{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){ .kpis--6{grid-template-columns:repeat(3,minmax(0,1fr))} }
.kpi{display:grid; gap:2px; align-content:start; text-align:left; font:inherit; color:inherit;
     background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
     padding:var(--s-3) var(--s-4); box-shadow:var(--shadow-card)}
button.kpi{cursor:pointer; transition:border-color var(--fast) var(--ease)}
@media (hover:hover){ button.kpi:hover{border-color:var(--blue)} }
button.kpi:focus-visible{outline:none; box-shadow:var(--focus)}
.kpi__label{font-size:13.5px; color:var(--muted)}
.kpi__value{font-size:clamp(24px,2.6vw,30px); font-weight:800; color:var(--title); line-height:1.15}
.kpi__value small{font-size:15px; font-weight:600; color:var(--muted)}
.kpi__note{font-size:12.5px; color:var(--faint)}
.kpi--warn .kpi__value{color:var(--warn)}
.kpi--err .kpi__value{color:var(--err)}

/* Empty zones: the only place the dotted field is allowed (design code §03). */
.empty{
  border-radius:var(--r-sheet); padding:clamp(var(--s-5),4vw,var(--s-7)) var(--s-5);
  background-color:var(--canvas);
  background-image:radial-gradient(circle,var(--dot) 1.5px,transparent 1.5px);
  background-size:32px 32px; text-align:center; color:var(--muted);
  display:grid; gap:var(--s-2); justify-items:center;
}
:root[data-theme="dark"] .empty{border:1px solid var(--line)}
.empty h3{font-size:18px}

/* ── queue ─────────────────────────────────────────────────────────────── */
.case-list{display:grid; gap:10px}
.case-row{
  display:grid; gap:4px var(--s-4); align-items:center;
  grid-template-columns:76px minmax(0,1fr) 150px 140px auto;
  grid-template-areas:"id main field who status";
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px; color:inherit; text-decoration:none;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
@media (hover:hover){ .case-row:hover{border-color:var(--blue); box-shadow:var(--shadow-lift)} }
.case-row:focus-visible{outline:none; box-shadow:var(--focus)}
.case-row__id{grid-area:id; font-family:var(--mono); font-size:13px; color:var(--faint)}
.case-row__main{grid-area:main; min-width:0; display:grid; gap:2px}
.case-row__title{font-size:16px; font-weight:600; color:var(--title); line-height:1.35}
.case-row__meta{font-size:13.5px; color:var(--muted)}
.case-row__field{grid-area:field; font-size:14px; color:var(--muted)}
.case-row__who{grid-area:who; font-size:14px; color:var(--muted)}
.case-row__who em{font-style:normal; color:var(--faint)}
.case-row__status{grid-area:status; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end}
.due{font-family:var(--mono); font-size:12.5px; color:var(--faint)}
.due--soon{color:var(--warn)}
.due--over{color:var(--err)}
@media (max-width:1180px){
  .case-row{grid-template-columns:64px minmax(0,1fr) auto;
            grid-template-areas:"id main status" "id field who"}
  .case-row__who{text-align:right}
}
@media (max-width:640px){
  .case-row{grid-template-columns:minmax(0,1fr) auto;
            grid-template-areas:"id status" "main main" "field who"; padding:14px}
}

/* ── case ──────────────────────────────────────────────────────────────── */
.case-head{display:grid; gap:var(--s-2)}
.case-head__ref{font-family:var(--mono); font-size:13px; color:var(--faint); letter-spacing:.04em}
.case-head h1{font-size:clamp(24px,2.8vw,30px)}
.case-head__badges{display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center}

/* Stepper: where the case is in the clinic's own procedure (Standards, §4). */
.stepper{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2);
         grid-template-columns:repeat(6,minmax(0,1fr))}
.stepper li{display:grid; gap:6px; align-content:start; font-size:13px; color:var(--faint);
            line-height:1.3}
.stepper li::before{content:""; height:4px; border-radius:2px; background:var(--line)}
.stepper .is-done{color:var(--muted)}
.stepper .is-done::before{background:var(--ok)}
.stepper .is-now{color:var(--title); font-weight:600}
.stepper .is-now::before{background:var(--blue)}
.stepper small{display:block; font-weight:500; color:var(--warn)}
@media (max-width:640px){
  .stepper{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:var(--s-3)}
}

.actionbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
           gap:var(--s-3) var(--s-4)}
.actionbar__text{font-size:15px; color:var(--muted); max-width:58ch}
.actionbar__text b{color:var(--title)}
.actionbar__btns{display:flex; flex-wrap:wrap; gap:var(--s-2)}

.case-grid{display:grid; gap:var(--s-4); align-items:start}
@media (min-width:1100px){ .case-grid{grid-template-columns:minmax(0,1fr) 300px} }
.case-col,.case-aside{display:grid; gap:var(--s-4); min-width:0; align-content:start}

.card__title{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3)}
.card__title h2{font-size:18px; letter-spacing:-.01em}
.card h4{margin:0; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
         color:var(--faint); font-weight:600}

.kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px var(--s-3); font-size:14.5px; margin:0}
.kv dt{color:var(--faint)}
.kv dd{margin:0; color:var(--ink); min-width:0}

.facts{display:flex; flex-wrap:wrap; gap:6px}

.chat{display:grid; gap:var(--s-3); max-height:520px; overflow-y:auto; padding-right:4px}
.chat .msg__meta{margin-top:-6px}
.msg--system{justify-items:center; text-align:center}
.msg--system span{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
                  text-transform:uppercase; color:var(--faint); max-width:52ch}
.bubble--client{justify-self:start; background:var(--surface-alt); color:var(--ink);
                border-radius:18px 18px 18px 6px; white-space:pre-wrap}
.bubble--clinic{justify-self:end; background:var(--blue-tint); color:var(--ink);
                border-radius:18px 18px 6px 18px; white-space:pre-wrap}
.msg--right{justify-items:end}
.composer{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-2); align-items:end}
.composer .textarea{min-height:52px; height:52px; resize:none}
@media (max-width:560px){ .composer{grid-template-columns:1fr} }

.intake{display:grid; gap:var(--s-3)}
.intake__q{font-size:16px; color:var(--title); font-weight:500}
.intake__a{font-size:15px; color:var(--muted)}
.norms{display:grid; gap:var(--s-3)}
.norm--sm{padding:var(--s-3) var(--s-4)}
.norm--sm .norm__act{font-size:15px}
.norm--sm .norm__text{font-size:14.5px}
.norm-ref{font-size:14px}
.norm-ref a{font-family:var(--mono); font-weight:500; white-space:nowrap}

.doc{display:grid; gap:var(--s-2)}
.doc + .doc{margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--line)}
.doc__head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2)}
.doc__head h3{font-size:16px}

.trail{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3)}
.trail li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:start;
          font-size:14px; color:var(--muted)}
.trail b{color:var(--title); font-weight:600}
.trail .t{display:block; font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:2px}
.trail q{display:block; margin-top:4px; padding-left:10px; border-left:2px solid var(--line);
         font-style:normal; quotes:none}
.mark{width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
      font-size:12px; font-weight:700; line-height:1; margin-top:1px}
.mark--ok{background:var(--ok-tint); color:var(--ok)}
.mark--wait{background:var(--warn-tint); color:var(--warn)}
.mark--back{background:var(--err-tint); color:var(--err)}
.mark--todo{background:var(--surface-alt); color:var(--faint)}

.log{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14px; color:var(--muted)}
.log li{display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--s-3)}
.log time{font-family:var(--mono); font-size:12px; color:var(--faint); padding-top:2px}
.log b{color:var(--title); font-weight:600}
@media (max-width:560px){ .log li{grid-template-columns:1fr; gap:2px} }

/* AI helper: it suggests, a person decides — the panel says so and looks it. */
.ai{border-left:3px solid var(--blue)}
.ai__tag{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--blue);
         text-transform:uppercase}
.sim{display:grid; gap:6px; padding:var(--s-3) 0; border-top:1px solid var(--line)}
.sim:first-of-type{border-top:0; padding-top:0}
.sim__top{display:flex; justify-content:space-between; gap:var(--s-2); align-items:baseline}
.sim__id{font-family:var(--mono); font-size:12.5px; color:var(--faint)}
.sim__title{font-size:14.5px; font-weight:600; color:var(--title); line-height:1.35}
.sim__out{font-size:13.5px; color:var(--muted)}
.meter{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-2); align-items:center;
       font-size:12.5px; color:var(--faint)}
.meter__track{height:6px; border-radius:3px; background:var(--surface-alt); overflow:hidden}
.meter__fill{display:block; height:100%; border-radius:3px; background:var(--chart-ink)}

/* ── approvals ─────────────────────────────────────────────────────────── */
.approval{display:grid; gap:var(--s-3)}
.approval__top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-2) var(--s-3)}
.approval__ref{font-family:var(--mono); font-size:12.5px; color:var(--faint)}
.approval h3 a{color:inherit; text-decoration:none}
@media (hover:hover){ .approval h3 a:hover{color:var(--blue)} }
.quote{margin:0; padding:var(--s-3) var(--s-4); border-radius:var(--r-field);
       background:var(--surface-alt); font-family:inherit; font-size:15px; line-height:1.55; color:var(--ink);
       white-space:pre-wrap; max-height:260px; overflow:auto}

/* ── archive ───────────────────────────────────────────────────────────── */
.ask-archive{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-2)}
@media (max-width:560px){ .ask-archive{grid-template-columns:1fr} }
.rag-answer{display:grid; gap:var(--s-3)}
.rag-answer p{font-size:15.5px; line-height:1.6}
.rag-answer a.cite{font-family:var(--mono); font-size:13.5px; font-weight:500; white-space:nowrap}
.arc{display:grid; gap:var(--s-2)}
.arc[open]{border-color:var(--blue)}
.arc summary{list-style:none; cursor:pointer; display:grid; gap:4px}
.arc summary::-webkit-details-marker{display:none}
.arc summary:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-field)}
.arc__top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-2); align-items:center}
.arc__id{font-family:var(--mono); font-size:12.5px; color:var(--faint)}
.arc__title{font-size:16.5px; font-weight:600; color:var(--title)}
.arc__body{display:grid; gap:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--line);
           font-size:15px; color:var(--muted)}
.arc__body h4{margin-bottom:4px}
.arc:target{box-shadow:var(--focus)}

/* ── dashboard: charts ─────────────────────────────────────────────────── */
.dash{display:grid; gap:var(--s-4)}
@media (min-width:900px){ .dash--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chart{margin:0; display:grid; gap:var(--s-3); position:relative}
.chart__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:var(--s-2)}
.chart__head > div{flex:1 1 180px; min-width:0}
.chart__head > .chip,.chart__head > .btn{flex:none}
.chart__plot{width:100%; min-height:200px}
.chart__plot svg{width:100%; height:auto}
.chart__head h2{font-size:17px}
.chart__sub{font-size:13.5px; color:var(--muted)}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.chart .grid-line{stroke:var(--line); stroke-width:1}
.chart .axis{font-family:var(--mono); font-size:11px; fill:var(--faint)}
.chart .val{font-size:12px; font-weight:600; fill:var(--muted)}
.chart .bar{fill:var(--chart-context); transition:opacity var(--fast) var(--ease)}
.chart .bar--now{fill:var(--chart-accent)}
.chart .hit{fill:transparent; cursor:default}
.chart .hit:focus{outline:none}
.chart g.col:hover .bar,.chart g.col:focus-within .bar{opacity:.78}
.chart g.col:focus .bar{stroke:var(--blue); stroke-width:2}
.tip{position:absolute; z-index:5; pointer-events:none; min-width:120px;
     background:var(--surface); border:1px solid var(--line); border-radius:var(--r-field);
     box-shadow:var(--shadow-lift); padding:8px 12px; font-size:13px; color:var(--muted)}
.tip b{display:block; font-size:16px; color:var(--title)}
.tip[hidden]{display:none}

.hbars{display:grid; gap:10px; margin:0; padding:0; list-style:none}
.hbars li{display:grid; grid-template-columns:minmax(120px,40%) minmax(0,1fr) 36px;
          gap:var(--s-3); align-items:center; font-size:14px; color:var(--muted)}
.hbars .track{height:14px; display:flex; align-items:center}
.hbars .fill{display:block; height:14px; border-radius:0 4px 4px 0; background:var(--chart-ink);
             min-width:2px}
.hbars .num{font-weight:600; color:var(--title); text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:560px){ .hbars li{grid-template-columns:minmax(0,1fr) 36px} .hbars .track{grid-column:1 / -1; order:3} }

.table-wrap{overflow-x:auto}
.table{width:100%; border-collapse:collapse; font-size:14.5px}
.table th,.table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.table th{font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--faint); text-transform:uppercase}
.table td.num,.table th.num{text-align:right; font-variant-numeric:tabular-nums}
.table tr:last-child td{border-bottom:0}
.table .inline-bar{display:inline-block; vertical-align:middle; height:8px; border-radius:0 4px 4px 0;
                   background:var(--chart-ink); margin-right:8px}

/* ── clinic profile ────────────────────────────────────────────────────── */
.form-grid{display:grid; gap:var(--s-4)}
@media (min-width:760px){ .form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
.hours{display:grid; gap:var(--s-2)}
.hours__row{display:grid; grid-template-columns:110px auto minmax(0,1fr); gap:var(--s-3); align-items:center}
.hours__time{display:flex; gap:var(--s-2); align-items:center; color:var(--faint); font-size:14px}
.hours__time .select{width:auto; min-width:96px}
@media (max-width:560px){ .hours__row{grid-template-columns:1fr auto} .hours__time{grid-column:1 / -1} }
.closures{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2)}
.closures li{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2);
             padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-field); font-size:14.5px}
.closures time{font-family:var(--mono); font-size:13px; color:var(--muted)}
/* The form sits in a half-width card, so it stays two columns at every size:
   dates side by side, the reason and the button on their own rows. */
.closure-add{display:grid; gap:var(--s-2) var(--s-3); grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end}
.closure-add .field:nth-child(3){grid-column:1 / -1}
.closure-add .btn{justify-self:start}

/* ── picker (client view) ──────────────────────────────────────────────── */
.picker{display:grid; gap:var(--s-5); align-items:start}
@media (min-width:1100px){ .picker{grid-template-columns:280px minmax(0,1fr)} }
.filters{display:grid; gap:var(--s-4); align-content:start}
@media (min-width:1100px){ .filters{position:sticky; top:96px} }
.filters__row{display:grid; gap:var(--s-2)}
.results{display:grid; gap:var(--s-3)}
.results__bar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s-2)}
.results__bar .select{width:auto}
.clinic-list{display:grid; gap:var(--s-3)}
@media (min-width:760px){ .clinic-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.clinic{display:grid; gap:var(--s-2); align-content:start}
.clinic__top{display:flex; justify-content:space-between; gap:var(--s-2); align-items:flex-start}
.clinic h3{font-size:17px}
.clinic__uni{font-size:14.5px; color:var(--muted)}
.clinic__meta{display:flex; flex-wrap:wrap; gap:4px var(--s-3); font-size:14px; color:var(--muted)}
.clinic__meta b{color:var(--title)}
.clinic .status-line{font-size:14px}
.clinic__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2);
              margin-top:var(--s-1)}
.clinic--partner{border-color:var(--blue)}
.stars{color:var(--warn); letter-spacing:1px}

/* ── overlays: dialog and toast (design code §10) ──────────────────────── */
.sheet{width:min(460px, calc(100vw - 32px)); max-height:calc(100svh - 32px);
       border:0; border-radius:var(--r-sheet); padding:0;
       background:var(--surface); color:var(--ink); box-shadow:0 18px 44px rgba(34,60,90,.18)}
:root[data-theme="dark"] .sheet{border:1px solid var(--line); box-shadow:none}
.sheet::backdrop{background:var(--overlay)}
.sheet form{display:grid; gap:var(--s-4); padding:26px}
.sheet h2{font-size:20px; line-height:1.25}
.sheet p{font-size:15.5px; color:var(--muted)}
.sheet__btns{display:flex; gap:10px; margin-top:var(--s-1)}
.sheet__btns .btn{flex:1}
@media (max-width:420px){ .sheet__btns{flex-direction:column-reverse} }

.toast{position:fixed; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); z-index:60;
       transform:translateX(-50%); width:min(520px, calc(100vw - 32px));
       display:flex; align-items:center; gap:var(--s-3);
       background:#3F3F3F; color:#fff; border-radius:10px; padding:14px 16px;
       font-size:15px; box-shadow:var(--shadow-lift); animation:rise .25s var(--ease) both}
:root[data-theme="dark"] .toast{background:#E7EDF3; color:#101820}
.toast span{flex:1}
.toast a{color:#8FC2EA; font-weight:600; text-decoration:none; white-space:nowrap}
:root[data-theme="dark"] .toast a{color:#22608F}
.toast[hidden]{display:none}

/* ── spacing reconciliation ────────────────────────────────────────────
   glex.css spaces card children with margins; CRM cards that lay out their
   children with grid gap opt out, or the two would add up. And `hidden` must
   beat the display of .note and friends. */
.crm [hidden]{display:none !important}
.intake,.approval,.clinic,.arc{gap:0}
.actionbar > * + *{margin-top:0}
.filters{gap:0}
.filters > * + *{margin-top:var(--s-4)}
.filters summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
                 gap:var(--s-2); font-size:17px; font-weight:700; color:var(--title)}
.filters summary::-webkit-details-marker{display:none}
.filters summary::after{content:""; width:10px; height:10px; flex:none; margin-right:4px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translateY(-3px);
  transition:transform var(--fast) var(--ease)}
.filters[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.filters summary:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-field)}
.sort-label{display:inline-flex; align-items:center; gap:var(--s-2); font-size:14px; color:var(--muted)}
.sort-label .select{width:auto}
.crm-head .eyebrow{margin-bottom:var(--s-2)}
/* Grid items default to min-width:auto, so one wide child (the tab strip, a
   table in its scroll box) would stretch the whole column past a phone's
   width. Every CRM grid lets its items shrink; the wide child scrolls. */
.crm-main > *,.dash > *,.form-grid > *,.picker > *,.kpis > *,.case-grid > *{min-width:0}

/* Compact rows for lists inside narrow dashboard cards. */
.mini-list{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3)}
.mini-list li{display:grid; gap:4px; padding-bottom:var(--s-3); border-bottom:1px solid var(--line)}
.mini-list li:last-child{border-bottom:0; padding-bottom:0}
.mini-list a{font-weight:600; color:var(--title); text-decoration:none; line-height:1.35}
@media (hover:hover){ .mini-list a:hover{color:var(--blue)} }
.mini-list a:focus-visible{outline:none; box-shadow:var(--focus); border-radius:4px}
.mini-list__id{font-family:var(--mono); font-size:12.5px; font-weight:400; color:var(--faint)}
.mini-list__meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13.5px; color:var(--muted)}