/* ============================================================
   ReadyLaunch Command Center: design system (from Joel's prototype, 2026-09-14)
   Priorities: calm color, generous space, obvious hierarchy,
   one clear next action per row. Built for low cognitive load.
   ============================================================ */

:root {
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --surface-muted: #F4F2EE;
  --border: #E7E3DC;
  --border-strong: #D8D3C9;
  --text: #211F1C;
  --text-soft: #6B6660;
  --text-faint: #9C968D;

  --accent: #E15A2B;
  --accent-hover: #C94B21;
  --accent-tint: #FDECE3;

  --red: #C0392B;
  --red-tint: #FBEAE7;
  --amber: #B8730A;
  --amber-tint: #FBF0DC;
  --green: #1E8A4C;
  --green-tint: #E7F5EC;
  --blue: #2E63C7;
  --blue-tint: #EAF0FC;
  --purple: #7248C4;
  --purple-tint: #F1E9FB;
  --gray: #6B6660;
  --gray-tint: #F1EFEA;

  --sidebar-bg: #1B1917;
  --sidebar-text: #B9B3AA;
  --sidebar-text-dim: #86807A;
  --sidebar-hover: #26221E;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20,18,14,0.04);
  --shadow-md: 0 4px 16px rgba(20,18,14,0.08);
  --shadow-lg: 0 12px 40px rgba(20,18,14,0.18);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Helvetica, Arial, sans-serif;
}

[data-theme="dark"] {
  --bg: #14130F;
  --surface: #1C1B17;
  --surface-muted: #24221D;
  --border: #322F28;
  --border-strong: #423E35;
  --text: #F3F1EC;
  --text-soft: #B4AFA6;
  --text-faint: #837C72;
  --accent-tint: #3A2417;
  --red-tint: #3A2320;
  --amber-tint: #362A15;
  --green-tint: #16301F;
  --blue-tint: #182640;
  --purple-tint: #26193C;
  --gray-tint: #262420;
  --sidebar-bg: #0E0D0B;
  --sidebar-hover: #1B1916;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

::selection { background: var(--accent-tint); }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 4px; }
.sidebar-logo .mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.sidebar-logo .name { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.sidebar-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--sidebar-text-dim); padding: 2px 8px 14px; text-transform: uppercase; }

.nav-group { margin-bottom: 14px; }
.nav-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-text-dim); padding: 10px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: 9px; margin-bottom: 2px;
  font-size: 14.5px; font-weight: 600; color: var(--sidebar-text);
  background: transparent; border: none; width: 100%; text-align: left;
}
.nav-item .ic { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.85; }
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-item.active .ic { opacity: 1; }
.nav-badge { margin-left: auto; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.14); padding: 2px 8px; border-radius: 999px; }
.nav-item.active .nav-badge { background: rgba(255,255,255,0.28); }
.nav-badge.urgent { background: var(--red); color: #fff; }

.sidebar-spacer { flex: 1; }
.sidebar-foot { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; margin-top: 10px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; }
.sidebar-user:hover { background: var(--sidebar-hover); }
.sidebar-user .av { width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.sidebar-user .who { font-size: 14px; font-weight: 700; color: #fff; }
.sidebar-user .signout { font-size: 12.5px; color: var(--sidebar-text-dim); background: none; border: none; padding: 0; }
.sidebar-user .signout:hover { color: #fff; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 26px 36px 18px;
}
.topbar h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.topbar .sub { color: var(--text-soft); font-size: 15px; margin-top: 4px; max-width: 60ch; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.search-box {
  display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
  min-width: 240px; color: var(--text-faint);
}
.search-box input { border: none; outline: none; background: transparent; flex: 1; color: var(--text); font-size: 14.5px; }
.search-box input::placeholder { color: var(--text-faint); }
.search-box .kbd { font-size: 11px; border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--text-faint); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-muted); }
.btn-dark { background: var(--text); color: var(--bg); }
.btn-dark:hover { opacity: 0.85; }
.btn-ghost { background: transparent; color: var(--text-soft); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-muted); color: var(--text); }
.btn-sm { padding: 7px 12px; font-size: 13.5px; border-radius: 8px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-danger-outline { background: var(--surface); color: var(--red); border-color: #EBCFC8; }

.content { padding: 4px 36px 48px; flex: 1; }

/* ---------- Section tabs ---------- */
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; flex-wrap: wrap; }
.tab {
  padding: 11px 16px; font-size: 14.5px; font-weight: 700; color: var(--text-soft);
  border: none; background: none; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 8px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab .count { font-size: 12px; font-weight: 700; background: var(--gray-tint); color: var(--text-soft); padding: 1px 8px; border-radius: 999px; }
.tab.active .count { background: var(--accent-tint); color: var(--accent); }
.tab .count.urgent { background: var(--red-tint); color: var(--red); }

.subtabbar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.chip-tab {
  padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
}
.chip-tab:hover { border-color: var(--border-strong); }
.chip-tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- Stat cards ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 18px; display: flex; flex-direction: column; gap: 4px; text-align: left; position: relative;
}
.stat-card.clickable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.stat-card .lbl { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--text-soft); text-transform: uppercase; }
.stat-card .val { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.stat-card .val.urgent { color: var(--red); }
.stat-card .val.good { color: var(--green); }
.stat-card .sub { font-size: 13px; color: var(--text-faint); }
.stat-card .chev { position: absolute; top: 16px; right: 16px; color: var(--text-faint); }

/* ---------- Cards / panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.panel-head h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.panel-head p { color: var(--text-soft); font-size: 13.5px; margin-top: 3px; }
.panel-link { color: var(--accent); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.panel-link:hover { text-decoration: underline; }
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.callout {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--accent-tint); border: 1px solid #F3CBB3; color: var(--text);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; font-size: 14px;
}
[data-theme="dark"] .callout { border-color: #4A2E1B; }
.callout b { font-weight: 800; }
.callout .ic { flex-shrink: 0; color: var(--accent); margin-top: 1px; }

.empty-state { text-align: center; padding: 46px 20px; color: var(--text-soft); }
.empty-state .ic { color: var(--text-faint); margin-bottom: 10px; }
.empty-state .title { font-weight: 700; color: var(--text); font-size: 15px; margin-bottom: 4px; }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar .search-box { flex: 1; min-width: 220px; }
select.select, .select {
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--text);
}
input[type="text"].plain, input[type="date"].plain {
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 9px 12px; font-size: 14px;
}
label.check { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-soft); white-space: nowrap; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.dt { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.dt th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); padding: 0 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.dt td { padding: 13px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.dt tbody tr:hover { background: var(--surface-muted); }
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt td.num, table.dt th.num { text-align: right; }
.cell-primary { font-weight: 700; }
.cell-sub { color: var(--text-soft); font-size: 13px; margin-top: 2px; }
.row-click { cursor: pointer; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.badge-red { background: var(--red-tint); color: var(--red); }
.badge-amber { background: var(--amber-tint); color: var(--amber); }
.badge-green { background: var(--green-tint); color: var(--green); }
.badge-blue { background: var(--blue-tint); color: var(--blue); }
.badge-purple { background: var(--purple-tint); color: var(--purple); }
.badge-gray { background: var(--gray-tint); color: var(--gray); }
.badge-accent { background: var(--accent-tint); color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
.dot-red { background: var(--red); } .dot-amber { background: var(--amber); } .dot-green { background: var(--green); } .dot-blue { background: var(--blue); } .dot-gray { background: var(--gray); }

.avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--border); color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.avatar-row { display: flex; align-items: center; gap: 8px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; gap: 6px; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; }
.pagination .info { font-size: 13.5px; color: var(--text-soft); }
.pagination .pages { display: flex; gap: 4px; }
.page-btn { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 13.5px; }
.page-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.page-btn:disabled { opacity: 0.4; }

/* ---------- Board (kanban) ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.board-col { background: var(--surface-muted); border-radius: var(--radius); padding: 12px; min-height: 120px; }
.board-col-head { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px 12px; }
.board-col-head .t { font-weight: 800; font-size: 14.5px; }
.board-col-head .n { font-size: 12.5px; font-weight: 700; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); padding: 1px 8px; border-radius: 999px; }
.board-col-sub { font-size: 12px; color: var(--text-faint); padding: 0 6px 10px; margin-top: -8px; }
.board-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; margin-bottom: 9px; cursor: pointer; }
.board-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.board-card .t { font-weight: 700; font-size: 14.5px; }
.board-card .s { color: var(--text-soft); font-size: 13px; margin-top: 2px; }
.board-card .amt { font-weight: 800; font-size: 15px; margin-top: 8px; }
.board-card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.board-card .late { color: var(--red); font-weight: 700; font-size: 12.5px; }
.board-more { display: block; width: 100%; text-align: left; padding: 8px 6px; color: var(--accent); font-weight: 700; font-size: 13.5px; background: none; border: none; }
.board-card[draggable="true"] { cursor: grab; }
.board-card.dragging { opacity: 0.4; }
.board-col[data-stage].drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-tint); }

/* ---------- Drawer / Modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(20,18,14,0.42); z-index: 60; display: flex; justify-content: flex-end; }
.overlay.modal-overlay { justify-content: center; align-items: center; }
.drawer { width: min(460px, 92vw); background: var(--surface); height: 100%; overflow-y: auto; box-shadow: var(--shadow-lg); padding: 26px; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 12px; }
.drawer-head h2 { font-size: 19px; font-weight: 800; }
.drawer-close { background: var(--surface-muted); border: none; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-soft); }
.drawer-close:hover { color: var(--text); }
.field-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; gap: 12px; }
.field-row .k { color: var(--text-soft); }
.field-row .v { font-weight: 700; text-align: right; }
.modal { width: min(440px, 92vw); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 26px; }
.modal h2 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.modal p { color: var(--text-soft); font-size: 14.5px; line-height: 1.55; }
.modal .actions { display: flex; gap: 10px; margin-top: 22px; justify-content: flex-end; }

textarea.note { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; resize: vertical; min-height: 70px; background: var(--surface); }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-md); }

/* ---------- Misc ---------- */
.hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); }
.small { font-size: 13px; }
.bar-track { height: 7px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; flex: 1; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.legend-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: 14px; }
.legend-row .name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut { border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.donut .center { position: absolute; text-align: center; }
.donut .center .n { font-size: 22px; font-weight: 800; display: block; }
.donut .center .l { font-size: 11.5px; color: var(--text-soft); }

.icon-tile { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.list-actions { display: flex; gap: 8px; }

@media (max-width: 760px) {
  .sidebar { display: none; }
  .topbar { padding: 18px 16px 12px; flex-direction: column; }
  .content { padding: 0 16px 40px; }
  .search-box { min-width: 0; width: 100%; }
}

/* ── Names the older pages use, pointed at the prototype's tokens ───────── */
:root{
  --orange:var(--accent); --orange-light:var(--accent-tint); --card:var(--surface); --card-2:var(--surface-muted);
  --muted:var(--text-soft); --muted-2:var(--text-faint); --ink-2:var(--text-soft); --line:var(--border);
  --red-bg:var(--red-tint); --green-bg:var(--green-tint); --amber-bg:var(--amber-tint); --blue-bg:var(--blue-tint);
  --gray-bg:var(--gray-tint); --violet-bg:var(--purple-tint); --navy:var(--sidebar-bg); --navy-2:var(--sidebar-hover);
  --row-hover:var(--surface-muted); --field:var(--surface); --scrim:rgba(20,18,14,.42);
  --accent-text:var(--accent); --accent-soft:var(--accent-tint);
  --danger:var(--red); --danger-bg:var(--red-tint); --warn:var(--amber); --warn-bg:var(--amber-tint);
  --ok:var(--green); --ok-bg:var(--green-tint); --info:var(--blue); --info-bg:var(--blue-tint);
  color-scheme:light;
}
[data-theme="dark"]{ color-scheme:dark; }
body{font-size:15px}
input,select,textarea{color:var(--text)}
select option{color:var(--text);background:var(--surface)}

/* ── Shell additions ─────────────────────────────────────────────────────── */
.sidebar-logo .name{display:flex;align-items:center;gap:8px}
.sidebar-logo img.wm{display:block;height:24px;width:auto;max-width:170px}
.mtop .sidebar-logo img.wm{height:20px}
.nav-item .ic svg{width:19px;height:19px;display:block}
.nav-item .label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.themetog .nav-badge .on{display:none}
[data-theme="dark"] .themetog .nav-badge .on{display:inline}
[data-theme="dark"] .themetog .nav-badge .off{display:none}
.sidebar-user .signout{display:block}
/* Moved off the label/select as inline style attributes (were view.js template literals) so the collapsed-rail
   overrides below can actually win the cascade -- an inline style beats any external selector, no matter how
   specific, so the old collapsed rules that tried to shrink these were silently losing to the full-width inline
   width/margin/padding they were fighting. */
.view-as label{display:block;padding:10px 17px 6px;font-size:12.5px;font-weight:700;color:var(--sidebar-text-dim)}
.view-as select{width:calc(100% - 34px);margin:0 17px 10px;padding:7px 9px;border:1px solid var(--border-strong);
  border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
/* The avatar becomes a <label for="sbUserToggle"> and the who/signout block a plain sibling div, toggled by a
   visually-hidden checkbox -- same checkbox-hack the mobile nav drawer already uses (.navtoggle). Hidden here
   unconditionally; only the collapsed-rail CSS below gives its :checked state any effect, so in the expanded
   sidebar clicking the avatar still does nothing, exactly as before. */
.sb-user-toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.preview-badge{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:1px 7px;border-radius:5px;line-height:1.6;vertical-align:middle}
.topbar-right{flex-wrap:wrap;justify-content:flex-end}
.topbar-right form{margin:0}
.gsearch{position:relative}
.search-box svg{width:16px;height:16px;flex-shrink:0}
.search-drop{position:absolute;top:calc(100% + 6px);right:0;left:0;min-width:280px;z-index:50;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);padding:6px;max-height:60vh;overflow-y:auto}
.search-drop a{display:block;padding:8px 10px;border-radius:8px}
.search-drop a:hover,.search-drop a:focus{background:var(--surface-muted);outline:none}
.search-drop .n{display:block;font-weight:700;font-size:14px}
.search-drop .e{display:block;font-size:12.5px;color:var(--text-soft)}
.search-drop .sd-empty{padding:10px;color:var(--text-soft);font-size:13.5px}
.search-drop .sd-all{border-top:1px solid var(--border);margin-top:4px;border-radius:0 0 8px 8px;color:var(--accent);font-weight:700;font-size:13.5px}
.content > .flash:first-child{margin-top:0}

/* ── Buttons: the older markup ───────────────────────────────────────────── */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-dark):not(.btn-ghost):not(.btn-danger-outline){background:var(--accent);color:#fff}
.btn.outline{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border-strong)}
.btn.dark{background:var(--text)!important;color:var(--bg)!important}
.btn.ghost,button.ghost{background:transparent;color:var(--text-soft);border:1px solid var(--border-strong);border-radius:10px;padding:9px 14px;font-weight:700}
.btn.wa{background:#1FE69B!important;color:#06301a!important}
.btn svg{width:15px;height:15px;flex-shrink:0}
.action-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:13.5px;border-radius:8px;font-weight:700;
  border:1px solid transparent;white-space:nowrap;background:var(--text);color:var(--bg);cursor:pointer}
.action-btn:hover{opacity:.88}
.action-btn.outline{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.action-btn.outline:hover{opacity:1;background:var(--surface-muted)}
.action-btn.orange{background:var(--accent);color:#fff}
.action-btn svg{width:14px;height:14px}
.action-btn:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-sm:not(.btn){display:inline-block;padding:6px 11px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;
  background:var(--surface);border:1px solid var(--border-strong);color:var(--text)}
.btn-sm.ok{color:var(--green)}.btn-sm.danger{color:var(--red)}
.resolve{padding:9px 14px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.resolve.ghost{background:var(--surface);border:1px solid var(--border-strong);color:var(--text)}
form.inline{display:inline}
.list-actions form{margin:0}

/* ── Stat cards: the older grids ─────────────────────────────────────────── */
.stats,.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
a.stat-card{color:inherit}
.stat-card.clickable{cursor:pointer}
.stat-card .val{white-space:nowrap}
.stat-card .val.na{font-size:18px;color:var(--text-faint)}
.stat-card .sub.up{color:var(--green)}.stat-card .sub.down{color:var(--red)}
.stat-card .sub a{color:var(--accent);font-weight:700}
.stat-card .chev svg{width:15px;height:15px;display:block}
.stat-card.clickable .lbl{padding-right:20px}

/* ── Panels: the older cards and titled sections ─────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:18px}
.card.flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.card-title{font-size:17px;font-weight:800;letter-spacing:-.01em}
.card-sub{color:var(--text-soft);font-size:13.5px;margin-top:3px}
.card-link{color:var(--accent);font-weight:700;font-size:13.5px;white-space:nowrap}
.card-link:hover{text-decoration:underline}
.card-foot,.panel-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;color:var(--text-soft)}
.card-foot a,.panel-foot a,.help a,.sub a,.note a{color:var(--accent);font-weight:700}
.panel-head .count{font-size:12px;font-weight:700;background:var(--gray-tint);color:var(--text-soft);padding:1px 8px;border-radius:999px;margin-left:6px;vertical-align:2px}
.panel-head .count.urgent{background:var(--red-tint);color:var(--red)}
.panel-head .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grid-2 > *,.grid-3 > *{min-width:0}
.grid-2 > .panel,.grid-2 > .card,.grid-3 > .panel{margin-bottom:0}
.two-col-stack{display:flex;flex-direction:column;gap:16px}
.two-col-stack > .panel,.two-col-stack > .card,.grid-2 > div > .panel:last-child,.grid-2 > div > .card:last-child{margin-bottom:0}
.grid-2 + .panel,.grid-2 + .card,.grid-2 + .help{margin-top:18px}
.two,.rsplit{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:18px}
.rsplit{grid-template-columns:1fr minmax(280px,380px)}
.two > *,.rsplit > *{min-width:0}
.two > .panel,.two > .card,.rsplit > .panel,.rsplit > .card,.rsplit > div > .panel:last-child{margin-bottom:0}
@media(max-width:1000px){.two,.rsplit{grid-template-columns:1fr}}
.sbody > h1:first-child{font-size:18px;font-weight:800;margin:0 0 6px}
.content h1{font-size:22px;font-weight:800;margin:0 0 6px}
.content .sub{color:var(--text-soft);font-size:14.5px;margin:0 0 18px;max-width:80ch}
.content h2{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin:0 0 10px;font-weight:700;display:flex;align-items:baseline;gap:8px}
.content h2 b{color:var(--text);font-size:15px;text-transform:none;letter-spacing:0;font-weight:800}
.section{margin-bottom:18px}
.section:has(> h2 + .card){background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.section:has(> h2 + .card) > h2{margin:0 0 12px;font-size:17px;text-transform:none;letter-spacing:-.01em;color:var(--text);font-weight:800}
.section:has(> h2 + .card) > .card{border:0;border-radius:0;padding:0;margin:0}
.panel .panel,.card .card{border:0;padding:0;margin:0}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--accent-tint);border:1px solid #F3CBB3;border-radius:var(--radius);
  padding:14px 16px;margin-bottom:20px;font-size:14px;color:var(--text);display:block}
[data-theme="dark"] .note{border-color:#4A2E1B}
.note b{font-weight:800}
.note code{background:var(--surface);padding:1px 5px;border-radius:4px}
.help{font-size:13px;color:var(--text-soft);margin:12px 0 0}
.flash{border-radius:var(--radius);padding:12px 16px;margin-bottom:18px;font-weight:600;font-size:14px;background:var(--green-tint);color:var(--green)}
.flash.bad{background:var(--red-tint);color:var(--red)}
.flash.info{background:var(--blue-tint);color:var(--blue)}
.empty-state b,.empty-state .title{display:block;font-weight:700;color:var(--text);font-size:15px;margin-bottom:4px}
.empty-state .ic svg{width:28px;height:28px}
.empty{padding:32px 10px;text-align:center;color:var(--text-soft)}
.empty b{display:block;color:var(--text);margin-bottom:3px}
td.empty-cell{text-align:center;color:var(--text-soft);padding:30px 10px}
.small-muted{color:var(--text-soft);font-size:13px}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.crumbs{font-size:13.5px;color:var(--text-soft);margin:0 0 14px}
.crumbs a{color:var(--accent);font-weight:700}
.crumbs span{margin:0 7px;color:var(--text-faint)}
.err{color:var(--red);font-size:14px;margin-bottom:10px}

/* ── Tables: every table in a page reads as table.dt ─────────────────────── */
.content table{width:100%;border-collapse:collapse;font-size:14.5px}
.content table:not(.dt) th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);
  padding:0 12px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.content table:not(.dt) td{padding:13px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.content table:not(.dt) tbody tr:hover{background:var(--surface-muted)}
.content table tr:last-child td{border-bottom:none}
.content table th.num,.content table td.num,td.r,th.r{text-align:right}
.tnum,td.num{font-variant-numeric:tabular-nums}
.row-title{font-weight:700}
.row-sub{color:var(--text-soft);font-size:13px;margin-top:2px}
tr.row-link{cursor:pointer}
table.dt tr.on > td,.content table tr.on > td{background:var(--accent-tint)}
td .t2{font-size:13px;color:var(--text-soft);margin-top:2px}
td.fill{width:100%;max-width:0}
td .one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
th.cx,td.cx{width:40px}
.sbox{max-height:calc(var(--rows,6) * 3.6rem + 2.4rem);overflow:auto}
a.caret{display:inline-flex;color:var(--text-faint)}
a.caret svg{width:16px;height:16px}
a.caret.on{transform:rotate(90deg);color:var(--accent)}
.row{display:grid;grid-template-columns:62px 1fr auto;gap:14px;padding:12px 0;border-top:1px solid var(--border);align-items:start}
.row:first-child{border-top:0}
.t{font-weight:700;margin-bottom:2px}
.t a:hover{color:var(--accent)}
.d{color:var(--text-soft);font-size:13.5px}
.act{color:var(--text-soft);font-size:13px;margin-top:3px}
.meta{color:var(--text-soft);font-size:12.5px;text-align:right}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-faint);word-break:break-all;margin-top:3px}
.age{font-weight:800;font-size:13.5px;text-align:right;color:var(--blue);font-variant-numeric:tabular-nums}
.age.hot{color:var(--red)}.age.warm{color:var(--amber)}
.muted{color:var(--text-soft)}

/* ── Badges: .pill is the prototype's .badge ─────────────────────────────── */
.pill,.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  white-space:nowrap;background:var(--gray-tint);color:var(--gray)}
.chip{margin:0 4px 4px 0}
.pill.red,.pill.danger{background:var(--red-tint);color:var(--red)}
.pill.amber,.pill.warn{background:var(--amber-tint);color:var(--amber)}
.pill.green,.pill.ok{background:var(--green-tint);color:var(--green)}
.pill.blue{background:var(--blue-tint);color:var(--blue)}
.pill.purple{background:var(--purple-tint);color:var(--purple)}
.pill.orange,.pill.accent{background:var(--accent-tint);color:var(--accent)}
.pill.outline{background:transparent;color:var(--text-soft);border:1px solid var(--border)}
.pill svg,.badge svg{width:12px;height:12px}
.dot-purple{background:var(--purple)}.dot-accent{background:var(--accent)}
.avatar.md{width:32px;height:32px;font-size:12px}
.who{display:flex;align-items:center;gap:8px;white-space:nowrap}
.sidebar-user .who{display:block}

/* ── Tabs: the older strips are chip tabs ────────────────────────────────── */
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs .tab{padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:700;border:1px solid var(--border);
  background:var(--surface);color:var(--text-soft);margin:0}
.tabs .tab:hover{border-color:var(--border-strong)}
.tabs .tab.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.tabs .tab-badge,.chip-tab .faint{font-weight:700}
.chip-tab.active .faint{color:inherit;opacity:.7}
.chip-tab .count.urgent{color:var(--red)}
.chip-tab.active .count.urgent{color:#ffb4a8}
.tab-badge{font-size:12px;font-weight:700;background:var(--gray-tint);color:var(--text-soft);padding:1px 8px;border-radius:999px}
.tabbar .tab-badge.urgent{background:var(--red-tint);color:var(--red)}
.tabbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar .tab{white-space:nowrap}

/* ── Filters and controls ────────────────────────────────────────────────── */
.filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.filters .search-box{flex:1;min-width:220px}
.search-box input{min-width:0;padding:0;margin:0}
label.select{display:inline-flex;align-items:center;gap:6px;position:relative;cursor:pointer;white-space:nowrap}
label.select select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:600;
  color:inherit;padding:0 18px 0 0;margin:0;cursor:pointer;max-width:100%}
label.select > svg:last-child{margin-left:-20px;pointer-events:none;color:var(--text-faint)}
div.select{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.select svg{width:14px;height:14px}
.checkbox-label,label.check{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--text-soft);white-space:nowrap}
.checkbox-label input,label.check input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.segmented{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface);margin-left:auto}
.segmented a{padding:8px 14px;font-weight:700;font-size:13.5px;color:var(--text-soft)}
.segmented a.on{background:var(--text);color:var(--bg)}
.sort-label{margin-left:auto;font-size:13px;color:var(--text-soft);white-space:nowrap}
.date-chip{text-align:center;background:var(--surface-muted);border-radius:8px;padding:4px 8px;font-size:10.5px;font-weight:700;
  color:var(--text-soft);line-height:1.2;min-width:42px}
.date-chip span{font-size:14px;color:var(--text)}

/* ── Pagination (links, not buttons) ─────────────────────────────────────── */
a.page-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;color:var(--text)}
a.page-btn.active{color:var(--bg)}
.page-btn.off{opacity:.4;pointer-events:none}
.pagination .per{display:flex;align-items:center;gap:10px}

/* ── Board: the older kanban markup ──────────────────────────────────────── */
.board-card{display:block;color:inherit}
.board-card .meta{text-align:left;color:var(--text-faint);font-size:12.5px}
.board-card .meta .faint{font-size:12.5px}
.board-card .badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.board-card .ph{font-size:12.5px;color:var(--text-faint);margin-top:4px}
.board-card.won{border-color:#C7E6D2;background:var(--green-tint)}
[data-theme="dark"] .board-card.won{border-color:#24533A}
.board-more{cursor:pointer}
a.board-more:hover{text-decoration:underline}
.kempty{text-align:center;color:var(--text-faint);font-size:13px;padding:16px 4px}
.kanban-add{display:block;width:100%;text-align:left;padding:8px 6px;color:var(--accent);font-weight:700;font-size:13.5px;background:none;border:none;cursor:pointer}
.kanban-tag{display:inline-flex;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--gray-tint);color:var(--gray)}
.kanban-tag.red{background:var(--red-tint);color:var(--red)}.kanban-tag.amber{background:var(--amber-tint);color:var(--amber)}
.kanban-tag.blue{background:var(--blue-tint);color:var(--blue)}.kanban-tag.green{background:var(--green-tint);color:var(--green)}
.kboard.ph{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:14px;overflow-x:auto}
.kcol{background:var(--surface-muted);border-radius:var(--radius);padding:12px;min-height:120px}
.kcol .kt{font-weight:800;font-size:14.5px;display:flex;gap:8px;align-items:baseline}
.kcol .kn{font-size:12.5px;font-weight:700;color:var(--text-soft);background:var(--surface);border:1px solid var(--border);padding:1px 8px;border-radius:999px}
.kcol .ks{font-size:12px;color:var(--text-faint);margin:2px 0 10px}

/* ── Lists, rows and facts ───────────────────────────────────────────────── */
.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);color:inherit}
.list-row:last-child{border-bottom:0}
a.list-row:hover .row-title{color:var(--accent)}
.list-row .lr-left{display:flex;align-items:flex-start;gap:12px;min-width:0}
.list-row .lr-right{display:flex;align-items:center;gap:10px;color:var(--text-faint);flex-shrink:0}
.list-row .lr-right svg{width:15px;height:15px}
.list-row .icon-tile svg{width:18px;height:18px}
.att-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.att-row:last-child{border-bottom:0;padding-bottom:0}
.att-row:first-child{padding-top:0}
.att-row .body{flex:1;min-width:0}
.att-row .desc{color:var(--text-soft);font-size:13.5px;margin-top:2px;max-width:70ch}
.facts div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--border);font-size:14.5px}
.facts div:last-child{border-bottom:0}
.facts span{color:var(--text-soft)}
.facts b{font-weight:700;text-align:right}
.wstat{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:14px;border-top:1px solid var(--border);color:inherit}
.wstat .tnum{margin-left:auto;font-weight:700}
.wdot{width:10px;height:10px;border-radius:50%;background:var(--text-faint)}
.wdot.violet{background:var(--purple)}.wdot.blue{background:var(--blue)}.wdot.amber{background:var(--amber)}.wdot.red{background:var(--red)}.wdot.green{background:var(--green)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.wgrid div span{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft)}
.wgrid div b{display:block;font-size:22px;font-weight:800;margin:3px 0 2px}
.wgrid div i{font-style:normal;font-size:13px;color:var(--text-faint)}
.wgrid div i a{color:var(--accent)}
a.attrow{display:flex;gap:12px;align-items:center;padding:13px 0;color:inherit;border-top:1px solid var(--border)}
a.attrow:first-child{border-top:0}
a.attrow .ico{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-tint);color:var(--accent)}
a.attrow .ico svg{width:18px;height:18px}
a.attrow .ib{min-width:0;flex:1}
a.attrow .it{display:block;font-weight:700}
a.attrow .is{display:block;font-size:13.5px;color:var(--text-soft);margin-top:2px}
a.attrow .ir{margin-left:auto;color:var(--text-faint)}
a.attrow .ir svg{width:15px;height:15px}
a.attrow:hover .it{color:var(--accent)}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--text-faint)}
.sdot.green{background:var(--green)}.sdot.amber{background:var(--amber)}.sdot.red{background:var(--red)}
.logo-chip{width:32px;height:32px;flex:0 0 32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-muted);font-size:11px;font-weight:800}
.svc{display:flex;align-items:center;gap:10px;white-space:nowrap;font-weight:700}
.health{margin:0 0 12px;padding:12px 14px;border-radius:10px;background:var(--green-tint);color:var(--green)}
.health.bad{background:var(--amber-tint);color:var(--amber)}
.health b{display:block}
.critrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--border);font-size:14px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.mcard{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.mcard b{display:block;font-size:16px;margin-top:3px}
.mtag{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.mcounts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.qrow{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border);cursor:pointer}
.qrow:last-child{border-bottom:0}
.qrow input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent)}
.qmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.qname{font-size:14px;font-weight:700}
.qbody{color:var(--text-soft);font-size:13px;line-height:1.45}
.qrow.nobody{opacity:.6}
.qmain .meta{text-align:left}
.saverow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hr{height:0}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.staffform{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.ff{display:flex;flex-direction:column;gap:4px;min-width:160px;flex:1 1 160px}
.ff:last-child{flex:0 0 auto;min-width:0}
.ff label{font-size:12px;color:var(--text-soft);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ff input,.ff select,.editform input,.editform select,.field input,.field select,.field textarea{width:100%;padding:9px 12px;margin:0;font-size:14px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}
.editform{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:13px;font-weight:700;color:var(--text-soft)}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.ff input:focus,.ff select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.field .hint{font-size:12.5px;color:var(--text-faint)}
.field-row:has(> .field){display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;border:0}
.content form:not(.filters):not(.filter-bar) > input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
.content form:not(.filters):not(.filter-bar) > select{border:1px solid var(--border);border-radius:10px;padding:9px 12px;background:var(--surface)}

/* ── Dialogs: native <dialog> drawn as the prototype's modal ─────────────── */
dialog{border:0;border-radius:16px;padding:0;background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(20,18,14,.42)}
dialog.dlg{width:min(480px,92vw)}
dialog:not(.dlg){width:min(720px,94vw);max-width:94vw}
.dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 26px 6px}
.dlg-head .card-title{font-size:18px}
.dlg-x,dialog .mclose{background:var(--surface-muted);border:0;width:32px;height:32px;border-radius:999px;font-size:20px;line-height:1;
  color:var(--text-soft);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dlg-body{padding:12px 26px 4px;max-height:66vh;overflow-y:auto}
.dlg-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 26px 24px}
dialog .mhead{padding:24px 26px 10px;display:flex;align-items:flex-start;gap:14px}
dialog .mhead h3{margin:0;font-size:19px;font-weight:800}
dialog .mhead .ms{color:var(--text-soft);font-size:13.5px;margin-top:3px}
dialog .mclose{margin-left:auto}
dialog .mbody{padding:10px 26px 24px;max-height:70vh;overflow-y:auto}
/* The document viewer (lib/doc_view.js): a file opens over the record without leaving it. */
dialog.dlg.docview{width:min(960px,96vw);max-width:96vw}
.docview [hidden]{display:none!important}
.dv-head{display:flex;align-items:center;gap:12px;padding:18px 20px 12px}
.dv-id{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.dv-id b{font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-body{padding:0 20px 20px;min-height:160px}
.dv-frame{display:block;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface-muted)}
iframe.dv-frame{height:72vh}
img.dv-frame{width:auto;max-width:100%;max-height:72vh;margin:0 auto}
.dv-text{margin:0;max-height:72vh;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:13.5px;padding:12px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-muted)}
.dv-msg{margin:18px 0;padding:14px 16px;border-radius:10px;background:var(--surface-muted);color:var(--text-soft);font-size:14.5px}
.dv-msg.dv-bad{background:var(--red-tint);color:var(--red)}
.dv-name{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--accent);cursor:pointer;text-align:left}
.dv-name:hover{text-decoration:underline}
details.menu{position:relative}
details.menu > summary{list-style:none;cursor:pointer}
details.menu > summary::-webkit-details-marker{display:none}
details.menu .menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);padding:6px}
details.menu .menu-list a,details.menu .menu-list button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--text);background:transparent;border:0;cursor:pointer}
details.menu .menu-list a:hover,details.menu .menu-list button:hover{background:var(--surface-muted)}

/* ── The client record: inline preview and the drawer ────────────────────── */
.overlay .drawer.wide{width:min(620px,94vw)}
.drawer .drawer-close{cursor:pointer}
.drawer .drawer-close svg{width:16px;height:16px}
.cprev-h{display:flex;gap:14px;align-items:flex-start;padding:0 0 14px;flex-wrap:wrap}
.cmark{width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.cprev-id{min-width:0;flex:1 1 220px}
.cprev-id h3{margin:0 0 3px;font-size:19px;font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cprev-id .cl{font-size:13.5px;color:var(--text-soft)}
.cprev-id .cl a{color:var(--accent);font-weight:700}
.cprev-facts{display:flex;gap:8px 22px;flex-wrap:wrap;width:100%}
.drawer .cprev-facts{display:block}
.drawer .cprev-facts div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14.5px}
.cprev-facts div{display:flex;flex-direction:column;gap:2px}
.drawer .cprev-facts div{flex-direction:row}
.cprev-facts span{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
.drawer .cprev-facts span{font-size:14.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-soft)}
.cprev-facts b{font-size:14.5px;font-weight:700}
.cprev-x{display:none}
.cprev-b{padding:6px 0}
.msec{margin-bottom:16px}
.msec h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700}
.mtabs .tabin{position:absolute;opacity:0;pointer-events:none}
.mtabs .tablab{display:inline-block;padding:9px 12px;font-size:14px;font-weight:700;color:var(--text-soft);border-bottom:2.5px solid transparent;cursor:pointer}
.mtabs .tabin:checked + .tablab{color:var(--accent);border-bottom-color:var(--accent)}
.mtabs .tabn{color:var(--text-faint)}
.mtabs .tabpane{display:none;padding:14px 0 0;border-top:1px solid var(--border);margin-top:-1px}
.mtabs .tabin:nth-of-type(1):checked ~ .tabpane.p-overview,.mtabs .tabin:nth-of-type(2):checked ~ .tabpane.p-entities,
.mtabs .tabin:nth-of-type(3):checked ~ .tabpane.p-orders,.mtabs .tabin:nth-of-type(4):checked ~ .tabpane.p-money,
.mtabs .tabin:nth-of-type(5):checked ~ .tabpane.p-docs{display:block}
.mact{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.mact a.btn,.mact button{padding:8px 13px;border-radius:8px;font-size:13.5px}

/* ── Charts ──────────────────────────────────────────────────────────────── */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--border)}
.chart .area{fill:var(--accent);opacity:.12}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.chart .line.part{stroke-dasharray:5 4;opacity:.55}
.chart .dot{fill:var(--accent)}
.chart .lab{fill:var(--text-faint);font-size:10px}
.chartnote{margin-top:6px;color:var(--text-soft);font-size:12.5px}
.area-chart{width:100%;height:200px;display:block}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.phchart{position:relative;height:200px;border-radius:8px;display:grid;place-items:center;
  background:repeating-linear-gradient(to bottom,var(--border) 0,var(--border) 1px,transparent 1px,transparent 40px);border-bottom:1px solid var(--border)}
.phchart span{background:var(--surface);padding:5px 12px;border-radius:999px;border:1px solid var(--border);font-size:13px;color:var(--text-soft)}
.phdonut{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap}
.phdonut .ring{width:150px;height:150px;border-radius:50%;border:24px solid var(--surface-muted);display:grid;place-items:center;text-align:center;font-size:12.5px;color:var(--text-soft)}
.phdonut .ring b{display:block;font-size:22px;color:var(--text-faint)}
.phlegend div{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:14px;color:var(--text-soft)}
.phlegend i{width:10px;height:10px;border-radius:50%;background:var(--surface-muted)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pillars > .panel{margin-bottom:0}
.pillars .mrow{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--border);font-size:14px;color:var(--text-soft)}
.pillars .mrow b{color:var(--text-faint);font-weight:600}
.phbar{display:grid;grid-template-columns:1fr 90px 40px;gap:12px;align-items:center;padding:7px 0;font-size:14px;color:var(--text-soft)}
.phbar i{height:7px;border-radius:999px;background:var(--surface-muted)}
.phbar b{color:var(--text-faint);text-align:right;font-weight:600}
@media(max-width:1000px){.pillars{grid-template-columns:1fr}}
svg.ni{width:18px;height:18px;flex:0 0 18px}

/* ── Sign-in renders bare ────────────────────────────────────────────────── */
.loginwrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px 20px 12vh}
form.login{width:100%;max-width:24rem;margin:0;padding:30px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
form.login .sidebar-logo{padding:0 0 6px}
form.login .sidebar-logo .name{color:var(--text)}
form.login label{font-size:13px;font-weight:700;color:var(--text-soft)}
form.login input{width:100%;padding:10px 12px;margin:5px 0 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
form.login button{width:100%;padding:11px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}
form.login .sub{color:var(--text-soft);margin:0 0 18px}
form.login img{filter:invert(1)}
[data-theme="dark"] form.login img{filter:none}

/* ── Team and permissions (routes/w-team.js) ───────────────────────────── */
.ff-form{display:grid;gap:14px}
.ff-form .field label{display:block;font-size:12px;font-weight:700;color:var(--text-soft);margin-bottom:5px}
.ff-form .field input,.ff-form .field select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);font:inherit}
.ff-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:2px}
.ff-actions .inline{display:inline}
.lvlrow{display:flex;gap:6px;flex-wrap:wrap}
.lvl{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--border);border-radius:9px;
  font-size:13px;font-weight:600;color:var(--text-soft);cursor:pointer;background:var(--surface)}
.lvl:hover{border-color:var(--border-strong)}
.lvl input{margin:0;accent-color:var(--accent)}
.lvl.on{border-color:var(--accent);background:var(--accent-tint);color:var(--text)}
.lvl:has(input:disabled){opacity:.6;cursor:default}
.permcard td{vertical-align:middle}
.permcard .cell-sub{margin-top:3px}

/* ── Phones: the prototype hides the sidebar; a menu button brings it back ─ */
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.mtop,.navscrim,.navclose{display:none}
@media(max-width:760px){
  .app-shell{flex-direction:column}
  .mtop{display:flex;position:sticky;top:0;z-index:40;align-items:center;gap:10px;background:var(--sidebar-bg);color:#fff;padding:10px 12px}
  .mtop .sidebar-logo{padding:0}
  .mtop .mright{margin-left:auto;display:flex;align-items:center;gap:8px}
  .mtop .nav-badge{margin:0}
  .burger{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;color:#fff;cursor:pointer;background:rgba(255,255,255,.08)}
  .burger svg{width:20px;height:20px}
  .sidebar{display:flex;position:fixed;top:0;left:0;bottom:0;width:270px;max-width:84vw;height:100dvh;z-index:60;transform:translateX(-100%);transition:transform .2s ease}
  .navtoggle:checked ~ .sidebar{transform:none}
  .navscrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(20,18,14,.42);opacity:0;pointer-events:none;transition:opacity .2s}
  .navtoggle:checked ~ .navscrim{opacity:1;pointer-events:auto}
  .navclose{display:flex;margin-left:auto;color:var(--sidebar-text);cursor:pointer;width:32px;height:32px;align-items:center;justify-content:center}
  .navclose svg{width:18px;height:18px}
  .topbar h1{font-size:23px}
  .topbar-right{width:100%;justify-content:stretch}
  .topbar-right > *{flex:1 1 auto}
  .gsearch{width:100%}
  .stat-row,.stats,.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-card{padding:14px}
  .stat-card .val{font-size:22px}
  .stat-card .lbl{font-size:11.5px}
  .panel,.card{padding:16px}
  .board{grid-auto-columns:minmax(80vw,1fr)}
  .field-row:has(> .field){grid-template-columns:1fr}
  /* 16px or iOS zooms the page on focus. !important because .select, .ff input
     and friends set 14px with more specific selectors. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
  .checkbox-label input,label.check input,input.bulk-pick{width:20px;height:20px}
  .segmented{margin-left:0}
  .filters .search-box,.filter-bar .search-box{flex-basis:100%}
  /* Filters: two to a row, full width, and a long client name can't push the page wider. */
  .filters > label.select,.filters > div.select,.filter-bar > label.select{flex:1 1 calc(50% - 5px);min-width:0;max-width:100%}
  label.select select{min-width:0;width:100%;text-overflow:ellipsis}
  /* Thumb-sized taps. */
  .btn-sm,.action-btn,a.page-btn,.page-btn{min-height:40px}
  .btn-sm,.action-btn{display:inline-flex;align-items:center;justify-content:center}
  .page-btn,a.page-btn{min-width:40px}
  .mstack td > a:only-child,a.signout,a.panel-link{display:inline-block;padding:8px 0}
  /* Page numbers wrap instead of widening the page (Orders list, Work). */
  .pagination .per,.pagination .pages{flex-wrap:wrap;max-width:100%}
  /* Age | text | action rows (Approvals, Team overdue, Margin): action drops under the text. */
  .row{grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
  .row > .meta{grid-column:2;text-align:left}
  /* A lone last stat tile spans the row instead of leaving a hole. */
  .stat-row > :last-child:nth-child(odd),.stats > :last-child:nth-child(odd),.tiles > :last-child:nth-child(odd){grid-column:1/-1}
  table.mstack{min-width:0}
  .mstack thead,.mstack tr:has(> th){display:none}
  .mstack,.mstack tbody,.mstack tr,.mstack td{display:block;width:auto}
  .content table.mstack tr{border-top:1px solid var(--border);padding:12px 0;position:relative}
  .mstack tbody tr:first-child{border-top:0}
  .content table.mstack td{border:0;padding:3px 0;text-align:left;max-width:none}
  .mstack tr:hover{background:transparent!important}
  .mstack td[data-l]{position:relative;padding-left:7.4rem!important;min-height:1.5rem}
  .mstack td[data-l]::before{content:attr(data-l);position:absolute;left:0;top:.4rem;width:6.8rem;font-size:11px;
    font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}
  .mstack td:first-child,.mstack td.cx,.mstack td[colspan]{padding-left:0!important}
  .mstack td:first-child{padding-right:2.2rem;margin-bottom:4px}
  .mstack td:first-child::before,.mstack td.cx::before,.mstack td[colspan]::before{display:none}
  .mstack td.cx{position:absolute;right:4px;top:12px;padding:0}
  .mstack td .one{white-space:normal}
  table.clist.mstack tr.phone-hidden{display:none}
  .clist-more{display:block;width:100%;margin:10px 0 0;padding:10px;border:1px dashed var(--border-strong);border-radius:10px;
    background:var(--surface-muted);color:var(--text);font-weight:700;cursor:pointer}
  /* Dashboard alerts: badge and Review button on one line, the text full width under them. */
  .att-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"p a" "b b";gap:8px 12px;align-items:center}
  .att-row > :nth-child(1){grid-area:p;justify-self:start}
  .att-row > .body{grid-area:b}
  .att-row > :nth-child(3){grid-area:a}
}
@media(min-width:761px){ .clist-more{display:none} }

.nav-sub{display:flex;flex-direction:column;gap:1px;margin:0 0 6px}
.nav-subitem{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 40px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--sidebar-text-dim);text-decoration:none;position:relative}
.nav-subitem:hover{background:var(--sidebar-hover);color:#fff}
.nav-subitem.active{color:#fff;font-weight:700;background:var(--sidebar-hover)}
.nav-subitem.active::before{content:"";position:absolute;left:28px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--accent)}
.nav-subitem .label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-subitem--child{padding-left:58px;font-size:12.5px}
.nav-subitem--child.active::before{left:46px}

/* ── Tokens: the designs' palette, light and dark ─────────────────────────── */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-muted:#f6f7f8; --border:#e2e7ee; --border-strong:#d8dfe7;
  --text:#111827; --text-soft:#667085; --text-faint:#8a94a6;
  --accent:#ff4814; --accent-hover:#ed3e0c; --accent-tint:#fff0ea;
  --red:#e5231b; --red-tint:#ffe8e6; --amber:#c26a00; --amber-tint:#fff3d5;
  --green:#087a43; --green-tint:#e4f6ec; --blue:#0068e8; --blue-tint:#e9f3ff;
  --purple:#6c16d9; --purple-tint:#f1e7ff; --gray:#172033; --gray-tint:#f0f1f3;
  --sidebar-bg:#ffffff; --sidebar-text:#111827; --sidebar-text-dim:#667085; --sidebar-hover:#f4f5f7;
  --r2-navy:#0b132b; --r2-row-hover:#fafbfc; --r2-head-bg:linear-gradient(#fbfcfd,#f8f9fa);
  --r2-box-bg:linear-gradient(90deg,#f6faff,#f3f8ff); --r2-box-border:#d6e4f5; --r2-box-line:#d4e2f2;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --logo-tile:#ffffff; /* solid tile behind the logo (Integrations hub) */
}
[data-theme="dark"]{
  --logo-tile:#111827;
  --bg:#0b1020; --surface:#111827; --surface-muted:#1a2233; --border:#263041; --border-strong:#334155;
  --text:#e8ecf3; --text-soft:#a3adbf; --text-faint:#7b8698;
  --accent-tint:#3a1d12; --red:#ff5a4f; --red-tint:#3a1a19; --amber:#f0a53a; --amber-tint:#352812;
  --green:#3ccf85; --green-tint:#123224; --blue:#5aa2ff; --blue-tint:#15284a;
  --purple:#b18aff; --purple-tint:#2a1a4a; --gray:#d6dbe4; --gray-tint:#222b3a;
  --sidebar-bg:#0e1424; --sidebar-text:#e8ecf3; --sidebar-text-dim:#8c96a8; --sidebar-hover:#1a2233;
  --r2-navy:#e8ecf3; --r2-row-hover:#161f30; --r2-head-bg:#141c2c;
  --r2-box-bg:#101a2e; --r2-box-border:#233554; --r2-box-line:#233554;
}
body{background:var(--bg);color:var(--text);font-family:var(--font)}

/* ── Sidebar: white, four items, then MORE ────────────────────────────────── */
/* Widened from 232 to 264 (task #10075, 2026-09-29): at 232 "Dashboard" truncated to "Dashboa…" whenever its
   notification-count badge (.nav-badge, next to the label) was showing -- the label (flex:1;min-width:0 in
   lib/theme.js) and the badge share the row's leftover width after the icon, and the label alone was tight to
   begin with. 264 keeps "Dashboard" in full even beside a 2-3 digit badge, with room to spare; every other
   label (longest is "Operations", which never carries a badge) already fit at 232 and fits with more room now. */
.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--border);width:264px;min-width:264px;max-width:264px;flex:0 0 264px;padding:23px 12px 24px;color:var(--sidebar-text)}
.sidebar-logo{padding:0 12px 26px}
.sidebar-logo img.wm{height:22px}
:root:not([data-theme="dark"]) .sidebar-logo img.wm,:root:not([data-theme="dark"]) .mtop .sidebar-logo img.wm{filter:invert(1) brightness(.35) sepia(1) hue-rotate(190deg) saturate(3)}
.sidebar-eyebrow{display:none}
.nav-group{margin-bottom:10px;display:flex;flex-direction:column;gap:5px}
.nav-item{height:45px;border-radius:8px;gap:15px;padding:0 17px;color:var(--sidebar-text);font-size:17px;font-weight:500}
.nav-item .ic svg{width:22px;height:22px}
.nav-item:hover{background:var(--sidebar-hover);color:var(--sidebar-text)}
.nav-item.active{color:#fff;background:linear-gradient(90deg,var(--accent-hover),var(--accent));box-shadow:0 2px 5px rgba(235,66,14,.16)}
.nav-item .nav-badge{background:var(--red-tint);color:var(--red)}
.nav-item.active .nav-badge{background:rgba(255,255,255,.28);color:#fff}
.r2-more-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sidebar-text-dim);padding:14px 17px 6px}
.r2-more .nav-item{height:36px;font-size:14.5px;gap:12px;color:var(--sidebar-text-dim)}
.r2-more .nav-item .ic svg{width:18px;height:18px}
.r2-more .nav-item.active{color:#fff}
.r2-more button.themetog{width:100%;background:none;border:0;cursor:pointer;font:inherit;font-size:14.5px;text-align:left}
.r2-more button.themetog:hover{background:var(--sidebar-hover)}
.r2-more .themetog .nav-badge{background:var(--gray-tint);color:var(--text-soft)}
/* Needs Attention and Tickets, nested under Clients */
.r2-nest{display:flex;flex-direction:column;gap:2px;margin:-1px 0 4px}
.r2-nest .nav-item{height:36px;font-size:13.5px;gap:8px;padding-left:24px;padding-right:8px;color:var(--sidebar-text-dim)}
.r2-nest .nav-item .ic svg{width:17px;height:17px}
.r2-nest .nav-item.active{color:#fff}
.r2-nest .nav-item .nav-badge{font-size:11px;padding:1px 6px;margin-left:auto}
.r2-nest .nav-item.active .label{font-weight:600}
.r2-nest .nav-sub .nav-subitem{padding-left:68px}
.r2-nest .nav-sub .nav-subitem.active::before{left:56px}
.nav-subitem{color:var(--sidebar-text-dim)}
.nav-subitem:hover{background:var(--sidebar-hover);color:var(--sidebar-text)}
.nav-subitem.active{color:var(--sidebar-text);background:var(--sidebar-hover)}
.sidebar-foot{border-top:0;margin-top:10px;padding-top:0}
.sidebar-user{gap:12px;padding:0 12px}
.sidebar-user:hover{background:transparent}
.sidebar-user .av{width:40px;height:40px;font-size:16px;font-weight:500}
.sidebar-user .who{font-size:16px;color:var(--sidebar-text)}
.sidebar-user .signout{font-size:14px;color:var(--sidebar-text-dim)}
.sidebar-user .signout:hover{color:var(--sidebar-text)}

/* ── The one top bar: search, bell, profile ───────────────────────────────── */
.r2-top{position:sticky;top:0;z-index:30;height:66px;display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding:0 34px 0 28px;background:color-mix(in srgb,var(--bg) 98%,transparent);border-bottom:1px solid var(--border)}
.r2-top .gsearch{width:min(496px,100%)}
.r2-top .search-box{height:43px;background:var(--surface-muted);border:1px solid var(--border-strong);border-radius:9px;padding:0 15px;gap:11px;display:flex;align-items:center}
.r2-top .search-box input{border:0;background:transparent;outline:none;flex:1;font-size:15px;color:var(--text);min-width:0}
.r2-top .search-box svg{color:var(--text-faint)}
.r2-top .kbd{font-size:11px;color:var(--text-faint);border:1px solid var(--border);border-radius:5px;padding:1px 6px}
.r2-actions{display:flex;align-items:center;gap:20px}
.r2-actions .bellbtn,.r2-actions [class*="bell"]{color:var(--r2-navy)}
.r2-prof{position:relative}
.r2-prof > summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;font-size:16px;color:var(--text)}
.r2-prof > summary::-webkit-details-marker{display:none}
.r2-prof .pav{width:42px;height:42px;border-radius:50%;background:var(--gray-tint);display:grid;place-items:center;font-size:16px;font-weight:500;color:var(--text)}
.r2-prof .chev{width:9px;height:9px;border-right:2px solid var(--text-soft);border-bottom:2px solid var(--text-soft);transform:rotate(45deg) translateY(-2px)}
.r2-prof .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-md);padding:6px;z-index:60}
.r2-prof .menu a,.r2-prof .menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:7px;
  font:inherit;font-size:14px;color:var(--text);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left}
.r2-prof .menu a:hover,.r2-prof .menu button:hover{background:var(--surface-muted)}
.r2-prof .themetog .on{display:none} [data-theme="dark"] .r2-prof .themetog .on{display:inline} [data-theme="dark"] .r2-prof .themetog .off{display:none}
.r2-prof .themetog span:last-child{color:var(--text-faint);font-size:12.5px}

/* ── Page heading, in the content ─────────────────────────────────────────── */
.main > .topbar{display:none}
.content{padding:20px 29px 60px 27px;max-width:1600px;margin:0 auto;width:100%}
.r2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 22px;padding:0 5px}
.r2-head h1{font-size:42px;line-height:1.1;letter-spacing:-1.6px;font-weight:800;color:var(--r2-navy)}
.r2-head .sub{margin-top:7px;font-size:16px;color:var(--text-soft);max-width:70ch}
.r2-head .r2-head-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-top:6px}
.r2-head .r2-date{margin-top:23px;color:var(--text-soft);font-size:16px;white-space:nowrap}
.sbody > .r2-head:first-child{margin-top:0}

/* ── Tables: the designs' one list shape ──────────────────────────────────── */
.r2-card{border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:0 1px 2px rgba(16,24,40,.02);overflow:hidden}
table.r2-table{width:100%;border-collapse:collapse;table-layout:fixed}
.r2-table thead{background:var(--r2-head-bg)}
.content table.r2-table th{height:46px;padding:0 24px;text-align:left;font-size:14px;color:var(--text-soft);font-weight:600;letter-spacing:0;text-transform:none;
  border-bottom:1px solid var(--border);white-space:nowrap;background:transparent}
.content table.r2-table td{height:86px;padding:10px 24px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:16px;color:var(--text)}
.content table.r2-table.compact td{height:64px;font-size:15px;padding:8px 20px}
.content table.r2-table.compact th{height:43px;padding:0 20px}
.r2-table tbody tr:last-child td{border-bottom:0}
.r2-table tbody tr{transition:background .15s ease;cursor:pointer}
.r2-table tbody tr:hover{background:var(--r2-row-hover)}
.r2-table a.r2-rowlink{color:inherit;text-decoration:none;display:block}
.r2-client{display:block;font-weight:700;font-size:17px;color:var(--text);margin-bottom:5px;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.r2-table.compact .r2-client{font-size:16px;margin-bottom:4px}
.r2-sub{display:block;color:var(--text-soft);font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.r2-svc{display:block;color:var(--text);font-size:16px;margin-bottom:5px;line-height:1.15}
.r2-table.compact .r2-svc{font-size:15px;margin-bottom:4px}
.r2-next{font-size:16px;line-height:1.45;color:var(--text);max-width:260px}
.r2-table.compact .r2-next{font-size:15px;line-height:1.35}
.r2-next .r2-more-steps{display:block;font-size:13px;color:var(--text-faint);margin-top:2px}
.r2-arrow{width:11px;height:11px;border-top:2px solid var(--text);border-right:2px solid var(--text);transform:rotate(45deg);margin-left:auto;margin-right:4px}
.r2-sort{display:inline-flex;flex-direction:column;gap:1px;margin-left:9px;vertical-align:middle;transform:translateY(1px)}
.r2-sort i{width:6px;height:6px;border-left:1.5px solid var(--text-faint);border-top:1.5px solid var(--text-faint)}
.r2-sort i:first-child{transform:rotate(45deg)} .r2-sort i:last-child{transform:rotate(225deg)}
.r2-sort.on i{border-color:var(--text)}
.r2-empty{padding:28px 24px;color:var(--text-soft);font-size:15px}

/* Stage pill: "Where it's at" */
.r2-stage{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:14px;font-size:15px;font-weight:500;white-space:nowrap;
  background:var(--gray-tint);color:var(--gray)}
.r2-table.compact .r2-stage{min-height:31px;padding:0 12px;border-radius:13px;font-size:14px}
.r2-stage.blue{background:var(--blue-tint);color:var(--blue)} .r2-stage.green{background:var(--green-tint);color:var(--green)}
.r2-stage.purple{background:var(--purple-tint);color:var(--purple)} .r2-stage.yellow{background:var(--amber-tint);color:var(--amber)}
.r2-stage.red{background:var(--red-tint);color:var(--red)} .r2-stage.gray{background:var(--gray-tint);color:var(--gray)}

/* Who has the ball */
.r2-ball{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:15px;color:var(--text)}
.r2-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:500;flex:0 0 auto;background:var(--gray-tint);color:var(--text)}
.r2-av.sm{width:31px;height:31px;font-size:14px;font-weight:600}
.r2-av.matias{background:#ff4a10;color:#fff} .r2-av.claire{background:#5ca4f5;color:#fff}
.r2-av.anna{background:#dcebff;color:#0865df} .r2-av.alex{background:#0b132b;color:#fff}
[data-theme="dark"] .r2-av.anna{background:#15284a;color:#8ec0ff} [data-theme="dark"] .r2-av.alex{background:#e8ecf3;color:#0b132b}
.r2-av svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Due / Follow-up */
.r2-due{font-size:16px;color:var(--text-soft);white-space:nowrap}
.r2-table.compact .r2-due{font-size:15px}
.r2-due.urgent{color:var(--red);font-weight:500}

/* Filters over a list */
.r2-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 22px}
/* Tripled class: the older ".content form:not(.filters):not(.filter-bar) > select" rule in lib/theme.js resets the background (and so the arrow). */
.content .r2-filters.r2-filters.r2-filters select,.content .r2-filters.r2-filters.r2-filters input[type=search]{height:48px;min-width:190px;padding:0 17px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);
  font:inherit;font-size:16px;color:var(--text);appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.content .r2-filters.r2-filters.r2-filters input[type=search]{background-image:none;padding-right:17px;min-width:240px}
.r2-filters label.r2-check{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text)}
.r2-filters a.r2-clear{color:var(--blue);font-size:15px;text-decoration:none}

/* Pagination */
.r2-pager{height:68px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;flex-wrap:wrap}
.r2-pager .showing{color:var(--text-soft);font-size:14px}
.r2-pager .pages{display:flex;align-items:center;gap:18px;color:var(--text-soft);font-size:14px}
.r2-pager .pages a{color:var(--text-soft);text-decoration:none;min-width:20px;text-align:center}
.r2-pager .pages .on{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent)}
.r2-pager .pages .arr{width:9px;height:9px;border-top:2px solid var(--text);border-right:2px solid var(--text);display:inline-block}
.r2-pager .pages .arr.l{transform:rotate(-135deg)} .r2-pager .pages .arr.r{transform:rotate(45deg)}
.r2-pager .pages .off{opacity:.35;pointer-events:none}

/* Collapsible bar (Dashboard "Waiting (8)") */
details.r2-bar{margin-top:25px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:0 1px 2px rgba(16,24,40,.02)}
details.r2-bar > summary{list-style:none;min-height:114px;display:flex;align-items:center;padding:0 28px;cursor:pointer}
details.r2-bar > summary::-webkit-details-marker{display:none}
details.r2-bar > summary:hover{background:var(--r2-row-hover);border-radius:10px}
.r2-bar .clk{width:49px;height:49px;border-radius:50%;background:var(--blue-tint);display:grid;place-items:center;margin-right:18px;flex:0 0 49px;color:var(--blue)}
.r2-bar .clk svg{width:26px;height:26px}
.r2-bar .bt{font-size:21px;font-weight:750;letter-spacing:-.25px;margin-bottom:6px}
.r2-bar .bd{color:var(--text-soft);font-size:15px}
.r2-bar .bchev{width:12px;height:12px;border-right:2px solid var(--r2-navy);border-bottom:2px solid var(--r2-navy);transform:rotate(45deg);margin:0 7px 7px auto;transition:transform .15s}
details.r2-bar[open] .bchev{transform:rotate(225deg);margin-bottom:0}
details.r2-bar[open] > .r2-bar-body{border-top:1px solid var(--border)}

/* Buttons in the new pages */
.r2-btn{height:45px;padding:0 20px;border-radius:8px;font:inherit;font-weight:500;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border-strong);color:var(--text);text-decoration:none}
.r2-btn:hover{border-color:var(--text-faint)}
.r2-btn.primary{border:0;color:#fff;background:linear-gradient(90deg,#f13e0c,#ff4b16);font-weight:600}
.r2-btn.primary:hover{filter:brightness(1.05)}
.r2-btn.sm{height:36px;padding:0 12px;font-size:14px}
.r2-back{color:var(--blue);font-size:15px;text-decoration:none;display:inline-block;margin-bottom:6px}

/* Detail pages: cards, key/value rows, tabs */
.r2-panel{border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.r2-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px 8px}
.r2-panel-head .t{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.r2-ic{width:38px;height:38px;border-radius:50%;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;flex:0 0 auto}
.r2-ic svg{width:19px;height:19px}
.r2-kv{display:grid;grid-template-columns:34% 66%;padding:6px 0;border-bottom:1px solid var(--border);font-size:14px;line-height:1.35}
.r2-kv:last-child{border-bottom:0}
.r2-kv > :first-child{color:var(--text-soft)} .r2-kv > :last-child{color:var(--text);overflow-wrap:anywhere}
.r2-tabs{height:48px;display:flex;align-items:flex-end;gap:31px;border-bottom:1px solid var(--border);margin-bottom:17px;overflow-x:auto}
.r2-tabs a{height:48px;display:flex;align-items:center;position:relative;color:var(--text-soft);font-size:15px;text-decoration:none;white-space:nowrap}
.r2-tabs a.on{color:var(--text);font-weight:700}
.r2-tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent)}
.r2-tabs .n{color:var(--blue);margin-left:4px}

/* ── Phones ───────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .mtop{background:var(--sidebar-bg);color:var(--sidebar-text);border-bottom:1px solid var(--border)}
  .burger{color:var(--sidebar-text);background:var(--sidebar-hover)}
  .navclose{color:var(--sidebar-text)}
  .r2-top{position:static;height:auto;padding:10px 16px;border-bottom:0}
  .r2-top .gsearch{width:100%}
  .r2-top .r2-actions{display:none}
  .content{padding:12px 16px 48px}
  .r2-head{flex-direction:column;gap:6px;margin-bottom:16px;padding:0}
  .r2-head h1{font-size:30px;letter-spacing:-1px}
  .r2-head .r2-date{margin-top:0}
  .r2-head .r2-head-right{justify-content:flex-start;margin-top:4px}
  .content .r2-filters.r2-filters.r2-filters select,.content .r2-filters.r2-filters.r2-filters input[type=search]{min-width:0;flex:1 1 calc(50% - 6px)}
  table.r2-table,.r2-table tbody,.r2-table tr,.r2-table td{display:block;width:auto}
  .r2-table thead{display:none}
  .content table.r2-table td{height:auto;border:0;padding:3px 16px}
  .r2-table tr{border-top:1px solid var(--border);padding:12px 0;position:relative}
  .r2-table tbody tr:first-child{border-top:0}
  .r2-table td.r2-go{position:absolute;right:6px;top:18px;padding:0}
  .r2-table td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);margin:6px 0 2px}
  .r2-table td:first-child::before,.r2-table td.r2-go::before{display:none}
  .r2-next{max-width:none}
  details.r2-bar > summary{min-height:84px;padding:0 16px}
  .r2-bar .bt{font-size:18px}
}

.sidebar-collapse-btn{position:fixed;top:50px;left:232px;transform:translate(-50%,-50%);
  width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--text-soft);border:1px solid var(--border-strong);
  box-shadow:var(--shadow-sm);cursor:pointer;z-index:70;padding:0;transition:left .15s ease}
.sidebar-collapse-btn:hover{color:var(--text);background:var(--surface-muted)}
.sidebar-collapse-btn svg{width:13px;height:13px;transform:rotate(180deg)}
[data-sidebar="collapsed"] .sidebar-collapse-btn svg{transform:rotate(0deg)}
.sidebar .sidebar-logo .mark{display:none}
@media(max-width:760px){ .sidebar-collapse-btn{display:none} }
@media(min-width:761px){
  [data-sidebar="collapsed"] .sidebar{width:88px;min-width:88px;max-width:88px;flex:0 0 88px;padding-left:10px;padding-right:10px}
  [data-sidebar="collapsed"] .sidebar-collapse-btn{left:88px}
  [data-sidebar="collapsed"] .nav-item{justify-content:center;padding-left:8px;padding-right:8px}
  [data-sidebar="collapsed"] .nav-item .label{display:none}
  [data-sidebar="collapsed"] .nav-item .nav-badge{font-size:11px;padding:2px 6px}
  [data-sidebar="collapsed"] .r2-more-label{display:none}
  [data-sidebar="collapsed"] .themetog .nav-badge{display:none}
  [data-sidebar="collapsed"] .sidebar .sidebar-logo .wm{display:none}
  [data-sidebar="collapsed"] .sidebar .sidebar-logo .mark{display:flex}
  /* Still real links, so still shown -- just given back the width their indent/margins used to reserve for a
     label column that no longer exists at this width, so the link text itself has room to show. */
  [data-sidebar="collapsed"] .nav-subitem{padding-left:12px}
  [data-sidebar="collapsed"] .nav-subitem--child{padding-left:22px}
  /* Viewing As: the label ("Viewing as: Corey") hides -- it's a title/tooltip on the select instead, same
     collapsed pattern as a nav-item's label -- and the select itself shrinks to one round icon-only control,
     centered in the rail so its arrow sits under it instead of pinned to a now-nonexistent right edge. The
     select stays the real, single Viewing As control (still opens the same options on click); only its
     closed-state text is hidden (font-size:0) so the picked name doesn't try to cram into 32px -- the open
     dropdown list gets its readable size back below. */
  [data-sidebar="collapsed"] .view-as label{display:none}
  [data-sidebar="collapsed"] .view-as form{display:flex;justify-content:center;padding:2px 0 10px}
  [data-sidebar="collapsed"] .view-as select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
    width:32px;height:32px;margin:0;padding:0;font-size:0;text-align:center;cursor:pointer;
    border:none;border-radius:999px;background-color:var(--sidebar-hover);
    background-repeat:no-repeat;background-position:center;background-size:13px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
  [data-theme="dark"][data-sidebar="collapsed"] .view-as select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8ecf3' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
  [data-sidebar="collapsed"] .view-as select:hover,[data-sidebar="collapsed"] .view-as select:focus{background-color:var(--border)}
  [data-sidebar="collapsed"] .view-as select option{font-size:14px;color:var(--text)}
  /* Avatar: shrunk and centered on the same column as the nav icons above (.nav-item is centered in the same
     68px inner width, so justify-content:center here lands on the same line). The who/signout text hides and
     reappears as a small floating card on click (the checkbox-hack toggle added in view.js), positioned with
     position:fixed rather than absolute because .sidebar itself scrolls (overflow-y:auto, which also computes
     overflow-x to auto) and would otherwise clip a popover pinned to its own edge -- same reason
     .sidebar-collapse-btn above is fixed instead of absolute. */
  [data-sidebar="collapsed"] .sidebar-user{justify-content:center;padding:6px 0;gap:0}
  [data-sidebar="collapsed"] .sidebar-user .av{width:28px;height:28px;font-size:11px;margin:0 auto;cursor:pointer}
  [data-sidebar="collapsed"] .sidebar-user .sb-user-info{display:none}
  [data-sidebar="collapsed"] .sb-user-toggle:checked ~ .sb-user-info{display:block;position:fixed;left:96px;bottom:18px;z-index:60;
    min-width:160px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);padding:10px 12px}
}