/* Relay CRM — design system. Teal-ink accent, cool neutrals, light + dark. */
:root {
  --accent: #0f6f78;
  --accent-ink: #0a4c53;
  --accent-soft: #e0f0f1;
  --accent-hover: #0c5a62;

  --bg: #f3f5f7;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --sidebar: #10242a;
  --sidebar-ink: #c7d3d6;
  --sidebar-ink-dim: #7d9095;
  --sidebar-active: #163840;

  --ink: #16211f;
  --ink-soft: #4a555c;
  --ink-faint: #7c8892;
  --line: #dce1e6;
  --line-soft: #e9edf0;

  --s-unassigned: #8b95a3;
  --s-new: #2f6fd6;
  --s-contacted: #6a5acd;
  --s-qualified: #c98a12;
  --s-converted: #2e8b57;
  --s-lost: #c04a3d;
  --s-won: #2e8b57;

  --good: #2e8b57; --warn: #c98a12; --bad: #c04a3d;

  --radius: 8px; --radius-lg: 12px; --radius-sm: 5px;
  --shadow: 0 1px 2px rgba(16,36,42,.06), 0 1px 3px rgba(16,36,42,.08);
  --shadow-lg: 0 8px 30px rgba(16,36,42,.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, "Noto Sans Thai", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

/* ── App shell ── */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0; background: var(--sidebar); color: var(--sidebar-ink);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 16px; }
.sidebar .brand .logo {
  width: 30px; height: 30px; border-radius: 8px; background: var(--accent);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.sidebar .brand b { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.sidebar .brand small { display: block; color: var(--sidebar-ink-dim); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.nav { flex: 1; overflow-y: auto; padding: 6px 10px; }
.nav .group { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--sidebar-ink-dim); padding: 14px 10px 6px; font-weight: 700; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 7px;
  color: var(--sidebar-ink); font-size: 13.5px; font-weight: 500; margin-bottom: 1px; transition: background .12s;
}
.nav a:hover { background: var(--sidebar-active); color: #fff; }
.nav a.active { background: var(--accent); color: #fff; }
.nav a .ic { width: 17px; height: 17px; flex-shrink: 0; opacity: .95; }
.nav a .badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.nav a.active .badge { background: rgba(255,255,255,.25); }
.sidebar .user { position: relative; border-top: 1px solid rgba(255,255,255,.08); padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.sidebar .user:hover { background: rgba(255,255,255,.04); }
.sidebar .user .user-chev { width: 16px; height: 16px; color: var(--sidebar-ink-dim); flex-shrink: 0; }
.user-menu { position: absolute; bottom: calc(100% + 4px); left: 10px; right: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 5px; display: none; z-index: 90; }
.user-menu.open { display: block; }
.user-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: none; background: none; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 6px; font-family: inherit; text-align: left; }
.user-menu button:hover { background: var(--surface-2); }
.user-menu button svg { width: 15px; height: 15px; color: var(--ink-faint); flex-shrink: 0; }
.sidebar .user .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.sidebar .user .who { flex: 1; min-width: 0; }
.sidebar .user .who b { color: #fff; font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .user .who span { color: var(--sidebar-ink-dim); font-size: 11px; text-transform: capitalize; }
.sidebar .user button { background: none; border: none; color: var(--sidebar-ink-dim); cursor: pointer; padding: 4px; border-radius: 5px; }
.sidebar .user button:hover { color: #fff; background: var(--sidebar-active); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-header { position: sticky; top: 0; z-index: 30; }
.topbar {
  height: 58px; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 0 26px;
}
.imp-bar { background: var(--warn); color: #fff; padding: 8px 20px; font-size: 13px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.imp-bar svg { width: 16px; height: 16px; }
.imp-bar .imp-ro { background: rgba(255,255,255,.25); border-radius: 4px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.imp-bar button { margin-left: auto; background: rgba(0,0,0,.22); border: none; color: #fff; padding: 5px 13px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 12.5px; font-family: inherit; }
.imp-bar button:hover { background: rgba(0,0,0,.36); }
.topbar h1 { font-size: 17px; }
.topbar .sub { color: var(--ink-faint); font-size: 12.5px; }
.topbar .spacer { flex: 1; }
.team-switcher select { min-width: 170px; }
/* Full width on purpose. The screens people live in here are wide tables — results,
   rosters, the approval queue — and a 1240px cap on a 2200px monitor spent the spare
   space on empty margins while clipping the last columns of the table off the side. */
.content { padding: 24px 26px 60px; width: 100%; margin: 0 auto; }

/* ── Record detail page (account/lead/deal) ── */
.rec-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.rec-head .rec-avatar { width: 52px; height: 52px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 20px; flex-shrink: 0; }
.rec-head .rec-title h1 { font-size: 22px; }
.rec-head .rec-title .meta { color: var(--ink-faint); font-size: 13px; margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-head .rec-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-faint); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.back-link:hover { color: var(--accent); }
.rec-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
.rec-main, .rec-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .rec-grid { grid-template-columns: 1fr; } }
.rec-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.rec-card .rc-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid var(--line); }
.rec-card .rc-head h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.rec-card .rc-head .count { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; font-size: 11px; font-weight: 700; padding: 1px 8px; color: var(--ink-soft); }
.rec-card .rc-body { padding: 8px 8px; }
.rec-card .rc-body.pad { padding: 16px 17px; }
.rel-item { display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: var(--radius); }
.rel-item:hover { background: var(--surface-2); }
.rel-item .ri-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.rel-item .ri-main { flex: 1; min-width: 0; }
.rel-item .ri-main b { font-size: 13.5px; display: block; }
.rel-item .ri-main span { font-size: 12px; color: var(--ink-faint); }
.rel-item .ri-end { text-align: right; font-size: 12px; }
.prop { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.prop:last-child { border-bottom: 0; }
.prop .pk { color: var(--ink-faint); }
.prop .pv { color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }
.owner-card { display: flex; align-items: center; gap: 12px; }
.owner-card .oc-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.due-over { color: var(--bad); font-weight: 700; }
.owner-card .oc-name b { font-size: 14px; display: block; } .owner-card .oc-name span { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 1px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .12s; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-faint); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; }
.btn-danger { color: var(--bad); border-color: var(--line); }
.btn-danger:hover { background: #fdecea; border-color: var(--bad); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cards / KPI ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-pad { padding: 18px 20px; }
.grid { display: grid; gap: 16px; }
/* A grid item defaults to min-width:auto, so its min-content — a long unbroken label,
   a wide table — can resolve a 1fr column wider than the grid itself and push the card
   off the screen. Measured on a 320px phone: a 292px grid computing a 348px column. */
.grid > * { min-width: 0; }
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.kpi .label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; }
.kpi .value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.kpi .value.money { font-size: 20px; }
.kpi.pool::before { background: var(--s-unassigned); }
.kpi.qualified::before { background: var(--s-qualified); }
.kpi.won::before { background: var(--s-won); }
@media (max-width: 1080px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 12px; flex-wrap: wrap; }
.section-title h2 { font-size: 15px; }
.section-title .hint { color: var(--ink-faint); font-size: 12px; }

/* ── Tables ── */
/* `hidden` is a presentation-free way to drop an element, but any later rule with a
   display value beats it — .form-row's display:flex kept the conditional halves of the
   work dialog on screen. This restores what the attribute is supposed to mean. */
[hidden] { display: none !important; }

/* Tab strip — a second page needs these now, so they live here rather than being
   copied and drifting apart. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.tabs button { background: none; border: none; padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-faint); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }

.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; padding: 11px 16px; background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { cursor: default; }
table.data tbody tr.click { cursor: pointer; }
table.data tbody tr.click:hover { background: var(--surface-2); }
table.data td .primary { color: var(--ink); font-weight: 600; }
/* Many-column tables: fixed layout + tighter gutters so every column fits on a
   normal laptop screen instead of forcing a sideways scroll. Cells truncate;
   the full value is still in the row's detail view (and the title attribute). */
table.data.dense { table-layout: fixed; }
table.data.dense th { padding: 9px 10px; white-space: normal; line-height: 1.25; font-size: 10.5px; letter-spacing: .03em; }
table.data.dense td { padding: 9px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.dense td.wrap { white-space: normal; }
table.data.dense th:last-child, table.data.dense td:last-child { padding-right: 14px; overflow: visible; }
table.data.dense td.wrap > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { table.data.dense { table-layout: auto; min-width: 900px; } }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Pills / badges ── */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill.no-dot::before { display: none; }
.st-unassigned { color: var(--s-unassigned); } .st-new { color: var(--s-new); } .st-contacted { color: var(--s-contacted); }
.st-qualified { color: var(--s-qualified); } .st-converted { color: var(--s-converted); } .st-lost { color: var(--s-lost); }
.dir { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dir-inbound { color: var(--s-new); } .dir-outbound { color: var(--warn); }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.score { font-family: var(--mono); font-size: 12px; font-weight: 700; }

/* ── Forms ── */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.form-input, .form-select, textarea.form-input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; font-family: inherit; color: var(--ink); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.form-input:hover, .form-select:hover { border-color: var(--ink-faint); }
/* Custom select: strip native chrome, add a consistent chevron. */
.form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8892' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 12px; }
.form-input:focus, .form-select:focus, textarea.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Kanban ── */
/* Columns flex to fit the viewport width — all stages visible, no horizontal scroll
   on desktop. (The mobile media query below switches to swipeable wide columns.) */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: stretch; }
.column { flex: 1 1 0; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: calc(100vh - 210px); max-height: calc(100vh - 150px); }
.column .col-head { gap: 6px; }
.column .col-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-card .dt { overflow-wrap: anywhere; }
.deal-card .owner { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column .col-head { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.column .col-head b { font-size: 13px; }
.column .col-head .col-total { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.column .col-count { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 11px; font-weight: 700; padding: 1px 7px; color: var(--ink-soft); }
.column .col-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; min-height: 40px; }
.deal-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; cursor: grab; box-shadow: var(--shadow); }
/* Quick-edit on the card itself: the card body still opens the deal page. */
.deal-card .dedit { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink-faint); font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.deal-card:hover .dedit, .deal-card .dedit:focus-visible { opacity: 1; }
.deal-card .dedit:hover { background: var(--accent-soft); border-color: var(--line); color: var(--accent-ink); }
.deal-card .dt { padding-right: 22px; }
@media (hover: none) { .deal-card .dedit { opacity: .6; } }
.deal-card:active { cursor: grabbing; }
.deal-card.drag { opacity: .4; }
.deal-card .dt { font-weight: 600; color: var(--ink); font-size: 13px; margin-bottom: 3px; }
.deal-card .da { font-size: 11.5px; color: var(--ink-faint); }
.deal-card .dm { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; }
.deal-card .amount { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.deal-card .owner { font-size: 11px; color: var(--ink-faint); }
.deal-card .dnext { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 5px; }

/* Dashboard activity-based-selling widgets */
/* Notification bell + dropdown panel */
.notif-bell { position: relative; background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 6px; border-radius: 8px; display: flex; align-items: center; }
.notif-bell:hover { background: var(--surface-2); color: var(--ink); }
.notif-bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notif-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; }
.notif-panel { position: fixed; z-index: 200; width: 340px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.notif-panel .np-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-panel .np-head b { font-size: 14px; }
.notif-panel .np-readall { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.notif-panel .np-head { flex: none; }
.notif-panel .np-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.notif-panel .np-foot { flex: none; }
.notif-panel .np-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-top: 1px solid var(--line-soft); cursor: pointer; position: relative; }
.notif-panel .np-item:first-child { border-top: 0; }
.notif-panel .np-item:hover { background: var(--surface-2); }
.notif-panel .np-item.read { opacity: .6; }
.notif-panel .np-ic { font-size: 17px; flex: none; line-height: 1.2; }
.notif-panel .np-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notif-panel .np-main b { font-size: 13px; font-weight: 600; }
.notif-panel .np-main span { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-panel .np-main time { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.notif-panel .np-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 5px; }
.notif-panel .np-empty { padding: 28px 14px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.notif-panel .np-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.notif-panel .np-foot-note { font-size: 12px; color: var(--ink-soft); }
.notif-panel .np-foot-btn { background: none; border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.notif-panel .np-foot-btn.on { border-color: var(--accent); color: var(--accent); width: 100%; }
.notif-panel .np-foot-btn:hover { background: var(--surface); }
/* Duplicate detection banner */
.dup-banner { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--ink); font-weight: 600; }
.dup-banner .dup-list { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; font-weight: 400; }
.dup-banner .dup-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dup-cluster { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.dup-cluster .dc-key { font-size: 12px; color: var(--ink-faint); margin-bottom: 8px; }
.dup-cluster .dc-lead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.dup-cluster .dc-lead:first-of-type { border-top: 0; }
/* Image attachments */
.attach-field { margin-top: 4px; }
.af-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
.af-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.af-thumb { position: relative; width: 66px; height: 66px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.af-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-thumb .af-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.af-add { width: 66px; height: 66px; border-radius: 8px; border: 1.5px dashed var(--line); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--ink-faint); cursor: pointer; }
.af-add:hover { border-color: var(--accent); color: var(--accent); }
.af-thumbs.view { margin-top: 6px; gap: 6px; }
.af-thumbs.view .att-thumb { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); cursor: zoom-in; }
/* Non-image attachments: a chip with the file type and name instead of a thumbnail. */
.af-hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-faint); opacity: .8; }
.af-thumb.af-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px; text-align: center; }
.af-ico { font-size: 20px; line-height: 1; }
.af-fname { font-size: 9px; line-height: 1.2; color: var(--ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.att-file { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); text-decoration: none; }
.att-file:hover { border-color: var(--accent); background: var(--accent-soft); }
.att-file .af-ico { font-size: 15px; }
.att-file .af-fname { font-size: 11.5px; white-space: nowrap; display: block; -webkit-line-clamp: none; color: var(--ink); }
.attach-field.af-over { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 8px; }
/* Section heading inside a long form (qualification block, lead form, MEDDICC). */
.dsc-sec { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ink-soft); margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.dsc-sec:first-child { margin-top: 4px; padding-top: 0; border-top: none; }
.dsc-note { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-faint); }
/* Tagging: chips you toggle, so it is obvious who will be notified. */
.mn-list { display: flex; flex-wrap: wrap; gap: 7px; }
.mn-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border: 1px solid var(--line); border-radius: 20px; font-size: 12.5px; cursor: pointer; user-select: none; background: var(--surface); }
.mn-chip:hover { border-color: var(--accent); }
.mn-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.mn-ava { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); display: grid; place-items: center; font-size: 9.5px; font-weight: 700; }
.mn-chip.on .mn-ava { background: var(--accent); color: #fff; }
.mn-tagged { font-size: 11.5px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 20px; padding: 1px 9px; }
/* Import: say what will happen before it happens. */
.imp-sum { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.imp-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.imp-pill.ok { background: #e8f5ec; color: var(--good); }
.imp-pill.warn { background: #fdf3e3; color: var(--warn); }
.imp-pill.muted { background: var(--surface-2); color: var(--ink-faint); }
.imp-warn { margin-top: 8px; font-size: 12.5px; color: var(--bad); background: #fdecea; border-radius: 8px; padding: 8px 11px; }
.imp-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.imp-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.imp-h { font-size: 11px; font-weight: 700; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-col select { font-size: 12.5px; padding: 6px 26px 6px 9px; }
@media (prefers-color-scheme: dark) {
  .imp-pill.ok { background: rgba(46,160,90,.16); }
  .imp-pill.warn { background: rgba(214,150,40,.16); }
  .imp-warn { background: rgba(200,60,55,.16); }
}
/* One list, two stages. The badge is the only thing distinguishing them, because
   working a row is the same job either way. */
.stage-b { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.stage-b.follow { background: var(--accent-soft); color: var(--accent-ink); }
.stage-b.cold { background: var(--surface-2); color: var(--ink-faint); }
/* Two stages of one job, switched in place rather than by changing screens. */
/* A segmented control cannot wrap without looking broken, so it scrolls instead —
   and max-width keeps it from widening the page while doing so. */
.src-bar { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; margin-bottom: 16px; max-width: 100%; overflow-x: auto; }
.src-bar a, .src-bar button { display: flex; align-items: center; gap: 7px; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.src-bar a { text-decoration: none; white-space: nowrap; }
.src-bar a:hover, .src-bar button:hover { color: var(--ink); }
.src-bar a.on, .src-bar button.on { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow); }
.src-n { font-size: 11px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.src-bar button.on .src-n { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
/* Wraps, or the four buttons run off a phone screen. An element that overflows widens
   the layout viewport, and everything position:fixed — every modal, and the filter
   sheet — then sizes to that wider box and hangs off the side of the visible screen.
   So one un-wrapped row breaks dialogs on the whole page. */
.src-pager { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* Who made the call — the attribution that survives a handover to another rep. */
.call-by { font-size: 11.5px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
/* Collapsible qualification block. */
.qsec { border-top: 1px solid var(--line); margin-top: 14px; }
.qsec > summary { display: flex; align-items: center; gap: 9px; padding: 11px 0 9px; cursor: pointer; list-style: none; user-select: none; }
.qsec > summary::-webkit-details-marker { display: none; }
.qsec > summary::before { content: "▸"; color: var(--ink-faint); font-size: 11px; transition: transform .15s; }
.qsec[open] > summary::before { transform: rotate(90deg); }
.qsec > summary:hover .qs-title { color: var(--ink); }
.qs-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ink-soft); }
.qs-count { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--accent-ink); background: var(--accent-soft); border-radius: 20px; padding: 1px 8px; font-weight: 600; }
.qs-count.none { color: var(--ink-faint); background: var(--surface-2); }
.qs-sp { flex: 1; }
.qs-body { padding-bottom: 4px; }
/* ── MEDDICC scorecard ──
   Seven segments across the top give deal health at a glance; every component is
   listed whether answered or not, because the blanks are the finding. */
.md-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.md-meter { display: flex; gap: 3px; }
.md-seg { width: 22px; height: 7px; border-radius: 4px; background: var(--line); }
.md-seg.on { background: var(--ink-faint); }
.md-seg.on.hi { background: var(--good); }
.md-seg.on.mid { background: var(--warn); }
.md-seg.on.lo { background: var(--bad); }
.md-score { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.md-score.full { color: var(--good); } .md-score.mid { color: var(--warn); } .md-score.low { color: var(--bad); }
.md-score-lbl { font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.md-sol { margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.md-list { display: flex; flex-direction: column; }
.md-item { display: flex; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--line-soft); }
.md-item:last-child { border-bottom: none; }
.md-item.md-blank { background: var(--surface-2); }
.md-letter { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; font-weight: 800; font-size: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.md-item.md-blank .md-letter { background: var(--line); color: var(--ink-faint); }
.md-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.md-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-item-head b { font-size: 13px; }
.md-item.md-blank .md-item-head b { color: var(--ink-faint); font-weight: 600; }
.md-conf { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 8px; border-radius: 20px; }
.md-conf.hi { background: #e8f5ec; color: var(--good); }
.md-conf.mid { background: #fdf3e3; color: var(--warn); }
.md-conf.lo { background: #fdecea; color: var(--bad); }
.md-todo { font-size: 11px; color: var(--ink-faint); }
.md-q-hint { font-size: 11.5px; color: var(--ink-faint); }
.md-rep { font-size: 12.5px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
/* The manager's answer is a different voice — it gets its own rail and label. */
.md-mgr, .md-act { font-size: 12.5px; line-height: 1.5; padding-left: 9px; border-left: 2px solid var(--accent); color: var(--ink-soft); white-space: pre-wrap; }
.md-act { border-left-color: var(--warn); }
.md-who { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ink-faint); }
@media (prefers-color-scheme: dark) {
  .md-conf.hi { background: rgba(46,160,90,.16); }
  .md-conf.mid { background: rgba(214,150,40,.16); }
  .md-conf.lo { background: rgba(200,60,55,.16); }
}
/* MEDDICC editor as a grid — the team already keeps this as a spreadsheet with these
   exact columns, and seven stacked cards meant scrolling past everything to compare
   two rows. Collapses to labelled cards on narrow screens where a 5-column grid can't
   breathe. */
.mdt-wrap { overflow-x: auto; }
.mdt { width: 100%; border-collapse: collapse; }
.mdt th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-weight: 700; padding: 6px 7px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mdt td { padding: 7px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.mdt tr:last-child td { border-bottom: none; }
.mdt textarea { width: 100%; min-width: 150px; font-size: 12.5px; padding: 7px 9px; resize: vertical; }
.mdt .mdt-conf { width: 108px; }
.mdt .mdt-conf select { width: 100%; padding: 7px 26px 7px 9px; font-size: 12.5px; }
.mdt .mdt-c { width: 172px; display: flex; gap: 8px; align-items: flex-start; }
.mdt-name { display: flex; flex-direction: column; min-width: 0; }
.mdt-name b { font-size: 12.5px; }
.mdt-q { font-size: 10.5px; color: var(--ink-faint); line-height: 1.35; }
.mdt th.mdt-mgr, .mdt td.mdt-mgr { background: var(--surface-2); }
@media (max-width: 900px) {
  .mdt thead { display: none; }
  .mdt, .mdt tbody, .mdt tr, .mdt td { display: block; width: auto; }
  .mdt tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 12px; }
  .mdt td { border: none; padding: 5px 0; }
  .mdt td[data-l]::before { content: attr(data-l); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--ink-faint); margin-bottom: 3px; }
  .mdt td.mdt-c::before { display: none; }
  .mdt .mdt-c { width: auto; }
  .mdt .mdt-conf { width: auto; }
  .mdt th.mdt-mgr, .mdt td.mdt-mgr { background: none; }
}
/* MEDDICC editor (legacy stacked cards, still used as the narrow-screen shape). */
.md-part { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 12px; background: var(--surface); }
.md-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.md-head b { font-size: 13.5px; }
.md-q { font-size: 12px; color: var(--ink-faint); flex: 1; min-width: 180px; }
.md-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .md-cols { grid-template-columns: 1fr; } }
.md-col > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--ink-faint); margin-bottom: 4px; }
.md-col.mgr > label { color: var(--accent-ink); }
.md-lock { font-size: 10px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-faint); }
.md-col textarea { width: 100%; }
.md-col textarea[readonly] { background: var(--surface-2); color: var(--ink-soft); cursor: not-allowed; }
/* A saved non-image sitting in a 66px picker tile rather than a free-flowing list. */
.af-thumb .att-file { flex-direction: column; gap: 2px; width: 100%; height: 100%; max-width: none; padding: 4px; border: none; background: none; justify-content: center; }
.af-thumb .att-file .af-fname { font-size: 9px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 24px; }
.lightbox img { max-width: 95vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.widget-empty { padding: 22px 12px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.tl-row .tl-edit { opacity: 0; transition: opacity .12s; }
.tl-row:hover { background: var(--surface-2); }
.tl-row:hover .tl-edit { opacity: 1; color: var(--accent); }
.agenda { display: flex; flex-direction: column; }
.ag-item { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line-soft); }
.ag-item:first-child { border-top: 0; }
.ag-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; font-size: 13px; flex: none; }
.ag-item.od .ag-ic { background: #fdecea; }
.ag-main { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-due { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ag-due.over { color: var(--bad); font-weight: 700; }
.aw-strip { display: flex; gap: 8px; flex-wrap: wrap; }
/* flex:1 alone still refuses to shrink past the label text ("CONNECT RATE" and friends),
   so six tiles ran off a 320px screen. min-width lets them shrink, and the basis lets
   them wrap into rows instead. */
.aw-stat { flex: 1 1 78px; min-width: 0; text-align: center; background: var(--surface-2); border-radius: var(--radius); padding: 10px 4px; }
.aw-stat .l { overflow-wrap: anywhere; }
.aw-stat .n { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.aw-stat .n.good { color: var(--good); } .aw-stat .n.warn { color: var(--warn); } .aw-stat .n.bad { color: var(--bad); }
.aw-stat .l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-weight: 700; margin-top: 2px; }
.lb { margin-top: 14px; }
.lb-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; margin-bottom: 8px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.lb-name { font-size: 12.5px; width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar { flex: 1; height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.lb-bar > i { display: block; height: 100%; background: var(--accent); }
.lb-n { font-size: 12.5px; font-weight: 700; width: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.column.drop-hint .col-body { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: var(--radius); }
.col-empty { border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--ink-faint); font-size: 12px; text-align: center; padding: 18px 8px; }

/* ── Funnel bars ── */
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel .stage { display: flex; align-items: center; gap: 10px; }
.funnel .stage .name { width: 92px; font-size: 12px; color: var(--ink-soft); flex-shrink: 0; }
.funnel .stage .bar { height: 26px; border-radius: 5px; background: var(--accent); display: flex; align-items: center; padding: 0 9px; color: #fff; font-size: 12px; font-weight: 700; min-width: 26px; transition: width .3s; }
.funnel.out .stage .bar { background: var(--warn); }

/* ── Modal ── */
.modal-back { position: fixed; inset: 0; background: rgba(16,36,42,.4); display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 40px 16px; overflow-y: auto; }
.modal-back.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 520px; max-width: 100%; }
/* A backdrop click no longer closes the dialog; it shakes to say "use a button". */
.modal.shake { animation: modalShake .3s cubic-bezier(.36,.07,.19,.97); }
@keyframes modalShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)} }
.modal .m-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal .m-head h3 { font-size: 16px; }
.modal .m-head .x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-faint); cursor: pointer; }
.modal .m-body { padding: 20px 22px; }
.modal .m-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

/* ── Toast ── */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--sidebar); color: #fff; padding: 11px 16px; border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 9px; animation: slidein .2s; max-width: 340px; }
.toast.ok { border-left: 3px solid var(--good); }
.toast.err { border-left: 3px solid var(--bad); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* ── Misc ── */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.search { position: relative; }
.search input { padding-left: 32px; min-width: 240px; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-faint); }
.empty { text-align: center; padding: 48px 20px; color: var(--ink-faint); }
.empty svg { width: 34px; height: 34px; opacity: .5; margin-bottom: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Filter bar (labeled selects — scales cleanly on mobile) ── */
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 16px; }
.filters .fld { display: flex; flex-direction: column; gap: 4px; }
.filters .fld > label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; }
.filters .fld select { min-width: 150px; padding: 8px 30px 8px 11px; }
/* In a filter row the search box must shrink with its field. The global
   `.search input { min-width: 240px }` otherwise spills the input out of a
   narrower field and over the next filter. */
.filters .fld.search { flex: 1 1 240px; min-width: 180px; }
.filters .fld.search > .search { width: 100%; }
.filters .fld.search input { width: 100%; min-width: 0; }
.filters .spacer { flex: 1; }
@media (max-width: 620px) {
  .filters { gap: 8px 10px; }
  .filters .fld { flex: 1 1 44%; }
  .filters .fld select { min-width: 0; width: 100%; }
  .filters .fld.search { flex: 1 1 100%; }
}

/* ── Mobile: a table becomes a list of cards ──
   Every table in this app was 400–950px wide inside a 360px phone, so reading one row
   meant dragging sideways and losing the name column that told you whose row it was.
   Stacked, each row is a card: the first column is the title and the rest sit under it
   with the header text as their label. Nothing is truncated and nothing scrolls.
   Columns a phone does not need are marked `sm-hide` on the <th>; the labels come from
   <thead> at runtime, so no table has to repeat them in its markup. */
@media (max-width: 620px) {
  table.data { display: block; min-width: 0 !important; table-layout: auto !important; }
  table.data thead { display: none; }
  table.data tbody { display: block; }
  table.data tr { display: block; padding: 11px 14px; border-bottom: 1px solid var(--line); }
  table.data tr:last-child { border-bottom: none; }
  table.data td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 1px 0; border: none; text-align: left; white-space: normal; }
  table.data td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto; max-width: 45%;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-faint); font-weight: 700; line-height: 1.9;
  }
  table.data td:first-child { display: block; font-size: 14px; font-weight: 700; color: var(--ink); padding-bottom: 3px; }
  table.data td:first-child::before { display: none; }
  table.data td.sm-hide, table.data td:empty { display: none; }
  /* A tappable row says so: the whole card is the target, not a button inside it. */
  table.data tr.click td:first-child { padding-right: 20px; position: relative; }
  table.data tr.click td:first-child::after { content: '›'; position: absolute; right: 0; top: -1px; font-size: 19px; color: var(--ink-faint); font-weight: 400; }
  table.data tbody tr.click:active { background: var(--surface-2); }
  .table-wrap { overflow-x: visible; }
}

/* ── Mobile: the filters become a bottom sheet ──
   A phone was showing five dropdowns that all read "All" — a quarter of the screen
   spent saying nothing is filtered, before a single row of data. On a narrow screen
   the search box and the row count stay out in a compact bar; every other field moves
   into a sheet behind one button carrying a count, and whatever IS set comes back as a
   removable chip so an active filter is never hidden. Wide screens keep the full bar:
   the space is free there and having every control visible is faster.
   The moving is done in JS (App.filterBar) rather than by duplicating markup, so there
   is one input per filter and the page's own change handlers keep working untouched. */
.fbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
/* Moving the field out of .filters loses the rules that let it shrink, and the global
   `.search input { min-width: 240px }` then takes over and pushes the button onto its
   own line. These restore the shrink so search and the button share one row. */
.fbar > .fld.search { flex: 1 1 150px; min-width: 0; margin: 0; }
.fbar > .fld.search > label { display: none; }     /* the placeholder already says it */
.fbar > .fld.search > .search { width: 100%; }
.fbar > .fld.search input { width: 100%; min-width: 0; }
.fbar > .fld { margin: 0; }
.fbar-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.fbar-btn svg { width: 15px; height: 15px; }
.fbar-btn.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.fbar-btn .n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.fbar-meta { display: flex; align-items: center; gap: 10px; width: 100%; }
.fbar-meta .fld { margin: 0; }
.fbar-chips { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600; border: none; font-family: inherit; cursor: pointer; }
.fchip .k { font-weight: 500; opacity: .7; }
.fchip .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip .x { font-size: 14px; line-height: 1; opacity: .65; }
.fchip:hover .x { opacity: 1; }
.fchip.clear { background: none; color: var(--ink-faint); text-decoration: underline; padding-left: 4px; }

.fsheet-back { position: fixed; inset: 0; background: rgba(16,36,42,.4); z-index: 95; opacity: 0; pointer-events: none; transition: opacity .2s; }
.fsheet-back.open { opacity: 1; pointer-events: auto; }
.filters.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 14px;
  margin: 0; padding: 8px 16px 16px; max-height: 82vh; overflow-y: auto;
  background: var(--surface); border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 34px rgba(16,36,42,.22);
  transform: translateY(101%); transition: transform .22s ease;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.filters.sheet.open { transform: none; }
/* min-width:0 everywhere down the chain, or the sheet cannot shrink below the widest
   option text in its selects — a province list is enough to push a fixed, full-width
   element past the screen, which widens the layout viewport and takes the sheet's own
   right edge (and its close button) off-screen with it. */
.filters.sheet { max-width: 100%; }
.filters.sheet .fld { flex: none; width: auto; min-width: 0; }
.filters.sheet .fld > label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filters.sheet .fld select { width: 100%; max-width: 100%; min-width: 0; padding: 11px 30px 11px 12px; font-size: 15px; }  /* 15px: iOS zooms in below 16 on focus; 15 with a bigger tap target is the compromise */
.filters.sheet .spacer { display: none; }
.fsheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 4px; background: var(--surface); }
.fsheet-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.fsheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 2px; }
.fsheet-foot { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 0 0; background: var(--surface); border-top: 1px solid var(--line-soft); }
.fsheet-foot .btn { flex: 1; justify-content: center; padding: 11px; }
.chip-toggle { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.chip-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* View switcher (card / table segmented control) */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.view-toggle button { border: none; background: none; padding: 7px 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: inherit; }
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button.on { background: var(--accent); color: #fff; }
.view-toggle button svg { width: 15px; height: 15px; }
.view-toggle button .lbl { }
@media (max-width: 560px) { .view-toggle button .lbl { display: none; } }
.muted { color: var(--ink-faint); }
.mono { font-family: var(--mono); }
.copy { cursor: pointer; }
.spinner { border: 2.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; width: 22px; height: 22px; animation: spin .7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive / mobile (off-canvas sidebar) ── */
.lang-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: var(--radius); cursor: pointer; font-family: inherit; flex-shrink: 0; }
.lang-btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.menu-btn { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: 6px; margin-left: -4px; }
.menu-btn svg { width: 22px; height: 22px; }
.sidebar-overlay { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .sidebar { position: fixed; top: 0; left: 0; height: 100dvh; transform: translateX(-100%); transition: transform .22s ease; z-index: 80; box-shadow: var(--shadow-lg); }
  .app.nav-open .sidebar { transform: translateX(0); }
  .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(16,36,42,.45); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.nav-open .sidebar-overlay { opacity: 1; pointer-events: auto; }
  .main { width: 100%; }
  .topbar { padding: 0 14px; gap: 10px; position: sticky; }
  .topbar h1 { font-size: 16px; }
  .topbar .sub { display: none; }
  .content { padding: 16px 14px 76px; }
  .form-row { grid-template-columns: 1fr; }
  #topbar-actions { gap: 7px; }
  #topbar-actions .btn { padding: 7px 10px; font-size: 12.5px; }
  .team-switcher select { min-width: 120px; }
  .modal-back { padding: 16px 10px; }
  .board { gap: 10px; }
  .column { flex: 0 0 80%; min-width: 80%; }
}
@media (max-width: 560px) {
  .topbar h1 { font-size: 15px; }
  .kpi .value { font-size: 21px; }
  /* The title has to give way, or title + page action + bell + language on a 320px
     screen push the header wider than the phone. A flex child will not shrink below
     its text without min-width:0. */
  .topbar > div:first-of-type { min-width: 0; }
  .topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #topbar-actions { min-width: 0; }
  #topbar-actions .btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Last line of defence. A single element that overflows widens the layout viewport,
   and then everything position:fixed — every modal, the filter sheet, the nav drawer —
   sizes to that wider box and hangs off the side of the screen the user can see. The
   fixes above remove the known offenders; this stops the next one from breaking
   dialogs across the whole app. Tables that genuinely need to scroll sideways do it
   inside .table-wrap, so nothing legitimate is clipped. */
@media (max-width: 900px) { html, body { overflow-x: hidden; } }