/* ============================================================
   NURTRA ADMIN — design system

   Deliberately NOT the CRM's palette. This console has power over
   every tenant, so acting in the wrong window is a real mistake to
   make — and both apps run side by side on one machine, under one
   brand, with the same layout. The difference has to be legible in
   peripheral vision, before anyone reads a word.

   Both apps now share the brand palette, so the thing that tells
   them apart is the largest block of colour on screen: this
   sidebar is white, the CRM's is dark. The accent bar and the
   standing badge back that up.

   What does NOT change is the status language — hot/warm, ok, danger,
   the stage pills. Those carry meaning, and a colour that means one
   thing here and another there would be worse than no difference.
   ============================================================ */
:root{
  --ink:#193D3C; --ink-soft:#21504F; --ink-line:#275E5E;
  --brand:#2B6968; --brand-d:#225251; --brand-l:#E6EDED; --brand-ll:#F4F8F7;

  /* The logo's supporting green. Carries the accent bar and the sidebar's active state. */
  --sage:#9ABD97; --sage-l:#EFF4EE;
  --accent:#FF4466; --accent-l:#FFECF0;

  --warm:#ef9a55; --warm-d:#d97e36; --warm-l:#fdf0e4;
  --canvas:#F5F8F8; --surface:#ffffff; --surface-2:#FAFBFB;
  --line:#E0E9E9; --line-soft:#EFF4F4;
  --text:#132F2F; --muted:#455F5E; --faint:#5C7A7A;
  --hot:#e2574f; --heat-warm:#ef9a55; --cool:#4f9fc4; --cold:#9aa8ad;
  --ok:#2e9e6b; --ok-l:#e6f5ee; --warn:#dd9a2f; --warn-l:#fbf2dd;
  --danger:#df5151; --danger-l:#fbe7e7; --info:#3e8ede; --info-l:#e8f1fc;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(19,47,47,.05),0 1px 3px rgba(19,47,47,.06);
  --shadow:0 2px 8px rgba(19,47,47,.06),0 8px 24px rgba(19,47,47,.06);
  --shadow-lg:0 12px 36px rgba(19,47,47,.16);

  /* The bar across the top of every page. Its own token so it cannot drift
     from the accent it is meant to announce. */
  --admin-rule:linear-gradient(90deg,var(--brand) 0%,#4A8B7F 55%,var(--sage) 100%);
  --sidebar-w:248px;
  --font-d:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-b);
  background:var(--canvas);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--font-d);font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cfd9da;border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#b6c3c4;background-clip:content-box}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  /* Light, where the CRM's is dark. That is the point: two apps side by side under one brand
     are told apart fastest by the largest block of colour on the screen. The border matters —
     without it a white sidebar and a near-white canvas run together. */
  background:var(--surface);border-right:1px solid var(--line);
  color:var(--text);display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:40;
}
/* The lockup carries the name, so the brand block is the logo stacked over a label saying
   which application this is. The SVG has its own internal padding; the negative left margin
   pulls the artwork's edge to the same 20px gutter the nav items sit on. */
.brand{display:block;padding:20px 20px 14px;text-decoration:none}
/* The artwork sits inside its file with an even 15px border on all four sides (of 403 tall),
   which is about 1.5px once scaled down here. Small enough to pull back with a flat -1px
   rather than the per-edge corrections the previous logo needed. Remeasure if the files are
   ever regenerated — the old ones were padded asymmetrically. */
.brand-lockup{display:block;height:36px;width:auto;margin:-1px 0 -1px -1px}
.brand-sub{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:8px}

.ctx-pick{margin:4px 14px 10px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;cursor:pointer;transition:.15s}
.ctx-pick:hover{background:var(--canvas)}
.ctx-pick .lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600}
.ctx-pick .val{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--ink);font-weight:600;font-size:13px;margin-top:2px}
.ctx-pick .val svg{width:14px;height:14px;opacity:.6}

.nav{flex:1;overflow-y:auto;padding:6px 12px 12px}
.nav-group-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:14px 12px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  color:var(--muted);font-weight:500;font-size:13.5px;cursor:pointer;transition:.13s;position:relative;margin-bottom:1px;
}
.nav-item svg{width:18px;height:18px;flex:0 0 18px;opacity:.85}
.nav-item:hover{background:var(--canvas);color:var(--ink)}
.nav-item.active{background:var(--brand-l);color:var(--brand-d);font-weight:600}
.nav-item.active svg{opacity:1;color:var(--brand)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav-badge{margin-left:auto;background:var(--warm);color:#3a2710;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.nav-badge.dot{background:var(--hot);min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}

.sidebar-foot{padding:12px;border-top:1px solid var(--line-soft)}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;cursor:pointer;transition:.13s}
.user-chip:hover{background:var(--canvas)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex:0 0 34px}
.user-chip .nm{font-size:13px;font-weight:600;color:var(--ink);line-height:1.2}
.user-chip .rl{font-size:11px;color:var(--muted)}

/* ---------- Main ---------- */
.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.topbar{
  height:64px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 26px;position:sticky;top:0;z-index:30;
}

/* Accent bar across the very top of the viewport. The one piece of chrome that is visible on
   every page, in every scroll position, without being read — which is the entire job. Fixed
   rather than sticky so it survives a scrolled page. */
.admin-rule{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:var(--admin-rule);
}
.app{padding-top:3px}

/* Standing label in the topbar. Belt and braces with the accent bar: the bar is what you
   notice, this is what you read when you look. */
.admin-badge{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand-d);background:var(--brand-l);
  border:1px solid #CFE0DF;border-radius:999px;padding:5px 12px;
}
.admin-badge svg{width:13px;height:13px}
.page-title{font-size:19px;font-weight:700}
.page-sub{font-size:12.5px;color:var(--muted);font-weight:450;margin-top:1px}
.search{
  margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--canvas);
  border:1px solid transparent;border-radius:11px;padding:9px 13px;width:260px;transition:.15s;color:var(--muted);
}
.search:focus-within{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.search svg{width:16px;height:16px;flex:0 0 16px}
.search input{border:none;background:none;outline:none;width:100%;font-size:13.5px;color:var(--text)}
.icon-btn{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--muted);position:relative;transition:.13s}
.icon-btn:hover{background:var(--canvas);color:var(--ink)}
.icon-btn svg{width:19px;height:19px}
.icon-btn .pip{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--hot);border:2px solid var(--surface)}

.content{padding:24px 26px 60px;flex:1}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;font-weight:600;font-size:13px;transition:.14s;white-space:nowrap;border:1px solid transparent}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(34,82,81,.3)}
.btn-primary:hover{background:var(--brand-d)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:#c9d4d5;background:var(--surface-2)}
.btn-soft{background:var(--brand-l);color:var(--brand-d)}
.btn-soft:hover{background:#d9eee7}
.btn-warm{background:var(--warm);color:#3a2710}
.btn-warm:hover{background:var(--warm-d);color:#fff}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:9px;gap:5px}
.btn-sm svg{width:14px;height:14px}
.btn-icon{padding:8px;border-radius:9px}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-pad{padding:18px}
.card-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line-soft)}
.card-head h3{font-size:14.5px}
.card-head .sub{font-size:12px;color:var(--muted);font-weight:450}
.card-head .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:16px}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 17px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.kpi .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px}
.kpi .ic svg{width:18px;height:18px}
.kpi .v{font-family:var(--font-d);font-size:26px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em}
.kpi .l{font-size:12px;color:var(--muted);font-weight:500;margin-top:5px}
.kpi .d{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;margin-top:8px;padding:2px 7px;border-radius:20px}
.kpi .d svg{width:12px;height:12px}
.d.up{color:var(--ok);background:var(--ok-l)}
.d.down{color:var(--danger);background:var(--danger-l)}
.d.flat{color:var(--muted);background:var(--canvas)}

/* ---------- Lead heat + priority language (SIGNATURE) ---------- */
.heat{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 8px 2px 6px;border-radius:20px}
.heat .dot{width:8px;height:8px;border-radius:50%}
.heat.hot{background:#fdeceb;color:#c63d35}.heat.hot .dot{background:var(--hot)}
.heat.warm{background:var(--warm-l);color:#b96a1f}.heat.warm .dot{background:var(--heat-warm)}
.heat.cool{background:#e8f3f8;color:#2f7ea3}.heat.cool .dot{background:var(--cool)}
.heat.cold{background:#eef1f2;color:#6c7c81}.heat.cold .dot{background:var(--cold)}
.score-ring{--p:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 38px;
  background:conic-gradient(var(--ring-c) calc(var(--p)*1%),var(--line-soft) 0)}
.score-ring .inner{width:30px;height:30px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:12px;font-family:var(--font-d);color:var(--ink)}

.urg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:7px}
.urg .sq{width:7px;height:7px;border-radius:2px}
.urg.immediate{background:#fdeceb;color:#c63d35}.urg.immediate .sq{background:var(--hot)}
.urg.d30{background:#fdf0e4;color:#bf6a1c}.urg.d30 .sq{background:#ef7f43}
.urg.d60{background:var(--warn-l);color:#9c6f17}.urg.d60 .sq{background:var(--warn)}
.urg.d90{background:var(--brand-l);color:var(--brand-d)}.urg.d90 .sq{background:var(--brand)}
.urg.d180{background:#e8f1fc;color:#2f6fb5}.urg.d180 .sq{background:var(--info)}
.urg.future{background:#eef1f2;color:#6c7c81}.urg.future .sq{background:var(--cold)}

.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:7px;background:var(--canvas);color:var(--muted)}
.tag.poa1{background:#fdeceb;color:#c63d35}
.tag.poa2{background:var(--warn-l);color:#9c6f17}
.tag.poa3{background:var(--brand-l);color:var(--brand-d)}
.tag.alert{background:var(--warm-l);color:var(--warm-d)}
.tag svg{width:12px;height:12px}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--canvas);color:var(--muted)}
.pill .dot{width:7px;height:7px;border-radius:50%}

/* status colours */
.st-new{--c:#3e8ede;--cl:#e8f1fc}.st-contacted{--c:#7b6bd1;--cl:#eee9fb}
.st-pre_tour_wl{--c:#d98a2b;--cl:#fbf2dd}.st-tour_scheduled{--c:#168a6f;--cl:#e7f4ef}
.st-tour_completed{--c:#1fae8c;--cl:#e2f6f0}.st-offered{--c:#ef9a55;--cl:#fdf0e4}
.st-enrolled{--c:#2e9e6b;--cl:#e6f5ee}.st-lost{--c:#9aa8ad;--cl:#eef1f2}
.st-waitlisted{--c:#d98a2b;--cl:#fbf2dd}
.status-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--cl);color:var(--c)}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--c)}

/* ---------- Pipeline (kanban) ---------- */
.pipe-funnel{display:flex;gap:7px;margin-bottom:20px;overflow-x:auto;padding-bottom:4px}
.funnel-step{flex:1;min-width:120px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;transition:.15s;position:relative}
.funnel-step:hover{border-color:var(--c);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.funnel-step.sel{border-color:var(--c);background:var(--cl)}
.funnel-step .ft{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted)}
.funnel-step .ft .dt{width:8px;height:8px;border-radius:50%;background:var(--c)}
.funnel-step .fn{font-family:var(--font-d);font-size:23px;font-weight:800;color:var(--ink);margin-top:7px;line-height:1}
.funnel-step .fb{height:3px;border-radius:3px;background:var(--c);margin-top:10px;opacity:.85}

.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.kcol{flex:0 0 282px;width:282px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;max-height:calc(100vh - 230px)}
.kcol-head{display:flex;align-items:center;gap:8px;padding:13px 14px 11px;position:sticky;top:0}
.kcol-head .dt{width:9px;height:9px;border-radius:50%;background:var(--c)}
.kcol-head .nm{font-weight:700;font-size:13px;color:var(--ink)}
.kcol-head .ct{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);padding:1px 9px;border-radius:20px}
.kcol-body{overflow-y:auto;padding:2px 10px 12px;display:flex;flex-direction:column;gap:9px}
.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;transition:.14s;border-left:3px solid var(--c)}
.lead-card:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:var(--line)}
.lead-card .lc-top{display:flex;align-items:flex-start;gap:9px}
.lead-card .lc-nm{font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.25}
.lead-card .lc-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.lead-card .lc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.lead-card .lc-foot{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line-soft)}
.lead-card .lc-foot .av{width:22px;height:22px;border-radius:50%;font-size:9.5px;display:grid;place-items:center;color:#fff;font-weight:700}
.lead-card .lc-foot .ch{font-size:11px;color:var(--muted);font-weight:500}
.lead-card .lc-foot .nxt{margin-left:auto;font-size:11px;font-weight:600;color:var(--warm-d);display:flex;align-items:center;gap:4px}
.lead-card .lc-foot .nxt svg{width:12px;height:12px}
.lc-overdue .nxt{color:var(--danger)!important}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-soft);font-size:13px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:.1s}
.tbl tbody tr.clk{cursor:pointer}
.tbl tbody tr.clk:hover{background:var(--brand-ll)}
.cell-name{display:flex;align-items:center;gap:10px}
.cell-name .nm{font-weight:600;color:var(--ink)}
.cell-name .sub{font-size:11.5px;color:var(--muted)}

/* ---------- Lead detail drawer/view ---------- */
.detail-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.detail-id{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;font-family:var(--font-d);flex:0 0 54px}
.detail-h-main{flex:1;min-width:200px}
.detail-h-main h2{font-size:22px}
.detail-h-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap}
.det-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:20px;align-items:start}
.fld{margin-bottom:14px}
.fld .k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:700;margin-bottom:3px}
.fld .v{font-size:13.5px;color:var(--text);font-weight:500}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.timeline{position:relative;padding-left:6px}
.tl-item{position:relative;padding:0 0 18px 30px}
.tl-item::before{content:"";position:absolute;left:9px;top:22px;bottom:-4px;width:2px;background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-dot{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line)}
.tl-dot svg{width:11px;height:11px}
.tl-dot.email{border-color:var(--info);color:var(--info)}
.tl-dot.sms{border-color:var(--ok);color:var(--ok)}
.tl-dot.call{border-color:var(--brand);color:var(--brand)}
.tl-dot.tour{border-color:var(--brand);color:var(--brand)}
.tl-dot.offer{border-color:var(--warm);color:var(--warm-d)}
.tl-dot.status{border-color:var(--ink-soft);color:var(--ink-soft)}
.tl-dot.note{border-color:var(--cold);color:var(--cold)}
.tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-title{font-weight:600;font-size:13px;color:var(--ink)}
.tl-time{font-size:11.5px;color:var(--faint);margin-left:auto}
.tl-body{font-size:12.5px;color:var(--muted);margin-top:3px}
.tl-engage{display:inline-flex;gap:8px;margin-top:6px}
.eng{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--muted)}
.eng svg{width:13px;height:13px}
.eng.yes{color:var(--ok)}.eng.no{color:var(--faint)}

.score-bd{display:flex;flex-direction:column;gap:11px}
.score-line{display:flex;align-items:center;gap:10px}
.score-line .sl-lbl{font-size:12px;color:var(--muted);font-weight:500;width:120px;flex:0 0 120px}
.score-line .sl-bar{flex:1;height:7px;border-radius:7px;background:var(--line-soft);overflow:hidden}
.score-line .sl-bar i{display:block;height:100%;border-radius:7px;background:var(--brand)}
.score-line .sl-v{font-size:12px;font-weight:700;color:var(--ink);width:34px;text-align:right}

.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow-x:auto}
.subtab{padding:10px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:.13s}
.subtab:hover{color:var(--ink)}
.subtab.active{color:var(--brand-d);border-bottom-color:var(--brand)}

/* child cards */
.kid{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.kid .ka{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:700;color:#fff;flex:0 0 40px;font-size:15px}
.kid .kn{font-weight:700;color:var(--ink);font-size:14px}
.kid .km{font-size:12px;color:var(--muted)}
.kid .kr{margin-left:auto;text-align:right}

/* docs */
.doc-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px}
.doc-row .di{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 34px}
.doc-row .di svg{width:17px;height:17px}

/* ---------- Journey builder ---------- */
.journey-pick{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.jchip{padding:10px 15px;border:1px solid var(--line);border-radius:11px;background:var(--surface);font-weight:600;font-size:13px;cursor:pointer;transition:.14s;display:flex;align-items:center;gap:8px;color:var(--muted)}
.jchip:hover{border-color:var(--brand);color:var(--ink)}
.jchip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.jchip .jc-dot{width:8px;height:8px;border-radius:50%}
.journey-stage{margin-bottom:8px}
.jstage-head{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:7px 15px;border-radius:20px;font-weight:700;font-size:13px;font-family:var(--font-d);margin-bottom:4px}
.jstage-head .jd{font-size:11px;font-weight:600;opacity:.7;background:rgba(255,255,255,.15);padding:1px 8px;border-radius:20px}
.jrail{border-left:2px dashed var(--line);margin-left:14px;padding:10px 0 18px 26px;position:relative}
.jnode{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 15px;margin-bottom:11px;position:relative;box-shadow:var(--shadow-sm)}
.jnode::before{content:"";position:absolute;left:-33px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--brand);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--brand-l)}
.jnode-head{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.jnode-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 28px}
.jnode-ic svg{width:15px;height:15px}
.jnode-t{font-weight:700;font-size:13px;color:var(--ink)}
.jnode-body{font-size:12.5px;color:var(--muted);line-height:1.55}
.jbranch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.jbr{border:1px solid var(--line);border-radius:11px;padding:11px;background:var(--surface-2)}
.jbr.yes{border-left:3px solid var(--ok)}
.jbr.no{border-left:3px solid var(--warm)}
.jbr .jbr-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;display:flex;align-items:center;gap:5px}
.jbr.yes .jbr-h{color:var(--ok)}.jbr.no .jbr-h{color:var(--warm-d)}
.jbr .jbr-b{font-size:12px;color:var(--muted);line-height:1.5}
.jnode-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}

/* ---------- Misc ---------- */
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty svg{width:46px;height:46px;color:var(--line);margin-bottom:12px}
.empty h3{color:var(--ink);font-size:15px;margin-bottom:5px}
.bar-mini{height:8px;border-radius:8px;background:var(--line-soft);overflow:hidden;display:flex}
.bar-mini i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--muted);font-weight:500}
.legend .li{display:flex;align-items:center;gap:5px}
.legend .li .sw{width:10px;height:10px;border-radius:3px}
.list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.list-row:last-child{border-bottom:none}

.task-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.task-row:last-child{border-bottom:none}
.task-check{width:19px;height:19px;border:2px solid var(--line);border-radius:6px;flex:0 0 19px;cursor:pointer;transition:.13s;display:grid;place-items:center}
.task-check:hover{border-color:var(--brand)}
.task-check.done{background:var(--brand);border-color:var(--brand)}
.task-check svg{width:12px;height:12px;color:#fff;opacity:0}
.task-check.done svg{opacity:1}
.task-row .tt{font-size:13px;font-weight:600;color:var(--ink)}
.task-row.done .tt{text-decoration:line-through;color:var(--faint)}
.task-row .tm{font-size:11.5px;color:var(--muted)}
.due{font-size:11px;font-weight:700;padding:2px 8px;border-radius:7px;margin-left:auto;white-space:nowrap}
.due.over{background:var(--danger-l);color:var(--danger)}
.due.today{background:var(--warm-l);color:var(--warm-d)}
.due.soon{background:var(--canvas);color:var(--muted)}

.ai-card{background:linear-gradient(135deg,#163a44 0%,#0f2a31 100%);border-radius:var(--radius);padding:18px;color:#d7e6e7;position:relative;overflow:hidden}
.ai-card::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(47,198,160,.25),transparent 70%)}
.ai-head{display:flex;align-items:center;gap:9px;margin-bottom:14px;position:relative}
.ai-spark{width:30px;height:30px;border-radius:9px;background:rgba(47,198,160,.18);display:grid;place-items:center}
.ai-spark svg{width:17px;height:17px;color:#3fdcb4}
.ai-head .at{font-family:var(--font-d);font-weight:700;color:#fff;font-size:14.5px}
.ai-head .as{font-size:11px;color:#7fb3ab}
.ai-insight{display:flex;gap:11px;padding:11px 0;border-top:1px solid rgba(255,255,255,.08);position:relative}
.ai-insight .aii{width:26px;height:26px;border-radius:8px;flex:0 0 26px;display:grid;place-items:center;font-size:13px}
.ai-insight .ait{font-size:12.5px;font-weight:600;color:#eef6f6;line-height:1.4}
.ai-insight .aib{font-size:11.5px;color:#9cc4bd;margin-top:2px;line-height:1.45}
.ai-insight .aic{margin-top:7px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#3fdcb4;cursor:pointer}
.ai-insight .aic svg{width:12px;height:12px}

.donut{width:130px;height:130px;border-radius:50%;flex:0 0 130px;position:relative;display:grid;place-items:center}
.donut .dh{width:84px;height:84px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center}
.donut .dh .dv{font-family:var(--font-d);font-weight:800;font-size:20px;color:var(--ink);line-height:1}
.donut .dh .dl{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

.match-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:9px;transition:.14s}
.match-row:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.match-meta{flex:1;min-width:0}

.seg{display:inline-flex;background:var(--canvas);border-radius:10px;padding:3px;gap:2px}
.seg button{padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);transition:.13s}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}

.calbar{display:flex;align-items:center;gap:8px;height:30px;border-radius:8px;background:var(--brand-l);color:var(--brand-d);font-size:11.5px;font-weight:600;padding:0 10px;cursor:pointer;border-left:3px solid var(--brand)}
.calbar.warm{background:var(--warm-l);color:var(--warm-d);border-color:var(--warm)}
.calbar.info{background:var(--info-l);color:#2f6fb5;border-color:var(--info)}
.cal-grid{display:grid;grid-template-columns:64px repeat(5,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal-grid .ch{padding:10px;font-size:12px;font-weight:700;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid var(--line-soft);background:var(--surface-2)}
.cal-grid .ct{padding:8px 6px;font-size:11px;color:var(--faint);text-align:right;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);font-weight:600}
.cal-grid .cc{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:4px;min-height:46px;display:flex;flex-direction:column;gap:3px}

/* progress bar (offer countdown) */
.prog{height:9px;border-radius:9px;background:var(--line-soft);overflow:hidden}
.prog i{display:block;height:100%;border-radius:9px;transition:width .4s}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);z-index:100;opacity:0;transition:.3s}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast svg{width:18px;height:18px;color:#3fdcb4}

/* drawer for log/compose */
.drawer-bg{position:fixed;inset:0;background:rgba(20,40,46,.45);z-index:60;opacity:0;pointer-events:none;transition:.25s}
.drawer-bg.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:var(--surface);z-index:61;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:.3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.show{transform:none}
.drawer-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.drawer-body{flex:1;overflow-y:auto;padding:20px}
.drawer-foot{padding:16px 20px;border-top:1px solid var(--line);display:flex;gap:10px}
.inp{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:.14s;font-size:13.5px}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
textarea.inp{resize:vertical;min-height:90px}
.lbl-f{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:6px;display:block}
.fgroup{margin-bottom:16px}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{border:1px solid var(--line);border-radius:10px;padding:11px;cursor:pointer;transition:.13s;text-align:center;font-weight:600;font-size:12.5px;color:var(--muted)}
.opt:hover{border-color:var(--brand)}
.opt.sel{border-color:var(--brand);background:var(--brand-l);color:var(--brand-d)}

.coverage{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cov-item{display:flex;gap:10px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cov-item .ci{width:30px;height:30px;border-radius:9px;background:var(--brand-l);color:var(--brand-d);display:grid;place-items:center;flex:0 0 30px}
.cov-item .ci svg{width:16px;height:16px}
.cov-item .ct{font-weight:700;font-size:13px;color:var(--ink)}
.cov-item .cd{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}

.note-box{background:var(--info-l);border:1px solid #cfe2f7;border-radius:12px;padding:13px 15px;display:flex;gap:11px;font-size:12.5px;color:#2f6fb5;line-height:1.5}
.note-box svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.note-box.warm{background:var(--warm-l);border-color:#f4dcc2;color:var(--warm-d)}
.note-box.brand{background:var(--brand-l);border-color:#cce8de;color:var(--brand-d)}

.mobile-only{display:none}
.hamburger{display:none}
@media(max-width:1000px){
  .det-grid{grid-template-columns:1fr}
  .sidebar{transform:translateX(-100%);transition:.25s}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .hamburger{display:grid}
  .search{display:none}
}
@media(max-width:600px){
  .content{padding:16px 14px 50px}
  .topbar{padding:0 14px}
  .fld-row,.opt-grid,.jbranch{grid-template-columns:1fr}
  .kpi .v{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   Blazor additions
   The rules above are the prototype's design system, lifted verbatim so the two can be
   compared side by side. Everything below exists only because this is a Blazor Server app.
   ============================================================ */

/* Blazor's built-in error strip, restyled to match the palette. */
#blazor-error-ui {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--danger-l); color: #8c2f2f; border-top: 1px solid #f0c3c3;
  padding: 12px 20px; font-size: 13px; font-weight: 600;
  display: none; align-items: center; gap: 12px;
}
#blazor-error-ui .dismiss { margin-left: auto; cursor: pointer; font-size: 18px; line-height: 1; }

/* Anchors used as nav items and table rows must not inherit link colouring. */
.nav-item, .subtab { user-select: none; }
.nav-item:disabled, .nav-item.disabled { opacity: .45; cursor: default; }
.nav-item.disabled:hover { background: none; color: var(--muted); }

/* The router's FocusOnNavigate moves focus to the page heading on every navigation, so screen
   readers announce the new page instead of leaving the user stranded where the last one was.
   Being focusable means the heading is given tabindex="-1", and the browser then draws its
   default focus ring around it — visible to everyone, useful to no one.

   Suppressing the ring costs nothing in accessibility: tabindex="-1" keeps the heading out of
   the tab order, so a keyboard user never lands on it, and assistive tech announces on focus
   rather than on the outline. Interactive elements keep their rings, below. */
[tabindex="-1"]:focus { outline: none; }

/* The prototype fakes rows with JS click handlers; here they are real buttons/links. */
.tbl tbody tr.clk:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.row-link { display: contents; color: inherit; }

/* .inp is sized for drawer form fields (width:100%). In a wrapping flex toolbar that makes
   every control claim its own row, so toolbar controls opt out and size to their content. */
.inp-inline { width: auto; }

/* Form controls the prototype renders as divs but which must be real inputs here. */
.opt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.opt { background: var(--surface); font: inherit; font-weight: 600; font-size: 12.5px; width: 100%; }
.opt:disabled { opacity: .5; cursor: not-allowed; }
fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.validation-message { color: var(--danger); font-size: 12px; font-weight: 600; margin-top: 5px; display: block; }

/* Explanatory line under a field. Says why the field exists or what changing it will do —
   these carry real consequences on the user editor, not decoration. */
.field-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* Drawer close button. */
.drawer-head .drawer-close { margin-left: auto; }

/* Loading state for views waiting on Mongo. */
.loading { display: flex; align-items: center; gap: 10px; padding: 40px; color: var(--muted); font-size: 13.5px; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  border: 2px solid var(--line); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Startup / connection failure panel. */
.fatal { max-width: 640px; margin: 60px auto; }
.fatal pre {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: 12px; overflow-x: auto; margin-top: 10px; white-space: pre-wrap;
}

/* ============================================================
   Admin portal additions
   ============================================================ */

/* Chrome-free shell for sign-in, first-run setup and invitation acceptance. */
.auth-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 27px 24px 24px;
  background: linear-gradient(160deg, var(--canvas) 0%, #E4EEEC 100%);
}
.auth-card {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 30px 30px 34px;
}
/* Same stacked arrangement as the sidebar, in full colour on the white card. */
.auth-brand { margin-bottom: 24px; }
.auth-brand .brand-lockup { height: 38px; margin: -1px 0 -1px -1px; }
.auth-brand-sub { font-size: 10.5px; color: var(--faint); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 8px; }
.auth-title { font-size: 21px; margin-bottom: 5px; }
.auth-sub { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 20px; }
.auth-card .fgroup { margin-bottom: 15px; }

/* Visually hidden, still announced by screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The room editor packs several inputs onto one row. */
.kid .lbl-f { margin-bottom: 4px; }

/* Sidebar sign-out sits with the nav items but is an anchor, not a NavLink. */
.sidebar-foot .nav-item { color: var(--muted); }

/* The CCMS badge mark: a small tile carrying the provider monogram, standing in for a real
   logo the product does not ship. Sized to sit inside a .pill without stretching it. */
.ccms-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:5px;color:#fff;font-size:8px;font-weight:800;letter-spacing:.2px;flex:0 0 16px}