/* Bayut & Co. Co-working CRM — design system v3 "Majlis".
   Aggressive uplift: Plus Jakarta Sans, layered depth, glass chrome,
   Bayut green #249f62 on deep navy #001628. Same class contract as v2. */

:root {
  --green: #249f62; --green-h: #2cb374; --green-a: #1c7c4c; --green-deep: #10603a;
  --green-bg: #e9f7f0; --green-bd: #93d8b5;
  --t1: #16241d; --t2: rgba(13, 32, 23, 0.68); --t3: rgba(13, 32, 23, 0.45); --t4: rgba(13, 32, 23, 0.26);
  --bd: #d5ddd8; --bdl: #e8eeea;
  --bg: #ffffff; --bg-layout: #eef2ef;
  --amber: #f5a623; --amber-bg: #fdf6e3; --amber-fg: #9a6700;
  --red: #ef4d51; --red-bg: #fdefee; --red-fg: #c92a2f;
  --blue-bg: #e8f1fd; --blue-fg: #1d5fc4;
  --purple-bg: #f4edfc; --purple-fg: #6d3bbf;
  --cyan-bg: #e2f7f5; --cyan-fg: #0d8a80;
  --pink-bg: #fdeef5; --pink-fg: #c2367f;
  --navy: #001628; --navy-2: #020f1c;
  --shadow: 0 8px 20px -2px rgba(8, 36, 24, 0.10), 0 3px 8px -3px rgba(8, 36, 24, 0.12), 0 20px 44px -8px rgba(8, 36, 24, 0.10);
  --shadow-sm: 0 1px 2px rgba(8, 36, 24, 0.05), 0 2px 8px -2px rgba(8, 36, 24, 0.06);
  --shadow-lift: 0 14px 30px -8px rgba(8, 36, 24, 0.18), 0 5px 12px -5px rgba(8, 36, 24, 0.12);
  --glow: 0 4px 18px rgba(36, 159, 98, 0.42);
  --r-lg: 18px; --r-md: 12px; --r-sm: 9px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-disp: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  --ease: cubic-bezier(0.4, 0.14, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font); font-size: 13.5px; color: var(--t1); line-height: 1.5;
  background:
    radial-gradient(900px 420px at 85% -8%, rgba(36, 159, 98, 0.07), transparent 60%),
    radial-gradient(700px 380px at -10% 30%, rgba(0, 84, 120, 0.05), transparent 55%),
    var(--bg-layout);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font-family: var(--font); }
a { color: var(--green-a); text-decoration: none; }
::selection { background: rgba(36, 159, 98, 0.24); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(8, 36, 24, 0.16); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(8, 36, 24, 0.3); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Layout ── */
#app { display: flex; min-height: 100vh; }
.sider {
  width: 246px; color: #fff; flex: none;
  background:
    radial-gradient(360px 260px at 20% -4%, rgba(36, 159, 98, 0.22), transparent 60%),
    linear-gradient(180deg, #04283c 0%, var(--navy) 30%, var(--navy-2) 100%);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  transition: width .24s var(--ease); overflow-y: auto; overflow-x: hidden; z-index: 30;
  box-shadow: 3px 0 22px rgba(0, 12, 22, 0.28);
}
.sider::after { content: ''; position: fixed; top: 0; bottom: 0; width: 1px; left: 245px; background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 30%); pointer-events: none; }
.sider.collapsed { width: 80px; }
.sider.collapsed::after { left: 79px; }
.sider::-webkit-scrollbar { width: 0; }
.sider-logo { padding: 22px 20px 18px; display: flex; align-items: center; gap: 12px; flex: none; }
/* the official bayut&Co. lockup — glyph + wordmark, never re-drawn in CSS */
.sider-logo .mark {
  width: 36px; height: 36px; flex: none; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 12px rgba(36, 159, 98, .45));
}
.sider-logo .wm { display: block; height: 17px; width: auto; }
.sider-logo .nm { font-weight: 800; font-size: 15.5px; white-space: nowrap; letter-spacing: -0.2px; font-family: var(--font-disp); }
.sider-logo .sb { font-size: 8.5px; font-weight: 700; color: rgba(255, 255, 255, 0.42); white-space: nowrap; letter-spacing: .16em; margin-top: 1px; }
.sider-brand {
  display: flex; align-items: center; gap: 9px; margin: 0 20px 6px;
  padding: 9px 0 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sider-brand img { height: 21px; filter: brightness(1.65); opacity: .92; }
.sider-brand span { font-size: 7.5px; font-weight: 700; letter-spacing: .14em; color: rgba(255, 255, 255, 0.3); white-space: nowrap; }
.nav-group { padding: 7px 14px 2px; }
.nav-group-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
  color: rgba(255, 255, 255, 0.3); padding: 9px 12px 6px; white-space: nowrap;
}
.sider.collapsed .nav-group-label, .sider.collapsed .sider-logo .txt { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 8.5px 12px; border-radius: 11px;
  color: rgba(255, 255, 255, 0.62); cursor: pointer; margin-bottom: 2px; white-space: nowrap;
  border: 1px solid transparent; background: transparent; width: 100%; text-align: start; font-size: 13.5px;
  font-weight: 500; letter-spacing: .01em;
  transition: background .16s, color .16s, transform .14s, border-color .16s;
}
.nav-item svg { flex: none; opacity: .72; transition: opacity .16s; }
.nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; transform: translateX(2px); }
.nav-item:hover svg { opacity: 1; }
[dir="rtl"] .nav-item:hover { transform: translateX(-2px); }
.nav-item.active {
  background: linear-gradient(94deg, rgba(36, 159, 98, 0.95), rgba(22, 118, 71, 0.92));
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff; font-weight: 700;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.nav-item.active svg { opacity: 1; }
.nav-item .badge {
  margin-inline-start: auto; background: linear-gradient(135deg, #ff6b6e, #e03a3e); color: #fff; border-radius: 10px;
  font-size: 10px; font-weight: 800; padding: 0 7px; line-height: 18px;
  box-shadow: 0 2px 8px rgba(224, 58, 62, 0.55);
}
.sider.collapsed .nav-item span.lbl, .sider.collapsed .nav-item .badge { display: none; }
.sider-foot { margin-top: auto; padding: 14px; }
.sider-foot .ver { font-size: 10px; color: rgba(255, 255, 255, 0.26); text-align: center; padding: 10px 0 2px; letter-spacing: .04em; }
.collapse-btn {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.55);
  border-radius: 10px; width: 100%; padding: 8px; cursor: pointer; font-size: 13px; transition: all .16s;
}
.collapse-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px; background: rgba(252, 254, 253, 0.78);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgba(8, 36, 24, 0.07);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
  position: sticky; top: 0; z-index: 20; flex: none;
}
.crumb { font-size: 13px; color: var(--t3); white-space: nowrap; letter-spacing: .01em; }
.crumb b { color: var(--t1); font-weight: 700; }
.topbar .grow { flex: 1; }
.gsearch { position: relative; width: 340px; max-width: 34vw; }   /* may shrink: pinning it pushed the header off-screen at 1180–1300 px (frame-fit test) */
.gsearch input {
  width: 100%; height: 38px; border: 1px solid rgba(8, 36, 24, 0.12); border-radius: 12px;
  padding: 0 12px 0 34px; font-size: 13px; font-family: var(--font); outline: none;
  background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 1px 3px rgba(8, 36, 24, 0.04);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
[dir="rtl"] .gsearch input { padding: 0 34px 0 12px; }
.gsearch input:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(36, 159, 98, 0.14), inset 0 1px 3px rgba(8, 36, 24, 0.03); }
.gsearch .gs-ic { position: absolute; inset-inline-start: 11px; top: 11px; color: var(--t3); }
.gsearch .gs-kbd {
  position: absolute; inset-inline-end: 9px; top: 9px; font-size: 10px; color: var(--t4); font-weight: 600;
  border: 1px solid var(--bdl); border-radius: 5px; padding: 1.5px 6px; background: #fbfdfc; pointer-events: none;
}
.gs-results {
  position: absolute; top: 46px; left: 0; right: 0; background: #fff; border-radius: 14px;
  box-shadow: var(--shadow); max-height: 400px; overflow: auto; z-index: 60; padding: 6px;
  border: 1px solid var(--bdl); animation: pop .16s var(--ease);
}
@keyframes pop { from { transform: translateY(-5px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.gs-row { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .1s; }
.gs-row:hover { background: var(--green-bg); }
.gs-type { font-size: 10px; font-weight: 800; color: var(--green-a); background: var(--green-bg); border-radius: 6px; padding: 3px 0; flex: none; width: 60px; text-align: center; letter-spacing: .03em; }
.gs-lbl { font-size: 13px; font-weight: 700; letter-spacing: -0.1px; }
.gs-sub { font-size: 12px; color: var(--t3); }
/* where a search matched, and the part of it that did */
mark { background: #ffe9a8; color: inherit; border-radius: 3px; padding: 0 1px; font-weight: 700; }
.ld-tbl mark, .m-lead mark { background: #fff3c4; }
.gs-where { display: inline-block; background: var(--green-bg, #eaf6f0); color: var(--green-a, #249f62);
  border-radius: 99px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-inline-end: 6px; vertical-align: 1px; }
.gs-hit { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--t1); }
.user-chip { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 5px 10px; border-radius: 12px; transition: background .16s; }
.user-chip:hover { background: rgba(36, 159, 98, 0.09); }
.avatar {
  width: 33px; height: 33px; border-radius: 50%; color: #fff;
  font-weight: 800; font-size: 11.5px; display: flex; align-items: center; justify-content: center; flex: none;
  background: linear-gradient(135deg, var(--green-h), var(--green-deep));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(8, 36, 24, 0.18);
}
.avatar.hue1 { background: linear-gradient(135deg, #5a8bea, #2c56b8); }
.avatar.hue2 { background: linear-gradient(135deg, #bb74e0, #8b3fb5); }
.avatar.hue3 { background: linear-gradient(135deg, #eda05a, #c26a1e); }
.avatar.hue4 { background: linear-gradient(135deg, #40c0b0, #1f8a7d); }
.user-nm { font-size: 13px; font-weight: 700; line-height: 1.15; letter-spacing: -0.1px; }
.user-rl { font-size: 10.5px; color: var(--t3); text-transform: capitalize; }

.content { padding: 24px 26px 48px; max-width: 2000px; width: 100%; margin: 0 auto; position: relative; }
/* the fade plays once, when a screen is first shown — not on every refresh of the same screen */
.content.fresh { animation: fade .2s ease; }
/* a same-screen refresh shows a thin bar at the top instead of blanking the page */
.content.refreshing::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--green-a), transparent); background-size: 40% 100%; animation: shimmer 1s infinite linear; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.screen-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.screen-title { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; font-family: var(--font-disp); }
.screen-sub { font-size: 13px; color: var(--t3); margin-top: 3px; }
.screen-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.greet { font-size: 12.5px; font-weight: 700; color: var(--green-a); letter-spacing: .02em; margin-bottom: 2px; }

/* ── Buttons / chips / tags ── */
.btn {
  height: 34px; padding: 0 15px; border-radius: 10px; border: 1px solid rgba(8, 36, 24, 0.14); background: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--t1); display: inline-flex; align-items: center; gap: 7px;
  transition: all .16s var(--ease); white-space: nowrap; box-shadow: 0 1px 2px rgba(8, 36, 24, 0.05);
}
.btn:hover { border-color: var(--green); color: var(--green-a); box-shadow: 0 3px 10px rgba(36, 159, 98, 0.18); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(135deg, var(--green-h) 0%, var(--green-deep) 130%);
  border-color: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 700;
  box-shadow: var(--glow), inset 0 1.5px 0 rgba(255, 255, 255, 0.28);
}
.btn.primary:hover { filter: brightness(1.07); color: #fff; box-shadow: 0 6px 22px rgba(36, 159, 98, 0.5), inset 0 1.5px 0 rgba(255, 255, 255, 0.28); }
.btn.danger { color: var(--red-fg); border-color: rgba(201, 42, 47, 0.35); }
.btn.danger:hover { background: var(--red-bg); box-shadow: 0 3px 10px rgba(201, 42, 47, 0.16); border-color: var(--red-fg); color: var(--red-fg); }
.btn.sm { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 8px; gap: 4px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.tag {
  display: inline-block; font-size: 11px; border-radius: 6px; padding: 1.5px 8px; line-height: 18px;
  font-weight: 700; white-space: nowrap; letter-spacing: .01em;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px;
  border: 1px solid rgba(8, 36, 24, 0.14); background: rgba(255, 255, 255, 0.85); font-size: 12.5px; font-weight: 600;
  cursor: pointer; color: var(--t2); transition: all .16s var(--ease);
}
.chip:hover { border-color: var(--green-bd); color: var(--green-a); transform: translateY(-1px); }
.chip.on {
  background: linear-gradient(135deg, var(--green-h), var(--green-a)); color: #fff;
  border-color: transparent; font-weight: 700; box-shadow: 0 3px 12px rgba(36, 159, 98, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.chip.on b { color: #fff; }

/* ── Cards / grids ── */
.card {
  background: #fff; border-radius: var(--r-lg); border: 1px solid rgba(8, 36, 24, 0.07);
  box-shadow: var(--shadow-sm); padding: 18px 20px;
}
.card h3 { font-size: 14px; font-weight: 800; margin-bottom: 13px; display: flex; align-items: center; gap: 9px; letter-spacing: -0.15px; font-family: var(--font-disp); }
.card h3::before { content: ''; width: 4px; height: 15px; border-radius: 3px; background: linear-gradient(180deg, var(--green-h), var(--green-a)); flex: none; box-shadow: 0 1px 4px rgba(36, 159, 98, 0.4); }
.card h3.plain::before { display: none; }
.card h3 .rt { margin-inline-start: auto; font-size: 12px; font-weight: 500; color: var(--t3); }
.grid { display: grid; gap: 15px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 15px; margin-bottom: 18px; }
.kpi {
  background: linear-gradient(180deg, #fff 0%, #fdfefd 100%);
  border-radius: var(--r-lg); border: 1px solid rgba(8, 36, 24, 0.07); padding: 16px 18px 14px;
  cursor: pointer; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s;
}
.kpi::after {
  content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--green-h), var(--green-bd)); opacity: 0; transition: opacity .2s;
}
.kpi:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: rgba(36, 159, 98, 0.28); }
.kpi:hover::after { opacity: 1; }
.kpi .k-l { font-size: 12px; color: var(--t3); font-weight: 600; letter-spacing: .015em; }
.kpi .k-v { font-size: 27px; font-weight: 800; letter-spacing: -1px; margin: 4px 0 2px; font-variant-numeric: tabular-nums; font-family: var(--font-disp); }
.kpi .k-s { font-size: 11.5px; color: var(--t3); }

/* ── Tables ── */
.tbl-wrap { overflow-x: auto; background: #fff; border-radius: var(--r-lg); border: 1px solid rgba(8, 36, 24, 0.07); box-shadow: var(--shadow-sm); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.tbl th {
  text-align: start; font-size: 10.5px; color: var(--t3); font-weight: 800; padding: 12px 15px;
  background: linear-gradient(180deg, #f7faf8, #f3f7f4); border-bottom: 1px solid var(--bdl); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .09em; position: sticky; top: 0; z-index: 2;
}
.tbl td { padding: 11px 15px; border-bottom: 1px solid #f2f6f3; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .12s, box-shadow .12s; }
.tbl tbody tr:hover { background: #f5faf7; box-shadow: inset 3px 0 0 var(--green); }
.tbl tr.clickable { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }

/* score ring */
.score { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; position: relative; flex: none; }
.sla-b { font-size: 10px; font-weight: 800; border-radius: 6px; padding: 2px 7px; white-space: nowrap; letter-spacing: .01em; }

/* checkbox */
.cb {
  width: 17px; height: 17px; border: 1.5px solid var(--bd); border-radius: 5px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; background: #fff; font-size: 11px; color: #fff;
  transition: all .14s; flex: none;
}
.cb:hover { border-color: var(--green); box-shadow: 0 0 0 3px rgba(36, 159, 98, 0.12); }
.cb.on { background: linear-gradient(135deg, var(--green-h), var(--green-a)); border-color: var(--green-a); box-shadow: 0 2px 6px rgba(36, 159, 98, 0.4); }

/* ── Pipeline board — all six stages fit the viewport, columns scroll inside ── */
.board {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px;
  align-items: stretch; padding: 2px 0 4px;
  height: calc(100vh - 252px); min-height: 430px;
}
.col {
  background: linear-gradient(180deg, rgba(8, 36, 24, 0.05), rgba(8, 36, 24, 0.03));
  border-radius: 16px; padding: 11px 8px 8px 11px; border: 1px solid rgba(8, 36, 24, 0.06);
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
}
.col-cards { flex: 1; min-height: 0; overflow-y: auto; padding: 1px 5px 2px 1px; scrollbar-width: thin; scrollbar-color: rgba(8, 36, 24, 0.18) transparent; }
.col-cards::-webkit-scrollbar { width: 5px; }
.col-cards::-webkit-scrollbar-thumb { background: rgba(8, 36, 24, 0.15); border-radius: 3px; }
@media (max-width: 1180px) {
  /* Narrow screens go back to the classic horizontally-scrolling board. */
  .board { display: flex; overflow-x: auto; height: auto; }
  .col { width: 254px; flex: none; }
  .col-cards { overflow-y: visible; }
}
.col-h { display: flex; align-items: baseline; gap: 6px; padding: 3px 5px 10px; }
.col-h .dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; flex: none; box-shadow: 0 0 0 3px rgba(8, 36, 24, 0.05); }
.col-h .nm { font-weight: 800; font-size: 13px; letter-spacing: -0.1px; }
.col-h .pb { font-size: 10px; color: var(--green-a); background: var(--green-bg); border-radius: 5px; padding: 1px 5px; font-weight: 800; }
.col-h .sum { margin-inline-start: auto; font-size: 10.5px; color: var(--t3); white-space: nowrap; font-weight: 600; }
.col.dragover { outline: 2px dashed var(--green); outline-offset: -2px; background: rgba(36, 159, 98, 0.08); }
.dcard {
  background: #fff; border-radius: 13px; border: 1px solid rgba(8, 36, 24, 0.08); padding: 12px 13px 10px; margin-bottom: 9px;
  cursor: grab; box-shadow: var(--shadow-sm); transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s;
  position: relative;
}
.dcard:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: rgba(36, 159, 98, 0.3); }
.dcard:active { cursor: grabbing; }
.dcard .a { font-weight: 800; font-size: 13px; letter-spacing: -0.2px; }
.dcard .u { font-size: 12px; color: var(--t2); margin: 2px 0 8px; }
.dcard .foot { display: flex; align-items: center; font-size: 12px; }
.dcard .v { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
.dcard .o {
  margin-inline-start: auto; width: 23px; height: 23px; border-radius: 50%;
  background: linear-gradient(135deg, #e4efe9, #d2e4da); font-size: 9px; font-weight: 800; color: var(--t2);
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.dcard .hold { font-size: 11.5px; margin-top: 6px; font-weight: 600; }
.dcard .age { height: 3.5px; border-radius: 2px; background: #eef2ef; margin-top: 8px; overflow: hidden; }
.dcard .age i { display: block; height: 100%; border-radius: 2px; }
.col-add {
  width: 100%; border: 1.5px dashed rgba(8, 36, 24, 0.18); background: transparent; border-radius: 10px; color: var(--t3);
  padding: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; transition: all .16s;
}
.col-add:hover { color: var(--green-a); border-color: var(--green); background: rgba(36, 159, 98, 0.06); }

/* ── Deal stages strip ── */
.stages { display: flex; align-items: center; gap: 0; margin: 16px 0 8px; flex-wrap: wrap; }
.stage-n {
  width: 29px; height: 29px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; border: 1.5px solid var(--bd); flex: none; cursor: pointer;
  transition: all .16s; background: #fff; box-shadow: 0 1px 3px rgba(8, 36, 24, 0.06);
}
.stage-n:hover { transform: scale(1.15); box-shadow: 0 3px 10px rgba(36, 159, 98, 0.3); }
.stage-lbl { font-size: 12px; margin: 0 9px 0 7px; white-space: nowrap; font-weight: 600; }
.stage-line { width: 36px; height: 2.5px; background: var(--bdl); margin-inline-end: 9px; border-radius: 2px; }

/* ── Timeline ── */
.tl { position: relative; padding-inline-start: 19px; }
.tl::before { content: ''; position: absolute; inset-inline-start: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--green-bd), var(--bdl)); border-radius: 1px; }
.tl-item { position: relative; padding-bottom: 17px; }
.tl-dot { position: absolute; inset-inline-start: -19px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--bdl), 0 1px 4px rgba(8, 36, 24, 0.15); }
.tl-t { font-size: 13px; font-weight: 700; letter-spacing: -0.1px; }
.tl-t .by { font-weight: 500; color: var(--t3); font-size: 12px; }
.tl-d { font-size: 12.5px; color: var(--t2); margin-top: 1px; }
.tl-w { font-size: 11px; color: var(--t4); margin-top: 2px; }

/* ── Floor plan ── */
.zone { margin-bottom: 20px; }
.zone-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.zone-h .nm { font-weight: 800; font-size: 13.5px; letter-spacing: -0.2px; }
.zone-h .meta { font-size: 12px; color: var(--t3); }
.units { display: flex; flex-wrap: wrap; gap: 7px; }
.unit {
  border-radius: 8px; font-size: 11.5px; font-weight: 800; padding: 9px 0; text-align: center;
  cursor: pointer; border: 1.5px solid transparent; min-width: 38px;
  transition: transform .14s, box-shadow .14s;
}
.unit:hover { transform: translateY(-2px) scale(1.06); box-shadow: var(--shadow-sm); }
.unit.occupied { background: linear-gradient(135deg, var(--green-h), var(--green-a)); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.25); }
.unit.held { background: linear-gradient(135deg, #ffc53d, #ec9d13); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.3); }
.unit.free { background: #f5f8f6; color: var(--t2); border-color: var(--bd); }
.unit.sel { border-color: var(--navy) !important; box-shadow: 0 0 0 2.5px rgba(0, 22, 40, 0.5); }
.facts .row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--bdl); font-size: 13px; }
.facts .row:last-child { border-bottom: none; }
.facts .k { color: var(--t3); font-weight: 500; }
.facts .v { font-weight: 700; text-align: end; letter-spacing: -0.1px; }
.meter { height: 9px; background: #edf1ee; border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(8, 36, 24, 0.06); }
.meter > i { display: block; height: 100%; border-radius: 5px; transition: width .6s var(--ease); }

/* ── Bookings grid ── */
.rooms-grid { min-width: 760px; }
.room-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f2f6f3; }
.room-row:last-child { border-bottom: none; }
.room-meta { width: 190px; flex: none; }
.room-meta .nm { font-weight: 800; font-size: 13px; letter-spacing: -0.1px; }
.room-meta .mt { font-size: 11px; color: var(--t3); }
.room-track {
  position: relative; flex: 1; height: 38px; border-radius: 10px; border: 1px solid var(--bdl);
  background: repeating-linear-gradient(90deg, #fbfdfc 0, #fbfdfc 9.9%, #f1f5f2 10%, #f1f5f2 10.15%);
  box-shadow: inset 0 1px 3px rgba(8, 36, 24, 0.04);
}
.slot {
  position: absolute; top: 4px; bottom: 4px; border-radius: 7px; border: 1px solid; font-size: 11px;
  font-weight: 700; display: flex; align-items: center; padding: 0 9px; overflow: hidden; white-space: nowrap;
  cursor: pointer; transition: transform .14s, box-shadow .14s;
}
.slot:hover { transform: scale(1.03); box-shadow: var(--shadow-sm); z-index: 2; }
.hours { display: flex; margin-inline-start: 202px; font-size: 10px; color: var(--t4); margin-bottom: 5px; font-weight: 600; }
.hours span { flex: 1; }

/* ── Switch ── */
.switch { width: 42px; height: 22px; border-radius: 12px; position: relative; cursor: pointer; transition: background .2s; flex: none; border: none; box-shadow: inset 0 1px 3px rgba(8, 36, 24, 0.15); }
.switch i { position: absolute; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.3); }

/* ── Modal / drawer ── */
.overlay {
  position: fixed; inset: 0; background: rgba(2, 16, 28, 0.55); backdrop-filter: blur(5px); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 54px 16px;
  animation: fade .16s ease;
}
.modal {
  background: #fff; border-radius: 20px; width: 530px; max-width: 100%;
  box-shadow: 0 32px 80px rgba(2, 16, 28, 0.4); max-height: 86vh; display: flex; flex-direction: column;
  animation: rise .2s var(--ease); border: 1px solid rgba(255, 255, 255, 0.6);
}
.modal.wide { width: min(880px, 94vw); }
.modal-h { padding: 18px 22px 13px; border-bottom: 1px solid var(--bdl); display: flex; align-items: center; }
.modal-h b { font-size: 15.5px; letter-spacing: -0.3px; font-weight: 800; }
.modal-x { margin-inline-start: auto; border: none; background: none; font-size: 16px; cursor: pointer; color: var(--t3); width: 30px; height: 30px; border-radius: 9px; transition: all .14s; }
.modal-x:hover { background: var(--red-bg); color: var(--red-fg); }
.modal-b { padding: 18px 22px; overflow-y: auto; }
.modal-f { padding: 13px 22px 18px; border-top: 1px solid var(--bdl); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.frow { margin-bottom: 13px; }
.frow label { display: block; font-size: 12px; color: var(--t2); margin-bottom: 5px; font-weight: 700; letter-spacing: .01em; }
.frow input, .frow select, .frow textarea {
  width: 100%; height: 36px; border: 1px solid var(--bd); border-radius: 10px; padding: 0 11px;
  font-size: 13px; font-family: var(--font); outline: none; background: #fff; color: var(--t1);
  transition: border-color .15s, box-shadow .15s;
}
.frow textarea { height: 72px; padding: 9px 11px; resize: vertical; }
.frow input:focus, .frow select:focus, .frow textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(36, 159, 98, 0.13); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.qline { display: grid; grid-template-columns: 2.2fr .6fr 1fr; gap: 8px; margin-bottom: 8px; }
.qtotal {
  background: linear-gradient(135deg, var(--green-bg), #ddf2e7); border: 1px solid var(--green-bd);
  border-radius: 12px; padding: 12px 15px; font-size: 13px; display: flex; justify-content: space-between; align-items: center;
}
.qtotal b { font-size: 17px; color: var(--green-a); font-weight: 800; letter-spacing: -0.4px; }

/* drawer */
.drawer-wrap { position: fixed; inset: 0; z-index: 100; }
.drawer-wrap .mask { position: absolute; inset: 0; background: rgba(2, 16, 28, 0.5); backdrop-filter: blur(3px); animation: fade .16s ease; }
.drawer {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 580px; max-width: 94vw; background: #fff;
  box-shadow: -20px 0 60px rgba(2, 16, 28, 0.3); display: flex; flex-direction: column; animation: slidein .22s var(--ease);
}
@keyframes slidein { from { transform: translateX(44px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer-h { padding: 17px 22px; border-bottom: 1px solid var(--bdl); display: flex; align-items: center; gap: 11px; }
.drawer-b { padding: 18px 22px; overflow-y: auto; flex: 1; background: #f7faf8; }
.drawer-b .card { margin-bottom: 13px; }

/* ── Toast ── */
#toasts { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 200; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: linear-gradient(135deg, rgba(6, 40, 60, 0.97), rgba(0, 22, 40, 0.97));
  backdrop-filter: blur(8px); color: #fff; border-radius: 14px; padding: 12px 17px;
  font-size: 13px; font-weight: 500; box-shadow: 0 12px 36px rgba(2, 16, 28, 0.45); max-width: 400px;
  animation: rise .22s var(--ease); display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.toast .tic { flex: none; width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; margin-top: 1px; box-shadow: 0 0 10px rgba(36, 159, 98, 0.6); }
.toast.okt .tic { background: linear-gradient(135deg, var(--green-h), var(--green-a)); }
.toast.err { background: linear-gradient(135deg, rgba(74, 16, 22, 0.97), rgba(52, 10, 14, 0.97)); }
.toast.err .tic { background: linear-gradient(135deg, #ff6b6e, #d03438); box-shadow: 0 0 10px rgba(224, 58, 62, 0.6); }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Login ── */
.login-bg {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(1100px 700px at 12% -10%, #0a3a52 0%, transparent 55%),
              radial-gradient(900px 600px at 105% 110%, #0c3d2a 0%, transparent 50%),
              var(--navy);
}
.login-card {
  display: flex; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  width: 800px; max-width: 100%; min-height: 470px; animation: rise .32s var(--ease);
}
.login-brand {
  flex: 1.05; background: linear-gradient(160deg, #0b3f2c 0%, #072e3f 100%); color: #fff;
  padding: 40px 38px; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.login-brand::after {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 159, 98, 0.4), transparent 65%); bottom: -130px; right: -110px;
}
.login-brand .lockup { display: block; width: 236px; max-width: 70%; height: auto; margin-bottom: 22px; }
.login-brand h2 { font-size: 24px; letter-spacing: -0.6px; margin-bottom: 6px; font-weight: 800; }
.login-brand .tag2 { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); margin-bottom: 28px; }
.login-brand .feat { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 15px; font-size: 12.5px; color: rgba(255, 255, 255, 0.75); line-height: 1.55; }
.login-brand .feat i {
  width: 21px; height: 21px; border-radius: 7px; background: rgba(36, 159, 98, 0.32); color: #7fe0b0;
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 800; flex: none; margin-top: -1px;
}
.login-brand .foot2 { margin-top: auto; font-size: 11px; color: rgba(255, 255, 255, 0.38); }
.login-form { flex: 1; background: #fff; padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
.login-form h1 { font-size: 21px; margin-bottom: 3px; letter-spacing: -0.5px; font-weight: 800; }
.login-form p { font-size: 13px; color: var(--t3); margin-bottom: 22px; }
.login-err { color: var(--red-fg); font-size: 12.5px; margin-top: 10px; min-height: 16px; font-weight: 600; }
/* v194 — forgot password */
.login-forgot { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--green-a, #1c7c4c); font: 600 12.5px inherit; cursor: pointer; padding: 4px 6px; }
.login-forgot:hover { text-decoration: underline; }
.login-forgot-p { font-size: 12.5px; color: var(--t3); margin: 0 0 12px; line-height: 1.5; }
.login-forgot-ok { color: var(--green-a, #1c7c4c); font-size: 12.5px; font-weight: 600; margin-top: 10px; line-height: 1.5; }
.login-forgot-ok:empty { display: none; }
/* the line that greets someone arriving from their welcome email */
.login-pre { background: rgba(36,159,98,.12); border: 1px solid rgba(36,159,98,.35); color: #0c3520;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; margin-bottom: 14px; }
.login-pre b { font-weight: 700; }

/* bars */
.hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12.5px; }
/* 190px + 110px of FIXED width plus gaps is wider than this card in a sidebar — measured, it
   pushed Utilisation 16px past the frame at 1024. The label shrinks instead, the bar holds. */
.hbar-row .l { width: 190px; flex: 0 1 190px; min-width: 0; color: var(--t2); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-row .track { flex: 1; background: #edf1ee; height: 17px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(8, 36, 24, 0.05); }
.hbar-row .track i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-h), var(--green-a)); border-radius: 6px; transition: width .6s var(--ease); }
.hbar-row .v { width: 110px; flex: 0 1 110px; min-width: 52px; text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
@media (max-width: 1200px) { .hbar-row .l { flex-basis: 120px; } .hbar-row .v { flex-basis: 64px; } }

/* a bare URL has no break point, so it carries the whole block past the edge */
.mut b, .mut code { overflow-wrap: anywhere; word-break: break-word; }

/* charts */
.chart-wrap { position: relative; }
.chart-tip { font-size: 11px; fill: var(--t3); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--t2); margin-top: 8px; flex-wrap: wrap; font-weight: 500; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-inline-end: 5px; }

/* product cards */
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 13px; }
.prod {
  background: #fff; border: 1px solid rgba(8, 36, 24, 0.08); border-radius: var(--r-lg); padding: 16px 17px 14px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s; position: relative;
}
.prod:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: rgba(36, 159, 98, 0.3); }
.prod.off { opacity: .55; }
.prod .p-nm { font-weight: 800; font-size: 13.5px; letter-spacing: -0.2px; padding-inline-end: 42px; }
.prod .p-ds { font-size: 12px; color: var(--t3); margin: 5px 0 11px; flex: 1; min-height: 30px; line-height: 1.55; }
.prod .p-pr { font-size: 18px; font-weight: 800; color: var(--green-a); letter-spacing: -0.5px; }
.prod .p-pr small { font-size: 11.5px; font-weight: 600; color: var(--t3); }
.prod .p-terms { font-size: 11px; color: var(--t3); margin-top: 7px; padding-top: 9px; border-top: 1px dashed var(--bdl); line-height: 1.65; }
.prod .p-edit { position: absolute; top: 13px; inset-inline-end: 13px; }

/* phone frame — member-app live preview */
.phone {
  width: 302px; border-radius: 36px; background: linear-gradient(160deg, #131a20, #05090d); padding: 11px;
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, 0.14); flex: none; margin: 0 auto;
}
.phone .screen2 { background: #f5f8f6; border-radius: 27px; overflow: hidden; min-height: 520px; }
.phone .p-head { background: linear-gradient(135deg, #072e3f, #0b3f2c); color: #fff; padding: 17px 16px 15px; }
.phone .p-head .hi { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.phone .p-head .sub { font-size: 10.5px; color: rgba(255, 255, 255, 0.58); }
.phone .p-actions { display: flex; gap: 6px; margin-top: 11px; }
.phone .p-actions button { flex: 1; border: none; border-radius: 9px; padding: 8px 0; font-size: 11px; font-weight: 800; cursor: pointer; background: rgba(255, 255, 255, 0.15); color: #fff; font-family: var(--font); }
.phone .p-actions button.pri { background: linear-gradient(135deg, var(--green-h), var(--green-a)); box-shadow: 0 3px 10px rgba(36, 159, 98, 0.45); }
.phone .p-sec { padding: 11px 13px 5px; font-size: 9.5px; font-weight: 800; color: var(--t3); letter-spacing: .1em; }
.phone .p-item { background: #fff; border-radius: 12px; margin: 0 10px 8px; padding: 10px 12px; font-size: 12px; box-shadow: var(--shadow-sm); display: flex; gap: 8px; align-items: center; }
.phone .p-item b { font-size: 12px; letter-spacing: -0.1px; }
.phone .p-item .m { color: var(--t3); font-size: 11px; }
.phone .p-item button { margin-inline-start: auto; border: none; background: linear-gradient(135deg, var(--green-h), var(--green-a)); color: #fff; border-radius: 7px; padding: 6px 11px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: var(--font); }
.phone .p-item button.ghost { background: var(--green-bg); color: var(--green-a); }

/* access toggles */
.acc-dot { width: 36px; height: 21px; border-radius: 11px; border: none; cursor: pointer; position: relative; transition: background .18s; box-shadow: inset 0 1px 3px rgba(8, 36, 24, 0.16); }
.acc-dot i { position: absolute; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left .16s; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.3); }

/* guided tour */
.tour-dim { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.tour-spot {
  position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(1, 12, 22, 0.66);
  border: 2.5px solid var(--green-h); transition: all .32s var(--ease); pointer-events: none;
}
.tour-card {
  position: fixed; z-index: 310; width: 350px; background: #fff; border-radius: 18px;
  box-shadow: 0 28px 70px rgba(1, 12, 22, 0.45); padding: 20px; animation: rise .26s var(--ease);
}
.tour-card .t-step { font-size: 10.5px; font-weight: 800; color: var(--green-a); letter-spacing: .1em; margin-bottom: 7px; }
.tour-card h4 { font-size: 16px; margin-bottom: 6px; letter-spacing: -0.4px; font-weight: 800; }
.tour-card p { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 15px; }
.tour-card .t-foot { display: flex; align-items: center; gap: 8px; }
.tour-dots { display: flex; gap: 4px; margin-inline-end: auto; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--bdl); }
.tour-dots i.on { background: linear-gradient(90deg, var(--green-h), var(--green-a)); width: 18px; border-radius: 3px; }

/* billing tabs */
.subtabs { display: flex; gap: 7px; margin-bottom: 13px; flex-wrap: wrap; }

/* ── events calendar ── */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--t3); text-align: center; padding: 4px 0 6px; }
.cal-cell {
  min-height: 92px; background: #fbfdfc; border: 1px solid rgba(8, 36, 24, 0.07); border-radius: 12px;
  padding: 7px 7px 6px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cal-cell:hover { border-color: var(--green-bd); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cal-cell.other { opacity: .38; background: transparent; }
.cal-cell.today { border-color: var(--green); box-shadow: 0 0 0 2.5px rgba(36, 159, 98, 0.18); background: #f4fbf7; }
.cal-num { font-size: 11.5px; font-weight: 800; color: var(--t2); font-family: var(--font-disp); }
.cal-cell.today .cal-num { color: var(--green-a); }
.cal-cell.today .cal-num::after { content: ' · today'; font-size: 8.5px; letter-spacing: .06em; font-weight: 700; }
.cal-ev {
  font-size: 10px; font-weight: 700; border-radius: 6px; padding: 3px 6px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent;
  transition: transform .12s;
}
.cal-ev:hover { transform: scale(1.03); }
.cal-more { font-size: 9.5px; font-weight: 700; color: var(--t3); padding-inline-start: 2px; }
.ev-up {
  display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--bdl);
  cursor: pointer; border-radius: 8px; transition: background .12s;
}
.ev-up:hover { background: #f6fbf8; }
.ev-date {
  width: 46px; flex: none; text-align: center; border-radius: 10px; padding: 6px 0 7px;
  background: linear-gradient(180deg, var(--green-bg), #dff2e8); border: 1px solid var(--green-bd);
}
.ev-date .d { font-size: 17px; font-weight: 800; color: var(--green-a); line-height: 1; font-family: var(--font-disp); }
.ev-date .m { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; color: var(--green-a); opacity: .75; }

.empty { text-align: center; color: var(--t3); padding: 40px 10px; font-size: 13px; }
.empty .e-ic { font-size: 27px; opacity: .55; display: block; margin-bottom: 9px; }
.mut { color: var(--t3); } .good { color: var(--green-a); } .warn { color: var(--amber-fg); } .bad { color: var(--red-fg); }
.mono { font-family: var(--mono); font-size: 12px; }

/* skeleton loading */
.skel { border-radius: 14px; background: linear-gradient(90deg, #e9eeeb 25%, #f5f8f6 42%, #e9eeeb 60%); background-size: 300% 100%; animation: shimmer 1.15s infinite linear; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 900px) {
  .sider { position: fixed; inset-inline-start: -260px; transition: inset-inline-start .2s; }
  .sider.open { inset-inline-start: 0; }
  .content { padding: 14px 12px 40px; }
  .gsearch { max-width: 40vw; }
  .modal { width: 100%; }
  .login-card { flex-direction: column; }
  .login-brand { display: none; }
}

@media print {
  .sider, .topbar, .screen-actions, #toasts { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
}

/* ══ v8 — AI service desk, staff & portal access, dashboard brief ═══════ */

/* KPI row handles six tiles without wrapping awkwardly */
.kpis.kpis6 { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }

/* entrance animation — content settles in, staggered */
.anim-in { animation: rise .34s var(--ease, ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* AI daily brief */
.ai-brief {
  margin-bottom: 18px; position: relative;
  border: 1px solid rgba(36, 159, 98, 0.28);
  background:
    radial-gradient(600px 120px at 8% 0%, rgba(36, 159, 98, 0.07), transparent 70%),
    #fff;
}
.ai-spark { color: var(--green-a); text-shadow: 0 0 10px rgba(36, 159, 98, 0.6); font-style: normal; }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
@media (max-width: 900px) { .brief-grid { grid-template-columns: 1fr; } }
.brief-item {
  display: flex; gap: 9px; align-items: flex-start; padding: 6px 8px; border-radius: 9px;
  font-size: 12.8px; color: var(--t2); cursor: pointer; transition: background .14s;
}
.brief-item:hover { background: var(--green-bg); color: var(--t1); }
.brief-item .b-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; box-shadow: 0 0 0 3px rgba(8, 36, 24, 0.05); }

/* login — access mode segments */
.login-seg { display: flex; gap: 7px; margin-bottom: 16px; }
.login-seg button {
  flex: 1; height: 42px; border-radius: 11px; border: 1.5px solid var(--bd); background: #fff;
  font-family: var(--font); font-size: 12.8px; font-weight: 700; color: var(--t2); cursor: pointer; transition: all .16s;
}
.login-seg button:hover { border-color: var(--green-bd); color: var(--green-a); }
.login-seg button.on {
  border-color: var(--green-a); color: var(--green-a); background: var(--green-bg);
  box-shadow: 0 0 0 3px rgba(36, 159, 98, 0.12);
}
.login-guest-note {
  font-size: 13px; color: var(--t2); background: var(--green-bg); border: 1px solid var(--green-bd);
  border-radius: 11px; padding: 13px 14px; margin-bottom: 14px; line-height: 1.55;
}

/* support desk */
.tk-tbl .tk-row { cursor: pointer; transition: background .12s; }
.tk-tbl .tk-row:hover { background: var(--green-bg); }
.tk-detail { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .tk-detail { grid-template-columns: 1fr; } }
.tk-thread { min-width: 0; max-height: 62vh; overflow-y: auto; padding-inline-end: 4px; }
.tk-msg { border: 1px solid var(--bdl); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.tk-msg.internal { border-style: dashed; }
.tk-msg-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12.5px; }
.tk-side .facts { margin-bottom: 10px; }
.tk-side textarea, .tk-thread textarea { width: 100%; }
.ai-panel {
  border: 1px solid rgba(146, 84, 222, 0.35); background: linear-gradient(180deg, rgba(146, 84, 222, 0.06), transparent);
  border-radius: 12px; padding: 11px 13px; margin-top: 10px;
}
.ai-panel-h { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; margin-bottom: 5px; }
.ai-panel-h .ai-spark { color: var(--purple-fg); text-shadow: 0 0 10px rgba(146, 84, 222, 0.5); }

/* ══ v9 — community feed, automation studio, OCR receipts, global polish ══ */

/* ── community member feed ── */
.fcomposer { display: flex; gap: 11px; padding: 4px 2px 14px; border-bottom: 1px solid var(--bdl); margin-bottom: 12px; }
.fcomposer textarea { width: 100%; min-height: 54px; border: 1.5px solid var(--bd); border-radius: 12px; padding: 9px 12px; font-family: var(--font); font-size: 13px; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.fcomposer textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(36, 159, 98, 0.12); }
.fpost { padding: 13px 2px; border-bottom: 1px solid var(--bdl); }
.fpost:last-child { border-bottom: none; }
.fpost-h { display: flex; gap: 10px; align-items: center; margin-bottom: 7px; }
.fpost-b { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.fpost-img { max-width: min(100%, 460px); border-radius: 13px; margin-top: 9px; display: block; cursor: zoom-in; box-shadow: var(--shadow-sm); transition: transform .16s, box-shadow .16s; }
.fpost-img:hover { transform: scale(1.01); box-shadow: var(--shadow-lift); }
.fpost-f { display: flex; gap: 12px; margin-top: 9px; }
.freact { border: 1px solid var(--bdl); background: #fff; border-radius: 16px; padding: 4px 13px; font-size: 12.5px; font-weight: 700; color: var(--t2); cursor: pointer; transition: all .14s; font-family: var(--font); }
.freact:hover { border-color: var(--green-bd); color: var(--green-a); transform: translateY(-1px); }
.freact.on { background: var(--green-bg); border-color: var(--green-bd); color: var(--green-a); }
.fcomments { border-top: 1px dashed var(--bdl); margin-top: 10px; padding-top: 10px; }
.fcomment { display: flex; gap: 9px; margin-bottom: 8px; }

/* ── automation studio ── */
.engine-live { display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--green-a); background: var(--green-bg); border: 1px solid var(--green-bd); border-radius: 18px; padding: 6px 14px; align-self: center; }
.engine-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }
.auto-card { padding: 14px 16px; transition: opacity .2s; }
.auto-card.off { opacity: .55; }
.auto-head { display: flex; gap: 12px; align-items: center; }
.auto-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--green-bg); box-shadow: inset 0 0 0 1px var(--green-bd); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.a-spark { display: flex; gap: 2px; align-items: flex-end; height: 26px; width: 74px; flex: none; }
.a-spark i { flex: 1; background: linear-gradient(180deg, var(--green-h), var(--green-a)); border-radius: 2px 2px 0 0; min-height: 2px; }
.flow { display: flex; gap: 7px; align-items: stretch; margin-top: 12px; }
.fnode { flex: 1; border-radius: 11px; padding: 8px 11px; font-size: 11.8px; line-height: 1.45; border: 1px solid var(--bdl); background: linear-gradient(180deg, #fbfdfc, #f4f8f5); position: relative; }
.fnode .fk { display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; margin-bottom: 3px; }
.fnode.trig .fk { color: var(--blue-fg); } .fnode.trig { border-color: rgba(29, 95, 196, 0.25); }
.fnode.cond .fk { color: var(--amber-fg); } .fnode.cond { border-color: rgba(154, 103, 0, 0.25); }
.fnode.act .fk { color: var(--green-a); } .fnode.act { border-color: rgba(28, 124, 76, 0.3); background: linear-gradient(180deg, #f2faf5, #e9f7f0); }
.farrow { align-self: center; color: var(--t4); font-weight: 800; flex: none; }
@media (max-width: 900px) { .flow { flex-direction: column; } .farrow { transform: rotate(90deg); align-self: flex-start; margin-inline-start: 20px; } }

/* ── OCR receipt drop zone ── */
.rp-drop { border: 2px dashed var(--bd); border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; transition: all .16s; margin-top: 4px; }
.rp-drop:hover { border-color: var(--green); background: var(--green-bg); }
.rp-drop b { display: block; font-size: 13px; margin-top: 4px; }

/* ── world-class polish pass ── */
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: rgba(36, 159, 98, 0.045); }
.tbl thead th { position: sticky; top: 0; background: #fbfdfc; z-index: 2; }
.btn:active { transform: translateY(0) scale(.98); }
.chip { box-shadow: 0 1px 2px rgba(8, 36, 24, 0.04); }
.modal { animation: mrise .22s cubic-bezier(0.34, 1.3, 0.5, 1); }
@keyframes mrise { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.overlay { animation: fade .18s ease; }
.content > .screen-head { animation: rise .3s var(--ease) both; }
.content > .kpis > .kpi { animation: rise .34s var(--ease) both; }
.content > .kpis > .kpi:nth-child(2) { animation-delay: .04s; }
.content > .kpis > .kpi:nth-child(3) { animation-delay: .08s; }
.content > .kpis > .kpi:nth-child(4) { animation-delay: .12s; }
.content > .kpis > .kpi:nth-child(5) { animation-delay: .16s; }
.content > .kpis > .kpi:nth-child(6) { animation-delay: .2s; }
.content > .grid, .content > .card, .content > .tbl-wrap { animation: rise .36s var(--ease) both; animation-delay: .06s; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid rgba(36, 159, 98, 0.55); outline-offset: 1px; }

/* ── admin ⇄ member profile switch (topbar) ── */
.view-switch { display: flex; background: rgba(8, 36, 24, 0.06); border-radius: 12px; padding: 3px; gap: 2px; flex: none; }
.view-switch button {
  border: none; background: transparent; border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 700;
  color: var(--t2); cursor: pointer; font-family: var(--font); transition: all .15s; white-space: nowrap;
}
.view-switch button.on { background: #fff; color: var(--green-a); box-shadow: 0 1px 4px rgba(8, 36, 24, 0.14); cursor: default; }
.view-switch button:not(.on):hover { color: var(--green-a); background: rgba(36, 159, 98, 0.1); }
@media (max-width: 1240px) { .view-switch button { padding: 7px 9px; } }

/* ── v13 — pipeline upgrade + Leads ── */
.col-accent { display: block; height: 3px; border-radius: 3px; margin: -3px 2px 7px; flex: none; opacity: .85; }
.col-sub { font-size: 10px; color: var(--t4); font-weight: 700; padding: 0 5px 7px; letter-spacing: .03em; flex: none; min-height: 17px; }
.dcard .dc-top { display: flex; align-items: baseline; gap: 8px; }
.dcard .dc-top .a { font-weight: 800; font-size: 13px; letter-spacing: -0.2px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard .days { font-size: 10.5px; font-weight: 800; flex: none; }
.dcard .src { font-size: 9.5px; font-weight: 700; color: var(--t3); background: #f2f5f3; border-radius: 5px; padding: 2px 6px; margin-inline-start: 7px; }
.dcard.rotting { border-inline-start: 3px solid var(--red); }
.dcard .qa { display: none; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.dcard:hover .qa { display: flex; }
.dcard .qa button {
  border: 1px solid var(--bdl); background: #fbfdfc; border-radius: 7px; padding: 3px 8px;
  font-size: 10.5px; font-weight: 700; color: var(--t2); cursor: pointer; font-family: var(--font); transition: all .13s;
}
.dcard .qa button:hover { border-color: var(--green); color: var(--green-a); background: var(--green-bg); }
.dcard .qa button:first-child { border-color: var(--green-bd); color: var(--green-a); }
.nba {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(36, 159, 98, 0.07), transparent 70%), #fff;
  border: 1px solid rgba(36, 159, 98, 0.25); border-radius: 13px; padding: 8px 12px;
}
.nba-k { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--green-a); flex: none; display: inline-flex; gap: 6px; align-items: center; }
.nba-item {
  display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--bdl); background: #fbfdfc;
  border-radius: 9px; padding: 5px 10px; font-size: 11.8px; color: var(--t2); cursor: pointer;
  font-family: var(--font); text-align: start; transition: all .14s; max-width: 460px;
}
.nba-item:hover { border-color: var(--green-bd); color: var(--t1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8, 36, 24, 0.1); }
.nba-item i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ══ v15 — Tasker agent + notification drawer ═══════════════════════════ */
.tk-hero {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px;
  border-radius: 20px; padding: 22px 24px; color: #fff;
  background: radial-gradient(420px 200px at 12% -30%, rgba(36,159,98,.5), transparent 60%),
    linear-gradient(120deg, #04283c, var(--navy) 60%, #032033);
  box-shadow: 0 16px 40px -12px rgba(0, 18, 32, .45);
}
.tk-hi { font-family: var(--font-disp); font-size: 21px; font-weight: 800; letter-spacing: -.4px; }
.tk-focus { color: rgba(255,255,255,.72); font-size: 13.5px; margin-top: 5px; max-width: 640px; line-height: 1.55; }
.tk-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 15px; padding: 4px 11px; font-size: 11.5px; color: rgba(255,255,255,.75); }
.tk-chip b { color: #fff; }
.tk-chip.bad b { color: #ff8a8d; } .tk-chip.warn b { color: #ffd166; } .tk-chip.good b { color: #5fdd9d; }
.tk-planbtn {
  background: linear-gradient(135deg, var(--green-h), var(--green-deep)); color: #fff; border: none;
  height: 46px; padding: 0 22px; font-size: 14px; font-weight: 800; border-radius: 13px;
  box-shadow: 0 8px 24px rgba(36,159,98,.5); flex: none;
}
.tk-planbtn:hover { color: #fff; filter: brightness(1.08); }
.tk-planbtn:disabled { opacity: .75; cursor: wait; }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spn .7s linear infinite; vertical-align: -2px; }
.spin.dark { border-color: rgba(8,36,24,.2); border-top-color: var(--green-a); }
@keyframes spn { to { transform: rotate(360deg); } }

.t-block { display: flex; gap: 11px; align-items: flex-start; padding: 10px 8px; border-radius: 12px; transition: background .14s; }
.t-block:hover { background: #f7faf8; }
.t-block.high { box-shadow: inset 3px 0 0 var(--red); }
.t-block.done { opacity: .5; }
.t-block.done .t-title { text-decoration: line-through; }
.t-time { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--green-a); background: var(--green-bg); border-radius: 7px; padding: 3px 7px; flex: none; margin-top: 1px; }
.t-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.1px; }
.t-detail { font-size: 12px; color: var(--t3); margin-top: 1px; }

.tk-chatcard { display: flex; flex-direction: column; }
.tk-msgs { max-height: 380px; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.tk-m { max-width: 88%; border-radius: 14px; padding: 9px 13px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; animation: rise .25s ease; }
.tk-m.user { align-self: flex-end; background: linear-gradient(135deg, var(--green-h), var(--green-a)); color: #fff; border-bottom-right-radius: 4px; }
.tk-m.tasker { align-self: flex-start; background: #f2f6f3; border: 1px solid var(--bdl); border-bottom-left-radius: 4px; }
.tk-m.thinking { color: var(--t3); font-style: italic; }

/* notification drawer */
#ndrawer { position: fixed; inset: 0; z-index: 90; }
.nd-back { position: absolute; inset: 0; background: rgba(0, 14, 26, .35); backdrop-filter: blur(2px); animation: fade .2s ease; }
.nd-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); background: #fbfdfc;
  box-shadow: -18px 0 50px rgba(0, 14, 26, .3); display: flex; flex-direction: column;
  animation: ndin .28s cubic-bezier(.3, 1, .4, 1);
}
[dir="rtl"] .nd-panel { right: auto; left: 0; animation-name: ndinR; }
@keyframes ndin { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ndinR { from { transform: translateX(-100%); } to { transform: none; } }
.nd-head {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px; color: #fff;
  background: radial-gradient(300px 120px at 10% -40%, rgba(36,159,98,.55), transparent 65%), linear-gradient(120deg, #04283c, var(--navy));
}
.nd-head b { font-family: var(--font-disp); font-size: 17px; letter-spacing: -.3px; }
.nd-sub { font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.nd-head > div:first-child { flex: 1; }
.nd-x { background: rgba(255,255,255,.1); border: none; color: #fff; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 13px; }
.nd-body { flex: 1; overflow-y: auto; padding: 10px 12px 20px; }
.nd-g { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--t4); padding: 12px 8px 5px; }
.nd-row {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 10px; border-radius: 13px; cursor: pointer;
  transition: background .13s; position: relative; background: #fff; border: 1px solid var(--bdl); margin-bottom: 7px;
  box-shadow: 0 1px 3px rgba(8,36,24,.04); animation: rise .25s ease both;
}
.nd-row:hover { background: var(--green-bg); border-color: var(--green-bd); }
.nd-row.read { opacity: .58; box-shadow: none; }
.nd-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--green-bg); box-shadow: inset 0 0 0 1px var(--green-bd); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.nd-t { font-size: 13px; font-weight: 700; letter-spacing: -.1px; }
.nd-s { font-size: 11.8px; color: var(--t3); margin-top: 1px; }
.nd-w { font-size: 10.5px; color: var(--t4); margin-top: 3px; }
.nd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(36,159,98,.2); flex: none; margin-top: 5px; }
.nd-zzz { border: 1px solid var(--bdl); background: #fff; border-radius: 8px; padding: 3px 8px; font-size: 10.5px; font-weight: 700; color: var(--t3); cursor: pointer; flex: none; font-family: var(--font); }
.nd-zzz:hover { border-color: var(--amber); color: var(--amber-fg); }

/* ── v17: Bayut Café admin — lanes, order cards, menu grid ── */
.oc-lane { background: linear-gradient(180deg, rgba(8,36,24,.05), rgba(8,36,24,.03)); border: 1px solid rgba(8,36,24,.06); border-radius: 16px; padding: 12px; }
.oc-lane.hot { background: linear-gradient(180deg, rgba(224,58,62,.06), rgba(8,36,24,.03)); }
.oc-lane-h { font-family: var(--font-disp); font-weight: 800; font-size: 13px; display: flex; gap: 8px; align-items: center; padding: 2px 4px 10px; }
.oc-lane-h span { background: #fff; border-radius: 9px; padding: 1px 8px; font-size: 11.5px; box-shadow: var(--shadow-sm); }
.oc { background: #fff; border: 1px solid rgba(8,36,24,.08); border-radius: 14px; padding: 12px 13px; margin-bottom: 9px; box-shadow: var(--shadow-sm); animation: rise .25s ease; }
.oc.fresh { border-color: rgba(224,58,62,.35); box-shadow: 0 0 0 3px rgba(224,58,62,.08); }
.oc-h { display: flex; gap: 8px; align-items: center; }
.oc-timer { margin-inline-start: auto; font-size: 11px; font-weight: 800; color: var(--t3); background: #f2f5f3; border-radius: 8px; padding: 2px 8px; }
.oc-timer.late { color: var(--red-fg); background: var(--red-bg); animation: pulse 1.6s infinite; }
.oc-items { display: flex; gap: 6px; flex-wrap: wrap; margin: 9px 0 8px; }
.oc-pill { background: #f7faf8; border: 1px solid var(--bdl); border-radius: 9px; padding: 4px 9px; font-size: 12px; font-weight: 600; }
.oc-f { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.oc-acts { display: flex; gap: 6px; margin-top: 9px; }
.oc-acts:empty { display: none; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; }
.mitem { display: flex; gap: 10px; align-items: center; border: 1px solid var(--bdl); border-radius: 13px; padding: 9px 11px; background: #fbfdfc; transition: .14s; }
.mitem:hover { border-color: var(--green-bd); background: #fff; }
.mitem.off { opacity: .45; }
.mi-tile { width: 38px; height: 38px; border-radius: 11px; background: var(--green-bg); box-shadow: inset 0 0 0 1px var(--green-bd); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }

/* ══════════════════════════════════════════════════════════════════════
   v21 — DESIGN SYSTEM v4 "Executive Majlis"
   A deliberate visual uplift: richer canvas, jewel-toned stat tiles,
   deeper card presence, display numerals, refined tables & chrome.
   Pure CSS — the cascade upgrades every screen without touching logic.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --bd: #cfd9d3; --bdl: #e6ece8;
  --bg-layout: #edf1ee;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(8, 36, 24, 0.05), 0 3px 10px -3px rgba(8, 36, 24, 0.07);
  --shadow: 0 2px 4px rgba(8, 36, 24, 0.04), 0 10px 26px -6px rgba(8, 36, 24, 0.11), 0 24px 54px -18px rgba(8, 36, 24, 0.14);
  --shadow-lift: 0 4px 10px rgba(8, 36, 24, 0.06), 0 18px 38px -10px rgba(8, 36, 24, 0.2);
}
body {
  background:
    radial-gradient(1100px 480px at 88% -10%, rgba(36, 159, 98, 0.10), transparent 58%),
    radial-gradient(800px 420px at -12% 24%, rgba(6, 90, 128, 0.07), transparent 55%),
    linear-gradient(180deg, #eef2ef 0%, #eaefec 100%);
  background-attachment: fixed;
}

/* ── cards: quiet gradient, real presence ── */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #fcfdfc 100%);
  border: 1px solid rgba(8, 36, 24, 0.07);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card:hover { box-shadow: var(--shadow); }
.card h3 { font-size: 14.5px; letter-spacing: -0.2px; }
.card h3 .rt { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--t3); margin-inline-start: auto; }

/* ── stat tiles: the numbers become the interface ── */
.kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fbfdfc 100%);
  border: 1px solid rgba(8, 36, 24, 0.07);
  border-radius: 18px; padding: 15px 17px 13px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(36, 159, 98, 0.28); }
.kpi::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3.5px;
  border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--green-h), var(--green-a)); opacity: .9;
}
.kpi:has(.k-v.bad)::before { background: linear-gradient(180deg, #ff6b6e, var(--red-fg)); }
.kpi:has(.k-v.warn)::before { background: linear-gradient(180deg, #ffc53d, var(--amber)); }
.kpi::after {
  content: ''; position: absolute; top: -46px; inset-inline-end: -46px; width: 116px; height: 116px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(36, 159, 98, 0.09), transparent); pointer-events: none;
}
.kpi:has(.k-v.bad)::after { background: radial-gradient(closest-side, rgba(224, 58, 62, 0.09), transparent); }
.kpi:has(.k-v.warn)::after { background: radial-gradient(closest-side, rgba(245, 166, 35, 0.12), transparent); }
.kpi .k-l { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.kpi .k-v {
  font-family: var(--font-disp); font-size: 27px; font-weight: 800; letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 3px;
}
.kpi .k-s { font-size: 11.5px; color: var(--t3); margin-top: 1px; }

/* ── screen head: executive masthead ── */
.screen-title { font-size: 26px; letter-spacing: -0.8px; }
.screen-sub { font-size: 13px; color: var(--t3); margin-top: 1px; }
.screen-head { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(8, 36, 24, 0.06); }
.greet { font-size: 12px; letter-spacing: .04em; }

/* ── tables: boardroom-grade ── */
/* `overflow: hidden` here silently overrode the `overflow-x: auto` set further
   up, so every table wider than its card had its right-hand columns clipped
   and unreachable — on desktop as well as mobile. Scroll horizontally, clip
   vertically so the rounded corners still hold. */
.tbl-wrap { border-radius: 18px; border: 1px solid rgba(8, 36, 24, 0.07); box-shadow: var(--shadow-sm);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: #fff; }
.tbl thead th {
  background: linear-gradient(180deg, #fafcfa, #f4f8f5);
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t3);
  padding: 11px 14px; border-bottom: 1px solid var(--bdl);
}
.tbl td { padding: 11px 14px; }
.tbl tbody tr:hover { background: rgba(36, 159, 98, 0.055); box-shadow: inset 3px 0 0 var(--green); }

/* ── tags & chips: consistent capsule language ── */
.tag { border-radius: 7px; padding: 2.5px 9px; font-size: 10.5px; letter-spacing: .01em; }
.chip { border-radius: 11px; font-weight: 700; }
.chip.on { box-shadow: 0 3px 12px rgba(36, 159, 98, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

/* ── chrome: topbar & sider fine-tuning ── */
.topbar {
  background: rgba(251, 253, 252, 0.72);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(8, 36, 24, 0.06), 0 6px 18px -12px rgba(8, 36, 24, 0.12);
  border-bottom: none;
}
.btn { border-radius: 10px; }
.btn.primary { box-shadow: 0 4px 14px rgba(36, 159, 98, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.nav-group-label { color: rgba(255, 255, 255, 0.26); }
.nav-group + .nav-group { border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: 5px; padding-top: 9px; }

/* ── modals: presentation-ready ── */
.modal { border-radius: 20px; box-shadow: 0 40px 110px -18px rgba(0, 14, 26, 0.55), 0 0 0 1px rgba(8, 36, 24, 0.05); }
.modal-h { background: linear-gradient(180deg, #fbfdfc, #fff); border-radius: 20px 20px 0 0; }
.modal-h b { font-size: 16px; font-family: var(--font-disp); }
.overlay { background: rgba(0, 14, 26, 0.44); backdrop-filter: blur(5px); }

/* ── charts & bars ── */
.hbar-row .track { height: 9px; border-radius: 5px; background: #eef2ef; overflow: hidden; }
.hbar-row .track i { border-radius: 5px; background: linear-gradient(90deg, var(--green-h), var(--green-a)); box-shadow: 0 1px 3px rgba(28, 124, 76, 0.3); }

/* ── empty states ── */
.empty { padding: 44px 12px; }
.empty .e-ic { font-size: 32px; opacity: .5; margin-bottom: 10px; }

/* ── pipeline board harmony with the new canvas ── */
.col { background: linear-gradient(180deg, rgba(8, 36, 24, 0.045), rgba(8, 36, 24, 0.02)); border-color: rgba(8, 36, 24, 0.055); }
.dcard { border-radius: 14px; }

/* ── notification drawer & tasker on the new canvas ── */
.nd-panel { background: #f6f9f7; }
.tk-hero { border-radius: 22px; }

/* numbers everywhere get the display treatment */
.num, .dcard .v { font-variant-numeric: tabular-nums; }

/* v26 — caption purge: empty sub-slots collapse cleanly */
.k-s:empty { display: none; }
.screen-sub:empty { display: none; }

/* ══ v27 — topbar, made beautiful ══ */
.topbar {
  height: 68px; padding: 0 26px; gap: 14px;
  background:
    radial-gradient(360px 90px at 0% 0%, rgba(36, 159, 98, 0.10), transparent 70%),
    radial-gradient(300px 80px at 100% 0%, rgba(6, 90, 128, 0.07), transparent 70%),
    rgba(252, 254, 253, 0.78);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(36, 159, 98, 0.55) 18%, rgba(44, 179, 116, 0.75) 50%, rgba(13, 138, 128, 0.45) 82%, transparent);
  pointer-events: none;
}
.topbar { position: sticky; }
.crumb { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); }
.crumb b { display: block; font-size: 15.5px; font-family: var(--font-disp); letter-spacing: -0.3px; text-transform: none; color: var(--t1); margin-top: 1px; }
.topbar .btn { height: 38px; border-radius: 11px; border-color: rgba(8, 36, 24, 0.1); background: rgba(255, 255, 255, 0.75); }
.topbar .btn:hover { background: #fff; }
.topbar .btn.primary { background: linear-gradient(135deg, var(--green-h) 0%, var(--green-deep) 130%); border-color: transparent; }
.gsearch input { height: 40px; border-radius: 13px; background: rgba(255, 255, 255, 0.72); border-color: rgba(8, 36, 24, 0.1); }
.user-chip {
  border-radius: 13px; padding: 5px 12px 5px 6px; transition: all .15s;
  border: 1px solid transparent;
}
.user-chip:hover { background: rgba(36, 159, 98, 0.08); border-color: rgba(36, 159, 98, 0.2); }
.user-chip .user-nm { font-weight: 700; font-size: 12.5px; }
.user-chip .user-rl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.user-chip > div:first-child { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(36, 159, 98, 0.45); }
.view-switch { background: rgba(8, 36, 24, 0.07); box-shadow: inset 0 1px 2px rgba(8, 36, 24, 0.06); }

/* ── v29: Support Desk — queue cards with priority spines ── */
.tkt-list { display: flex; flex-direction: column; gap: 9px; }
.tkt {
  display: flex; gap: 16px; align-items: center; cursor: pointer;
  background: linear-gradient(180deg, #fff, #fcfdfc); border: 1px solid rgba(8, 36, 24, 0.07);
  border-radius: 16px; padding: 13px 16px 13px 18px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s;
  animation: rise .28s var(--ease) both;
}
.tkt:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: rgba(36, 159, 98, 0.3); }
.tkt::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; }
.tkt.pri1::before { background: linear-gradient(180deg, #ff6b6e, var(--red-fg)); }
.tkt.pri2::before { background: linear-gradient(180deg, #ffc53d, var(--amber)); }
.tkt.pri3::before { background: linear-gradient(180deg, #6ea8f0, var(--blue-fg)); }
.tkt.pri4::before { background: #d5ddd8; }
.tkt.done { opacity: .62; }
.tkt.done::before { background: var(--green-bd); }
.tkt-main { flex: 1; min-width: 0; }
.tkt-top { display: flex; gap: 8px; align-items: center; }
.tkt-sub { font-size: 13.5px; letter-spacing: -0.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkt-id { font-family: var(--mono); font-size: 10.5px; color: var(--t4); flex: none; }
.tkt-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.tkt-who { font-size: 12px; font-weight: 600; color: var(--t2); }
.tkt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.tkt-owner { font-size: 11.5px; font-weight: 700; color: var(--t2); display: flex; gap: 6px; align-items: center; }
.tkt-when { font-size: 10.5px; color: var(--t4); }
@media (max-width: 860px) { .tkt { flex-direction: column; align-items: stretch; } .tkt-side { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ── v30: pipeline — money-first cards, slim empty rails, exec table ── */
.p-sum { align-self: center; font-size: 12px; color: var(--t3); background: #fff; border: 1px solid var(--bdl); border-radius: 10px; padding: 7px 12px; white-space: nowrap; box-shadow: var(--shadow-sm); }
.p-sum b { font-family: var(--font-disp); font-size: 13px; letter-spacing: -0.2px; color: var(--t1); }
.dcard .v { font-family: var(--font-disp); font-weight: 800; font-size: 14.5px; letter-spacing: -0.3px; }
.dcard .o.avatar { width: 23px; height: 23px; font-size: 8.5px; color: #fff; margin-inline-start: auto; box-shadow: 0 0 0 2px #fff; }
.dcard .u { margin: 1px 0 7px; }
.col-slim {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 11px 4px;
  background: repeating-linear-gradient(135deg, rgba(8,36,24,0.028) 0 8px, transparent 8px 16px), rgba(8,36,24,0.02);
  border: 1.5px dashed rgba(8, 36, 24, 0.12); overflow: hidden;
}
.col-slim .col-accent { width: 26px; margin: -3px 0 0; }
.col-slim-lbl {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--t3);
  display: flex; gap: 7px; align-items: center; flex: 1;
}
.col-slim-lbl .dot { width: 8px; height: 8px; border-radius: 50%; }
.col-slim-add { border: none; background: #fff; width: 30px; height: 30px; border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer; color: var(--t3); font-size: 15px; font-weight: 700; transition: .15s; }
.col-slim-add:hover { color: var(--green-a); box-shadow: 0 4px 12px rgba(36,159,98,.3); }
.col-slim.dragover { border-color: var(--green); background: rgba(36, 159, 98, 0.1); }
.dcard:active { transform: scale(.985); }

/* ── v31 · space program band (Inventory) ─────────────────────────────────── */
.sp-band{margin-bottom:14px}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-top:4px}
.sp-cell{background:linear-gradient(180deg,#fbfdfc,#f6faf8);border:1px solid var(--bdl);border-radius:13px;padding:11px 12px 10px;position:relative}
.sp-cell .sp-n{font-family:var(--font-disp,inherit);font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1;color:var(--t1)}
.sp-cell .sp-l{font-size:11.5px;font-weight:700;color:var(--t2);margin-top:3px}
.sp-cell .sp-r{position:absolute;top:10px;right:11px;font-size:10.5px;font-weight:700;color:var(--green-a);background:var(--green-bg);border:1px solid var(--green-bd);border-radius:20px;padding:2px 7px}
.sp-cell .sp-b{height:5px;border-radius:4px;background:#e7eeea;overflow:hidden;margin:9px 0 5px}
.sp-cell .sp-b i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green-h),var(--green-a))}
.sp-cell .sp-s{font-size:10.5px;color:var(--t3);font-weight:600}

/* ── v34 · occupancy ramp rows (Forecast · Space plan) ────────────────────── */
.occ-row{display:flex;gap:9px;align-items:center;margin:4px 0}
.occ-row .occ-l{width:134px;flex:none;font-size:11.5px;font-weight:700;color:var(--t2)}
.occ-cells{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.occ-c{display:flex;align-items:center;justify-content:center;height:22px;border-radius:6px;
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(36,159,98,.14)}
.occ-c::after{content:'%';font-size:8px;font-weight:700;opacity:.65;margin-inline-start:1px}
.occ-row .occ-d{width:72px;text-align:right;font-size:10.5px;font-weight:700;color:var(--t3);font-variant-numeric:tabular-nums}

/* ══ v46 · Responsive pass ═══════════════════════════════════════════════════
   Written against measured failures, not guesses. The QA harness
   (`node qa/run.js`) reported, at 375×667: the screen action toolbar clipped
   10–101px off the right edge on all 23 admin screens, seven screens with
   tables wider than the viewport in a non-scrolling parent, cards and grids
   exceeding the viewport on team/access/dashboard/automations, and — the worst
   of it — no way to open the navigation at all, because the sider goes
   off-canvas below 900px and nothing toggled `.sider.open`.                  */

/* ── the mobile drawer ────────────────────────────────────────────────────── */
.navtoggle { display: none; }
#navscrim {
  position: fixed; inset: 0; z-index: 59; background: rgba(2, 18, 12, 0.52);
  opacity: 0; transition: opacity .2s var(--ease); backdrop-filter: blur(2px);
}
#navscrim.on { opacity: 1; }

@media (max-width: 900px) {
  .navtoggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 40px; flex: none; padding: 0 10px; margin-inline-end: 2px;
    border: 1px solid var(--bdl); border-radius: 11px; background: #fff; cursor: pointer;
  }
  .navtoggle span { display: block; height: 2px; border-radius: 2px; background: var(--t1); }
  .sider { z-index: 60; box-shadow: 0 0 0 100vmax transparent; }
  .sider.open { box-shadow: 22px 0 60px -20px rgba(2, 18, 12, .55); }
  /* the desktop collapse control is meaningless in a drawer */
  .sider .collapse-btn { display: none; }
  .crumb { font-size: 11.5px; }
  .crumb b { display: inline; }
}

/* ── phones: one column, reachable actions, scrollable wide content ───────── */
@media (max-width: 760px) {
  .content { padding: 12px 11px 44px; }

  /* the action toolbar was running off the right edge on every screen */
  .screen-head { gap: 10px; margin-bottom: 14px; align-items: stretch; }
  .screen-title { font-size: 20px; }
  .screen-actions {
    width: 100%; display: flex; flex-wrap: wrap; gap: 7px;
    justify-content: flex-start; align-items: center;
  }
  .screen-actions > * { flex: 0 1 auto; }
  .screen-actions .btn, .screen-actions button { min-height: 40px; }
  .view-switch { flex: 1 1 100%; justify-content: stretch; }
  .view-switch button { flex: 1; min-height: 38px; padding: 8px 6px; font-size: 12px; }

  /* inline grid templates are set per screen, so these have to win */
  .grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .kpis, .kpis6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px; }
  .kpi { padding: 12px 13px; }
  .k-v { font-size: 21px; }

  /* wide tables and the floor plan scroll inside their card instead of
     stretching the page — the page itself must never scroll sideways */
  .card { overflow-x: auto; max-width: 100%; padding: 14px; }
  .card > table.tbl, .card table.tbl { min-width: 520px; }
  .card svg { min-width: 0; }
  #floormap, .floorwrap { overflow-x: auto; }
  #floormap svg, .floorwrap svg { min-width: 680px; }

  /* rooms timeline: keep the hour grid legible and scroll it */
  .rooms-grid { min-width: 620px; }

  /* pipeline: one column per stage is unusable on a phone — scroll the board */
  .pipeline, .pipe-board { overflow-x: auto; }
  .col { width: 78vw; min-width: 250px; }

  /* modals become sheets */
  .modal { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; align-self: flex-end; }
  .modal .m-body { max-height: 68vh; }

  /* topbar: the search box gives up its width first */
  .gsearch { max-width: none; flex: 1 1 120px; min-width: 96px; }
  .gsearch .gs-kbd { display: none; }
  .user-chip > div:not([class]) { display: none; }   /* avatar only */
  .topbar .view-switch { display: none; }            /* Admin|Member lives in the user menu on mobile */
}

/* ── touch ergonomics: nothing interactive below 40px on a touch screen ──── */
@media (max-width: 900px) {
  .btn, .chip, button.slot, .view-switch button, .tab, .qa-btn { min-height: 40px; }
  .btn.sm { min-height: 34px; }
  .amchip, .chip { padding-block: 9px; }
  input, select, textarea { font-size: 15px; min-height: 42px; }  /* 15px stops iOS zooming on focus */
  textarea { min-height: 84px; }
}

/* ── very small phones (≤380px) ───────────────────────────────────────────── */
@media (max-width: 380px) {
  .kpis, .kpis6 { grid-template-columns: 1fr !important; }
  .screen-title { font-size: 18.5px; }
  .content { padding: 10px 9px 40px; }
}

/* ── landscape phones: vertical space is the scarce resource ──────────────── */
@media (max-height: 460px) and (orientation: landscape) {
  .topbar { min-height: 46px; }
  .screen-head { margin-bottom: 10px; }
  .greet { display: none; }
}

/* ── tablets: two columns, but keep the drawer nav ────────────────────────── */
@media (min-width: 761px) and (max-width: 1100px) {
  .grid[style*="1.9fr"], .grid[style*="1.4fr"], .grid[style*="2fr"] { grid-template-columns: 1fr !important; }
  .kpis6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* The dead band between the phone layout (≤900px) and a roomy desktop (≥1024px): the top bar
   is one nowrap flex row whose children are wider than it, so the user chip hung 44–123px off
   the right edge and dragged the whole page with it. Measured at 901–1023px; below and above
   there was no overflow. Letting the row's children shrink is enough — nothing is hidden. */
@media (min-width: 901px) and (max-width: 1100px) {
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar > * { min-width: 0; }
  .gsearch { width: auto; flex: 1 1 140px; min-width: 120px; max-width: none; }
  .crumb { overflow: hidden; text-overflow: ellipsis; }
  .user-chip { flex: none; }
}

/* ── safe areas on notched devices, and installed-app chrome ──────────────── */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .content { padding-inline: max(11px, env(safe-area-inset-left)) max(11px, env(safe-area-inset-right)); }
    .content { padding-bottom: max(44px, calc(env(safe-area-inset-bottom) + 32px)); }
  }
}

/* ── v46b · the topbar on a phone ─────────────────────────────────────────────
   Measured cause of the last 23 failures: the topbar is a single non-wrapping
   flex row whose content needs ~540px, so the search box and the New button were
   clipped off the right edge of a 375px screen. Fix: the row wraps and the
   search takes its own full-width line; the pieces that drop off (language,
   help, member-view switch) reappear in the user menu, which is why they are
   marked .m-only there.                                                       */
.topbar .lbl { display: inline; }
.m-only { display: none; }

@media (max-width: 760px) {
  .topbar {
    height: auto; min-height: 56px;              /* fixed 64px let the wrapped row bleed over the content */
    flex-wrap: wrap; row-gap: 8px; padding: 9px 11px;
    padding-inline: max(11px, env(safe-area-inset-left)) max(11px, env(safe-area-inset-right));
  }
  .topbar .grow { display: none; }
  .topbar .lbl, .t-hide-sm { display: none !important; }
  .topbar .btn.primary { padding: 0 14px; }
  .gsearch { order: 10; flex: 1 0 100%; max-width: none; }
  .gsearch input { min-height: 42px; }
  .crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-chip { padding: 4px; gap: 0; }
  .m-only { display: inline-flex; }
}

/* ── v46c · it must be visible that a table scrolls ──────────────────────── */
.tbl-wrap { position: relative; background-image:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%),
    radial-gradient(farthest-side at 0 50%, rgba(8,36,24,.13), rgba(8,36,24,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(8,36,24,.13), rgba(8,36,24,0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 42px 100%, 42px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
@media (max-width: 760px) {
  table.tbl { min-width: 560px; font-size: 12.5px; }
  .tbl th { padding: 10px 12px; }
  .tbl td { padding: 10px 12px; }
}

/* loading skeletons must never be the widest thing on the page */
.skel { max-width: 100%; box-sizing: border-box; }

/* ── v46d · rows of tabs must scroll, not stretch the document ─────────────
   Measured: on the Invoicing screen `.subtabs` was 890px wide on a 375px
   device, which pushed the LAYOUT VIEWPORT to 901px — the entire page then
   scrolled sideways and every position:fixed element (the install chip) was
   laid out against the wrong width. Any nowrap row of chips needs its own
   scroller and a max-width. */
.subtabs, .amchips, .segwrap, .filters-row, .chips-row {
  max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar, .amchips::-webkit-scrollbar, .segwrap::-webkit-scrollbar { height: 0; }
@media (max-width: 760px) {
  /* nothing at the top level may exceed the viewport */
  .content > *, .content > .grid, .content > .card, .content > .tbl-wrap { max-width: 100%; }
  .tbl-wrap { max-width: 100%; }
}

/* ── v46e · the page itself may never scroll sideways ──────────────────────
   Belt-and-braces. Every legitimately wide thing now lives in its own
   scroller (.tbl-wrap, .subtabs, the floor map, the pipeline board), so if
   anything still pushes past the viewport it is a bug, and clipping the page
   is the lesser evil than a document that pans sideways under the user's
   thumb. Measured cause on the Invoicing screen: the mobile layout viewport
   had grown to 901px and did not shrink back after a wide render. */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  #app { max-width: 100%; overflow-x: clip; }
}

/* ── v47 · Executive review ────────────────────────────────────────────────── */
.occ-split { display: flex; gap: 3px; height: 26px; border-radius: 8px; overflow: hidden; }
.occ-split .os { border-radius: 3px; }
.occ-split .os.occ { background: linear-gradient(180deg, var(--green-h), var(--green-a)); }
.occ-split .os.held { background: var(--amber); }
.occ-split .os.free { background: #e7edea; }
i.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: -1px; margin-inline-end: 3px; }
i.dot.occ { background: var(--green-a); } i.dot.held { background: var(--amber); } i.dot.free { background: #d8e0dc; }

.tat-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 4px; }
.tat-leg { border: 1px solid var(--bdl); border-radius: 14px; padding: 13px 14px; background: linear-gradient(180deg, #fbfdfc, #fff); }
.tat-leg .tl-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
.tat-leg .tl-head b { font-size: 13px; }
.tat-leg .tl-num { font-family: var(--font-disp); font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.tat-leg .tl-num span { font-family: var(--font); font-size: 11.5px; font-weight: 700; color: var(--t3); margin-inline-start: 7px; letter-spacing: 0; }
.tat-leg .tl-num.good { color: var(--green-a); } .tat-leg .tl-num.warn { color: var(--amber-fg); } .tat-leg .tl-num.bad { color: var(--red-fg); }
.tat-leg .tl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 11px 0 9px; }
.tat-leg .tl-grid div { text-align: center; }
.tat-leg .tl-grid b { display: block; font-size: 14px; font-family: var(--font-disp); }
.tat-leg .tl-grid b.bad { color: var(--red-fg); }
.tat-leg .tl-grid span { font-size: 9.5px; color: var(--t3); font-weight: 600; }
@media (max-width: 760px) { .tat-legs { grid-template-columns: 1fr; } .tat-leg .tl-num { font-size: 26px; } }

/* ── v47b · from the QA sweep (264 renders across 8 viewports) ─────────────── */

/* Grid items default to min-width:auto, so a wide child (a table, a long
   number) can push the track past the container — this was the last 18px of
   overflow on Invoicing at 1366px. */
.grid > *, .kpis > *, .card, .kpi { min-width: 0; }

/* Touch targets the sweep flagged most often */
@media (max-width: 900px) {
  .nav-item { min-height: 44px; }               /* 119 hits at 35px */
  .btn.sm { min-height: 40px; padding-block: 9px; }   /* was 36px — row actions are tapped as often as anything else */
  .acc-dot { min-width: 30px; min-height: 30px; }
  .tbl td a, .tbl td button { min-height: 34px; display: inline-flex; align-items: center; }
}

/* Legibility: 7.5px is not a font size, it is a rumour of one */
.sider-brand span { font-size: 9px; }
.sider-logo .sb { font-size: 9.5px; }

/* ── v47c · the turnaround chip on pipeline cards ─────────────────────────── */
.tatc { font-size: 9.5px; font-weight: 800; letter-spacing: .01em; border-radius: 20px;
  padding: 3px 7px; white-space: nowrap; flex: none; }
.tatc.ok { background: var(--green-bg); color: var(--green-a); }
.tatc.warn { background: var(--amber-bg); color: var(--amber-fg); }
.tatc.bad { background: var(--red-bg); color: var(--red-fg); }
.dcard .foot { flex-wrap: wrap; row-gap: 4px; }

/* ── v48 · Board pack — printing the Executive review ─────────────────────── */
.print-only { display: none; }
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  .print-only { display: block; }
  .print-head { display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid #249f62; padding-bottom: 6px; margin-bottom: 12px; }
  .print-head b { font-size: 15px; } .print-head span { font-size: 11px; color: #666; }
  /* a KPI, a card or a TAT leg is a unit of meaning — never split one over a page */
  .card, .kpi, .tat-leg, .tbl-wrap, .hbar-row { break-inside: avoid; page-break-inside: avoid; }
  .kpis, .kpis6 { grid-template-columns: repeat(3, 1fr) !important; }
  .grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd; }
  .k-v { font-size: 20px; }
  .greet, .navtoggle, #bco-install, #navscrim, .qa, .col-slim-add { display: none !important; }
  a[onclick], .tag[onclick] { cursor: default; }
  .tbl-wrap { overflow: visible !important; background-image: none !important; }
  table.tbl { min-width: 0 !important; font-size: 10.5px; }
  .tatc { border: 1px solid #ccc; }
}

/* Printing paginates the DOCUMENT, and the shell pins the document to one
   viewport (html/body 100%, #app a 100vh flex row). Under print the shell must
   flow like a normal page or the board pack is a single cropped sheet. */
@media print {
  html, body { height: auto !important; overflow: visible !important; }
  #app { display: block !important; min-height: 0 !important; }
  .main, .content { display: block !important; height: auto !important; overflow: visible !important; max-width: none !important; padding: 0 !important; }
}


/* ── form engine (v63) ─────────────────────────────────────────────────── */
.frow label .req { color: var(--red-fg, #c92a2f); font-style: normal; margin-left: 3px; }
.fhelp { font-size: 11.5px; color: var(--t3); margin-top: 5px; line-height: 1.4; }
.ferr { font-size: 11.5px; color: var(--red-fg, #c92a2f); margin-top: 4px; min-height: 0; font-weight: 600; }
.frow.err input, .frow.err select, .frow.err textarea, .frow.err .fwrap { border-color: var(--red-fg, #c92a2f) !important; box-shadow: 0 0 0 4px rgba(201, 42, 47, 0.12); }
.fwrap { position: relative; display: flex; align-items: center; border: 1px solid var(--bd); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.fwrap:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px rgba(36, 159, 98, 0.13); }
.fwrap input { border: none !important; box-shadow: none !important; background: transparent !important; flex: 1; min-width: 0; }
.fwrap .fadorn { flex: none; padding: 0 11px; font-size: 12px; color: var(--t3); font-weight: 700; white-space: nowrap; pointer-events: none; }
.fwrap.tel .fpre { flex: none; padding: 0 10px 0 11px; font-size: 12.5px; font-weight: 700; color: var(--t2); border-right: 1px solid var(--bd); height: 36px; display: flex; align-items: center; }
.fwrap.tel input { padding-left: 10px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.frow input[type=date], .frow input[type=time] { font-variant-numeric: tabular-nums; }
.frow input[type=time]::-webkit-calendar-picker-indicator, .frow input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.qc { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--bd); background: #fff; color: var(--t2); font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font); transition: all .12s; }
.qc:hover { border-color: var(--green-bd); color: var(--green-a); background: var(--green-bg); }
.qc.now { border-color: var(--green-bd); color: var(--green-a); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.segb { min-height: 36px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--bd); background: #fff; color: var(--t2); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: var(--font); transition: all .12s; flex: 1 0 auto; }
.segb:hover { border-color: var(--green-bd); color: var(--green-a); }
.segb.on { background: linear-gradient(135deg, var(--green-h, #2fb673), var(--green)); color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(36, 159, 98, 0.35); }
.modal-f .btn.primary[disabled] { opacity: .65; cursor: progress; }
@media (max-width: 760px) {
  .f2 { grid-template-columns: 1fr; }
  .segb { min-height: 42px; }
  .qc { height: 34px; }
  .frow input, .frow select, .fwrap { min-height: 42px; }
  .fwrap.tel .fpre { height: 42px; }
}


/* ── v63 polish: tables, text utilities, audit log ─────────────────────── */
.nowrap { white-space: nowrap; }
.clamp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.screen-sub { max-width: 720px; line-height: 1.45; }
.tbl th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); font-weight: 800; white-space: nowrap; }
.tbl td { line-height: 1.4; }
.tbl td .mut { line-height: 1.35; }
.tbl tbody tr:nth-child(even) td { background: rgba(8, 36, 24, 0.012); }
.tbl tbody tr:hover td { background: transparent; }
.tbl thead th { box-shadow: 0 1px 0 rgba(8, 36, 24, 0.08); }
.tbl .num { text-align: right; }
.tbl th.num { text-align: right; }
.tbl .btn.sm + .btn.sm { margin-left: 4px; }
.finput { height: 36px; border: 1px solid var(--bd); border-radius: 10px; padding: 0 12px; width: 260px; max-width: 100%; font-family: var(--font); font-size: 13px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.finput:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(36, 159, 98, 0.13); }
.alog { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--bdl); font-size: 12.5px; }
.alog:last-child { border-bottom: none; }
.alog-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; box-shadow: 0 0 0 3px rgba(36, 159, 98, 0.12); }
.card > .empty { padding: 28px 10px; }
.kpi .k-v { line-height: 1.1; }
.card h3 .rt { text-align: right; line-height: 1.35; }
@media (max-width: 760px) { .screen-sub { display: none; } .card h3 .rt { display: none; } }
.note-amber { background: var(--amber-bg); color: var(--amber-fg); border: 1px solid rgba(154, 103, 0, 0.18); border-radius: 10px; padding: 9px 12px; line-height: 1.45; }


/* ── v65 polish ─────────────────────────────────────────────────────────── */
/* KPI rows never leave one orphan tile on a second line */
@media (min-width: 1100px) {
  .kpis:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr) !important; }
  .kpis:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, 1fr) !important; }
  .kpis:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1500px) {
  .kpis:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, 1fr) !important; }
}
/* row actions: one tidy strip, never a 3-row stack */
.acts { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; justify-content: flex-end; }
.tbl td.ref { white-space: nowrap; }
.tbl td.ref .mut { white-space: normal; max-width: 150px; }
@media (max-width: 760px) {
  .tbl td.ref .mut { display: none; }
  .tbl th, .tbl td { padding: 9px 11px; }
}

.popmenu { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 170px; animation: mrise .16s ease; }
.popmenu .btn { justify-content: flex-start; width: 100%; height: 36px; }
.popmenu a.btn { text-decoration: none; box-sizing: border-box; color: inherit; }
.acts .btn.more { padding: 0 9px; font-weight: 800; letter-spacing: .05em; }
.tbl td.num b, .tbl td.num > span:first-child { white-space: nowrap; }

/* ── Roadmap screen ─────────────────────────────────────────────────────── */
.rm-hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, #04211a 0%, #0b3d2e 60%, #10603a 100%); color: #fff; border-radius: var(--r-lg); padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow); }
.rm-ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; flex: none; display: grid; place-items: center; text-align: center; background: conic-gradient(var(--green-h) calc(var(--p) * 1%), rgba(255,255,255,.14) 0); position: relative; }
.rm-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #06281f; }
.rm-ring b, .rm-ring span { position: relative; z-index: 1; display: block; }
.rm-ring b { font-size: 21px; font-family: var(--font-disp); letter-spacing: -.5px; line-height: 1; }
.rm-ring span { font-size: 10px; opacity: .75; margin-top: 2px; }
.rm-hero-t { font-family: var(--font-disp); font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.rm-hero-s { font-size: 12.5px; opacity: .85; margin-top: 4px; }
.rm-hero-s b { color: #fff !important; }
.rm-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.rm-seg { font-size: 11.5px; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.rm-seg span { display: block; font-size: 10.5px; opacity: .65; }
.rm-seg.done { background: rgba(44,179,116,.25); border-color: rgba(44,179,116,.5); }
.rm-seg.now { background: #fff; color: var(--t1); border-color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.rm-legend { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.rm-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rm-col { background: rgba(255,255,255,.55); border: 1px solid rgba(8,36,24,.07); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.rm-col.now { border-color: rgba(36,159,98,.45); box-shadow: 0 0 0 3px rgba(36,159,98,.10); background: rgba(255,255,255,.85); }
.rm-col header { padding: 4px 4px 8px; border-bottom: 1px dashed var(--bdl); }
.rm-wk { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--green-a); }
.rm-wk span { color: var(--t3); letter-spacing: 0; text-transform: none; font-weight: 600; }
.rm-wt { font-family: var(--font-disp); font-size: 16px; font-weight: 800; letter-spacing: -.3px; margin-top: 2px; }
.rm-theme { font-size: 12px; color: var(--t2); margin-top: 3px; line-height: 1.45; }
.rm-prog { height: 5px; border-radius: 3px; background: var(--bdl); margin-top: 9px; overflow: hidden; }
.rm-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-h), var(--green-a)); border-radius: 3px; }
.rm-item { background: #fff; border: 1px solid rgba(8,36,24,.08); border-radius: 13px; padding: 12px; box-shadow: var(--shadow-sm); border-left: 3px solid var(--bd); transition: transform .14s, box-shadow .14s; }
.rm-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.rm-item.st-shipped { border-left-color: var(--green); }
.rm-item.st-in-build { border-left-color: var(--blue-fg); }
.rm-item.st-needs-bayut { border-left-color: var(--amber); }
.rm-item.st-blocked { border-left-color: var(--red); }
.rm-it-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px; }
.rm-area { font-size: 10.5px; font-weight: 800; color: var(--t3); letter-spacing: .04em; }
.rm-it-t { font-weight: 800; font-size: 13.5px; line-height: 1.3; letter-spacing: -.1px; }
.rm-it-w { font-size: 12px; color: var(--t2); margin-top: 5px; line-height: 1.5; }
.rm-needs { font-size: 11.5px; color: var(--amber-fg); background: var(--amber-bg); border-radius: 8px; padding: 6px 8px; margin-top: 8px; line-height: 1.4; }
.rm-note { font-size: 11.5px; margin-top: 8px; color: var(--t2); font-style: italic; }
.rm-it-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; }
.rm-sel { height: 28px; border-radius: 8px; border: 1px solid var(--bd); font-size: 11.5px; font-family: var(--font); padding: 0 6px; background: #fff; color: var(--t1); }
.rm-look { margin-top: 4px; background: linear-gradient(135deg, var(--green-bg), #fff); border: 1px dashed var(--green-bd); border-radius: 12px; padding: 11px 12px; font-size: 12px; line-height: 1.5; color: var(--t2); }
.rm-look b { display: block; color: var(--green-a); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.rm-log-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bdl); font-size: 12.5px; align-items: baseline; }
.rm-log-row:last-child { border-bottom: none; }
.rm-v { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--green-a); background: var(--green-bg); border-radius: 6px; padding: 2px 7px; flex: none; }
@media (max-width: 1200px) { .rm-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rm-board { grid-template-columns: 1fr; } .rm-track { grid-template-columns: repeat(2, 1fr); } .rm-legend { flex-direction: row; flex-wrap: wrap; align-items: center; } .rm-hero { padding: 16px; } }
@media print { .rm-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .rm-board { grid-template-columns: repeat(2, 1fr); } }

/* ZATCA card */
.zt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.zt-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--bd); font-size: 12.5px; background: #fff; }
.zt-step i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: #f3f5f4; color: var(--t3); }
.zt-step.on { border-style: solid; border-color: var(--green-bd); background: linear-gradient(135deg, var(--green-bg), #fff); }
.zt-step.on i { background: var(--green); color: #fff; }

/* ── merged dashboard: ops strip + embedded section heads ─────────────────── */
.ops-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ops { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 14px; border-radius: 13px; border: 1px solid rgba(8, 36, 24, 0.08); background: rgba(255,255,255,.8); cursor: pointer; text-align: left; font-family: var(--font); transition: transform .14s, box-shadow .14s; box-shadow: var(--shadow-sm); }
.ops:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.ops b { font-family: var(--font-disp); font-size: 19px; letter-spacing: -.5px; color: var(--t1); }
.ops span { font-size: 11.5px; color: var(--t3); line-height: 1.35; }
.ops.warn b { color: var(--amber-fg); } .ops.bad b { color: var(--red-fg); }
.ops.good b { color: var(--green-a); }
.ops.on { outline: 2px solid var(--green-a); outline-offset: -2px; }
/* the quote builder's floor check, and the next-step cue on a lead */
.q-avail { font-size: 11.5px; color: var(--t3); margin-top: 5px; }
.q-avail.ok { color: var(--green-a); }
.q-avail.over { color: var(--red-fg); font-weight: 600; }
.btn.next { background: var(--green-a); color: #fff; border-color: transparent; font-weight: 600; }
.btn.next.late { background: var(--red-fg); }
.btn.next.now { box-shadow: 0 0 0 3px rgba(36, 159, 98, .18); }
/* the owner's colour code (2026-09-22): green contacted · red never contacted · orange tried,
   nobody answered. Orange is its own state because "we rang and got nothing" is a different job
   from "nobody has rung at all", and the floor sorts its day by that difference. */
.btn.next.tried { background: var(--amber-fg, #ad6800); }
.ld-next { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--green-bg); font-size: 12.5px; }
.ld-next span { color: var(--t3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.ld-next b { flex: 1; color: var(--green-a); }
.ld-next.late { background: rgba(200, 40, 40, .08); } .ld-next.late b { color: var(--red-fg); }
.md-list { display: flex; flex-direction: column; gap: 6px; }
.md-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 10px; background: #fff; }
.md-row.late { border-color: rgba(200, 40, 40, .35); }
.md-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .md-main span { font-size: 11.5px; color: var(--t3); }
.md-when { font-size: 12px; color: var(--t3); white-space: nowrap; } .md-row.late .md-when { color: var(--red-fg); font-weight: 600; }
.md-act { display: flex; gap: 6px; }
/* a lead as a page: the drawer's card, un-stuck and given room */
.lead-page { max-width: 980px; }
.lead-page-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin: -4px 0 6px; }
/* when the lead reached us — written out, not "5h ago" */
.lead-page-when { font-size: 12.5px; color: var(--t2); margin: 0 0 12px; }
.lead-page-when b { color: var(--t1); font-weight: 700; }
.lead-page .ld-pane.ld-page-card { position: static; top: auto; max-height: none; overflow: visible; padding: 18px 22px; }
.ld-link { cursor: pointer; } .ld-link:hover { text-decoration: underline; color: var(--green-a); }
.tk-pane-h .btn.sm { margin-left: auto; margin-right: 6px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; padding-top: 18px; border-top: 1px solid var(--bdl); }
.sec-title { font-family: var(--font-disp); font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.sec-sub { font-size: 12.5px; color: var(--t3); margin-top: 2px; }
@media (max-width: 760px) { .sec-sub { display: none; } .ops-strip { grid-template-columns: 1fr 1fr; } }

/* ── login: campus video backdrop ───────────────────────────────────────── */
.login-bg { position: relative; overflow: hidden; }
.login-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .55; filter: saturate(1.1) contrast(1.05); }
.login-veil { position: absolute; inset: 0; z-index: 0; background: radial-gradient(900px 520px at 70% 40%, rgba(4,33,26,.25), rgba(1,22,40,.85) 70%), linear-gradient(180deg, rgba(0,22,40,.55), rgba(0,10,20,.9)); }
.login-bg .login-card { position: relative; z-index: 1; }
.login-brand .feat span b { color: #fff; }
.login-brand .feat { align-items: flex-start; }
@media (prefers-reduced-motion: reduce) { .login-video { display: none; } }
@media (max-width: 760px) { .login-video { opacity: .35; } }

/* ── property buckets ───────────────────────────────────────────────────── */
.bkt-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -4px 0 14px; }
.bkt-lbl { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--t3); margin-right: 4px; }
.bktc { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid transparent; background: var(--bg); color: var(--fg); font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font); display: inline-flex; align-items: center; gap: 6px; transition: all .12s; }
.bktc b { font-weight: 800; opacity: .8; }
.bktc:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.bktc.on { border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 15%, transparent); }
.tag.bkt { font-size: 10.5px; }

/* ── site visits & execution ─────────────────────────────────────────────── */
.visits-strip { margin-bottom: 14px; }
.vs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.vs { border: 1px solid var(--bdl); border-radius: 12px; padding: 10px 12px; background: #fff; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.vs .mut { font-size: 11.5px; }
.vs-when { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--t3); }
.vs-today { border-color: var(--green-bd); background: linear-gradient(135deg, var(--green-bg), #fff); }
.vs-today .vs-when { color: var(--green-a); }
.vs-due { border-color: rgba(245, 166, 35, .55); background: linear-gradient(135deg, var(--amber-bg), #fff); }
.vs-due .vs-when { color: var(--amber-fg); }
.vs-act { display: flex; gap: 6px; margin-top: 6px; }
.xc { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px 0 5px; border-radius: 9px; background: #f3f5f4; font-size: 10.5px; font-weight: 700; color: var(--t2); }
.xc em { display: block; width: 24px; height: 5px; border-radius: 3px; background: var(--bdl); overflow: hidden; }
.xc em i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.exec-bar { height: 7px; border-radius: 4px; background: var(--bdl); overflow: hidden; margin-bottom: 10px; }
.exec-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-h), var(--green-a)); border-radius: 4px; }
.exec-steps { display: grid; grid-template-columns: 1fr; gap: 5px; }
.xs { display: flex; gap: 9px; align-items: center; font-size: 12.5px; padding: 5px 8px; border-radius: 9px; }
.xs i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 800; background: #f3f5f4; color: var(--t3); flex: none; }
.xs.on i { background: var(--green); color: #fff; }
.xs.on b { color: var(--t2); font-weight: 600; }
.xs.next { background: var(--green-bg); }
.xs.next i { background: #fff; color: var(--green-a); border: 2px solid var(--green); }
.xs .mut { display: block; font-size: 11px; }

/* ── invoicing ───────────────────────────────────────────────────────────── */
.aging { margin-bottom: 14px; }
.ag-bar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--bdl); gap: 2px; }
.ag-seg { height: 100%; min-width: 2px; transition: width .3s; }
.ag-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; }
.ag-legend div { display: flex; align-items: center; gap: 6px; }
.ag-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ag-legend span { color: var(--t3); } .ag-legend b { font-variant-numeric: tabular-nums; }
.bill-filters { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bill-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tbl tr.void td { opacity: .55; text-decoration: line-through; }
.tbl tr.void td:last-child { text-decoration: none; }
.inv-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.inv-acc { font-family: var(--font-disp); font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.inv-total { font-family: var(--font-disp); font-size: 26px; font-weight: 800; letter-spacing: -.8px; }
.inv-facts { margin-top: 10px; }
.tbl tr.tot td { border-bottom: none; padding: 5px 8px; color: var(--t2); }
.tbl tr.tot.big td { font-weight: 800; color: var(--t1); font-size: 14px; }
.inv-editor td { padding: 7px 6px; vertical-align: top; }
.inv-editor input.num { text-align: right; }
.inv-tots { display: flex; gap: 16px; font-size: 12.5px; color: var(--t2); align-items: baseline; }
.inv-tots .g { font-size: 15px; color: var(--t1); }
.inv-tots b { font-variant-numeric: tabular-nums; }
.frow label .req { color: var(--red-fg); font-style: normal; }

/* ── ease of use: pins, palette, shortcuts, density, tab bar, sorting ───── */
.nav-row { display: flex; align-items: center; position: relative; }
.nav-row .nav-item { flex: 1; min-width: 0; }
.nav-row .pin { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: rgba(255,255,255,.35); font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .12s; padding: 4px; line-height: 1; }
.nav-row:hover .pin, .nav-row .pin.on { opacity: 1; } .nav-row .pin.on { color: #f5c542; }
.sider.collapsed .pin { display: none; }
.nav-pinned .nav-group-label { color: #f5c542; }
.gs-h { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--t3); padding: 8px 12px 4px; }
.gs-type.act { background: var(--green-bg); color: var(--green-a); }
kbd { display: inline-block; min-width: 20px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--bd); border-bottom-width: 2px; background: #fff; font: 11.5px var(--mono); color: var(--t1); text-align: center; }
.kbd-list { display: grid; gap: 6px; }
.kbd-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--bdl); font-size: 13px; }
.kbd-row:last-child { border-bottom: none; }
.tbl thead th { cursor: pointer; user-select: none; }
.tbl thead th.sort-asc::after { content: ' ▲'; font-size: 9px; color: var(--green-a); }
.tbl thead th.sort-desc::after { content: ' ▼'; font-size: 9px; color: var(--green-a); }
body.dense { font-size: 12.5px; }
body.dense .tbl td { padding: 6px 11px; } body.dense .tbl th { padding: 7px 11px; }
body.dense .card { padding: 12px 14px; } body.dense .kpi .k-v { font-size: 22px; } body.dense .kpis { gap: 10px; margin-bottom: 12px; }
body.dense .screen-head { margin-bottom: 10px; } body.dense .screen-title { font-size: 20px; }
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(252,254,253,.92); backdrop-filter: blur(16px); border-top: 1px solid rgba(8,36,24,.1); padding: 6px max(6px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)); justify-content: space-around; }
  .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; font: 10.5px var(--font); font-weight: 700; color: var(--t3); padding: 4px 0; position: relative; min-height: 44px; }
  .tabbar button svg { width: 20px; height: 20px; }
  .tabbar button.on { color: var(--green-a); }
  .tabbar .badge { position: absolute; top: 0; right: 22%; background: var(--red); color: #fff; font-size: 9px; border-radius: 8px; padding: 1px 5px; font-style: normal; }
  .content { padding-bottom: 76px !important; }
  #toasts { bottom: 80px !important; }
}

/* ── support desk: one-click resolution ─────────────────────────────────── */
.tkt { position: relative; }
.tkt .tk-cb { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.tkt .tkt-main { padding-left: 26px; }
.tkt.sel { outline: 2px solid var(--green-bd); background: var(--green-bg); }
.tkt-qa { display: flex; gap: 4px; margin-top: 6px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
.tkt:hover .tkt-qa, .tkt:focus-within .tkt-qa { opacity: 1; }
@media (max-width: 900px) { .tkt-qa { opacity: 1; } }
.bulkbar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--green-bg); border: 1px solid var(--green-bd); margin-bottom: 10px; font-size: 13px; flex-wrap: wrap; }
.tk-flow { display: flex; gap: 0; margin-top: 10px; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; }
.tkf { flex: 1; border: none; background: #fff; padding: 8px 4px; font: 11.5px var(--font); font-weight: 700; color: var(--t3); cursor: pointer; border-right: 1px solid var(--bdl); }
.tkf:last-child { border-right: none; }
.tkf.on { background: var(--green); color: #fff; }
.tkf:hover:not(.on) { background: var(--green-bg); color: var(--green-a); }

/* ── support desk: queue + pane ─────────────────────────────────────────── */
.tk-layout { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.tk-layout.has-pane { grid-template-columns: minmax(360px, 1fr) minmax(480px, 1.15fr); }
.tk-queue { display: flex; flex-direction: column; gap: 6px; }
.tq { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 10px 12px; align-items: center; padding: 10px 14px 10px 12px; background: #fff; border: 1px solid rgba(8,36,24,.07); border-radius: 12px; cursor: pointer; border-inline-start-width: 4px; transition: box-shadow .12s, border-color .12s; }
.tq:hover { box-shadow: var(--shadow-sm); border-color: rgba(36,159,98,.3); border-inline-start-color: inherit; }
.tq.pri1 { border-inline-start-color: var(--red); } .tq.pri2 { border-inline-start-color: var(--amber); } .tq.pri3 { border-inline-start-color: var(--blue-fg); } .tq.pri4 { border-inline-start-color: var(--bd); }
.tq.done { opacity: .62; } .tq.open { background: var(--green-bg); border-color: var(--green-bd); } .tq.sel { outline: 2px solid var(--green-bd); }
.tq .tk-cb { position: static; transform: none; }
.tq-main { min-width: 0; }
.tq-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tq-id { font-family: var(--mono); font-size: 11px; color: var(--t3); flex: none; }
.tq-sub { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag.esc { background: var(--red-bg); color: var(--red-fg); font-size: 9.5px; }
.tq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.tq-who { color: var(--t2); font-weight: 600; } .tq-dot { color: var(--t4); }
.tq-right { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.tq-sla { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.tq-sla.ok { background: var(--green-bg); color: var(--green-a); } .tq-sla.warn { background: var(--amber-bg); color: var(--amber-fg); } .tq-sla.bad { background: var(--red-bg); color: var(--red-fg); }
.tq-owner { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; flex: none; }
.tq-owner.none { background: #f3f5f4; color: var(--t4); border: 1px dashed var(--bd); }
.tq-acts { grid-column: 2 / -1; display: flex; gap: 4px; justify-content: flex-end; margin-top: -2px; }
.tq-acts .btn.sm { height: 26px; padding: 0 9px; font-size: 11.5px; }
.tk-pane { position: sticky; top: 84px; background: #fff; border: 1px solid rgba(8,36,24,.08); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); max-height: calc(100vh - 100px); overflow-y: auto; }
.tk-pane-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.tk-pane .tk-detail { grid-template-columns: 1fr; }
.tk-pane .tk-thread { max-height: none; }
@media (max-width: 1100px) { .tk-layout.has-pane { grid-template-columns: 1fr; } .tk-pane { display: none; } }
@media (max-width: 760px) { .tq { grid-template-columns: 22px 1fr; } .tq-right { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; } .tq-acts { grid-column: 2; justify-content: flex-start; } }
/* narrow queue beside the pane: tags and actions drop under the subject so it never truncates */
.tk-layout.has-pane .tq { grid-template-columns: 22px 1fr; }
.tk-layout.has-pane .tq-right { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; margin-top: -4px; }
.tk-layout.has-pane .tq-acts { grid-column: 2; justify-content: flex-start; }
.tk-layout.has-pane .tq-sub { white-space: normal; }

/* ── departments, designations, rules ───────────────────────────────────── */
.multi { display: flex; flex-wrap: wrap; gap: 6px; }
.mchk { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--bd); background: #fff; font-size: 12px; cursor: pointer; user-select: none; }
.mchk input { accent-color: var(--green); margin: 0; }
.mchk.on { border-color: var(--green-bd); background: var(--green-bg); color: var(--green-a); font-weight: 700; }
.dep { padding: 10px 0; border-bottom: 1px dashed var(--bdl); }
.dep:last-child { border-bottom: none; }
.rules-mini { font-size: 11.5px; color: var(--t2); margin-top: 6px; line-height: 1.5; background: #f7faf8; border-radius: 8px; padding: 7px 10px; white-space: pre-wrap; }
.scr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.scr-chips .tag { background: #f3f5f4; color: var(--t3); }
.scr-chips .tag.ed { background: var(--green-bg); color: var(--green-a); }
.rules-sec { margin-bottom: 12px; }
.rules-sec h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-a); margin: 0 0 6px; }
.rules-sec div { font-size: 13.5px; line-height: 1.6; background: #f7faf8; border-radius: 10px; padding: 12px 14px; }

/* ── dashboard hero ─────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; gap: 24px; align-items: center; border-radius: 22px; padding: 26px 30px; margin-bottom: 14px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(900px 400px at 0% 0%, rgba(47,182,115,.35), transparent 60%), radial-gradient(600px 300px at 100% 100%, rgba(13,138,128,.35), transparent 60%), linear-gradient(135deg, #04211a 0%, #062f45 55%, #001628 100%); box-shadow: var(--shadow); }
.hero::after { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; border: 40px solid rgba(255,255,255,.04); pointer-events: none; }
.hero-greet { font-size: 12.5px; color: #8cd6aa; font-weight: 700; letter-spacing: .02em; }
.hero-title { font-family: var(--font-disp); font-size: 26px; font-weight: 800; letter-spacing: -.6px; margin: 2px 0 16px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hs { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: background .14s, transform .14s; min-width: 0; }
.hs:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.hs-l { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); font-weight: 800; }
.hs b { display: block; font-family: var(--font-disp); font-size: 23px; letter-spacing: -.6px; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.hs b.hs-bad { color: #ff8a8e; }
.hs-s { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,.7); }
.hs-bar { display: inline-block; width: 60px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.hs-bar i { display: block; height: 100%; background: #8cd6aa; border-radius: 3px; }
.hero-r { display: flex; align-items: center; gap: 18px; cursor: pointer; padding: 6px 10px; border-radius: 16px; }
.hero-r:hover { background: rgba(255,255,255,.06); }
.ringwrap { position: relative; width: 150px; height: 150px; flex: none; }
.ringtxt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ringtxt b { font-family: var(--font-disp); font-size: 34px; letter-spacing: -1px; line-height: 1; }
.ringtxt span { font-size: 11px; color: rgba(255,255,255,.7); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.ringmeta { font-size: 13px; line-height: 1.6; } .ringmeta b { font-size: 18px; font-family: var(--font-disp); } .ringmeta .mut2 { color: rgba(255,255,255,.7); font-size: 12px; }
.today { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.td { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(8,36,24,.08); background: #fff; cursor: pointer; font-family: var(--font); box-shadow: var(--shadow-sm); transition: transform .14s, box-shadow .14s; }
.td:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.td i { grid-row: 1 / span 2; font-style: normal; font-size: 22px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--green-bg); }
.td b { font-family: var(--font-disp); font-size: 20px; letter-spacing: -.5px; line-height: 1.1; }
.td span { font-size: 11.5px; color: var(--t3); line-height: 1.3; }
.td.warn i { background: var(--amber-bg); } .td.warn b { color: var(--amber-fg); }
.td.bad i { background: var(--red-bg); } .td.bad b { color: var(--red-fg); }

@media (max-width: 760px) { .hero { padding: 18px; border-radius: 16px; } .hero-title { font-size: 21px; } .today { grid-template-columns: 1fr 1fr; } }
/* approvals + SLA board */
.apr { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bdl); font-size: 13px; }
.apr:last-child { border-bottom: none; }
.sla-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.sg { border-radius: 12px; padding: 10px 12px; background: #f3f5f4; display: flex; flex-direction: column; }
.sg b { font-family: var(--font-disp); font-size: 22px; letter-spacing: -.5px; } .sg span { font-size: 11.5px; color: var(--t3); }
.sg.warn { background: var(--amber-bg); } .sg.warn b { color: var(--amber-fg); } .sg.bad { background: var(--red-bg); } .sg.bad b { color: var(--red-fg); } .sg.ok b { color: var(--green-a); } .sg.total { background: var(--green-bg); } .sg.total b { color: var(--green-a); }
.sla-rows { display: flex; flex-direction: column; gap: 6px; }
.sr { border: 1px solid var(--bdl); border-radius: 12px; overflow: hidden; }
.sr summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.sr summary::-webkit-details-marker { display: none; }
.sr-n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-disp); font-weight: 800; font-size: 15px; flex: none; background: #f3f5f4; color: var(--t3); }
.sr.warn .sr-n { background: var(--amber-bg); color: var(--amber-fg); } .sr.bad .sr-n { background: var(--red-bg); color: var(--red-fg); } .sr.ok .sr-n { background: var(--green-bg); color: var(--green-a); }
.sr-l { flex: 1; display: flex; flex-direction: column; font-size: 13px; } .sr-l .mut { font-size: 11.5px; }
.sr-edit { font-size: 11.5px; color: var(--green-a); font-weight: 700; cursor: pointer; }
.sr-item { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px dashed var(--bdl); font-size: 12.5px; cursor: pointer; }
.sr-item:hover { background: var(--green-bg); }
.sr-over { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: var(--red-bg); color: var(--red-fg); white-space: nowrap; }

/* hero fit */
.hs b { font-size: 20px; white-space: nowrap; }
.hs-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── leads page ─────────────────────────────────────────────────────────── */
.ld-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ld-seg .segb { min-height: 34px; padding: 0 12px; font-size: 12px; flex: 0 0 auto; }
.ld-layout { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; margin-top: 12px; }
.ld-layout.has-pane { grid-template-columns: minmax(0, 1.25fr) minmax(400px, 0.95fr); }
.ld-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ld-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; }
.ld-sub .mut { max-width: 220px; }
.ld-owner { height: 30px; border: 1px solid var(--bd); border-radius: 8px; font: 12px var(--font); padding: 0 6px; background: #fff; max-width: 150px; color: var(--t1); }
.ld-owner.none { border-color: rgba(245,166,35,.6); background: var(--amber-bg); color: var(--amber-fg); font-weight: 700; }
.ld-tbl tbody tr.open td { background: var(--green-bg) !important; }
.ld-tbl tbody tr.sel td { background: rgba(36,159,98,.08) !important; }
.ld-tbl tbody tr { cursor: pointer; }
.ld-pane { position: sticky; top: 84px; background: #fff; border: 1px solid rgba(8,36,24,.08); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); max-height: calc(100vh - 100px); overflow-y: auto; }
.ld-pane-name { font-family: var(--font-disp); font-size: 17px; font-weight: 800; letter-spacing: -.3px; display: flex; align-items: center; gap: 8px; }
.ld-contact { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ld-contact .btn.sm { text-decoration: none; }
@media (max-width: 1200px) { .ld-layout.has-pane { grid-template-columns: 1fr; } .ld-pane { display: none; }
  /* the side panel folds away — but a lead's FULL PAGE uses the same class and must stay (2026-09-25: the lead page was blank below 1200 px) */
  .lead-page .ld-pane.ld-page-card { display: block; } }
/* beside the lead pane, drop the Source and Age columns so Owner and SLA stay visible */
.ld-layout.has-pane .ld-tbl th:nth-child(5), .ld-layout.has-pane .ld-tbl td:nth-child(5), .ld-layout.has-pane .ld-tbl th:nth-child(8), .ld-layout.has-pane .ld-tbl td:nth-child(8) { display: none; }
/* Nine columns want 1254px. Below that the row used to scroll sideways and the action button —
   the whole point of the row — sat off the screen. As space tightens the columns a person does
   not act on go first; every one of them is still on the lead's own page and in the drawer.
   Order kept: 3 Added, 5 Source, 7 Interest.  Lead, Contact, Owner, Notes and the action stay. */
/* The Added column is the first to give way for width — so below that width the date moves under
   the lead's name instead of disappearing. It is shown in exactly one of the two places. */
.ld-added-inline { display: none; font-size: 11px; color: var(--t3); margin-top: 3px; white-space: nowrap; }
@media (max-width: 1560px) { .ld-tbl th:nth-child(3), .ld-tbl td:nth-child(3) { display: none; } .ld-tbl .ld-added-inline { display: block; } }
/* The Notes cell: a short line of what the call told us, then the comment worth reading. */
.ld-gist { font-size: 12.5px; line-height: 1.4; color: var(--t1); margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ld-gist.mut { color: var(--t3); }
.ld-gist-k { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t3);
  border: 1px solid var(--bdl); border-radius: 4px; padding: 0 4px; margin-right: 5px; vertical-align: 1px; }
.ld-gist-n { display: block; font-size: 11.5px; color: var(--green-a); font-weight: 600; margin-top: 1px; }
@media (max-width: 1400px) { .ld-tbl th:nth-child(5), .ld-tbl td:nth-child(5) { display: none; } }
@media (max-width: 1240px) { .ld-tbl th:nth-child(7), .ld-tbl td:nth-child(7) { display: none; } }
@media (max-width: 1140px) { .ld-tbl th:nth-child(6), .ld-tbl td:nth-child(6) { display: none; } }
/* and the two flexible columns give way before the table starts to scroll */
.ld-tbl th:nth-child(8), .ld-tbl td:nth-child(8) { min-width: 0; }
.ld-tbl .ld-notes { max-width: 260px; }
.ld-tbl .acts { flex-wrap: nowrap; }

/* ── hero: wow layer ────────────────────────────────────────────────────── */
.hero { background-size: 200% 200%; animation: mesh 18s ease-in-out infinite alternate; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at 30% 20%, #000 30%, transparent 75%); pointer-events: none; }
@keyframes mesh { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
.hero-greet, .hero-title, .hs, .hero-r, .ticker { position: relative; z-index: 1; }
.hs { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.hs:nth-child(2) { animation-delay: .06s; } .hs:nth-child(3) { animation-delay: .12s; } .hs:nth-child(4) { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mom { font-weight: 800; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; }
.mom.up { color: #8cd6aa; background: rgba(140,214,170,.14); } .mom.down { color: #ff8a8e; background: rgba(255,138,142,.14); }
@keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.wave { display: flex; align-items: flex-end; gap: 2px; height: 26px; width: 200px; margin-top: 4px; }
.wave i { flex: 1; background: linear-gradient(180deg, #8cd6aa, #2fb673); border-radius: 2px 2px 0 0; opacity: .85; min-height: 2px; animation: rise .6s ease both; }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(47,182,115,0)); } 50% { filter: drop-shadow(0 0 7px rgba(47,182,115,.9)); } }
@keyframes glowA { 0%, 100% { filter: drop-shadow(0 0 0 rgba(240,169,29,0)); } 50% { filter: drop-shadow(0 0 7px rgba(240,169,29,.9)); } }
.ticker { grid-column: 1 / -1; min-width: 0; max-width: 100%; overflow: hidden; border-top: 1px solid rgba(255,255,255,.1); margin-top: 4px; padding-top: 10px; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: inline-flex; gap: 28px; white-space: nowrap; animation: scroll 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.88); }
.tk i { font-style: normal; } .tk em { font-style: normal; color: rgba(255,255,255,.55); } .tk b { font-weight: 600; font-size: 11px; color: #8cd6aa; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .hero, .hs, .wave i, .ticker-track, .story-slide, .story-bar i { animation: none !important; opacity: 1 !important; } .therm-bar i { transition: none !important; } }
@media (max-width: 760px) { .ticker { display: none; } }

/* hero grid must not let the ring column squeeze the stats — but only while
   there is room for two columns; below that the media rules must win. */
@media (min-width: 1361px) { .hero { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 1360px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero-r { justify-content: flex-start; } }
.hero-l { min-width: 0; }
@media (max-width: 560px) { .hero-r { flex-wrap: wrap; gap: 12px; } .ringwrap { width: 116px; height: 116px; } .ringtxt b { font-size: 27px; } .ringmeta { font-size: 12.5px; } }
   who-is-here list are exactly what a manager on a phone wants. */
.hero-r { max-width: 440px; }
.ringmeta { max-width: 250px; }
.ringmeta .mut2 { line-height: 1.45; }

.therm { margin: 8px 0; } .therm-h { display: flex; justify-content: space-between; font-size: 12.5px; } .therm-h span { color: #8cd6aa; font-weight: 800; }
.therm-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; margin: 5px 0 3px; }
.therm-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2fb673, #8cd6aa); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.therm-bar i.hit { background: linear-gradient(90deg, #f5c542, #ffe38a); box-shadow: 0 0 12px rgba(245,197,66,.6); }
.therm-s { font-size: 11px; color: rgba(255,255,255,.62); }
.therm.light .therm-h span { color: var(--green-a); } .therm.light .therm-bar { background: var(--bdl); } .therm.light .therm-s { color: var(--t3); }
.story { position: fixed; inset: 0; z-index: 90; color: #fff; display: grid; place-items: center; cursor: pointer; background: radial-gradient(900px 500px at 20% 10%, rgba(47,182,115,.35), transparent 60%), linear-gradient(135deg, #04211a, #062f45 55%, #001628); animation: fadein .4s ease; }
.story-x { position: absolute; top: 22px; right: 28px; font-size: 22px; opacity: .7; cursor: pointer; } .story-x:hover { opacity: 1; }
.story-slide { text-align: center; max-width: 900px; padding: 40px; animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.story-slide h1 { font-family: var(--font-disp); font-size: clamp(40px, 7vw, 96px); letter-spacing: -2px; margin: 14px 0 6px; font-weight: 800; }
.story-sub { font-size: clamp(15px, 1.6vw, 22px); color: rgba(255,255,255,.7); }
.story-n { font-size: clamp(16px, 1.7vw, 24px); line-height: 1.5; margin-top: 26px; color: rgba(255,255,255,.9); }
.story-bar { width: 60%; margin: 22px auto 0; height: 12px; border-radius: 7px; background: rgba(255,255,255,.14); overflow: hidden; } .story-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2fb673, #8cd6aa); animation: grow 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes grow { from { width: 0 !important; } }
.story-ring { width: 160px; height: 160px; margin: 18px auto 0; display: block; }
.story-dots { position: absolute; bottom: 34px; display: flex; gap: 8px; } .story-dots i { width: 34px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); } .story-dots i.on { background: #8cd6aa; }
.story-hint { position: absolute; bottom: 14px; font-size: 11px; color: rgba(255,255,255,.45); }
.story .badge { display: inline-block; background: rgba(140,214,170,.16); color: #8cd6aa; border: 1px solid rgba(140,214,170,.35); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; }

/* 1024 px: the top bar ran 4 px over and put a scrollbar on every screen. The
   breadcrumb is the one redundant item there (the screen title repeats it). */
@media (max-width: 1100px) { .topbar .crumb { display: none; } }
.ringwrap svg { width: 100%; height: 100%; display: block; }
/* Stat cards size themselves: 4 across on a laptop, 2 on a phone, never
   narrower than they can print a SAR figure in. */
.hero-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hs-l { white-space: normal; }
.hs-s { flex-wrap: wrap; row-gap: 2px; line-height: 1.35; }
.hs-bar { flex: none; }
.hs-s > *, .hs-s > svg { min-width: 0; }
.hs-s { overflow-wrap: anywhere; }
.mom { white-space: nowrap; }
/* The collected-vs-invoiced sub-line was clipping mid-word on narrow cards:
   let it wrap under its bar instead of running off the edge. */
.hs-s { white-space: normal; } .hs-s > span:not(.mom) { white-space: normal; flex: 1 1 auto; }
   an empty card, which reads as missing content. */
/* A card that links nowhere must not pretend to be a button. */
.no-nav { cursor: default !important; }
.hs.no-nav:hover { background: rgba(255,255,255,.08); transform: none; }
.td.no-nav:hover { transform: none; box-shadow: var(--shadow-sm); }
/* Cards are auto-fit, so a column can be as narrow as 150px. The SAR value is
   nowrap: without a guard a long figure would spill into the next card. */
.hs b { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* With the hero trimmed to one band the stat cards are its main content, so the
   figure must never truncate. Below 1100px the hero is single-column and the
   cards are narrower: step the figure down so a 7-digit SAR value still fits. */
@media (max-width: 760px) { .hero-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
/* The figure scales to the width of its own card, so it fits at any viewport
   and still fits when the business grows a digit. Container query, not a
   viewport one: at 1440 the ring sits beside the cards and squeezes them
   narrower than they are at 1280, so viewport width does not predict card width. */
.hs { container-type: inline-size; }
.hs b { font-size: clamp(15px, 12.2cqi, 22px); }
/* Wide screens keep the ring beside the cards, so four-in-a-row leaves each card
   only ~150px and the figure has to shrink to fit. Two-by-two instead: the cards
   are twice as wide, the figure prints at full size, and the block squares up
   against the ring. Below 1361px the hero is single-column and four fit. */
@media (min-width: 1361px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Price book: the sheet carries a range and per-hour / per-day rates behind the
   quoted average, so the card has to show all three without shouting. */
.p-range { font-size: 11.5px; color: var(--t3); margin-top: -4px; }
.p-pr.on-req { font-size: 15px; color: var(--t3); font-style: italic; }
.p-rates { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; font-size: 11.5px; color: var(--t2); }
.p-rates b { font-weight: 800; color: var(--t1); }
/* ── forms: structure, and a footer that stays put ──────────────────────────
   A long form on a laptop used to scroll its own submit button out of view. */
.modal-f { position: sticky; bottom: 0; background: #fff; z-index: 2; border-radius: 0 0 20px 20px; }
.modal-note { margin-inline-end: auto; font-size: 12px; color: var(--t3); }
.modal-note.bad { color: var(--red-fg); font-weight: 700; }
.fsec { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--bdl); }
.fsec:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.fsec b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-a); font-weight: 800; }
.fsec span { font-size: 11.5px; color: var(--t3); }
.frow[hidden], .f2[hidden], .fsec[hidden] { display: none !important; }
/* ── hall overview (Training Hall / Hospitality Lounge) ─────────────────────── */
.hall-ov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 18px; align-items: start; }
.hall-map svg { width: 100%; height: auto; max-height: 300px; border-radius: 10px; }
.hall-map.empty { display: grid; place-items: center; min-height: 120px; background: #f6f8f7; border-radius: 12px; }
.hall-how { font-size: 12.5px; color: var(--t2); line-height: 1.6; margin-top: 10px; }
@media (max-width: 900px) { .hall-ov { grid-template-columns: 1fr; } }
/* ── dashboard second row ───────────────────────────────────────────────────── */
.dash-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 16px; }

/* Leads performance — the dashboard's read on the top of the funnel while there is no revenue */
.lp { margin-bottom: 16px; }
.lp-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.lp-k { background: #f6f9f7; border: 1px solid var(--line, #e4ebe7); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.lp-k.clickable { cursor: pointer; } .lp-k.clickable:hover { background: #eef5f1; border-color: #cfe3d8; }
.lp-l { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); font-weight: 700; }
.lp-k b { font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--t1); }
.lp-k b.good { color: var(--green-a, #249f62); } .lp-k b.warn { color: var(--amber-fg, #ad6800); } .lp-k b.bad { color: var(--red-fg, #cf1322); }
.lp-s { font-size: 11.5px; color: var(--t2); line-height: 1.45; }
.lp-s .mom.up { color: var(--green-a, #249f62); font-weight: 700; } .lp-s .mom.down { color: var(--red-fg, #cf1322); font-weight: 700; }
.lp-alert { border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 14px; }
.lp-alert.warn { background: var(--amber-bg, #fff7e6); color: var(--amber-fg, #ad6800); }
.lp-alert.bad { background: var(--red-bg, #fff1f0); color: var(--red-fg, #cf1322); }
.lp-alert.clickable { cursor: pointer; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.lp-h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); font-weight: 700; margin-bottom: 9px; }
.lp-r { display: grid; grid-template-columns: minmax(0, 1fr) 72px 30px; gap: 8px; align-items: center; font-size: 12.5px; padding: 2px 0; }
.lp-r .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-r .b { height: 6px; border-radius: 4px; background: #eaf1ed; overflow: hidden; }
.lp-r .b i { display: block; height: 100%; background: var(--green-a, #249f62); border-radius: 4px; }
.lp-r .v { text-align: right; font-weight: 700; }
.lp-bars { display: flex; align-items: flex-end; gap: 3px; height: 62px; }
.lp-bars i { flex: 1; background: var(--green-a, #249f62); border-radius: 3px 3px 0 0; opacity: .82; min-height: 4px; }
.lp-foot { font-size: 11.5px; color: var(--t2); margin-top: 8px; }
.lp-o { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid #f1f5f2; }
.lp-o:last-child { border-bottom: none; }
.lp-o .n { font-weight: 600; } .lp-o .n.none { color: var(--amber-fg, #ad6800); }
.lp-o .v { color: var(--t2); white-space: nowrap; } .lp-o .v b { color: var(--t1); }
.lp-o .v em { font-style: normal; } .lp-o .v s { text-decoration: none; color: var(--red-fg, #cf1322); font-weight: 700; }
.lp-o.clickable { cursor: pointer; }
@media (max-width: 900px) { .lp-grid { grid-template-columns: 1fr; gap: 14px; } .lp-k b { font-size: 22px; } }
.d2 h3 { margin-bottom: 10px; }
.tva-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .tva-top b { font-family: var(--font-disp); font-size: 24px; letter-spacing: -.5px; } .tva-top span { font-size: 12px; color: var(--t3); } .tva-top em { font-style: normal; font-weight: 800; color: var(--green-a); } .tva-top em.warn { color: var(--amber-fg); }
.therm-bar.light { background: var(--bdl); height: 9px; margin-bottom: 10px; }
.tva-list { display: grid; gap: 6px; } .tva-r { display: grid; grid-template-columns: minmax(0, 1fr) 110px 44px; gap: 8px; align-items: center; font-size: 12.5px; }
.tva-r .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tva-r .b { height: 7px; border-radius: 4px; background: var(--bdl); overflow: hidden; } .tva-r .b i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-a)); border-radius: 4px; } .tva-r .b i.hit { background: linear-gradient(90deg, #f5c542, #ffe38a); } .tva-r .v { text-align: right; font-weight: 800; font-size: 12px; }
.occ-lines { display: grid; gap: 7px; } .occ-r { display: grid; grid-template-columns: minmax(0, 1fr) 120px 84px; gap: 8px; align-items: center; font-size: 12.5px; border-radius: 8px; padding: 2px 4px; } .occ-r.clickable:hover { background: #f3f7f4; }
.occ-r .b { height: 8px; border-radius: 5px; background: var(--bdl); overflow: hidden; display: flex; } .occ-r .b i { display: block; height: 100%; background: var(--green); } .occ-r .b i.h { background: var(--amber); } .occ-r .v { text-align: right; } .occ-r .v small { color: var(--t3); font-weight: 600; margin-inline-start: 4px; }
.qs-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .qs-row > div { display: flex; flex-direction: column; } .qs-row b { font-family: var(--font-disp); font-size: 26px; letter-spacing: -.6px; line-height: 1.05; } .qs-row span { font-size: 11.5px; color: var(--t3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .qs-row small { font-size: 11.5px; color: var(--t2); }
.qs-row .arrow { font-size: 22px; color: var(--t4); } .qs-row .pct b { color: var(--green-a); } .qs-row .qs-open { margin-inline-start: auto; padding-inline-start: 16px; border-inline-start: 1px solid var(--bdl); }
.qfunnel { margin-bottom: 0; }
/* ── office designer ────────────────────────────────────────────────────────── */
.dz { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 16px; }
.dz-map { position: relative; border: 1px solid var(--bdl); border-radius: 12px; overflow: hidden; background: #f7faf8; cursor: crosshair; }
.dz-map svg { width: 100%; height: auto; display: block; }
.dz-map .ghost { position: absolute; border: 2px dashed var(--green-a); background: rgba(36,159,98,.16); border-radius: 4px; pointer-events: none; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--green-a); }
.dz-hint { font-size: 12px; color: var(--t3); margin-top: 6px; }
.kit { display: grid; gap: 6px; } .kit-r { display: grid; grid-template-columns: 26px minmax(0, 1fr) 84px 96px; gap: 8px; align-items: center; font-size: 12.5px; } .kit-r .ic { font-size: 16px; text-align: center; } .kit-r .pr { color: var(--t3); font-size: 11.5px; text-align: right; } .kit-r input { width: 100%; text-align: center; }
.kit-r .qty { display: flex; align-items: center; gap: 4px; } .kit-r .qty button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--bd); background: #fff; cursor: pointer; font-weight: 800; } .kit-r .qty input { width: 40px; height: 26px; border-radius: 7px; border: 1px solid var(--bd); }
.dz-sum { background: #f6f8f7; border-radius: 12px; padding: 12px 14px; margin-top: 12px; } .dz-sum .row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; } .dz-sum .tot { font-family: var(--font-disp); font-size: 20px; letter-spacing: -.4px; border-top: 1px solid var(--bdl); margin-top: 6px; padding-top: 8px; }
.dz-office { fill: rgba(36,159,98,.9); stroke: #fff; stroke-width: 2; }
@media (max-width: 900px) { .dz { grid-template-columns: 1fr; } }

/* ══ Phones: behave like an app, not a shrunk desktop ═══════════════════════
   Measured 2026-09-08 at 390 and 360 px: six screens rendered 570–1026 px-wide
   tables inside the viewport, nav pins were 20×21 px tap targets, 10.5 px
   labels were everywhere, the bookings grid clipped at 646 px, inputs were
   13 px (iOS zooms the page below 16), and the modal was a centred card. */
@media (max-width: 760px) {
  /* tap targets */
  .nav-row .pin { display: none; }
  .btn, .chip, .segb, .qc { min-height: 40px; }
  .btn.sm { min-height: 36px; }
  .tabbar button { font-size: 11px; min-height: 52px; }
  /* type floor — nothing under 11.5px on a phone */
  .hs-l, .k-l, .traj-h, .tbl th, .ops .l, .sec-sub, .screen-sub, .mut, .mut2, .fhelp, .alog .mut { font-size: 11.5px !important; }
  .tbl td { font-size: 13px; }
  /* header actions and filter strips scroll sideways instead of stacking */
  .screen-head { flex-wrap: wrap; }
  .screen-actions { flex-wrap: nowrap; overflow-x: auto; width: 100%; margin: 6px 0 0; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .screen-actions::-webkit-scrollbar { display: none; }
  .screen-actions > * { flex: none; }
  .screen-actions .btn.primary { order: -1; }
  .ops-strip { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .ops-strip::-webkit-scrollbar { display: none; }
  .ops { flex: 0 0 46%; scroll-snap-align: start; }
  .chips, .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .chips::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
  .chips > *, .filters > * { flex: none; }
  /* inputs: 16px stops iOS zooming the whole page on focus */
  input, select, textarea { font-size: 16px; }
  .frow input, .frow select, .frow textarea { min-height: 44px; }
  /* modals are bottom sheets */
  .overlay { align-items: flex-end; padding: 0; }
  .modal, .modal.wide { width: 100%; max-width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; align-self: flex-end; animation: sheetUp .26s cubic-bezier(.2,.8,.2,1); }
  .modal-h { padding: 14px 18px 10px; }
  .modal-h::before { content: ''; position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--bdl); }
  .modal-h { position: relative; padding-top: 18px; }
  .modal-b { padding: 14px 16px; }
  .modal-f { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; flex-wrap: wrap; }
  .modal-f .btn { flex: 1; min-height: 46px; }
  .modal-note { width: 100%; margin: 0 0 6px; }
  .f2 { grid-template-columns: 1fr; }
  /* tables become cards */
  table.tbl, table.tbl thead, table.tbl tbody, table.tbl tr, table.tbl td { display: block; }
  table.tbl { min-width: 0 !important; width: 100%; }
  table.tbl thead { display: none; }
  table.tbl tbody tr { border: 1px solid rgba(8,36,24,.09); border-radius: 14px; margin: 0 0 10px; padding: 10px 12px 6px; background: #fff; box-shadow: var(--shadow-sm); position: relative; }
  table.tbl tbody tr.clickable:active { background: #f3f7f4; }
  table.tbl td { border: none; padding: 5px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: right; }
  table.tbl td::before { content: attr(data-l); flex: 0 0 38%; text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); font-weight: 800; }
  table.tbl td:first-child { display: block; text-align: left; font-size: 14.5px; padding: 0 0 6px; border-bottom: 1px solid #f2f6f3; margin-bottom: 4px; }
  table.tbl td:first-child::before { display: none; }
  table.tbl td:empty, table.tbl td[data-l=""] { display: none; }
  table.tbl td.acts, table.tbl td:has(.acts), table.tbl td:has(.more-acts) { justify-content: flex-end; padding-top: 8px; }
  table.tbl td.acts::before, table.tbl td:has(.acts)::before, table.tbl td:has(.more-acts)::before { display: none; }
  .tbl-wrap { overflow: visible; border: none; background: transparent; box-shadow: none; }
  /* the bookings grid scrolls sideways with the room names pinned */
  .card:has(.rooms-grid) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rooms-grid { min-width: 620px; }
  .room-row > :first-child { position: sticky; left: 0; background: #fff; z-index: 1; padding-right: 8px; }
  /* breathing room above the fixed tab bar */
  #content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .occ-r { grid-template-columns: minmax(0, 1fr) 90px 70px; }
  .hall-ov { grid-template-columns: 1fr; }
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* touch feedback everywhere, no grey flash */
* { -webkit-tap-highlight-color: transparent; }
.btn:active, .chip:active, .td:active, .hs:active, .nav-item:active { transform: scale(.985); }
html { overscroll-behavior-y: none; }
.occ-note { font-size: 11.5px; margin-top: 8px; line-height: 1.5; } .occ-note.warn { color: var(--amber-fg); }
.unit-prod { font: 12.5px var(--font); padding: 4px 6px; border-radius: 8px; border: 1px solid var(--bd); max-width: 200px; }
@media (max-width: 760px) {
  /* the modal's own input rule outranked the 16px floor above — measured 13px */
  .modal input, .modal select, .modal textarea, .frow input, .frow select, .frow textarea, .fwrap input { font-size: 16px !important; }
  /* the rest of the sub-11px text the audit still counted */
  .cal-num, .cal-ev, .cal-dow, .cal-more, .k-s, .tag, .alog, .alog *, small, .sla-b, .badge, .col-h .sum, .stage-lbl, .hs-s, .td span, .ev-date .m { font-size: 11.5px !important; }
}
@media (max-width: 760px) {
  /* bookings: the room name column took half the phone; the track scrolls and
     the names stay pinned while it does */
  .rooms-grid { min-width: 560px; }
  .room-row .room-meta { flex: 0 0 112px; position: sticky; left: 0; background: #fff; z-index: 1; padding-right: 6px; }
  .room-row .room-meta .mut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hours { margin-inline-start: 124px; }
  /* a bulk-select checkbox in the first column is not the card's title */
  table.tbl td:first-child:has(> input[type=checkbox]), table.tbl td[data-l=""]:first-child { display: block; position: absolute; top: 10px; right: 12px; padding: 0; border: none; margin: 0; width: auto; }
  table.tbl tr:has(> td:first-child > input[type=checkbox]) td:nth-child(2) { display: block; text-align: left; font-size: 14.5px; padding: 0 28px 6px 0; border-bottom: 1px solid #f2f6f3; margin-bottom: 4px; }
  table.tbl tr:has(> td:first-child > input[type=checkbox]) td:nth-child(2)::before { display: none; }
  table.tbl td[data-l=""]:not(:first-child) { justify-content: flex-end; }
  table.tbl td[data-l=""]:not(:first-child)::before { display: none; }
}
@media (max-width: 760px) {
  /* bucket chips: one row that scrolls, not three that stack */
  .bkt-row { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .bkt-row::-webkit-scrollbar { display: none; }
  .bkt-row > * { flex: none; }
}
@media (max-width: 760px) {
  /* Leads toolbar: search first and full width, each segmented control on its
     own full-width row with equal buttons, then the select and the actions */
  .ld-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  .ld-toolbar input.finput { order: -1; grid-column: 1 / -1; width: 100% !important; min-height: 44px; }
  .ld-toolbar .ld-seg { grid-column: 1 / -1; display: flex; }
  .ld-toolbar .ld-seg .segb { flex: 1; min-height: 40px; }
  .ld-toolbar select.finput { width: 100% !important; min-height: 40px; }
  .ld-toolbar .btn.sm { min-height: 40px; white-space: nowrap; }
}
@media (max-width: 760px) {
  .bktc { min-height: 40px; }
  .tk-cb, .cb { width: 22px; height: 22px; }
  .tq .tk-cb { margin: 6px; }
  /* remaining sub-11px text the audit still counted: ticker, badges, inline sizes */
  .tk, .tk b, .tk em, .mom, .cal-cell *, .pulse-legend, .legend, .legend *, .rt, .k-s, .ev-date .m, .tq-sub, .tq-id, .ld-sub, .ld-sub * { font-size: 11.5px !important; }
  [style*="font-size:10"], [style*="font-size: 10"], [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 11.5px !important; }
  svg text { font-size: inherit; }   /* floor-plan labels are a drawing, not app text — leave them */
  /* card cells: content must shrink inside the card, never run past it */
  table.tbl td > * { min-width: 0; max-width: 100%; }
  table.tbl td .clamp1, table.tbl td .mono { max-width: 100% !important; overflow: hidden; text-overflow: ellipsis; }
  table.tbl td:first-child > * { max-width: 100%; }
}
@media (max-width: 760px) {
  /* the bulk-select box sits top-left; the score ring already owns the top-right */
  table.tbl td:first-child:has(> input[type=checkbox]), table.tbl td[data-l=""]:first-child { right: auto; left: 12px; top: 12px; }
  table.tbl tr:has(> td:first-child > input[type=checkbox]) td:nth-child(2) { padding-left: 34px; padding-right: 0; }
}
/* ── account menu as tiles; APK banner for Android browsers ──────────────── */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mtile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 12px 10px; border: 1px solid var(--bdl); border-radius: 13px; background: #fff; text-align: left; cursor: pointer; font-family: var(--font); color: var(--t1); text-decoration: none; min-height: 84px; transition: background .14s, transform .14s; }
.mtile:hover { background: #f3f7f4; } .mtile:active { transform: scale(.985); }
.mtile i { font-style: normal; font-size: 18px; line-height: 1; margin-bottom: 4px; } .mtile b { font-size: 13px; } .mtile span { font-size: 11.5px; color: var(--t3); line-height: 1.35; }
.mtile.apk { border-color: rgba(36,159,98,.45); background: var(--green-bg); } .mtile.apk b { color: var(--green-a); }
.mtile.m-only { display: none; }
@media (max-width: 760px) { .menu-grid { grid-template-columns: 1fr 1fr; } .mtile.m-only { display: flex; } }
.apk-banner { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(135deg, #062f45, #0d4a3c); color: #fff; box-shadow: var(--shadow); }
.apk-banner i { font-style: normal; font-size: 22px; } .apk-banner b { display: block; font-size: 13px; } .apk-banner span { display: block; font-size: 11.5px; color: rgba(255,255,255,.7); }
.apk-banner .btn.primary { white-space: nowrap; } .apk-banner .x { background: none; border: none; color: rgba(255,255,255,.7); font-size: 16px; cursor: pointer; width: 32px; height: 32px; }
/* the phone drawer's "More" is where a phone user looks for the app itself */
.sider-apk { display: none; }
@media (max-width: 900px) {
  .sider-apk { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0 10px 10px; padding: 11px 12px; border-radius: 12px; background: rgba(140,214,170,.14); border: 1px solid rgba(140,214,170,.35); color: #fff; text-decoration: none; }
  .sider-apk i { font-style: normal; font-size: 20px; text-align: center; } .sider-apk b { display: block; font-size: 13px; } .sider-apk small { display: block; font-size: 11.5px; color: rgba(255,255,255,.7); }
}
/* kit marks inside furnished offices on the plan */
.kitg rect, .kitg circle { fill: rgba(255,255,255,.85); stroke: rgba(4,33,26,.45); stroke-width: .6; }
.kitg .kit-mdesk { fill: #f5c542; } .kitg .kit-table { fill: #cfe8d9; } .kitg .kit-locker, .kitg .kit-drawer { fill: #b9c7bf; } .kitg .kit-screen { fill: #062f45; } .kitg .kit-parking { fill: #9fb6c9; }
.dz-map.fixed { cursor: default; }
/* ── phones: quieter type. The Android app (a Chrome tab in a shell) inflated
   text on some devices; the html rule above opts out of that automatic scaling,
   and headings step down so a phone reads as an app, not a poster. Long
   screen subtitles are hidden — the title says it. ─────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px) {
  body { font-size: 13.5px; }
  .screen-title { font-size: 21px; letter-spacing: -.4px; }
  .screen-sub { display: none; }
  .sec-title { font-size: 16px; } .sec-sub { display: none; }
  .hero-greet { font-size: 12px; }
  .hs b { font-size: clamp(15px, 12.2cqi, 20px); }
  .kpi .k-v, .k-v { font-size: 22px; }
  .card h3 { font-size: 14px; }
  .td b { font-size: 18px; }
  .story-slide h1 { font-size: clamp(30px, 9vw, 44px); }
  .qs-row b { font-size: 22px; }
  .modal-h b { font-size: 15px; }
}
/* ── proposal builder (mirrors the Proposal Builder design) ─────────────────── */
/* scoped to the modal: the pipeline column header also uses a `.pb` badge */
.modal .pb { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; min-height: 60vh; }
.pb-side { border-right: 1px solid var(--bdl); padding-right: 16px; max-height: 70vh; overflow-y: auto; }
.pb-in { width: 100%; border: 1px solid var(--bd); border-radius: 10px; padding: 9px 11px; font: 13px var(--font); margin-bottom: 8px; }
.pb-g { font-size: 11px; font-weight: 800; color: var(--green-a); margin: 10px 0 6px; }
.pb-rc { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--bdl); border-radius: 10px; margin-bottom: 6px; background: #fff; cursor: grab; }
.pb-rc:active { cursor: grabbing; } .pb-rc b { display: block; font-size: 12.5px; } .pb-rc span { font-size: 11px; color: var(--t3); } .pb-rc .btn.sm { padding: 0; width: 30px; height: 30px; font-weight: 900; }
.pb .badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--green-bg); color: var(--green-a); font-weight: 900; font-size: 11.5px; }
.pb-main { background: #f3f5f4; border-radius: 12px; padding: 16px; }
.pb-doc { background: #fff; border-radius: 6px; box-shadow: 0 6px 22px rgba(0,20,10,.08); padding: 26px 28px; min-height: 100%; }
.pb-doc .kick { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); font-weight: 800; } .pb-doc h2 { font-size: 26px; font-weight: 900; letter-spacing: -.02em; margin: 6px 0 14px; }
.pb-t { width: 100%; border-collapse: collapse; font-size: 13px; } .pb-t th { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); text-align: left; padding: 8px 10px; background: #f6f8f7; } .pb-t td { padding: 10px; border-bottom: 1px solid var(--bdl); vertical-align: middle; } .pb-t .r, .pb-t th.r { text-align: right; }
.pb-t .it { display: flex; gap: 10px; align-items: flex-start; } .pb-t .it b { font-size: 14px; } .pb-t .ar { font-size: 12px; color: var(--t3); }
.pb-t input, .pb-t select { border: 1px solid var(--bd); border-radius: 8px; padding: 6px 8px; font: 13px var(--font); }
.pb-t .x { border: none; background: none; color: var(--t3); cursor: pointer; font-size: 14px; } .pb-t .x:hover { color: var(--red-fg); }
.pb-empty { border: 2px dashed var(--bd); border-radius: 12px; padding: 34px; text-align: center; color: var(--t3); font-size: 13.5px; }
.pb-tot { display: grid; grid-template-columns: 1fr 240px; gap: 18px; align-items: end; margin-top: 18px; }
.pb-tot .onreq b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; } .pb-tot .onreq span { font-size: 12px; color: var(--t3); line-height: 1.6; }
.pb-tot .tot { background: #0a2d1b; color: #fff; border-radius: 6px; padding: 14px 16px; } .pb-tot .tot div { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; } .pb-tot .tot .g { border-top: 1px solid rgba(255,255,255,.25); margin-top: 6px; padding-top: 10px; font-size: 20px; font-weight: 900; } .pb-tot .tot small { display: block; font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 4px; }
.pb-foot { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bdl); }
.pb-valid { font-size: 12.5px; color: var(--t2); white-space: nowrap; } .pb-valid input { width: 58px; border: 1px solid var(--bd); border-radius: 8px; padding: 5px 8px; font: 13px var(--font); margin: 0 4px; }
.prop-rows { display: grid; gap: 8px; } .prop-r { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--bdl); border-radius: 12px; } .prop-a { display: flex; gap: 6px; flex: none; }
@media (max-width: 900px) { .modal .pb { grid-template-columns: 1fr; } .pb-side { border-right: none; padding-right: 0; max-height: none; } .pb-tot, .pb-foot { grid-template-columns: 1fr; } .pb-doc { padding: 18px 16px; } .prop-r { flex-wrap: wrap; } }
/* proposal builder: room for the lines — the modal grows, the description
   leaves the builder table (it is on the document itself), inputs tighten */
.modal:has(.pb) { width: min(1140px, 96vw); }
.pb-t .it span.mut { display: none; } .pb-t .it b { white-space: nowrap; } .pb-t .ar { display: block; margin: 2px 0 0; }
.pb-t input[type=number] { width: 60px !important; } .pb-t td:nth-child(4) input { width: 80px !important; } .pb-t select { max-width: 92px; }
.pb-t td { padding: 9px 8px; } .pb-t th, .pb-t td { white-space: nowrap; } .pb-t td:first-child { white-space: normal; min-width: 180px; }
#pb_lines { overflow-x: auto; }

/* ── Meeting Rooms module (v132) ─────────────────────────────────────── */
.room-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.room-card { background: var(--bg); border: 1px solid var(--bdl); border-radius: var(--r-md); padding: 14px 15px 12px; cursor: pointer; transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s; border-top: 4px solid var(--green); }
.room-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.room-card.busy { border-top-color: var(--red); }
.room-card.maint { border-top-color: #bbb; opacity: .85; }
.rc-top { display: flex; align-items: center; gap: 8px; }
.rc-no { font-family: var(--mono); font-size: 11px; color: var(--t3); background: var(--bg-layout); border-radius: 6px; padding: 1px 6px; }
.rc-name { font-size: 16px; font-family: var(--font-disp); letter-spacing: -.2px; }
.rc-top .tag { margin-inline-start: auto; }
.rc-meta { font-size: 12px; color: var(--t3); margin-top: 3px; }
.rc-cur { margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: var(--red-bg); display: flex; flex-direction: column; gap: 1px; }
.rc-cur b { font-size: 13px; color: var(--red-fg); }
.rc-cur span { font-size: 11.5px; color: var(--t2); }
.rc-cur.free { background: var(--green-bg); } .rc-cur.free b { color: var(--green-a); }
.rc-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rc-dev { font-size: 11px; font-weight: 700; color: var(--t3); }
.rc-dev.on { color: var(--green-a); } .rc-dev.off { color: var(--amber-fg); }
.rc-am { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-start: auto; }
.rc-am i { font-style: normal; font-size: 10.5px; color: var(--t2); background: var(--bg-layout); border-radius: 5px; padding: 1px 6px; }
.rooms-grid .room-track .now-line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--red); z-index: 3; pointer-events: none; }
.rooms-grid .room-track .now-line::before { content: ''; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.rooms-grid .slot.done { opacity: .45; text-decoration: line-through; }
.week-tbl td { vertical-align: top; min-width: 120px; }
.wk-cell { cursor: pointer; padding: 6px !important; }
.wk-b { border: 1px solid; border-radius: 7px; padding: 3px 7px; font-size: 11.5px; margin-bottom: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.wk-b:hover { filter: brightness(.96); }
.mo-head { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11.5px; font-weight: 700; color: var(--t3); text-align: center; margin-bottom: 6px; }
.mo-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mo-cell { border: 1px solid var(--bdl); border-radius: 9px; padding: 8px 9px; min-height: 84px; cursor: pointer; transition: box-shadow .15s; background: var(--bg); }
.mo-cell:hover { box-shadow: var(--shadow-sm); border-color: var(--green-bd); }
.mo-cell.pad { border: none; background: transparent; cursor: default; }
.mo-cell.today { border-color: var(--green); box-shadow: 0 0 0 2px rgba(36, 159, 98, .18); }
.mo-d { font-weight: 800; font-size: 13px; }
.mo-n { font-size: 11.5px; color: var(--t2); margin-top: 3px; }
.mo-bar { height: 5px; border-radius: 3px; background: var(--bg-layout); margin-top: 6px; overflow: hidden; }
.mo-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-h), var(--green-a)); }
.mo-h { font-size: 10.5px; color: var(--t3); margin-top: 3px; }
.an-row { display: grid; grid-template-columns: 90px 1fr 56px auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 5px 0; }
.an-bar { height: 10px; border-radius: 5px; background: var(--bg-layout); overflow: hidden; }
.an-bar i { display: block; height: 100%; border-radius: 5px; }
.an-peak { display: flex; gap: 4px; align-items: flex-end; height: 120px; }
.an-peak div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; }
.an-peak i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--green-h), var(--green-a)); }
.an-peak span { font-size: 9.5px; color: var(--t3); }
.bd-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.bd-head .tag { margin-inline-start: auto; }
.bd-title { font-size: 16px; font-weight: 800; font-family: var(--font-disp); }
.bd-row { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--bdl); font-size: 13px; }
.bd-row span { color: var(--t3); min-width: 100px; }
.bd-row b { font-weight: 600; word-break: break-word; }
.bd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.bd-audit { margin-top: 14px; font-size: 12.5px; } .bd-audit summary { cursor: pointer; color: var(--t2); font-weight: 700; }
.bd-a { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--bdl); }
.ro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ro-b { display: flex; gap: 8px; align-items: center; border: 1px solid; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; margin-bottom: 5px; cursor: pointer; }
.ro-b span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ro-b i { font-style: normal; font-size: 11px; opacity: .8; }
.pair-code { font-family: var(--mono); font-size: 44px; font-weight: 800; letter-spacing: .12em; color: var(--green-a); background: var(--green-bg); border-radius: 14px; padding: 14px; margin: 14px auto; display: inline-block; }
@media (max-width: 760px) {
  .ro-grid { grid-template-columns: 1fr; }
  .mo-cell { min-height: 60px; padding: 6px; } .mo-h { display: none; }
  .an-row { grid-template-columns: 70px 1fr 44px; } .an-row .mut { display: none; }
  .bd-a { grid-template-columns: 1fr; gap: 1px; }
}
@media (max-width: 760px) {
  /* phones: nothing under 11.5px on the rooms screens */
  .rc-am i, .rc-dev, .rc-no, .mo-n, .mo-h, .wk-b, .an-peak span, .bd-a, .ro-b i { font-size: 11.5px; }
  .rc-meta, .rc-cur span, .an-row { font-size: 12.5px; }
  .room-cards { grid-template-columns: 1fr; }
  .an-row { grid-template-columns: 64px 1fr 48px; }
  .an-peak { height: 90px; }
  .pair-code { font-size: 34px; }
}

/* ── dashboard second row (v133): the occupancy list is tall, the other two
   cards are short — give occupancy its own full-width row with the products in
   two columns, and let the short cards sit side by side above it. ─────────── */
.dash-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.dash-row2 .d2-occ { grid-column: 1 / -1; }
.dash-row2 .d2-occ { order: 3; }                                   /* short cards first, the wide list under them */
.dash-row2 .d2-occ:first-child ~ .d2-qs { grid-column: 1 / -1; }   /* no targets card → quotes takes the whole row */
.dash-row2 .d2-empty .mut { margin-bottom: 8px; }
@media (min-width: 1101px) {
  .d2-occ .occ-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
  .occ-lines .occ-r { grid-template-columns: minmax(0, 1.5fr) 110px 80px; }
}
@media (max-width: 1100px) { .dash-row2 { grid-template-columns: 1fr; } .dash-row2 .d2-occ { grid-column: auto; } }

/* ── design an office: a big, zoomable plan (v134) ────────────────────── */
.modal:has(.dz) { width: min(1500px, 97vw); max-height: 94vh; }
.dz { grid-template-columns: minmax(0, 1fr) 340px; }
.dz-map { height: min(72vh, 820px); background: #eef2ef; cursor: crosshair; user-select: none; }
.dz-map.fixed { cursor: grab; }
.dz-map svg { width: 100%; height: 100%; }
.dz-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.dz-zoom { display: inline-flex; align-items: center; gap: 4px; }
.dz-zoom b { min-width: 44px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.dz-scale { font-size: 11.5px; margin-inline-start: auto; }
.dz-scale kbd { font: 11px var(--mono); border: 1px solid var(--bd); border-radius: 4px; padding: 0 4px; }
.dz-ghost { fill: rgba(36,159,98,.18); stroke: var(--green-a); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.dz-ghost.placed { fill: rgba(36,159,98,.32); stroke-dasharray: none; stroke-width: 2; }
.dz-ghost-t { fill: #0f5a36; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
@media (max-width: 1100px) { .dz { grid-template-columns: 1fr; } .dz-map { height: auto; aspect-ratio: 980 / 810; max-height: 62vh; } }
@media (max-width: 760px) { .dz-map { max-height: 56vh; } .dz-scale { display: none; } .dz-tools .btn.sm { min-height: 36px; } }
/* belt and braces: the pipeline probability badge must never inherit a layout rule from anything else called .pb */
.col-h .pb { display: inline-block !important; min-height: 0 !important; height: auto !important; grid-template-columns: none !important; line-height: 1.4; }
.dz-hit { fill: rgba(245,166,35,.28); stroke: #d48806; stroke-width: 1.5; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.dz-hit.blocked { fill: rgba(207,19,34,.22); stroke: #cf1322; }
.dz-hit.desks { fill: rgba(245,166,35,.16); stroke: #d48806; stroke-dasharray: 5 3; }
.dz-hit-t { font-size: 8px; font-weight: 800; fill: #9a5b00; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 2.5px; }
.dz-hint .bad { color: var(--red-fg); font-weight: 700; } .dz-hint .warn { color: var(--amber-fg); font-weight: 700; }
/* lead sheet on phones (v143): one header, readable note box */
.ld-sheet-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; margin-bottom: 10px; }
.ld-sheet textarea, .modal textarea { font-family: var(--font); font-size: 14px; }
@media (max-width: 760px) {
  .m-lead .nm { flex-wrap: wrap; row-gap: 3px; }
  .m-lead .nm b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .m-lead .rt { max-width: 34%; } .m-lead .rt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
/* v143 — quotes / products filter bar */
.qfilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.qfilters .seg { flex-wrap: nowrap; }
.qfilters .segb small { font-weight: 600; opacity: .65; margin-inline-start: 3px; }
.qfilters .finput { height: 36px; }
.qf-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); font-weight: 600; }
.qf-l .finput { width: 140px; }
.qf-sum { margin-inline-start: auto; font-size: 12px; }
.p-take { position: relative; height: 8px; border-radius: 5px; background: var(--bdl); margin-top: 10px; display: flex; overflow: visible; }
.p-take i { display: block; height: 100%; background: var(--green); border-radius: 5px 0 0 5px; } .p-take i.h { background: var(--amber); border-radius: 0; }
.p-take span { position: absolute; right: 0; top: 11px; font-size: 11px; color: var(--t3); }
.prod:has(.p-take) { padding-bottom: 26px; }
/* café tables */
.btc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.btc { border: 1px solid var(--bdl); border-radius: 9px; padding: 6px 4px; text-align: center; font-size: 11px; color: var(--t3); background: #fafcfb; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.btc b { font-size: 13px; color: var(--t2); font-family: var(--mono); }
.btc.live { background: var(--green-bg); border-color: var(--green-bd); color: var(--green-a); } .btc.live b { color: var(--green-a); }
.btc.fresh { background: var(--amber-bg); border-color: #ffe58f; color: var(--amber-fg); } .btc.fresh b { color: var(--amber-fg); }
.tag.tbl-no { background: #16241d; color: #fff; font-family: var(--mono); letter-spacing: .04em; }
@media (max-width: 760px) { .qfilters .seg { overflow-x: auto; scrollbar-width: none; max-width: 100%; } .qfilters .segb { flex: none; } .qf-sum { width: 100%; margin: 0; } .qf-l .finput { width: 120px; } }
.dz-hist { display: inline-flex; gap: 4px; }
.dz-map.removing g.munit:hover rect { stroke: var(--red-fg) !important; stroke-width: 3 !important; }
.toast .btn.sm { height: 26px; min-height: 26px; }
.plog-list { display: flex; flex-direction: column; }
.plog { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--bdl); font-size: 13px; }
.plog:last-child { border-bottom: none; }
.plog .tag { flex: none; min-width: 84px; text-align: center; }
.plog-m { flex: 1; min-width: 0; } .plog-m b { font-weight: 600; }
.plog-t { flex: none; font-size: 11.5px; }
.facts-l .row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.facts-l .row .v { text-align: left; font-weight: 400; }
.bkt-sep { width: 1px; height: 18px; background: var(--bdl); margin: 0 6px; flex: none; }
.bkt-row.bkt-sub { margin-top: -8px; }
@media (max-width: 900px) { .bkt-sep { display: none; } }
/* ── Leads → Sources guide ─────────────────────────────────────────────── */
.src-tabs { margin-bottom: 14px; }
.src-body { font-size: 13.5px; line-height: 1.55; }
.src-intro { background: linear-gradient(135deg, #f2f9f5, #fbfdfc); border: 1px solid var(--green-bd); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.src-intro-t { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-a); font-weight: 800; margin-bottom: 4px; }
.src-intro p { margin: 0; }
.src-status { display: flex; gap: 16px; align-items: center; border: 1px solid var(--bdl); border-radius: 12px; padding: 12px 14px; margin-bottom: 6px; }
.src-ring { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--bdl); display: grid; place-content: center; text-align: center; line-height: 1; }
.src-ring b { font-size: 20px; } .src-ring span { font-size: 10px; color: var(--t3); }
.src-ring.mid { border-color: var(--amber-fg); } .src-ring.ok { border-color: var(--green-a); }
.src-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 14px; flex: 1; }
.src-step { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.src-step .dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--bd); font-size: 11px; display: grid; place-items: center; margin-top: 1px; color: #fff; }
.src-step.ok .dot { background: var(--green-a); border-color: var(--green-a); }
.src-step .mut { font-size: 11.5px; }
.src-sec { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 8px; }
.src-sec .n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green-a); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.src-sec b { font-size: 14px; } .src-sec .mut { font-size: 12.5px; }
.src-ol { margin: 0 0 6px 40px; padding: 0; } .src-ol li { margin: 4px 0; }
.src-kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 6px 0 4px 40px; align-items: center; }
.src-kv .k { font-size: 12.5px; color: var(--t2); font-weight: 600; }
.src-kv .v { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.src-kv code { font-family: var(--mono); font-size: 11.5px; background: #f4f6f5; border: 1px solid var(--bdl); border-radius: 6px; padding: 4px 8px; word-break: break-all; }
.src-kv input { flex: 1 1 260px; min-width: 200px; font-family: var(--mono); font-size: 12px; }
.src-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px 40px; font-size: 12.5px; }
.src-log { display: flex; flex-direction: column; }
.src-ev { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--bdl); font-size: 13px; }
.src-ev:last-child { border-bottom: none; } .src-ev > div { flex: 1; min-width: 0; } .src-ev .mut { font-size: 11.5px; }
.src-ev .ic { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: #eef1f0; color: var(--t2); }
.src-ev.ok .ic { background: var(--green-bg); color: var(--green-a); } .src-ev.bad .ic { background: var(--red-bg); color: var(--red-fg); } .src-ev.warn .ic { background: var(--amber-bg); color: var(--amber-fg); }
.src-dry { margin: 8px 0 0 40px; border: 1px dashed var(--green-bd); border-radius: 10px; padding: 10px 12px; background: #fbfdfc; }
.src-dry-g { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 12px; font-size: 12.5px; } .src-dry-g .k { color: var(--t3); }
.tag.ok { background: var(--green-bg); color: var(--green-a); }
@media (max-width: 900px) { .src-kv { grid-template-columns: 1fr; margin-left: 0; } .src-ol, .src-act, .src-dry { margin-left: 0; } .src-status { flex-direction: column; align-items: stretch; } .src-dry-g { grid-template-columns: auto 1fr; } }
/* ── Dashboard · Turnaround + Revenue assurance (v147 redesign) ─────────── */
.tat-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 6px; }
.tat-leg { border: 1px solid var(--bdl); border-radius: 14px; padding: 14px 16px; background: linear-gradient(180deg, #fbfdfc, #fff); }
.tat-leg .tl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tat-leg .tl-head b { font-size: 13.5px; }
.tat-leg .tl-num { font-family: var(--font-disp); font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.tat-leg .tl-num span { font-family: var(--font); font-size: 11.5px; font-weight: 700; color: var(--t3); letter-spacing: 0; }
.tat-leg .tl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 10px; }
.tat-leg .tl-grid div { text-align: left; padding: 6px 8px; background: #f6f8f7; border-radius: 8px; }
.tat-leg .tl-grid b { display: block; font-size: 14px; font-family: var(--font-disp); font-weight: 800; }
.tat-leg .tl-grid span { font-size: 10px; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tat-late { margin-top: 14px; border-top: 1px dashed var(--bdl); padding-top: 12px; }
.tat-late-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.tat-late-h b { font-size: 13px; } .tat-late-h .mut { font-size: 12px; }
.tl-row { display: grid; grid-template-columns: 92px minmax(120px, 1.4fr) 90px 92px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; cursor: pointer; }
/* the two legends need 150px each; below a laptop the row cannot hold six columns (it pushed the
   whole page 23px wider than a tablet), so they drop to their own line, half the width each */
@media (max-width: 1100px) { .tl-row { grid-template-columns: 92px minmax(0, 1fr) 90px 92px; } .tl-row .tl-leg { grid-column: span 2; } }
.tl-row:hover { background: #f4f8f6; }
.tl-row + .tl-row { border-top: 1px solid #f0f3f1; }
.tl-row .ref { font-weight: 800; letter-spacing: .01em; } .tl-row .acct { color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row .stg { color: var(--t3); font-size: 11.5px; } .tl-row .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tl-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t2); min-width: 0; }
.tl-leg .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tl-leg .dot.bad { background: var(--red-fg); } .tl-leg .dot.warn { background: var(--amber); } .tl-leg .dot.ok { background: var(--green-a); } .tl-leg .dot.none { background: #d5dcd8; }
.tl-leg b { font-weight: 700; color: var(--t1); }
.tl-more { margin-top: 8px; display: flex; gap: 10px; align-items: center; font-size: 12px; }
@media (max-width: 900px) { .tl-row { grid-template-columns: 1fr 1fr; } .tl-row .stg, .tl-row .val { display: none; } }
.ra-eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; margin: 4px 0 14px; }
.ra-eq .ra-k { border: 1px solid var(--bdl); border-radius: 14px; padding: 12px 14px; background: #fff; }
.ra-eq .ra-k .l { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); font-weight: 700; }
.ra-eq .ra-k .v { font-family: var(--font-disp); font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 2px 0; }
.ra-eq .ra-k .s { font-size: 11.5px; color: var(--t3); }
.ra-eq .ra-k.gap { border-color: #f3dfa8; background: linear-gradient(180deg, #fffaf0, #fff); } .ra-eq .ra-k.gap .v { color: var(--amber-fg); }
.ra-eq .ra-k.ok { border-color: var(--green-bd); } .ra-eq .ra-k.ok .v { color: var(--green-a); }
.ra-eq .op { font-family: var(--font-disp); font-size: 22px; color: var(--t3); font-weight: 700; }
.ra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ra-box { border: 1px solid var(--bdl); border-radius: 14px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.ra-box .ra-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ra-box .ra-h b { font-size: 13px; } .ra-box .ra-h .n { font-family: var(--font-disp); font-weight: 800; font-size: 18px; }
.ra-box .ra-h .n.bad { color: var(--red-fg); } .ra-box .ra-h .n.warn { color: var(--amber-fg); } .ra-box .ra-h .n.ok { color: var(--green-a); }
.ra-box .chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ra-box .chips .tag { font-size: 11px; padding: 3px 8px; cursor: pointer; }
.ra-box .ra-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed #eef1ef; }
.ra-box .ra-row:last-of-type { border-bottom: none; }
.ra-box .why { font-size: 11px; color: var(--t3); margin-top: auto; }
.ra-box .ra-act { align-self: flex-start; }
@media (max-width: 900px) { .ra-eq { grid-template-columns: 1fr; } .ra-eq .op { display: none; } }
/* ── Calls (Jarvis) ─────────────────────────────────────────────────────── */
.cl-setup-g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.cl-users { display: flex; gap: 6px; flex-wrap: wrap; } .cl-users .tag a { cursor: pointer; margin-inline-start: 4px; opacity: .7; }
.cl-ures { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cl-u { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--bdl); border-radius: 10px; font-size: 13px; }
.cl-rules { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .cl-rules label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-sync { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bdl); }
.cl-spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin: 8px 0 2px; }
.cl-spark i { flex: 1; background: #e3ebe6; border-radius: 3px 3px 0 0; position: relative; min-width: 4px; } .cl-spark i b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--green-a); border-radius: 3px 3px 0 0; }
.cl-tbl td { vertical-align: top; } .cl-sum { font-size: 12.5px; line-height: 1.45; color: var(--t1); }
.cl-play { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--bdl); border-radius: 12px; background: #fff; position: sticky; bottom: 8px; }
.cl-play audio { flex: 1; height: 36px; }
.cl-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-box { border: 1px solid var(--bdl); border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: 13px; } .cl-box > b { display: block; font-size: 12px; margin-bottom: 4px; color: var(--t2); text-transform: uppercase; letter-spacing: .05em; }
.cl-trans { max-height: 340px; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.cl-line { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; } .cl-line .who { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--t3); min-width: 74px; padding-top: 3px; }
.cl-line.cust { background: #f3f8f5; border-radius: 10px; padding: 6px 10px; } .cl-line.cust .who { color: var(--green-a); }
@media (max-width: 900px) { .cl-setup-g { grid-template-columns: 1fr; } }
/* ── pipeline tasking: tags + next step on the card ───────────────────── */
.dc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 6px; }
.dtag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef3f0; color: var(--t2); border: 1px solid #dfe7e2; }
.dnext { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--blue-bg); color: var(--blue-fg); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dnext.soon { background: var(--amber-bg); color: var(--amber-fg); } .dnext.late { background: var(--red-bg); color: var(--red-fg); }
/* ── support desk: quieter queue, department routing ──────────────────── */
.tk-depts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -4px 0 14px; }
.tk-depts .chip { height: 28px; padding: 0 10px; font-size: 12px; } .tk-depts .chip b { margin-inline-start: 4px; opacity: .8; }
.tq { border-radius: 12px; border: 1px solid var(--bdl); border-inline-start-width: 4px; box-shadow: none; transition: background .12s, box-shadow .12s; }
.tq:hover { background: #f7faf8; box-shadow: var(--shadow-sm); }
.tq.open { background: #f2f8f4; border-color: var(--green-bd); border-inline-start-color: var(--green-a); }
.tq-sub { font-weight: 700; font-size: 13.5px; } .tq-id { font-family: var(--mono); font-size: 11px; color: var(--t3); }
.tq-meta { font-size: 12px; color: var(--t3); margin-top: 2px; } .tq-dept { color: var(--green-a); font-weight: 700; }
.tq-route { height: 30px; border: 1px solid var(--bd); border-radius: 8px; font-family: var(--font); font-size: 12px; padding: 0 8px; background: #fff; color: var(--t2); }
.tq-acts { display: flex; gap: 6px; grid-column: 2 / span 2; justify-content: flex-end; }
.share-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.share-acts .btn { text-decoration: none; }
/* ── the member app in a device frame (Community & app) ─────────────── */
.devframe { position: relative; width: 300px; max-width: 100%; height: 600px; margin: 0 auto; border-radius: 34px; background: #0b1512; padding: 12px; box-shadow: 0 20px 50px rgba(4,33,26,.28), inset 0 0 0 2px #2a3a34; }
.devframe .notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: #0b1512; border-radius: 0 0 14px 14px; z-index: 2; }
.appframe { width: 100%; height: 100%; border: 0; border-radius: 24px; background: #fff; }
/* products: who sees it */
.p-vis { position: absolute; top: 10px; left: 12px; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #eef3f0; color: var(--t2); }
.p-vis.public { background: var(--green-bg); color: var(--green-a); } .p-vis.portal { background: var(--blue-bg); color: var(--blue-fg); } .p-vis.internal { background: #f2f4f3; color: var(--t3); }
.prod { position: relative; padding-top: 34px; }
/* visitors: three lanes */
.vis-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.vis-lane { background: #f6f8f7; border: 1px solid var(--bdl); border-radius: 14px; padding: 10px; min-height: 120px; }
.vis-lane.on { background: #f0f8f3; border-color: var(--green-bd); }
.vis-lane-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); padding: 2px 4px 8px; }
.vis-lane-h span { background: #fff; border: 1px solid var(--bdl); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.vis-card { background: #fff; border: 1px solid var(--bdl); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.vis-card.live { border-color: var(--green-bd); } .vis-card.past { opacity: .75; }
.vis-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.vis-acts { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
@media (max-width: 900px) { .vis-lanes { grid-template-columns: 1fr; } }
/* café menu */
.menu-cat { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.menu-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bdl); border-radius: 12px; padding: 8px 10px; background: #fff; }
.menu-item.off { opacity: .55; } .mi-e { font-size: 20px; flex: none; } .mi-b { flex: 1; min-width: 0; font-size: 13px; }
.mi-p { font-size: 12px; color: var(--t3); white-space: nowrap; } .mi-p input { width: 68px; border: 1px solid var(--bd); border-radius: 8px; padding: 4px 6px; font: inherit; font-size: 13px; text-align: right; }
.sw { position: relative; width: 38px; height: 22px; flex: none; } .sw input { opacity: 0; width: 0; height: 0; }
.sw i { position: absolute; inset: 0; background: #d5dcd8; border-radius: 22px; transition: .15s; } .sw i::after { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sw input:checked + i { background: var(--green-a); } .sw input:checked + i::after { transform: translateX(16px); }

/* rooms calendar controls live under the tab row, never wrapping the header */
.cal-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -6px 0 12px; }
.cal-bar .btn { height: 34px; padding: 0 12px; }

/* ── Apps & devices: the CRM in its frames ─────────────────────────── */
.dev-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.dev-gallery.wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.dev-col { padding: 14px 16px 16px; }
.dev-title { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.dev-title b { font-size: 14.5px; } .dev-title .mut { font-size: 12px; margin-top: 2px; }
.dev-size button, .seg > button { border: 1px solid var(--bd); background: #fff; border-radius: 8px; padding: 6px 11px; font: 600 12px var(--font); color: var(--t2); cursor: pointer; }
.dev-size button.on, .seg > button.on { background: var(--green); color: #fff; border-color: transparent; }
.dev-pick { height: 32px; font-size: 12px; max-width: 220px; }
.dev-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.dev-foot { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 12px; }
.devframe.tablet { width: 100%; max-width: 640px; height: 400px; border-radius: 22px; padding: 10px; }
.devframe.tablet .notch { display: none; }
.devframe.tablet .appframe { border-radius: 14px; }
.apps-install { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 12px; }
.apps-qr { text-align: center; padding: 12px 10px; border: 1px solid var(--bdl); border-radius: 14px; display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 12.5px; }
.apps-qr .mut { font-size: 11.5px; }
.apps-steps { margin: 0 0 0 18px; font-size: 12.5px; color: var(--t2); }
.apps-steps li { margin-bottom: 7px; line-height: 1.45; }
@media (max-width: 700px) { .apps-install { grid-template-columns: 1fr; } .dev-gallery.wide { grid-template-columns: 1fr; } .devframe.tablet { height: 300px; } }

/* ── + New: tiles with a hint, not a wall of buttons ───────────────── */
.qn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qn-tile { position: relative; text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 14px 14px 12px; border: 1px solid var(--bdl); border-radius: 14px; background: #fff; cursor: pointer; font-family: var(--font); transition: .13s; }
.qn-tile:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(4, 33, 26, .08); transform: translateY(-1px); }
.qn-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--green-bg); color: var(--green-a); display: inline-flex; align-items: center; justify-content: center; }
.qn-tile b { font-size: 13.5px; color: var(--t1); }
.qn-hint { font-size: 11.5px; color: var(--t2); line-height: 1.35; }
.qn-tile kbd { position: absolute; top: 10px; right: 12px; font: 600 10.5px var(--mono); color: var(--t3); border: 1px solid var(--bdl); border-radius: 5px; padding: 1px 5px; background: #fafbfa; }
@media (max-width: 700px) { .qn-grid { grid-template-columns: 1fr 1fr; } }

/* ── visitor code ready ────────────────────────────────────────────── */
.vc-ready { text-align: center; padding: 6px 0 2px; }
.vc-code { font: 800 40px/1.1 var(--mono); letter-spacing: .18em; color: var(--green-a); background: var(--green-bg); border-radius: 14px; padding: 16px 22px; display: inline-block; margin-bottom: 12px; }
.vc-who { font-size: 14.5px; margin-bottom: 3px; }

/* ── quick book (staff new booking) ─────────────────────────────────── */
.qb-sec { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-a); margin: 16px 0 8px; }
#qb .qb-sec:first-child { margin-top: 0; }
.qb-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.qb-room { text-align: left; border: 1.5px solid var(--bdl); border-radius: 12px; padding: 9px 11px; background: #fff; cursor: pointer; font-family: var(--font); display: flex; flex-direction: column; gap: 2px; }
.qb-room b { font-size: 13.5px; color: var(--t1); } .qb-room span { font-size: 11px; color: var(--t2); }
.qb-room.on { border-color: var(--green); background: var(--green-bg); } .qb-room.busy span { color: #c92a2f; } .qb-room.off { opacity: .55; }
.qb-days { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.qb-days input { width: auto; height: 32px; padding: 0 8px; font-size: 12px; }
.qb-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.qb-lbl { font-size: 12px; color: var(--t2); margin-right: 2px; }
.qb-slots { display: flex; gap: 6px; flex-wrap: wrap; min-height: 36px; }
.qb-slots .qb-slot { border: 1.5px solid var(--bd); background: #fff; border-radius: 10px; padding: 8px 11px; font: 700 12px var(--mono); cursor: pointer; color: var(--t1); }
.qb-slots .qb-slot:hover { border-color: var(--green); color: var(--green-a); }
.qb-slots .qb-slot.on { background: var(--green); color: #fff; border-color: transparent; }
.qb-sum { flex: 1; font-size: 12.5px; align-self: center; }
#qb .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 700px) { #qb .f2 { grid-template-columns: 1fr; } }

/* ── settings · clean slate ────────────────────────────────────────── */
.danger-zone { border-color: #f5c2c4; }
.danger-zone h3 { color: #c92a2f; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; font-size: 12px; color: var(--t2); max-height: 220px; overflow: auto; padding: 6px 0; }
.cs-grid b { color: var(--t1); font-variant-numeric: tabular-nums; }
.src-pre { background: #f4f7f5; border: 1px solid var(--bdl); border-radius: 10px; padding: 10px 12px; font: 11.5px/1.45 var(--mono); overflow: auto; max-height: 260px; margin: 6px 0 10px; }
.src-dry.bad { border-color: #f5c2c4; background: #fdefee; color: #c92a2f; }
.src-dry ul { margin: 6px 0 0 18px; }

/* ── v165 · empty catalogue ── */
.empty-cat { display: flex; align-items: center; gap: 18px; padding: 22px 24px; flex-wrap: wrap; border-style: dashed; }
.empty-cat .ec-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--green-bg); color: var(--green-a); display: flex; align-items: center; justify-content: center; flex: none; }
.empty-cat .ec-ic svg { width: 22px; height: 22px; }
.empty-cat > div:nth-child(2) { flex: 1; min-width: 240px; }
.empty-cat b { font-size: 15px; display: block; margin-bottom: 3px; font-family: var(--font-disp); }
.empty-cat .mut { font-size: 12.5px; line-height: 1.5; }
.empty-cat .ec-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── v165 · pipeline board: four equal columns, honest empty states ── */
.board.board4 { grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; min-height: 0; max-height: none; align-items: start; gap: 14px; }
.board.board4 .col {
  background: #f6f9f7; border: 1px solid rgba(8, 36, 24, 0.07); border-radius: 18px; padding: 12px 10px 10px 12px;
  min-height: 420px; max-height: calc(100vh - 230px); box-shadow: none;
}
.board.board4 .col-accent { height: 4px; margin: -4px 2px 9px; border-radius: 4px; opacity: .9; }
.board.board4 .col-h { padding: 0 3px 4px; }
.board.board4 .col-h .nm { font-size: 13.5px; font-family: var(--font-disp); letter-spacing: -0.2px; }
.board.board4 .col-sub { padding: 0 3px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--t3); line-height: 1.4; min-height: 25px; }
.board.board4 .col-empty .col-sub { font-weight: 500; }
.board.board4 .col-cards { padding: 2px 4px 2px 1px; display: flex; flex-direction: column; gap: 9px; }
.board.board4 .dcard { margin: 0; border-radius: 14px; border: 1px solid rgba(8, 36, 24, 0.08); box-shadow: 0 1px 2px rgba(8, 36, 24, 0.04); padding: 11px 12px 10px; }
.board.board4 .col-add { margin-top: 2px; border-radius: 12px; }
.col-drop {
  border: 1.5px dashed rgba(8, 36, 24, 0.14); border-radius: 14px; padding: 26px 14px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--t3); font-size: 12px; background: rgba(255, 255, 255, 0.55);
}
.col-drop b { color: var(--t2); font-size: 12.5px; }
.col-drop .cd-dot { width: 10px; height: 10px; border-radius: 50%; margin-bottom: 6px; box-shadow: 0 0 0 4px rgba(8, 36, 24, 0.05); }
.col.dragover .col-drop { border-color: var(--green); background: rgba(36, 159, 98, 0.08); color: var(--green-a); }
.board-empty .col { min-height: 260px; }
.pipe-empty {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px;
  background: linear-gradient(135deg, #fff, #f3f9f5); border: 1px solid rgba(36, 159, 98, 0.22); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.pipe-empty .pe-ic { width: 48px; height: 48px; border-radius: 15px; background: var(--green-bg); color: var(--green-a); display: flex; align-items: center; justify-content: center; flex: none; }
.pipe-empty .pe-ic svg { width: 22px; height: 22px; }
.pipe-empty .pe-txt { flex: 1; min-width: 260px; }
.pipe-empty .pe-txt b { display: block; font-size: 15.5px; font-family: var(--font-disp); letter-spacing: -0.2px; margin-bottom: 3px; }
.pipe-empty .pe-txt .mut { font-size: 12.5px; line-height: 1.5; max-width: 640px; }
.pipe-empty .pe-act { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1180px) {
  .board.board4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board.board4 .col { width: auto; min-height: 200px; max-height: none; }
}
@media (max-width: 640px) { .board.board4 { grid-template-columns: 1fr; } }

/* ── v165 · Inventory & floor: wide zoomable plan, inspector beside it, compact space program ── */
.inv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.inv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; margin-bottom: 14px; }
.inv-map { padding: 12px 12px 10px; }
.inv-side { display: grid; gap: 14px; }
.fm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fm-zoom-ctl { display: inline-flex; align-items: center; gap: 2px; background: rgba(8, 36, 24, 0.06); border-radius: 12px; padding: 3px; }
.fm-zoom-ctl button { border: none; background: #fff; width: 30px; height: 30px; border-radius: 9px; font-size: 16px; font-weight: 700; color: var(--t2); cursor: pointer; box-shadow: 0 1px 2px rgba(8, 36, 24, 0.08); }
.fm-zoom-ctl button:hover { color: var(--green-a); }
.fm-zoom-ctl button.fit { width: auto; padding: 0 10px; font-size: 12px; }
.fm-zoom-ctl b { min-width: 46px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--t2); }
.fm-wrap { overflow: auto; border-radius: 14px; background: #f3f6f4; border: 1px solid rgba(8, 36, 24, 0.07); max-height: min(78vh, 900px); scrollbar-width: thin; }
.fm-wrap.zoomed { cursor: grab; }
.fm-wrap.panning { cursor: grabbing; user-select: none; }
.fm-wrap.panning * { pointer-events: none; }
.fm-zoom { min-width: 100%; transition: width .18s var(--ease); }
.fm-zoom svg { display: block; }
.fm-grid { padding: 6px 4px 0; }
.fm-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--t2); margin-top: 10px; padding: 0 4px; }
.fm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fm-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.fm-legend b { font-variant-numeric: tabular-nums; }
.fm-legend .mut { margin-inline-start: auto; font-size: 11.5px; }
g.munit .u-rect { transition: filter .15s; }
g.munit:hover .u-rect { filter: brightness(0.96) drop-shadow(0 2px 4px rgba(8, 36, 24, 0.25)); }
g.munit.sel .u-rect { filter: drop-shadow(0 3px 8px rgba(0, 22, 40, 0.35)); }
.unit { border-radius: 9px; font-weight: 700; }
.sp-band2 { padding: 14px 16px 12px; margin-bottom: 14px; }
.sp2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.sp2 { background: #f7faf8; border: 1px solid var(--bdl); border-radius: 12px; padding: 9px 11px 8px; }
.sp2-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sp2-top b { font-family: var(--font-disp); font-size: 17px; letter-spacing: -0.4px; line-height: 1; }
.sp2-top span { font-size: 11.5px; font-weight: 700; color: var(--t2); flex: 1; min-width: 0; line-height: 1.2; }
.sp2-top em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--green-a); white-space: nowrap; }
.sp2-b { position: relative; height: 5px; border-radius: 4px; background: #e6ede9; overflow: visible; margin: 8px 0 5px; }
.sp2-b i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--green-h), var(--green-a)); }
.sp2-b u { position: absolute; top: -3px; width: 2px; height: 11px; background: var(--navy); border-radius: 1px; margin-inline-start: -1px; opacity: .55; }
.sp2-s { font-size: 10.5px; color: var(--t3); font-weight: 600; }
@media (max-width: 1100px) { .inv-layout { grid-template-columns: 1fr; } .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── v171 · call outcome picker ── */
.qb-picks { display: grid; gap: 7px; }
.qb-picks .btn { width: 100%; text-align: start; font-weight: 700; }

/* ── v173 · lead analysis ── */
.la-card { margin-bottom: 12px; padding: 14px 16px 12px; }
.la-card h3 { margin-bottom: 12px; }
.la-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.la-col { min-width: 0; }
.la-h { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 7px; }
.la-hero { font-family: var(--font-disp); font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--t1); }
.la-hero small { font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--t3); margin-inline-start: 7px; font-family: var(--font); }
.la-hero.good { color: var(--green-a); } .la-hero.warn { color: var(--amber-fg); }
.la-sub { font-size: 11.5px; color: var(--t3); margin-top: 4px; line-height: 1.45; }
/* one series, so no legend — the heading names it. 2px gaps, rounded data-ends, baseline-anchored. */
.la-spark { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin-top: 12px; }
.la-sp { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 3px; }
.la-sp i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--green); min-height: 2px; }
.la-sp:hover i { background: var(--green-a); }
.la-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--t4); margin-top: 4px; }
.la-facts { margin-top: 10px; display: grid; gap: 6px; }
.la-facts div { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.la-facts span { color: var(--t3); flex: 1; min-width: 0; }
.la-facts b { font-variant-numeric: tabular-nums; }
.la-row { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 0; }
.la-k { flex: 1; min-width: 0; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-bar { width: 48px; flex: none; height: 6px; border-radius: 4px; background: #eef2ef; overflow: hidden; }
.la-bar i { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.la-n { flex: none; font-variant-numeric: tabular-nums; min-width: 18px; text-align: end; }
.la-p { flex: none; font-size: 10.5px; color: var(--t3); min-width: 34px; text-align: end; }
.la-p.warn { color: var(--amber-fg); font-weight: 700; }
.la-stack { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 2px; }
.la-stack i { display: block; height: 100%; border-radius: 3px; }
.la-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--t3); margin-top: 6px; }
.la-legend span { display: inline-flex; align-items: center; gap: 5px; }
.la-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.la-empty { font-size: 11.5px; color: var(--t4); padding: 4px 0; }
.la-foot { font-size: 11px; color: var(--t4); margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bdl); line-height: 1.5; }
@media (max-width: 1180px) { .la-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 680px) { .la-grid { grid-template-columns: 1fr; } }
.la-p.la-wide { min-width: 62px; }

/* ── v176 · leads table: interest as its own column, one status cell ── */
.ld-int { margin-bottom: 3px; }
.ld-int-t { font-size: 12px; color: var(--t2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ld-int-t.mut { color: var(--t4); font-style: italic; }
.ld-st { font-size: 12px; font-weight: 700; white-space: nowrap; }
.ld-st.good { color: var(--green-a); } .ld-st.warn { color: var(--amber-fg); } .ld-st.bad { color: var(--red-fg); }
.ld-st-sub { font-size: 10.5px; color: var(--t3); margin-top: 2px; white-space: nowrap; }
.ld-owner { max-width: 132px; }

/* ── v177 · notes on the lead list ── */
.ld-notes { cursor: pointer; }
.ld-notes:hover .ld-note-t { color: var(--green-a); }
.ld-note-t { font-size: 12px; color: var(--t2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ld-note-t.none { color: var(--t4); font-style: italic; }
.ld-note-m { font-size: 10.5px; color: var(--t3); margin-top: 3px; white-space: nowrap; }
.ld-note-m.add { color: var(--green-a); font-weight: 700; font-style: normal; }
.ld-ctx { background: #f6f9f7; border: 1px solid var(--bdl); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.ld-conv { max-height: 300px; overflow-y: auto; display: grid; gap: 9px; padding-inline-end: 4px; }
.cv { display: flex; gap: 9px; align-items: flex-start; }
.cv-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.cv-x { flex: 1; min-width: 0; }
.cv-h { display: flex; align-items: baseline; gap: 8px; }
.cv-h b { font-size: 12.5px; }
.cv-h span { margin-inline-start: auto; font-size: 10.5px; color: var(--t3); white-space: nowrap; }
.cv-b { font-size: 12px; color: var(--t2); line-height: 1.5; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
/* a call in the conversation: when, how long, and what was actually said */
.cv-call { margin-top: 4px; }
.cv-call-m { font-size: 11.5px; color: var(--t3); }
.cv-sent { font-weight: 700; } .cv-sent.up { color: var(--green-a, #249f62); } .cv-sent.dn { color: var(--red-fg, #cf1322); }
.cv-sum { font-size: 12.5px; color: var(--t1); line-height: 1.6; margin-top: 6px; padding: 9px 11px;
  background: var(--green-bg, #f3f9f5); border-left: 3px solid var(--green-a, #249f62); border-radius: 0 8px 8px 0; }
.cv-sum.none { color: var(--t3); background: #f7f8f7; border-left-color: var(--bd, #e4ebe7); font-style: italic; }
.cv-call .btn.sm { margin-top: 7px; }
.ld-addnote { color: var(--green-a); border-color: var(--green-bd); font-weight: 700; }
.ld-notes:hover .ld-addnote { background: var(--green-bg); }

/* ── v177 · the call flow ── */
.co-pick { display: grid; gap: 8px; }
.co-pick .co { text-align: start; border: 1px solid var(--bd); background: #fff; border-radius: 13px; padding: 13px 15px; cursor: pointer; font-family: var(--font); transition: border-color .15s, box-shadow .15s, transform .12s; }
.co-pick .co:hover { border-color: var(--green); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.co-pick .co b { display: block; font-size: 14px; }
.co-pick .co span { display: block; font-size: 12px; color: var(--t3); margin-top: 3px; }
.co-l { display: block; font-size: 12px; font-weight: 700; color: var(--t2); margin-bottom: 5px; }
.co-ta { width: 100%; min-height: 128px; border: 1px solid var(--bd); border-radius: 11px; padding: 11px 12px; font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.co-ta:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,159,98,.14); }
.co-temps, .co-when { display: flex; gap: 6px; flex-wrap: wrap; }
#co_when.picked { border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,159,98,.14); }
.ld-day { font-size: 12px; font-weight: 700; color: var(--t2); }
.ld-day-t { font-size: 10.5px; color: var(--t3); margin-top: 2px; }

/* ── v179 · work the list ── */
.wq-bar { height: 4px; border-radius: 3px; background: #eef2ef; overflow: hidden; margin-bottom: 14px; }
.wq-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); transition: width .25s var(--ease); }
.wq-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.wq-who { flex: 1; min-width: 200px; }
.wq-name { font-family: var(--font-disp); font-size: 21px; font-weight: 800; letter-spacing: -0.4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wq-meta { font-size: 12px; color: var(--t3); margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wq-touch { font-size: 11.5px; font-weight: 700; border-radius: 20px; padding: 5px 11px; white-space: nowrap; }
.wq-touch.ok { background: var(--green-bg); color: var(--green-a); }
.wq-touch.wait { background: var(--amber-bg); color: var(--amber-fg); }
.wq-want { margin-top: 14px; background: #f6f9f7; border: 1px solid var(--bdl); border-radius: 12px; padding: 11px 14px; display: flex; align-items: baseline; gap: 10px; }
.wq-want span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.wq-want b { font-size: 15px; }
.wq-brief { font-size: 12px; color: var(--t3); margin-top: 8px; line-height: 1.55; }
.wq-reach { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.wq-r { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--bd); border-radius: 12px; padding: 11px 15px; text-decoration: none; color: var(--t1); font-weight: 700; font-size: 13.5px; background: #fff; transition: border-color .15s, transform .12s; }
.wq-r:hover { border-color: var(--green); transform: translateY(-1px); }
.wq-r i { font-style: normal; font-size: 15px; }
.wq-conv { margin-top: 14px; display: grid; gap: 6px; max-height: 150px; overflow-y: auto; }
.wq-c { font-size: 12px; color: var(--t2); line-height: 1.45; }
.wq-c b { color: var(--t1); }
.wq-c span { color: var(--t4); font-size: 10.5px; }
@media (max-width: 640px) { .wq-name { font-size: 18px; } .wq-r { flex: 1; justify-content: center; } }

/* ── v181: the lead row's actions read as one row, not a staircase ─────────
   Call and Qualify used to sit in two blocks stacked above each other, with a
   red-boxed ☎️ that no font on the box could draw. One flex row, the line icon
   the rest of the CRM uses, and one weight of emphasis: Call is the next action,
   Qualify is available. */
.acts .btn.sm.ld-act { height: 27px; padding: 0 11px; font-size: 12px; font-weight: 650; }
.acts .btn.sm.ld-call { gap: 5px; padding-inline: 9px 11px; }
.acts .btn.sm.ld-call svg { width: 13px; height: 13px; flex: none; }
.acts .btn.sm.ld-act.primary { box-shadow: 0 1px 3px rgba(36, 159, 98, .35); }
.acts .btn.sm.more { height: 27px; }
table.tbl td:has(.acts) { white-space: nowrap; }

/* ── v181: tasks on a lead ─────────────────────────────────────────────────
   Four columns, the ones a floor reads across: what to do · the remark · who
   owes it · when. A tick closes it. Nothing else — priority flags and
   sub-statuses are what make task lists stop being used. */
.tk-box { margin-top: 14px; border: 1px solid var(--bdl); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.tk-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--bdl); background: #fbfdfc; }
.tk-head b { font-size: 12.5px; }
.tk-n { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: var(--amber-bg); color: var(--amber-fg); }
.tk-head .grow { flex: 1; }
.tk-list { display: flex; flex-direction: column; }
.tk-row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 9px; align-items: start; padding: 9px 11px; border-bottom: 1px solid var(--bdl); }
.tk-row:last-child { border-bottom: 0; }
.tk-row.is-done { background: #fcfdfc; }
.tk-row.is-done .tk-t { color: var(--t3); text-decoration: line-through; }
.tk-tick { width: 19px; height: 19px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--bd); background: #fff; cursor: pointer;
  font-size: 12px; font-weight: 800; color: var(--green-a); line-height: 1; display: grid; place-items: center; }
.tk-tick:hover { border-color: var(--green); background: var(--green-bg); }
.tk-row.is-done .tk-tick { background: var(--green-bg); border-color: var(--green-bd); }
.tk-t { font-size: 12.5px; font-weight: 650; display: flex; gap: 6px; align-items: baseline; }
.tk-t i { font-style: normal; opacity: .75; }
.tk-r { font-size: 11.5px; color: var(--t2); margin-top: 2px; line-height: 1.45; }
.tk-who { font-size: 11.5px; color: var(--t2); white-space: nowrap; max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
.tk-due { font-size: 11.5px; color: var(--t3); white-space: nowrap; font-weight: 600; }
.tk-due.now { color: var(--green-a); }
.tk-due.late { color: var(--red-fg); }
.tk-due.done { color: var(--t4); font-weight: 500; }
.tk-sep { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--t4); font-weight: 800; padding: 7px 11px 4px; background: #fbfdfc; border-bottom: 1px solid var(--bdl); }
.tk-empty { padding: 14px 12px; font-size: 12px; color: var(--t3); }
.tk-calls { border-top: 1px solid var(--bdl); padding: 10px 11px; background: #fbfdfc; }
.tk-calls > b { font-size: 12px; display: block; margin-bottom: 6px; }
.tk-call { font-size: 11.5px; padding: 7px 0; border-bottom: 1px dashed var(--bdl); }
.tk-call:last-child { border-bottom: 0; }
.tk-sum { font-size: 11.5px; color: var(--t2); line-height: 1.5; margin-top: 3px; }
.lnk { border: 0; background: none; padding: 0; font: inherit; color: var(--green-a); font-weight: 650; cursor: pointer; text-decoration: underline; }

/* the new-task dialog: pick what, pick when, say why */
.tk-l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); margin: 12px 0 6px; }
.tk-l:first-child { margin-top: 0; }
.tk-kinds, .tk-when { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-k { border: 1px solid var(--bd); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--t1); }
.tk-k:hover { border-color: var(--green-bd); background: var(--green-bg); }
.tk-k.on { background: var(--green); border-color: var(--green); color: #fff; }
.tk-when input[type=date] { border: 1px solid var(--bd); border-radius: 9px; padding: 6px 9px; font: inherit; font-size: 12.5px; }

/* the next step, booked from inside the notes dialog */
.ld-plan { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line, #e4ebe7); }
.ld-plan-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.ld-plan-h b { font-size: 12.5px; }
.ld-plan-h .mut, .ld-plan-open { font-size: 11.5px; }
.ld-plan-open { background: var(--amber-bg, #fff7e6); color: var(--amber-fg, #ad6800); border-radius: 99px; padding: 2px 9px; font-weight: 600; }
.ld-plan-kinds { margin-bottom: 7px; }
.ld-plan-kinds .tk-k, .ld-plan-when .tk-k { padding: 5px 10px; font-size: 12px; }
.ld-plan-when input[type=time] { border: 1px solid var(--bd); border-radius: 9px; padding: 6px 9px; font: inherit; font-size: 12.5px; width: 104px; }
.ld-plan-go { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ld-plan-go .mut { font-size: 11.5px; }
.tk-new textarea { width: 100%; border: 1px solid var(--bd); border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 13px; resize: vertical; }
.tk-tr { max-height: 60vh; overflow: auto; }
.tk-line { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bdl); font-size: 12.5px; }
.tk-line b { color: var(--green-a); font-size: 11.5px; }
.tk-raw { white-space: pre-wrap; font: inherit; font-size: 12.5px; line-height: 1.6; color: var(--t1); }

/* attaching a pseudonymised call to the lead a person knows it belongs to */
.cl-sugg { border: 1px dashed var(--blue-fg); background: var(--blue-bg); color: var(--blue-fg); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.cl-sugg:hover { background: #dbe8fb; }
.ca-list { max-height: 52vh; overflow: auto; margin-top: 10px; border: 1px solid var(--bdl); border-radius: 10px; }
.ca-row { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; width: 100%; text-align: start; border: 0; border-bottom: 1px solid var(--bdl);
  background: #fff; padding: 9px 11px; cursor: pointer; font: inherit; }
.ca-row:last-child { border-bottom: 0; }
.ca-row:hover { background: var(--green-bg); }
.ca-row b { font-size: 13px; }
.ca-row .mut { font-size: 11.5px; }
.tk-t i svg, .tk-k svg { width: 14px; height: 14px; vertical-align: -2px; opacity: .78; }
.tk-k { display: inline-flex; align-items: center; gap: 6px; }
.tk-k.on svg { opacity: 1; }

/* the quote line's name is the wording the customer reads, so it is editable */
.qline .q-name { margin-top: 6px; width: 100%; height: 32px; border: 1px solid var(--bd); border-radius: 8px;
  padding: 0 9px; font: inherit; font-size: 12.5px; background: #fff; }
.qline .q-name:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(36, 159, 98, .12); }

/* ── v183: the proposal builder's lines are the seller's words, so they are editable ──
   Name and description are inputs now, and typing in them no longer re-renders the table
   (which used to throw the caret out of the field after every keystroke). */
.pb-t .pb-txt { min-width: 0; flex: 1; }
.pb-t .pb-name { width: 100%; font: inherit; font-size: 14px; font-weight: 700; color: var(--t1);
  border: 1px solid transparent; border-radius: 7px; padding: 3px 6px; margin: -3px 0 0 -6px; background: transparent; }
.pb-t .pb-name:hover { border-color: var(--bdl); background: #fff; }
.pb-t .pb-name:focus { border-color: var(--green); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(36, 159, 98, .12); }
.pb-t .pb-desc { width: 100%; font: inherit; font-size: 11.5px; line-height: 1.5; color: var(--t2); resize: vertical;
  border: 1px solid transparent; border-radius: 7px; padding: 3px 6px; margin: 2px 0 0 -6px; background: transparent; }
.pb-t .pb-desc:hover { border-color: var(--bdl); background: #fff; }
.pb-t .pb-desc:focus { border-color: var(--green); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(36, 159, 98, .12); }
.pb-t .pb-txt .ar { display: block; font-size: 11.5px; color: var(--t3); margin: 0 0 1px 0; }

/* the quote line carries its own description, which travels to the proposal */
.qline .q-desc { margin-top: 5px; width: 100%; border: 1px solid var(--bd); border-radius: 8px;
  padding: 6px 9px; font: inherit; font-size: 12px; line-height: 1.5; color: var(--t2); resize: vertical; background: #fff; }
.qline .q-desc:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(36, 159, 98, .12); }

/* ── v184: the quote and its proposal each name the other, one click apart ── */
.lnk-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; border: 1px solid var(--green-bd);
  background: var(--green-bg); color: var(--green-a); border-radius: 99px; padding: 2px 9px 2px 7px;
  font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; letter-spacing: .01em; }
.lnk-chip:hover { background: #dcf0e6; border-color: var(--green); }
.lnk-chip svg { width: 11px; height: 11px; }
.lnk-chip.mk { border-style: dashed; border-color: var(--bd); background: transparent; color: var(--t3); }
.lnk-chip.mk:hover { border-color: var(--green-bd); color: var(--green-a); background: var(--green-bg); }

/* ── v186: how interested the lead is, set on the row or in the panel ── */
.ld-pct { height: 28px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; font: inherit;
  font-size: 12px; font-weight: 700; color: var(--t3); padding: 0 4px 0 7px; cursor: pointer; }
.ld-pct.set { color: var(--green-a); border-color: var(--green-bd); background: var(--green-bg); }
.ld-pct:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36, 159, 98, .12); }

/* the proposal builder's commercial terms */
.pb-terms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.pb-terms label { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); font-weight: 700; }
.pb-terms input { width: 100%; margin-top: 4px; height: 32px; border: 1px solid var(--bd); border-radius: 8px;
  padding: 0 9px; font: inherit; font-size: 13px; font-weight: 600; color: var(--t1); background: #fff; }
.pb-terms input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36, 159, 98, .12); }

/* a deal shows the conversation that happened before it was a deal */
.tl-item.from-lead .tl-dot { box-shadow: 0 0 0 3px rgba(36, 159, 98, .13); }
.tl-src { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-a); background: var(--green-bg); border-radius: 99px; padding: 1px 7px; margin-inline-start: 7px; }
.tl-calls { border-top: 1px solid var(--bdl); margin-top: 12px; padding-top: 11px; }
.tl-calls > b { font-size: 12.5px; display: block; margin-bottom: 7px; }
.tl-call { font-size: 12px; padding: 7px 0; border-bottom: 1px dashed var(--bdl); }
.tl-call:last-child { border-bottom: 0; }
.tl-sum { font-size: 11.5px; color: var(--t2); line-height: 1.55; margin-top: 3px; }

/* ── v188: the opportunity's next conversation, and the notes behind it ── */
.card.fup h3 { margin-bottom: 10px; }
.fup-new { display: grid; grid-template-columns: minmax(150px, 190px) 1fr auto; gap: 8px; align-items: center; }
.fup-new input { height: 34px; border: 1px solid var(--bd); border-radius: 9px; padding: 0 10px; font: inherit; font-size: 13px; background: #fff; }
.fup-new input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36, 159, 98, .12); }
.fup-set { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fup-when b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.fup-when span { display: block; font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.fup-set .fup-note { flex: 1 1 200px; font-size: 12.5px; color: var(--t2); line-height: 1.5; }
.fup-act { display: flex; gap: 6px; margin-inline-start: auto; }
.card.fup:has(.fup-when b:not(:empty)) { border-inline-start: 3px solid var(--amber); }
.dn-new { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-bottom: 12px; }
.dn-new textarea { width: 100%; border: 1px solid var(--bd); border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 13px; resize: vertical; }
.dn-new textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36, 159, 98, .12); }
.dn-list { display: flex; flex-direction: column; }
.dn { padding: 10px 0; border-top: 1px solid var(--bdl); }
.dn:first-child { border-top: 0; }
.dn-t { font-size: 13px; line-height: 1.55; color: var(--t1); white-space: pre-wrap; }
.dn-m { font-size: 11px; color: var(--t3); margin-top: 3px; }
@media (max-width: 760px) { .fup-new { grid-template-columns: 1fr; } .dn-new { grid-template-columns: 1fr; } }

/* the next conversation, on the board and in the list */
.dc-fup { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 10.5px; font-weight: 700;
  color: var(--amber-fg); background: var(--amber-bg); border: 1px solid #f0dcae; border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
/* the booked site visit, on the card and in the table — the most concrete "what happens next" */
.dc-visit { display: flex; align-items: center; gap: 5px; margin: 6px 0 2px; font-size: 11.5px; font-weight: 700;
  background: var(--blue-bg, #eef4fd); color: var(--blue-fg, #1d5fbf); border-radius: 7px; padding: 5px 8px; }
.dc-visit.soon { background: var(--green-bg, #eaf6f0); color: var(--green-a, #249f62); }
.vs-btns { display: flex; gap: 6px; flex: none; align-items: center; }
.dc-fup.late { color: var(--red-fg); background: var(--red-bg); border-color: #f3c9c7; }
.cl-agents .num { text-align: right; }

/* the lead's own details are editable in place */
.ld-edit { width: 100%; height: 30px; border: 1px solid transparent; border-radius: 8px; padding: 0 8px;
  font: inherit; font-size: 12.5px; color: var(--t1); background: transparent; margin: -3px -8px; }
.ld-edit:hover { border-color: var(--bdl); background: #fff; }
.ld-edit:focus { border-color: var(--green); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(36, 159, 98, .12); }
.ld-edit.name { font-size: 14px; font-weight: 700; height: 34px; }

/* ── v189: Work the list is a focus mode ─────────────────────────────────────
   One lead, the whole screen, and the keyboard. The rest of the CRM is not
   dimmed behind it — it is out of the way entirely, because the point of the
   queue is that there is nothing else to look at. */
body.wq-on { overflow: hidden; }
#modals .overlay.wq-focus { background: rgba(6, 26, 17, .93); backdrop-filter: blur(10px); padding: 0; }
#modals .overlay.wq-focus .modal { width: min(760px, 100%); max-width: 760px; max-height: 100vh; height: 100vh;
  border-radius: 0; box-shadow: none; display: flex; flex-direction: column; margin: 0 auto; }
#modals .overlay.wq-focus .modal-h { padding: 20px 28px 14px; font-size: 15px; letter-spacing: .02em; }
#modals .overlay.wq-focus .modal-b { padding: 0 28px 20px; flex: 1 1 auto; overflow-y: auto; }
#modals .overlay.wq-focus .modal-f { padding: 14px 28px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bdl); background: #fff; flex-wrap: wrap; gap: 8px; }
#modals .overlay.wq-focus .wq-name { font-size: 26px; letter-spacing: -.02em; }
#modals .overlay.wq-focus .wq-want b { font-size: 17px; }
.wq-keys { font-size: 11px; color: var(--t3); letter-spacing: .03em; margin-inline-end: auto; white-space: nowrap; }
@media (max-width: 760px) {
  #modals .overlay.wq-focus .modal-h, #modals .overlay.wq-focus .modal-b { padding-inline: 16px; }
  #modals .overlay.wq-focus .modal-f { padding-inline: 16px; }
  #modals .overlay.wq-focus .wq-name { font-size: 21px; }
  .wq-keys { display: none; }
}

/* AI call analysis — what the call told us, read at a glance */
.ca { border: 1px solid var(--bd); border-radius: 12px; background: #fbfdfc; padding: 11px 13px; margin: 8px 0; }
.ca-sm { padding: 9px 11px; margin: 6px 0; }
.ca-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ca-h b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); margin-inline-end: auto; }
.ca-t { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--green-bg); color: var(--green-a); }
.ca-t.warn { background: var(--amber-bg); color: var(--amber-fg); }
.ca-t.bad { background: var(--red-bg); color: var(--red-fg); }
.ca-t.mut { background: #eef1ef; color: var(--t3); }
.ca-why { font-size: 12.5px; color: var(--t2); margin-top: 7px; line-height: 1.5; }
.ca-sum { font-size: 13px; color: var(--t1); margin-top: 9px; line-height: 1.6; }
.ca-sum i, .ca-obj i { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t4); margin-bottom: 3px; }
.ca-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ca-f { font-size: 12px; background: #fff; border: 1px solid var(--bd); border-radius: 8px; padding: 5px 9px; color: var(--t1); }
.ca-f i { font-style: normal; color: var(--t4); margin-inline-end: 5px; font-size: 11px; }
.ca-obj { margin-top: 10px; }
.ca-obj span { display: inline-block; font-size: 11.5px; background: var(--amber-bg); color: var(--amber-fg); border-radius: 7px; padding: 3px 8px; margin: 0 5px 4px 0; font-weight: 600; }
.ca-next { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--green-a); }

/* Interest % — the one measure of how likely a lead is, in place of Hot / Warm / Cold */
.pct-tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; vertical-align: 1px; }
.pct-tag.hot  { background: var(--green-bg); color: var(--green-a); }
.pct-tag.warm { background: var(--amber-bg); color: var(--amber-fg); }
.pct-tag.cool { background: #eef1ef; color: var(--t3); }
.pct-tag.mut  { background: #f4f6f5; color: var(--t4); font-weight: 600; }
.co-temps { display: flex; flex-wrap: wrap; gap: 8px; }

/* Closing read — the salesperson's figure against what the call itself suggests */
.aii { border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; margin-top: 10px; background: #fbfdfc; }
.aii.agree { border-color: rgba(36,159,98,.35); background: var(--green-bg); }
.aii.under { border-color: rgba(183,121,31,.35); background: var(--amber-bg); }
.aii.over  { border-color: rgba(192,57,43,.30); background: #fdf3f2; }
.aii.none  { background: #f7f9f8; }
.aii-h { display: flex; align-items: baseline; gap: 8px; }
.aii-h b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.aii-h .mut { font-size: 11px; }
.aii-nums { display: flex; align-items: center; gap: 12px; margin: 9px 0 2px; flex-wrap: wrap; }
.aii-n { display: flex; flex-direction: column; }
.aii-n i { font-style: normal; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--t4); }
.aii-n b { font-family: var(--font-disp); font-size: 22px; letter-spacing: -.5px; color: var(--t1); }
.aii-n.ai b { color: var(--green-a); }
.aii-gap { font-size: 12px; font-weight: 700; color: var(--t3); background: #fff; border: 1px solid var(--bd); border-radius: 999px; padding: 3px 10px; }
.aii-why { font-size: 12.5px; color: var(--t2); line-height: 1.55; margin-top: 6px; }
/* whose number the manual one is — named, with when it was set */
.aii-who { font-size: 12px; color: var(--t2); margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,.08); }
.aii-who b { color: var(--t1); font-weight: 700; }
.aii-base { font-size: 12px; color: var(--t2); margin-top: 6px; }
.aii-f { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.aii-f span { font-size: 11.5px; border-radius: 7px; padding: 3px 8px; cursor: help; font-weight: 600; }
.aii-f .up { background: var(--green-bg); color: var(--green-a); }
.aii-f .dn { background: var(--red-bg); color: var(--red-fg); }
.aii-hint { font-size: 11px; color: var(--t4); margin-top: 7px; }

/* the last thing a person said, on the opportunity card */
/* the last thing said, as one quiet line under the numbers — a quote, not a log dump */
/* The last thing anyone said, as a quiet quotation — not a grey box taking half the card.
   It was the single heaviest thing on the board and it is the least urgent. */
.dc-note { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(8, 36, 24, .06);
  font-size: 11.5px; color: var(--t3); line-height: 1.5; }
.dc-note i { font-style: normal; font-weight: 700; color: var(--t2); font-size: 10.5px; }
.dc-note em { font-style: normal; color: var(--t4); font-size: 10.5px; margin-inline-start: 6px; }
.dc-note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px; color: var(--t2); }

/* ── the board, tidied (owner: "it is so shabby"). Four things were doing it:
   the meta row wrapped onto a second line, the note was a heavy box, every column
   showed a scrollbar, and the numbers were in three different formats. ── */
.dcard .foot { justify-content: space-between; gap: 8px; }
.dcard .v { font-size: 15px; letter-spacing: -0.3px; }
.dcard .o { margin-inline-start: 0; }
.dc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.dc-meta:empty { display: none; }
.dcard .src { margin-inline-start: 0; }
.dcard { padding: 13px 14px 12px; border-radius: 14px; margin-bottom: 10px; }
.dcard .u { margin: 3px 0 9px; line-height: 1.45; }
.dcard:hover { transform: translateY(-2px); }
/* a scrollbar on every column is four grey bars across the board */
.board .col { scrollbar-width: thin; scrollbar-color: rgba(8,36,24,.14) transparent; }
.board .col::-webkit-scrollbar { width: 6px; }
.board .col::-webkit-scrollbar-thumb { background: rgba(8,36,24,.12); border-radius: 3px; }
.board .col::-webkit-scrollbar-thumb:hover { background: rgba(8,36,24,.22); }
.board .col::-webkit-scrollbar-track { background: transparent; }

/* the call's own actions — download the recording, read the transcript */
.tk-call-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.tk-call-acts .lnk { font-size: 12px; }

/* why a lead is being discarded — a fixed list, so the answers can be counted */
.dq-reasons { display: flex; flex-wrap: wrap; gap: 7px; }
.dq-reasons .tk-k { font-size: 12.5px; }
.dq-reasons .tk-k.on { background: var(--red-bg, #fff1f0); border-color: var(--red-fg, #cf1322); color: var(--red-fg, #cf1322); font-weight: 700; }

/* ── the dashboard's leads overview: the journey, the channels, the discards, the stages ── */
.lp-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line, #e4ebe7); }
.lp-sub { font-size: 11px; font-weight: 700; color: var(--t3); margin-bottom: 7px; }

.lp-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lp-fstep { position: relative; }
.lp-fbar { height: 7px; border-radius: 4px; background: #eef2ef; overflow: hidden; margin-bottom: 7px; }
.lp-fbar i { display: block; height: 100%; background: var(--green-a, #249f62); border-radius: 4px; }
.lp-fstep.none .lp-fbar i { background: var(--bd, #d7e0da); }
.lp-fmeta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lp-fmeta b { font-size: 21px; font-weight: 800; color: var(--t1); line-height: 1; }
.lp-fmeta span { font-size: 12px; color: var(--t2); }
.lp-fmeta em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--green-a, #249f62); }
.lp-fdrop { display: block; font-size: 10.5px; color: var(--t4); margin-top: 3px; }

/* A note is shown as it was written — line breaks kept, long words wrapped, never clipped. */
.dn-full, .tl-d, .cv-b { white-space: pre-wrap; overflow-wrap: anywhere; }
.ldf-scope { font-style: normal; text-transform: capitalize; color: var(--red-fg, #cf1322);
  background: var(--red-bg, #fff1f0); border-radius: 5px; padding: 0 5px; margin-inline-start: 3px; }
.lp-r .v em { font-style: normal; font-weight: 600; color: var(--t3); font-size: 11px; margin-inline-start: 4px; }
.lp-note { font-size: 12px; line-height: 1.55; color: var(--t2); background: #f6f9f7;
  border: 1px solid #e6efe9; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.lp-note b { color: var(--t1); } .lp-note em { font-style: normal; color: var(--t3); }
.lp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lp-scroll .lp-tbl { min-width: 520px; }
.lp-share { display: inline-block; width: 64px; vertical-align: middle; }
@media (max-width: 560px) { .lp-share { display: none; } .lp-scroll .lp-tbl { min-width: 460px; } }
.lp-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lp-tbl th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t3); font-weight: 700; padding: 0 8px 7px 0; border-bottom: 1px solid var(--line, #e4ebe7); }
.lp-tbl th:not(:first-child), .lp-tbl td.n { text-align: right; }
.lp-tbl td { padding: 7px 8px 7px 0; border-bottom: 1px solid #f3f6f4; }
.lp-tbl tr:last-child td { border-bottom: none; }
.lp-tbl tr.clickable:hover { background: #f7faf8; cursor: pointer; }
.lp-tbl td.n { font-variant-numeric: tabular-nums; font-weight: 700; }
.lp-tbl td.n em { font-style: normal; font-weight: 600; color: var(--t3); font-size: 11px; margin-inline-start: 3px; }
.lp-tbl td.good { color: var(--green-a, #249f62); } .lp-tbl td.warn { color: var(--amber-fg, #ad6800); }
.lp-tbl td.bad { color: var(--red-fg, #cf1322); }

.lp-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.lp-stage { border: 1px solid var(--line, #e4ebe7); border-top: 3px solid var(--sc); border-radius: 12px; padding: 12px 13px; background: #fff; }
.lp-stage.clickable { cursor: pointer; } .lp-stage.clickable:hover { box-shadow: var(--shadow-sm); }
.lp-stage-h { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.lp-stage-h .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); flex: none; }
.lp-stage-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-stage-h i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--t3); }
.lp-stage-n { font-size: 26px; font-weight: 800; line-height: 1.2; margin-top: 6px; }
.lp-stage-v { font-size: 13px; font-weight: 700; color: var(--t2); font-variant-numeric: tabular-nums; }
.lp-stage-w { font-size: 11px; color: var(--t3); margin-top: 2px; }
@media (max-width: 900px) { .lp-funnel, .lp-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── the leads filters: one question per group, each with its name above it ── */
.ld-toolbar.ldf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; }
.ldf-g { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ldf-l { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); }
.ldf-l.ldf-inline { align-self: center; margin-inline-end: 2px; }
.ldf-search { flex: 1 1 260px; min-width: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.ldf-search .finput { width: 100%; }
.ldf-g select.finput { width: auto; max-width: 210px; }
.ldf-end { display: flex; align-items: flex-end; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; }
.ldf-clear { color: var(--red-fg, #cf1322); border-color: rgba(201,42,47,.3); font-weight: 700; }
.ldf-clear:hover { background: var(--red-bg, #fff1f0); border-color: var(--red-fg, #cf1322); }
@media (max-width: 900px) {
  .ld-toolbar.ldf { gap: 10px 12px; }
  .ldf-end { margin-inline-start: 0; width: 100%; }
  .ldf-g, .ldf-search { flex-basis: 100%; }
}

/* the three standings, drawn rather than typed — an emoji is an empty box on a machine
   without the font, which is exactly what the welcome email taught us */
.segb .sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 6px; vertical-align: 1px; }
.segb .sdot.red { background: var(--red-fg, #cf1322); }
.segb .sdot.amber { background: var(--amber-fg, #ad6800); }
.segb .sdot.green { background: var(--green-a, #249f62); }
.segb.on .sdot { background: #fff; }

/* ── Leads: the executive card (.lx) ─────────────────────────────────────────────────────
   One hue for magnitude (the green ramp), thin marks with rounded data-ends, words beside
   every state colour, proportional figures on the hero, tabular only in table columns. */
.card.lx { margin-bottom: 16px; }
.lx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lx-head h3 { margin: 0; }
.lx-sub-h { font-size: 12.5px; color: var(--t2); margin-top: 3px; }
.lx-seg { display: inline-flex; background: #eef3f0; border: 1px solid var(--bdl); border-radius: 999px; padding: 3px; gap: 2px; }
.lx-seg button { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--t2); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.lx-seg button.on { background: #fff; color: var(--t1); box-shadow: var(--shadow-sm); }
.lx-hero { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: 22px; align-items: start; padding: 6px 0 4px; }
.lx-hero-fig { border-radius: 14px; padding: 4px 0; }
.lx-hero-fig.clickable { cursor: pointer; }
.lx-n { font-family: var(--font); font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--t1); font-variant-numeric: normal; }
.lx-nl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); font-weight: 700; margin-top: 8px; }
.lx-lede { font-size: 15px; line-height: 1.6; color: var(--t1); margin: 2px 0 12px; max-width: 72ch; }
.lx-lede b, .lx-read b { font-weight: 700; }
.lx-strip { display: flex; align-items: flex-end; gap: 2px; height: 44px; max-width: 420px; }
.lx-strip i { flex: 1 1 0; max-width: 24px; min-height: 2px; background: #b8dfc9; border-radius: 3px 3px 0 0; }
.lx-strip i.now { background: var(--green-a); }
.lx-fine { font-size: 11.5px; color: var(--t3); margin-top: 6px; line-height: 1.5; }
.lx-fine b { color: var(--t2); }
.lx-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bdl); }
.lx-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lx-sec-h h4 { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--t1); letter-spacing: -.01em; }
.lx-sec-h span { font-size: 12px; color: var(--t3); }
.lx-read { font-size: 13.5px; line-height: 1.55; color: var(--t2); margin: 0 0 12px; max-width: 80ch; }
.lx-read .bad, .lx-lost .bad, .lx-row .bad, .lx-tile .s .bad { color: var(--red-fg); font-style: normal; }
.lx-journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lx-step { min-width: 0; }
.lx-step.clickable { cursor: pointer; }
.lx-step-h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; min-height: 44px; align-content: flex-end; }
.lx-step-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--t2); }
.lx-step-h b { font-size: 24px; font-weight: 800; line-height: 1; color: var(--t1); font-variant-numeric: normal; }
.lx-step-h em { font-style: normal; font-size: 11.5px; color: var(--t3); font-weight: 600; }
.lx-bar { height: 8px; border-radius: 4px; background: #edf2ef; overflow: hidden; }
.lx-bar i { display: block; height: 100%; background: var(--green-a); border-radius: 0 4px 4px 0; }
.lx-step.zero .lx-bar i { background: var(--bd); }
.lx-step-n { font-size: 11.5px; color: var(--t3); margin-top: 6px; }
.lx-lost { font-size: 12.5px; color: var(--t2); margin-top: 12px; line-height: 1.55; }
.lx-lost b { color: var(--t1); }
.lx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lx-tile { background: #f6f9f7; border: 1px solid var(--bdl); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lx-tile.clickable { cursor: pointer; } .lx-tile.clickable:hover { background: #eef5f1; }
.lx-tile .l { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); font-weight: 700; }
.lx-tile > b { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--t1); font-variant-numeric: normal; }
.lx-tile > b.good { color: var(--green-a); } .lx-tile > b.warn { color: var(--amber-fg); } .lx-tile > b.bad { color: var(--red-fg); }
.lx-tile .s b { font-size: inherit; font-weight: 700; }
.lx-tile .s { font-size: 11.5px; color: var(--t2); line-height: 1.45; }
.lx-tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.lx-tbl th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); font-weight: 700; padding: 0 8px 8px 0; border-bottom: 1px solid var(--bdl); }
.lx-tbl th:not(:first-child), .lx-tbl td.n { text-align: right; }
.lx-tbl td { padding: 9px 8px 9px 0; border-bottom: 1px solid #f1f5f2; vertical-align: top; }
.lx-tbl tr:last-child td { border-bottom: 0; }
.lx-tbl tr.clickable:hover { background: #f7faf8; cursor: pointer; }
.lx-tbl td.n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--t1); white-space: nowrap; }
.lx-tbl td.n em { font-style: normal; font-weight: 600; color: var(--t3); font-size: 11px; margin-inline-start: 4px; }
.lx-sub { font-size: 11px; color: var(--t3); font-weight: 500; margin-top: 2px; }
.lx-share { display: inline-block; width: 72px; height: 6px; border-radius: 3px; background: #edf2ef; vertical-align: middle; overflow: hidden; }
.lx-share i { display: block; height: 100%; background: var(--green-a); border-radius: 0 3px 3px 0; }
.lx-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lx-col-h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); font-weight: 700; margin-bottom: 8px; }
.lx-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 4px 0; }
.lx-row.clickable { cursor: pointer; }
.lx-row .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--t1); }
.lx-row .k.none { color: var(--amber-fg); }
.lx-row .b { height: 6px; border-radius: 3px; background: #edf2ef; overflow: hidden; }
.lx-row .b i { display: block; height: 100%; background: var(--green-a); border-radius: 0 3px 3px 0; }
.lx-row .v { white-space: nowrap; color: var(--t2); font-variant-numeric: tabular-nums; }
.lx-row .v b { color: var(--t1); }
.lx-row .v em { font-style: normal; color: var(--t3); font-size: 11px; margin-inline-start: 3px; }
.lx-row:has(.v):not(:has(.b)) { grid-template-columns: minmax(0, 1fr) auto; }
.lx-method { margin-top: 18px; font-size: 11.5px; line-height: 1.55; color: var(--t3); background: #f6f9f7; border: 1px solid var(--bdl); border-radius: 10px; padding: 9px 12px; }
.lx-method b { color: var(--t2); }
@media (max-width: 900px) {
  .lx-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-tiles, .lx-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lx-hero { grid-template-columns: 1fr; gap: 12px; }
  .lx-n { font-size: 48px; }
  .lx-journey { grid-template-columns: 1fr; gap: 12px; }
  .lx-seg button { padding: 5px 10px; font-size: 12px; }
}

/* The client on an opportunity — who, and how to reach them, before anything else. */
.card.dc-contact { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 1fr) minmax(170px, 1.2fr) auto; gap: 18px; align-items: center; padding: 16px 20px; margin-bottom: 14px; }
.card.dc-contact.none { display: block; color: var(--t3); font-size: 13px; }
.dc-c-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dc-c-av { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--green-bg); color: var(--green-a); font-weight: 800; font-size: 17px; }
.dc-c-k { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--t3); font-weight: 700; margin-bottom: 2px; }
.dc-c-n { font-size: 17px; font-weight: 800; color: var(--t1); }
.dc-c-s { font-size: 12px; color: var(--t2); margin-top: 1px; }
.dc-c-f { min-width: 0; }
.dc-c-v { font-size: 14.5px; font-weight: 700; color: var(--t1); text-decoration: none; overflow-wrap: anywhere; }
.dc-c-v:hover { color: var(--green-a); text-decoration: underline; }
.dc-c-a { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1100px) { .card.dc-contact { grid-template-columns: 1fr 1fr; } .dc-c-who, .dc-c-a { grid-column: 1 / -1; } .dc-c-a { justify-content: flex-start; } }
@media (max-width: 560px) { .card.dc-contact { grid-template-columns: 1fr; } }

/* v193 — Discarded tab: where the lead was discarded from */
.ld-disc { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 5px; font-size: 11.5px; }
.ld-disc-from { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--bg2, #f1f3f2); color: var(--t2, #4b5563); font-weight: 700; font-size: 11px; white-space: nowrap; }
.ld-disc-from.pipe { background: var(--red-bg); color: var(--red-fg); }
.ld-disc-why { color: var(--t3, #6b7280); }
.dcard .qa button.qa-lost:hover { border-color: var(--red-fg); color: var(--red-fg); background: var(--red-bg); }

/* v194 — the call recording downloads from the Leads row */
.ld-rec-line { margin: 3px 0 2px; }
.ld-rec-dl { display: inline-flex; align-items: center; padding: 0 7px; height: 19px; border-radius: 999px; border: 1px solid var(--bd); background: #fff;
  color: var(--green-a); font-size: 10.5px; font-weight: 700; text-decoration: none; white-space: nowrap; vertical-align: 1px; }
.ld-rec-dl:hover { border-color: var(--green); background: var(--green-bg); }

/* v195 — the Leads card's outlook strip (same five readings as the Leads Dashboard) */
.lx-outlook { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lx-ol { border: 1px solid var(--bdl); border-top: 3px solid var(--t3); border-radius: 12px; padding: 10px 12px; background: #fbfcfb; min-width: 0; }
.lx-ol b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.lx-ol span { display: block; font-size: 12.5px; font-weight: 700; margin-top: 2px; } .lx-ol em { display: block; font-style: normal; font-size: 11px; color: var(--t3); margin-top: 2px; line-height: 1.35; }
.lx-ol.o-soon { border-top-color: var(--green-a); } .lx-ol.o-possible { border-top-color: #2a78d6; } .lx-ol.o-unclear { border-top-color: var(--amber-fg); } .lx-ol.o-unreached { border-top-color: var(--red-fg); } .lx-ol.o-unlikely { border-top-color: #b4bfb9; }
@media (max-width: 900px) { .lx-outlook { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gsearch input { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* nav labels: full name on desktop, short one (.ls) only in the phone app — see NAV_SHORT */
.sider .ls { display: none; }

/* v198 — a one-column board must size to its cards. The desktop board is a fixed-height scroller
   (calc(100vh − 252px), min 430px); stacked into one column on a phone that height squeezed the
   four stage columns into it and drew them on top of each other. */
@media (max-width: 900px) {
  .board, .board.board4 { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; align-content: start; }
  .board.board4 .col { max-height: none !important; overflow: visible !important; }
}