/* =====================================================================
   OFFISIO — app.css (v3.5 — design system rebuild)

   Single source of truth for every screen. Imports the Inter typeface,
   defines design tokens, app shell, and every component used across
   the modules. Old class names from v3.4 still work — they are mapped
   onto the new design language so existing modules look correct
   without rewriting their PHP first.

   Sections:
     1. Tokens
     2. Reset & base
     3. App shell — sidebar, topbar, main
     4. Buttons, pills, badges
     5. Cards, panels, tables
     6. Forms, fields, segmented controls
     7. Filter bars, search inputs, chips
     8. KPI strip, stat cards
     9. Charts (mini bars + sparklines)
    10. Module-specific patterns
    11. Print + responsive
    12. Legacy class compat (v3.4 and earlier)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  /* brand */
  --brand:        #10b981;
  --brand-600:    #0ea371;
  --brand-700:    #047857;
  --brand-soft:   #d1fae5;
  --brand-tint:   #ecfdf5;

  /* legacy alias for old --primary calls */
  --primary:       var(--brand);
  --primary-hover: var(--brand-600);
  --primary-soft:  var(--brand-tint);

  /* neutrals */
  --ink-900:  #0b1220;
  --ink-800:  #1f2937;
  --ink-700:  #374151;
  --ink-500:  #6b7280;
  --ink-400:  #9ca3af;
  --ink-300:  #d1d5db;
  --ink-200:  #e5e7eb;
  --ink-100:  #f3f4f6;
  --ink-50:   #f9fafb;

  --bg-body:   #f7f8fa;
  --surface:   #ffffff;
  --surface-2: #fbfbfd;

  /* nav (deep navy sidebar) */
  --nav-bg:        #0b1220;
  --nav-bg-2:      #111827;
  --nav-text:      #cbd5e1;
  --nav-dim:       #64748b;
  --nav-active-bg: rgba(16, 185, 129, 0.16);
  --nav-active-fg: #d1fae5;

  /* semantic */
  --ok:        #10b981;
  --ok-bg:     #ecfdf5;
  --warn:      #f59e0b;
  --warn-bg:   #fffbeb;
  --bad:       #ef4444;
  --bad-bg:    #fef2f2;
  --info:      #3b82f6;
  --info-bg:   #eff6ff;

  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* radii */
  --r-card:    14px;
  --r-control: 8px;
  --r-pill:    999px;

  /* shadows */
  --sh-card: 0 1px 2px rgba(15, 23, 42, 0.04),
             0 1px 1px rgba(15, 23, 42, 0.03);
  --sh-pop:  0 8px 24px -6px rgba(15, 23, 42, 0.18),
             0 2px 6px rgba(15, 23, 42, 0.08);
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg-body);
  color: var(--ink-800);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

/* =========================================================
   3. APP SHELL — sidebar, topbar, main
   ========================================================= */
.app, .app-shell {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- sidebar --- */
.side, .sidebar {
  background: var(--nav-bg);
  color: var(--nav-text);
  padding: 22px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-brand, .brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 14px;
}
.side-logo, .brand-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand) 0%, #34d399 100%);
  color: #06251c; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; letter-spacing: -0.01em;
  flex-shrink: 0;
}
.side-name, .brand-name {
  color: #fff; font-weight: 700; font-size: 15px; line-height: 1.1;
}
.side-tag, .brand-tag {
  color: var(--nav-dim); font-size: 11px;
}

.side-section, .nav-section {
  font-size: 11px; font-weight: 600;
  color: var(--nav-dim); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 10px 6px;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-control);
  color: var(--nav-text); font-size: 13px; font-weight: 500;
  transition: background 120ms, color 120ms;
}
.nav a:hover, .nav-item:hover { background: rgba(255,255,255,0.04); color: #fff; }
.nav a.active, .nav-item.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
}
.nav .ic, .nav-item .ic, .nav-icon {
  width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85;
  display: inline-flex; align-items: center; justify-content: center;
}

.side-foot, .sidebar-foot {
  margin-top: auto;
  padding: 14px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 12px;
}
.side-foot .avatar, .sidebar-foot .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #1f2937; color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.side-foot .who, .sidebar-foot .who { line-height: 1.2; min-width: 0; }
.side-foot .who-name, .sidebar-foot .who-name {
  color: #fff; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-foot .who-role, .sidebar-foot .who-role {
  color: var(--nav-dim); font-size: 11px;
}
.side-foot .logout, .sidebar-foot .logout {
  margin-left: auto;
  color: var(--nav-dim); font-size: 11px; font-weight: 600;
}
.side-foot .logout:hover, .sidebar-foot .logout:hover { color: #fff; }
.version {
  color: var(--nav-dim); font-size: 11px; font-weight: 500;
}

/* --- main + topbar --- */
.main { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 248, 250, 0.85);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--ink-200);
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px;
}
.topbar h1, .topbar .page-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; margin: 0;
}
.topbar .crumb {
  color: var(--ink-500); font-size: 12px; font-weight: 500;
}
.topbar .grow { flex: 1; }
.topbar .search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  padding: 8px 12px;
  width: 320px; max-width: 36vw;
  color: var(--ink-500); font-size: 13px;
}
.topbar .search input {
  border: 0; outline: none; background: transparent;
  flex: 1; min-width: 0; color: var(--ink-800); font: inherit;
}
.topbar .icon-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-control);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
  display: grid; place-items: center;
  cursor: pointer; position: relative;
  text-decoration: none;
}
.topbar .icon-btn:hover { background: var(--ink-50); }
.topbar .icon-btn .dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bad); border: 2px solid var(--surface);
}
.topbar .user-box {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.topbar .user-box .user-name {
  font-weight: 600; color: var(--ink-900);
}
.topbar .user-box .user-role {
  color: var(--ink-500); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.topbar .user-box .logout {
  color: var(--ink-500); font-size: 12px; font-weight: 600;
  margin-left: 6px;
}
.topbar .user-box .logout:hover { color: var(--bad); }

.content { padding: 24px 28px 48px; }

/* mobile hamburger */
.menu-toggle, .nav-toggle {
  display: none;
  width: 38px; height: 38px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 3px;
}
.nav-toggle-bar {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink-700);
  border-radius: 1px;
}
.nav-scrim { display: none; }

/* =========================================================
   4. BUTTONS, PILLS, BADGES
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--r-control);
  cursor: pointer; border: 1px solid transparent;
  text-decoration: none; line-height: 1;
  transition: background 120ms, color 120ms, border-color 120ms;
  white-space: nowrap;
}
.btn-primary, .btn-inline.btn-primary, button.btn-primary {
  background: var(--brand); color: #fff;
  border-color: var(--brand);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  padding: 9px 16px;
  border-radius: var(--r-control);
  font: inherit; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; cursor: pointer;
  line-height: 1;
}
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn-secondary {
  background: var(--surface); color: var(--ink-800);
  border-color: var(--ink-300);
}
.btn-secondary:hover { background: var(--ink-50); }
.btn-ghost {
  background: transparent; color: var(--ink-700);
  border-color: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-control);
  font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn-ghost:hover { background: var(--ink-100); }
.btn-danger {
  background: var(--bad); color: #fff;
  border-color: var(--bad);
}
.btn-danger:hover { background: #dc2626; }

.btn-sm {
  font-size: 12px; padding: 6px 12px;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ink-300);
  background: var(--surface);
  color: var(--ink-700);
  cursor: pointer; text-decoration: none;
  font-weight: 600;
}
.btn-sm:hover { background: var(--ink-50); }
.btn-sm.btn-ghost { border-color: transparent; background: transparent; }
.btn-sm.btn-ghost:hover { background: var(--ink-100); }
.btn-plain { color: var(--brand-700); font-weight: 600; }
.btn-plain:hover { color: var(--brand-600); text-decoration: underline; }

.btn[disabled], .btn-primary[disabled], button[disabled] {
  opacity: 0.55; cursor: not-allowed;
  pointer-events: none;
}

/* pill (for status indicators) */
.pill, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill);
  letter-spacing: 0.02em;
  background: var(--ink-100); color: var(--ink-700);
}
.pill.has-dot::before, .pill-ok::before, .pill-warn::before, .pill-bad::before, .pill-info::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pill-ok   { background: var(--ok-bg);   color: var(--brand-700); }
.pill-warn { background: var(--warn-bg); color: #b45309; }
.pill-bad  { background: var(--bad-bg);  color: #b91c1c; }
.pill-info { background: var(--info-bg); color: #1d4ed8; }
.pill-neutral { background: var(--ink-100); color: var(--ink-700); }

/* legacy badge classes — map onto pill semantics */
.badge-lead          { background: var(--info-bg); color: #1d4ed8; }
.badge-estimate_sent { background: var(--info-bg); color: #1d4ed8; }
.badge-won           { background: var(--brand-tint); color: var(--brand-700); }
.badge-active        { background: var(--brand-tint); color: var(--brand-700); }
.badge-renewal_due   { background: var(--warn-bg); color: #b45309; }
.badge-inactive      { background: var(--ink-100); color: var(--ink-500); }

/* v3.44 — give the lifecycle badge variants the design's bullet
   so a Won / Active / Renewal pill renders with a small dot before
   the label, matching designs/clients-list.html. */
.badge-lead::before,
.badge-estimate_sent::before,
.badge-won::before,
.badge-active::before,
.badge-renewal_due::before,
.badge-inactive::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.badge-draft         { background: var(--ink-100); color: var(--ink-700); }
.badge-sent          { background: var(--info-bg); color: #1d4ed8; }
.badge-accepted, .badge-paid { background: var(--brand-tint); color: var(--brand-700); }
.badge-partial       { background: var(--warn-bg); color: #b45309; }
.badge-overdue, .badge-rejected { background: var(--bad-bg); color: #b91c1c; }
.badge-cancelled     { background: var(--ink-100); color: var(--ink-500); }
.badge-cm-pending  { background: var(--warn-bg); color: #b45309; }
.badge-cm-approved { background: var(--info-bg); color: #1d4ed8; }
.badge-cm-paid     { background: var(--brand-tint); color: var(--brand-700); }

/* =========================================================
   5. CARDS, PANELS, TABLES
   ========================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.card-pad { padding: 20px; }
.card-head {
  padding: 18px 20px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--ink-100);
}
.card-head h3 {
  margin: 0; font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
}
.card-head .grow { flex: 1; }

/* generic panel (used widely) */
.panel {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.panel-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; gap: 10px;
}
.panel-head h3 {
  margin: 0; font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
}
.panel-head .sub {
  color: var(--ink-500); font-size: 12px; font-weight: 500;
}
.panel-head .grow { flex: 1; }
.panel-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--ink-100);
  background: var(--surface-2);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-500);
}
.panel-empty { padding: 20px; color: var(--ink-500); font-size: 13px; }
.panel-sub   { padding: 0 20px 12px; color: var(--ink-500); font-size: 12px; }
.panel-count {
  display: inline-block; margin-left: 8px;
  background: var(--bad-bg); color: var(--bad);
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-pill);
}

/* tables */
.data-table, table.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
}
.data-table thead th, table.tbl thead th {
  text-align: left;
  padding: 12px 18px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-500); letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface-2);
  border-bottom: 1px solid var(--ink-200);
  white-space: nowrap;
}
.data-table thead th.num, table.tbl thead th.num,
.data-table thead th.cell-num { text-align: right; }
.data-table tbody tr, table.tbl tbody tr {
  transition: background 100ms;
}
.data-table tbody tr[onclick]:hover, table.tbl tbody tr[onclick]:hover { background: var(--ink-50); cursor: pointer; }
.data-table tbody td, table.tbl tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-100);
  font-size: 13px;
  vertical-align: middle;
}
.data-table tbody td.num, table.tbl tbody td.num,
.data-table tbody td.cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-900);
}
.data-table tbody tr:last-child td, table.tbl tbody tr:last-child td { border-bottom: 0; }
.cell-sub { color: var(--ink-500); font-size: 12px; }

/* table card wrap (so the whole table sits in a bordered panel) */
.tbl-wrap, .table-wrap {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.tbl-wrap > .data-table, .tbl-wrap > table { border-radius: 0; }
.tbl-foot, .table-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  background: var(--surface-2);
  border-top: 1px solid var(--ink-100);
  font-size: 12px; color: var(--ink-500);
}

/* horizontal-scroll wrapper for narrow viewports */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =========================================================
   6. FORMS, FIELDS
   ========================================================= */
.form-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 24px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-grid > .form-full { grid-column: 1 / -1; }
.form-grid label, .form-card label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.form-grid input, .form-grid select, .form-grid textarea,
.form-card input, .form-card select, .form-card textarea {
  width: 100%;
  font: inherit; font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  padding: 10px 12px;
  color: var(--ink-900);
  transition: border-color 120ms, box-shadow 120ms;
}
.form-grid input::placeholder, .form-card input::placeholder { color: var(--ink-400); }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}
.form-grid input[disabled], .form-card input[disabled] {
  background: var(--ink-50); color: var(--ink-500);
  cursor: not-allowed;
}
.form-grid textarea, .form-card textarea {
  resize: vertical; min-height: 90px;
}
.form-actions {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-100);
  display: flex; justify-content: flex-end; gap: 10px;
}
.section-heading {
  font-size: 14px; font-weight: 700;
  color: var(--ink-800);
  margin: 24px 0 12px;
  letter-spacing: -0.005em;
}

/* segmented controls (preset bar) */
.preset-bar, .seg {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ink-100);
  border-radius: var(--r-control);
  padding: 4px;
  flex-wrap: wrap;
}
.preset-bar button, .seg button {
  border: 0; background: transparent;
  padding: 7px 12px; border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-500); cursor: pointer;
  white-space: nowrap;
}
.preset-bar button.is-on, .seg button.is-on, .seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink-900);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* iOS-style switch */
.switch {
  position: relative; display: inline-block;
  width: 36px; height: 20px;
  vertical-align: middle;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--ink-300); border-radius: 999px;
  transition: background 160ms;
}
.switch .track::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 180ms;
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(16px); }

/* check / radio cards */
.check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-700); cursor: pointer;
  user-select: none; position: relative;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  width: 18px; height: 18px;
  border: 1px solid var(--ink-300);
  border-radius: 5px;
  background: var(--surface);
  display: grid; place-items: center;
  transition: background 120ms, border-color 120ms;
  flex-shrink: 0;
}
.check input:checked + .box {
  background: var(--brand); border-color: var(--brand);
}
.check input:checked + .box::after {
  content: '';
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: 0; border-left: 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* =========================================================
   7. FILTER BARS, SEARCH, CHIPS
   ========================================================= */
.filter-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  padding: 10px;
  margin-bottom: 14px;
}
.filter-bar .grow { flex: 1; }
.search-input {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  color: var(--ink-500); font-size: 13px;
  flex: 0 1 320px;
}
.search-input input {
  border: 0; outline: none; background: transparent;
  font: inherit; flex: 1; min-width: 0; color: var(--ink-900);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-control);
  background: var(--surface-2);
  border: 1px solid var(--ink-200);
  font-size: 12px; font-weight: 600; color: var(--ink-700);
  cursor: pointer;
  text-decoration: none;
}
.filter-chip:hover { background: var(--ink-100); }
.filter-chip.is-on {
  background: var(--brand-tint);
  border-color: var(--brand-soft); color: var(--brand-700);
}

/* category tabs (used by expenses + others) */
.cat-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--ink-100);
  border-radius: var(--r-control);
  padding: 4px;
}
.cat-tabs a, .cat-tabs button {
  border: 0; background: transparent;
  padding: 7px 12px; border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-500); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.cat-tabs a.is-on, .cat-tabs button.is-on {
  background: var(--surface); color: var(--ink-900);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.cat-tabs .n {
  background: var(--ink-200); color: var(--ink-700);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
}
.cat-tabs .is-on .n {
  background: var(--brand-tint); color: var(--brand-700);
}

/* page-head */
.page-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-head h2 {
  margin: 0; font-size: 24px; font-weight: 700;
  letter-spacing: -0.015em;
}
.page-head .sub {
  color: var(--ink-500); font-size: 13px; margin-top: 4px;
}
.page-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* toolbar (older module pages) */
.toolbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar .grow { flex: 1; }

/* =========================================================
   8. KPI STRIP, STAT CARDS
   ========================================================= */
.kpis, .card-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kpi, .stat-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  padding: 16px 18px;
  box-shadow: var(--sh-card);
  position: relative;
  overflow: hidden;
}
.kpi-l, .stat-label {
  font-size: 11px; font-weight: 700; color: var(--ink-500);
  letter-spacing: 0.05em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.kpi-l .ic {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--brand-tint); color: var(--brand-700);
  display: grid; place-items: center;
}
.kpi-v, .stat-value {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-top: 8px;
  color: var(--ink-900);
}
.kpi-v.bad, .stat-value.bal-due { color: var(--bad); }
.kpi-v.ok  { color: var(--brand-700); }
.kpi-d {
  font-size: 12px; margin-top: 4px;
  color: var(--ink-500);
  display: flex; align-items: center; gap: 6px;
}
.kpi-d .delta {
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 2px;
}
.kpi-d .delta.up   { color: var(--brand-700); }
.kpi-d .delta.down { color: var(--bad); }
.kpi-spark {
  position: absolute; right: 0; bottom: 0;
  width: 100%; height: 32px; pointer-events: none;
  opacity: 0.95;
}

/* card-row variants used in dashboard */
.card-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-row.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* welcome strip */
.welcome { margin-bottom: 22px; }
.welcome h2 {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.015em;
}
.welcome p, .muted { color: var(--ink-500); font-size: 13px; }

/* =========================================================
   9. CHARTS — mini bars, sparklines
   ========================================================= */
.mini-chart {
  display: flex; align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding: 14px 18px 8px;
}
.mini-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.mini-bars {
  display: flex; align-items: flex-end; gap: 3px;
  height: 130px;
}
.mini-bar {
  width: 8px; min-height: 2px;
  border-radius: 2px 2px 0 0;
  transition: opacity 120ms;
}
.mini-bar.mini-rev { background: var(--brand); }
.mini-bar.mini-exp { background: #94a3b8; }
.mini-bar:hover { opacity: 0.75; }
.mini-label {
  font-size: 10px; color: var(--ink-500); font-weight: 500;
}
.mini-legend {
  display: flex; gap: 16px;
  padding: 0 18px 14px;
  font-size: 12px; color: var(--ink-500);
}
.legend-box {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  vertical-align: middle; margin-right: 6px;
}
.legend-box.mini-rev { background: var(--brand); }
.legend-box.mini-exp { background: #94a3b8; }

/* donut */
.donut-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px; align-items: center;
  padding: 16px 20px 18px;
}
.donut-svg svg { width: 180px; height: 180px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-leg-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px; align-items: center;
  font-size: 12px; color: var(--ink-700);
}
.donut-leg-pct {
  font-weight: 700; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* aging table */
.aging-table { width: 100%; border-collapse: collapse; }
.aging-table td {
  padding: 8px 20px;
  border-bottom: 1px solid var(--ink-100);
  font-size: 13px;
}
.aging-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.aging-table tr.aging-bad td {
  color: var(--bad);
  font-weight: 700;
}
.aging-table tr:last-child td { border-bottom: 0; }

/* overdue list rows */
.overdue-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ink-100);
  text-decoration: none;
  color: inherit;
}
.overdue-row:last-child { border-bottom: 0; }
.overdue-row:hover { background: var(--ink-50); }
.overdue-name { color: var(--ink-900); font-weight: 600; font-size: 13px; }
.overdue-late { color: var(--bad); font-size: 11px; font-weight: 600; }
.overdue-amt {
  color: var(--ink-900); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 14px;
}

/* panel grid (dashboard) */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.panel-grid .panel-wide { grid-column: 1 / -1; }

/* =========================================================
   10. ALERTS, NOTICES, MISC
   ========================================================= */
.alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-control);
  font-size: 13px;
  margin-bottom: 14px;
}
.alert-error {
  background: var(--bad-bg);
  border: 1px solid #fecaca;
  color: #991b1b;
}
.alert-success {
  background: var(--brand-tint);
  border: 1px solid var(--brand-soft);
  color: var(--brand-700);
}
.alert-info {
  background: var(--info-bg);
  border: 1px solid #93c5fd;
  color: #1e3a8a;
}
.alert-warn {
  background: var(--warn-bg);
  border: 1px solid #fde68a;
  color: #92400e;
}

.notice {
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  color: var(--ink-700);
  font-size: 13px;
  box-shadow: var(--sh-card);
}
.notice.subtle {
  background: var(--surface-2);
  border-style: dashed;
  box-shadow: none;
}

.count-line {
  margin-top: 12px; font-size: 12px; color: var(--ink-500);
}

/* row-style action icon button (used in tables) */
.icon-act, .row-remove {
  width: 28px; height: 28px; border-radius: 6px;
  border: 0; background: transparent;
  color: var(--ink-500); cursor: pointer;
  display: inline-grid; place-items: center;
  font-size: 14px;
}
.icon-act:hover, .row-remove:hover { background: var(--ink-100); color: var(--ink-900); }
.icon-act.danger:hover { background: var(--bad-bg); color: var(--bad); }

/* row-actions container */
.row-actions {
  display: flex; justify-content: flex-end; gap: 4px;
  align-items: center;
}

/* paginator */
.pager { display: inline-flex; align-items: center; gap: 4px; }
.pager .pg-btn {
  min-width: 30px; height: 30px;
  padding: 0 8px;
  border: 1px solid var(--ink-200);
  background: var(--surface);
  border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-700); cursor: pointer;
  text-decoration: none;
  display: inline-grid; place-items: center;
}
.pager .pg-btn:hover { background: var(--ink-50); }
.pager .pg-btn.is-on {
  background: var(--brand); border-color: var(--brand);
  color: #fff;
}
.pager .pg-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* detail card (legacy clients-style detail layout, refreshed) */
.detail-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 22px;
  margin-bottom: 18px;
}
.detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-100);
}
.detail-head h2 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.015em;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px;
}
.detail-grid > div {
  font-size: 13px; color: var(--ink-800);
}
.detail-label {
  display: block;
  font-size: 11px; font-weight: 700;
  color: var(--ink-500); letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.detail-notes {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-100);
}
.detail-notes p {
  margin: 4px 0 0; color: var(--ink-700); white-space: pre-wrap;
}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .panel-grid { grid-template-columns: 1fr; }
  .kpis, .card-row { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .app, .app-shell { grid-template-columns: 1fr; }
  .side, .sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: 84vw; max-width: 320px;
    transform: translateX(-100%);
    transition: transform 220ms ease-out;
    z-index: 50;
    box-shadow: 0 0 30px rgba(0,0,0,0.25);
  }
  body.nav-open .side, body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(11, 18, 32, 0.55);
    z-index: 40;
  }
  .menu-toggle, .nav-toggle { display: inline-flex; }
  .topbar .search { display: none; }
  .content { padding: 18px; }
  .topbar { padding: 12px 18px; }
}
@media (max-width: 600px) {
  .kpis, .card-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .preset-bar { width: 100%; overflow-x: auto; }
  /* prevent iOS zoom on focus by ensuring inputs are at least 16px */
  input, select, textarea { font-size: 16px !important; }
}

/* =========================================================
   12. PRINT
   ========================================================= */
@media print {
  .side, .sidebar, .topbar, .nav-toggle, .menu-toggle,
  .filter-bar, .toolbar, .page-head-actions, .form-actions {
    display: none !important;
  }
  body { background: #fff; }
  .content { padding: 0; }
  .panel, .card, .form-card { box-shadow: none; border-color: #ddd; }
}

/* =========================================================
   13. SETTINGS TABS (rail + form chrome)
   Used by Settings, Products, and any tabbed sub-page.
   ========================================================= */
.settings-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  padding: 4px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.settings-tab {
  padding: 9px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-500);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 100ms, color 100ms;
}
.settings-tab:hover { background: var(--ink-50); color: var(--ink-800); }
.settings-tab-active {
  background: var(--brand-tint); color: var(--brand-700);
}

/* legacy color picker chrome (settings.branding) */
.color-field {
  display: flex; align-items: center; gap: 12px;
}
.color-field input[type="color"] {
  width: 48px; height: 36px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: var(--surface);
}
.color-value {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px; color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* check-line — checkbox + label inline */
.check-line {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-700); font-weight: 500;
  cursor: pointer;
}
.check-line input { margin: 0; accent-color: var(--brand); }
.alert-ok { background: var(--brand-tint); border: 1px solid var(--brand-soft); color: var(--brand-700); }


/* =========================================================
   14. LEGACY MODULE STYLES — kept so existing module markup
   continues to look correct under the new design system.
   ========================================================= */

/* line-builder & line-table — used by estimate/invoice creators
   and the multi-line forms (clients contacts, etc.) */
.line-builder, .line-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
}
.line-builder thead th, .line-table thead th {
  background: var(--surface-2);
  font-size: 11px; font-weight: 700; color: var(--ink-500);
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--ink-200);
}
.line-builder thead th.center, .line-table thead th.center { text-align: center; }
.line-builder thead th.num, .line-table thead th.num { text-align: right; }
.line-builder tbody td, .line-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
}
.line-builder tbody td.center, .line-table tbody td.center { text-align: center; }
.line-builder tbody td.num, .line-table tbody td.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.line-builder tbody tr:last-child td, .line-table tbody tr:last-child td { border-bottom: 0; }
.line-builder input, .line-builder select, .line-builder textarea,
.line-table input, .line-table select, .line-table textarea {
  width: 100%; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--ink-200); border-radius: 6px;
  background: var(--surface);
}
.line-builder input:focus, .line-builder select:focus,
.line-table input:focus, .line-table select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.16);
}

.builder-actions {
  margin-top: 12px;
  display: flex; gap: 8px;
}
.builder-hint {
  font-size: 12px; color: var(--ink-500);
  margin: 6px 0 0; line-height: 1.4;
}

/* totals-box (estimate/invoice document totals) */
.totals-box {
  margin-top: 18px;
  margin-left: auto;
  max-width: 380px;
  background: var(--surface-2);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  padding: 14px 18px;
}
.totals-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.totals-row.grand {
  border-top: 1px solid var(--ink-200);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 15px; font-weight: 700;
  color: var(--ink-900);
}
.totals-row.grand.bal-due  { color: var(--bad); }
.totals-row.grand.bal-clear { color: var(--brand-700); }
.totals-row.text-success { color: var(--brand-700); }
.totals-row.bdt-line {
  font-size: 11px; color: var(--ink-500); padding-top: 8px;
  border-top: 1px dashed var(--ink-200);
}

/* "FREE" tag in line items */
.free-text {
  background: var(--brand-tint); color: var(--brand-700);
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
.strike {
  text-decoration: line-through;
  color: var(--ink-400); font-size: 11px;
  margin-right: 4px;
}

/* pay-form — invoice payment recorder */
.pay-form {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-100);
}

/* search-form (legacy compact filter) */
.search-form {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.search-form input[type="text"], .search-form select {
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  background: var(--surface);
}

/* table-foot row in legacy tables */
tr.table-foot td {
  background: var(--surface-2);
  border-top: 1px solid var(--ink-200);
  border-bottom: 0;
  font-weight: 600;
  padding: 12px 18px;
}

/* legacy pipeline-row (still used in some places) */
.pipeline-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.pipeline-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  padding: 14px;
  text-decoration: none;
  color: var(--ink-700);
  transition: border-color 120ms;
}
.pipeline-card:hover { border-color: var(--brand-soft); }
.pipeline-card.pipeline-active {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.pipeline-count {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.pipeline-label {
  font-size: 11px; font-weight: 700;
  color: var(--ink-500);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 4px;
}
.pipeline-hold { border-color: var(--bad); color: var(--bad); }
.pipeline-hold.pipeline-active { background: var(--bad-bg); }

/* trend-chart (dashboard-style legacy bars) */
.trend-chart {
  display: flex; align-items: flex-end; gap: 12px;
  height: 200px;
  padding: 16px 0 4px;
}
.trend-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.trend-bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 170px; width: 100%; justify-content: center;
}
.trend-bar {
  width: 14px; min-height: 2px;
  border-radius: 2px 2px 0 0;
}
.trend-rev { background: var(--brand); }
.trend-exp { background: #94a3b8; }
.trend-label {
  font-size: 11px; color: var(--ink-500); font-weight: 500;
}
.trend-legend {
  display: flex; gap: 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--ink-100);
  font-size: 12px; color: var(--ink-500);
}
.legend-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; vertical-align: middle; margin-right: 6px;
}

/* email-edit-grid (template editor + preview) */
.email-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.code-input {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
  font-size: 12px;
  line-height: 1.55;
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid var(--ink-300);
  border-radius: var(--r-control);
  padding: 10px 12px;
  resize: vertical;
}
@media (max-width: 1100px) {
  .email-edit-grid { grid-template-columns: 1fr; }
}

/* combo input + menu (estimate creator's client/service picker) */
.combo {
  position: relative;
}
.combo-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  box-shadow: var(--sh-pop);
  margin: 4px 0 0; padding: 4px;
  list-style: none;
  max-height: 280px; overflow-y: auto;
  z-index: 30;
}
.combo-menu li {
  padding: 8px 10px; border-radius: 6px;
  font-size: 13px; cursor: pointer;
}
.combo-menu li:hover, .combo-menu li.is-active {
  background: var(--brand-tint); color: var(--brand-700);
}

/* row-inactive (legacy faded row) */
.row-inactive { opacity: 0.55; }

/* link-btn — used as inline action in some tables */
.link-btn {
  background: transparent; border: 0;
  color: var(--brand-700); font-weight: 600;
  font: inherit; font-size: 12px;
  cursor: pointer; padding: 4px 6px;
  border-radius: 4px;
}
.link-btn:hover { background: var(--brand-tint); }

/* convert-bar (invoices module) */
.convert-bar {
  background: var(--info-bg);
  border: 1px solid #93c5fd;
  border-radius: var(--r-card);
  padding: 12px 16px;
  margin-bottom: 14px;
}

/* settings-tab styles already defined; ensure permissions matrix tables look right */
.perm-row, .permissions-table { width: 100%; }

/* row-num-icon (in some forms) */
.row-num-icon { font-weight: 700; color: var(--ink-500); }

/* alert variants used by older code */
.alert-info { background: var(--info-bg); border: 1px solid #93c5fd; color: #1e3a8a; }

/* Welcome strip from older dashboard templates */
.welcome { margin-bottom: 22px; }
.welcome h2 {
  font-size: 24px; font-weight: 700; letter-spacing: -0.015em;
}

/* "subtle" notice variant */
.notice.subtle, .panel-empty { color: var(--ink-500); }

/* alerts inline icons */
.alert svg { flex-shrink: 0; }


/* =========================================================
   15. TOPBAR WIDGETS — search box, ⌘K hint, notifications bell
   ========================================================= */

/* The ⌘K hint pill that sits at the right edge of the search input */
.topbar .search { position: relative; }
.topbar .search .search-key {
  font-size: 11px;
  color: var(--ink-400);
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", monospace;
  font-weight: 600;
  margin-left: 6px;
}

/* Notifications bell */
.notif-wrap {
  position: relative;
}
.notif-wrap .notif-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: 90vw;
  max-height: 480px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-pop);
  z-index: 60;
  display: none;
}
.notif-wrap.is-open .notif-pop { display: block; }
.notif-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.notif-empty {
  padding: 28px 18px;
  color: var(--ink-500);
  font-size: 13px;
  text-align: center;
}
.notif-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-100);
  text-decoration: none;
  color: inherit;
  transition: background 100ms;
}
.notif-item:hover { background: var(--ink-50); }
.notif-item.is-unread { background: var(--brand-tint); }
.notif-item.is-unread:hover { background: #d1fae5; }
.notif-ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.notif-title {
  font-size: 13px; font-weight: 600;
  color: var(--ink-900); line-height: 1.3;
}
.notif-detail {
  font-size: 12px; color: var(--ink-500); margin-top: 2px;
  line-height: 1.4;
}
.notif-time {
  font-size: 11px; color: var(--ink-400); margin-top: 4px;
}
.notif-foot {
  display: block;
  padding: 12px 16px;
  background: var(--surface-2);
  text-align: center;
  font-size: 12px; font-weight: 600;
  color: var(--brand-700);
  border-top: 1px solid var(--ink-100);
}
.notif-foot:hover { background: var(--ink-100); }

/* Hide topbar search and bell label on tight viewports */
@media (max-width: 900px) {
  .topbar .search { display: none; }
  .topbar .user-box .user-name,
  .topbar .user-box .user-role { display: none; }
}
@media (max-width: 600px) {
  .notif-wrap .notif-pop {
    position: fixed;
    top: 64px;
    left: 8px; right: 8px;
    width: auto;
    max-height: calc(100vh - 80px);
  }
}


/* =========================================================
   16. CLIENT DETAIL — hero, tab rail, two-column layout
   ========================================================= */

/* Two-column main + right rail, stacks on narrow */
.cv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 320px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .cv-grid { grid-template-columns: 1fr; }
}

/* Hero meta chips */
.cv-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 8px;
  font-size: 12px; color: #cbd5e1;
}
.cv-meta .sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  align-self: center;
}

/* Hero action buttons row */
.cv-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.cv-actions a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-control);
  font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cv-actions .a-pri {
  background: #fff; color: #0b1220;
}
.cv-actions .a-pri:hover { background: #e5e7eb; }
.cv-actions .a-sec {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.cv-actions .a-sec:hover { background: rgba(255,255,255,0.2); }

/* Tab rail */
.cv-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  padding: 4px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.cv-tabs a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-500);
  text-decoration: none; white-space: nowrap;
}
.cv-tabs a:hover { background: var(--ink-50); color: var(--ink-800); }
.cv-tabs a.is-on {
  background: var(--brand-tint); color: var(--brand-700);
}
.cv-tabs a .ic {
  width: 16px; height: 16px;
}
.cv-tabs a .n {
  background: var(--ink-100); color: var(--ink-700);
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
}
.cv-tabs a.is-on .n {
  background: var(--brand-soft); color: var(--brand-700);
}

/* Sub-panel headers (matching design's bold + view-all) */
.cv-panel { margin-bottom: 18px; }
.cv-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-bottom: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.cv-panel-head h3 {
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
}
.cv-panel-head a {
  font-size: 12px; font-weight: 600;
  color: var(--brand-700);
}

.cv-panel-body {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

/* Single overview row (estimate / invoice / order / contact) */
.cv-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ink-100);
  text-decoration: none;
  color: inherit;
  transition: background 100ms;
}
.cv-row:hover { background: var(--ink-50); }
.cv-row:last-child { border-bottom: 0; }
.cv-row .ic-tile {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cv-row .meta {
  min-width: 0;
}
.cv-row .meta .t {
  font-size: 13px; font-weight: 600; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-row .meta .s {
  font-size: 11px; color: var(--ink-500);
  margin-top: 2px;
}
.cv-row .amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--ink-900);
  font-size: 13px;
  text-align: right;
}
.cv-row .amt small {
  display: block; font-weight: 500;
  color: var(--ink-500); font-size: 10px;
  margin-top: 2px;
}

/* Right-rail card */
.cv-side .card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  margin-bottom: 14px;
  overflow: hidden;
}
.cv-side .card-h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-100);
}
.cv-side .card-h h4 {
  font-size: 13px; font-weight: 700; letter-spacing: -0.005em;
}
.cv-side .card-h a {
  font-size: 11px; font-weight: 600;
  color: var(--brand-700);
}
.cv-side .card-b { padding: 14px 18px; }

/* Definition list inside the right rail */
.cv-side dl {
  margin: 0;
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 10px;
  column-gap: 12px;
}
.cv-side dl dt {
  color: var(--ink-500); font-weight: 500;
}
.cv-side dl dd {
  margin: 0; color: var(--ink-900);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-side dl dd a { color: var(--brand-700); }

/* Right-rail address block */
.cv-addr p {
  margin: 0; font-size: 13px;
  color: var(--ink-800); line-height: 1.55;
}
.cv-addr .caption {
  margin-top: 10px; font-size: 11px;
  color: var(--ink-500); line-height: 1.5;
}

/* Right-rail sales agent + small activity feed share rows */
.cv-side .activity-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px; align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-100);
}
.cv-side .activity-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cv-side .activity-row .ic {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
}
.cv-side .activity-row .text {
  font-size: 12px; color: var(--ink-700);
  line-height: 1.45;
}
.cv-side .activity-row .text strong { color: var(--ink-900); font-weight: 600; }
.cv-side .activity-row .when {
  font-size: 10px; color: var(--ink-400);
  margin-top: 3px;
}

/* 12-month bar sparkline strip */
.cv-spark {
  display: flex; align-items: flex-end; gap: 4px;
  height: 64px; padding: 12px 18px;
  border-bottom: 1px solid var(--ink-100);
}
.cv-spark .col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.cv-spark .bar {
  width: 100%;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.cv-spark .col.is-zero .bar { background: var(--ink-200); }
.cv-spark .lab {
  font-size: 9px; color: var(--ink-400); font-weight: 600;
}

/* Contact rows in overview */
.cv-contact {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ink-100);
}
.cv-contact:last-child { border-bottom: 0; }
.cv-contact .av {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
}
.cv-contact .who {
  font-size: 13px; font-weight: 600; color: var(--ink-900);
  display: flex; align-items: center; gap: 8px;
}
.cv-contact .lines {
  font-size: 11px; color: var(--ink-500);
  margin-top: 2px;
}
.cv-contact .acts {
  display: flex; gap: 4px;
}
.cv-contact .acts a {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--ink-500);
  text-decoration: none;
}
.cv-contact .acts a:hover { background: var(--ink-100); color: var(--ink-900); }


/* =========================================================
   17. EMAIL TEMPLATES — 3-column page (rail / editor / side)
   ========================================================= */

.email-3col {
  display: grid;
  grid-template-columns: 280px minmax(0, 1.5fr) 320px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1280px) {
  .email-3col {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
  }
}
@media (max-width: 1100px) {
  .email-3col {
    grid-template-columns: 1fr;
  }
}

/* ---- Left rail: template list grouped by category ---- */
.email-rail {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
.email-rail .rail-section + .rail-section {
  border-top: 1px solid var(--ink-100);
}
.rail-section-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-500); letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
}
.rail-section-h .n {
  background: var(--ink-100); color: var(--ink-700);
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  letter-spacing: 0;
}
.rail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--ink-100);
  transition: background 100ms;
}
.rail-item:last-child { border-bottom: 0; }
.rail-item:hover { background: var(--ink-50); }
.rail-item.is-on { background: var(--brand-tint); }
.rail-item .dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.rail-item .dot.on  { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.rail-item .dot.off { background: var(--ink-300); }
.rail-item .rail-item-text {
  flex: 1; min-width: 0;
}
.rail-item-label {
  font-size: 13px; font-weight: 600;
  color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-item.is-on .rail-item-label { color: var(--brand-700); }
.rail-item-key {
  font-size: 10px;
  color: var(--ink-500);
  font-family: ui-monospace, "SF Mono", monospace;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Center: editor ---- */
.email-editor {
  min-width: 0;
}

/* iframe pane fits nicely below the tab bar */
.email-preview-frame {
  background: #fff;
  display: block;
}

/* The seg control reused inside the tab bar — slightly tighter */
.email-editor .seg button[data-tab] {
  padding: 6px 12px;
  font-size: 12px;
}

/* ---- Right: variables + test send sidebar ---- */
.email-side .panel {
  margin-bottom: 14px;
}

/* The variable rows are clickable buttons; tighten hover */
.email-side .panel button[onclick] {
  transition: background 100ms;
}
.email-side .panel button[onclick]:hover {
  background: var(--ink-50);
}


/* =========================================================
   18. ESTIMATE / INVOICE CREATOR (v3.12 — design rebuild)
   The two-column "document creator" layout from the
   estimate-creator mockup. The form column reads as a
   real document; a sticky totals card sits on the right.
   ========================================================= */

/* Two-column grid on desktop, single-column on tablet/mobile. */
.creator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1100px) {
  .creator { grid-template-columns: 1fr; }
}

/* ---- Document shell (left column) ---- */
.doc {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.doc-head {
  padding: 22px 24px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; gap: 16px;
}
.doc-head .logo {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand) 0%, #34d399 100%);
  color: #06251c; display: grid; place-items: center;
  font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
  flex-shrink: 0;
}
.doc-head .doc-meta { line-height: 1.2; }
.doc-head .doc-num {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
}
.doc-head .doc-pill { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }
.doc-head .grow { flex: 1; }
.doc-head .doc-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-500);
}

/* numbered sections inside the document */
.doc .section {
  padding: 30px 24px;
  border-bottom: 1px solid var(--ink-100);
}
.doc .section:last-child { border-bottom: 0; }
.doc .section h3 {
  margin: 0 0 16px;
  font-size: 12px; font-weight: 700;
  color: var(--ink-700); letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.doc .section h3 .num {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 0 0 4px var(--brand-tint);
  flex-shrink: 0;
}
.doc .section h3 .meta {
  color: var(--ink-400); font-weight: 500;
  letter-spacing: 0; text-transform: none; font-size: 12px;
  margin-left: 4px;
}

/* ---- Field shell inside the doc ---- */
.doc label.field { display: block; }
.doc label.field .lbl {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--ink-700);
  margin-bottom: 6px;
}
.doc label.field .lbl .req { color: var(--bad); margin-left: 2px; }
.doc label.field .hint {
  margin-top: 6px; font-size: 11px; color: var(--ink-500);
}
.doc .field input,
.doc .field select,
.doc .field textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit; font-size: 14px;
  color: var(--ink-800);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  transition: border-color 120ms, box-shadow 120ms;
}
.doc .field input::placeholder { color: var(--ink-400); }
.doc .field input:focus,
.doc .field select:focus,
.doc .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
}
.doc .field textarea { resize: vertical; min-height: 84px; }

.doc .row-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.doc .row-3 { display: grid; gap: 14px; grid-template-columns: 2fr 1fr 1fr; }
.doc .row-4 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 760px) {
  .doc .row-2, .doc .row-3, .doc .row-4 { grid-template-columns: 1fr; }
}

/* ---- Searchable combo (rich client + service picker) ---- */
.combo-input { padding-left: 36px !important; }
.combo-svg {
  position: absolute; top: 50%; left: 12px;
  transform: translateY(-50%);
  color: var(--ink-400); pointer-events: none;
}
.combo-clear {
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 6px;
  border: 0; background: transparent;
  color: var(--ink-400); cursor: pointer;
  display: grid; place-items: center;
}
.combo-clear:hover { background: var(--ink-100); color: var(--ink-700); }

/* The popover list (override the legacy thin combo menu). */
.combo .combo-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  box-shadow: var(--sh-pop);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 30;
  max-height: 360px;
  overflow-y: auto;
}

/* Services search dropdown — roomier than the client picker so options
   are easy to read and tap. Scoped to the service combo only. */
.combo[data-combo="svc"] .combo-menu {
  min-width: 380px;
  max-width: 460px;
  max-height: 420px;
  z-index: 60;
}
.combo[data-combo="svc"] .combo-item {
  padding: 11px 12px;
}
.combo[data-combo="svc"] .combo-item .pri { font-size: 14px; }
.combo[data-combo="svc"] .combo-item .sec { font-size: 12px; }
.combo-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.combo-item:hover, .combo-item.is-active { background: var(--brand-tint); }
.combo-item .ai {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink-100); color: var(--ink-700);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
.combo-item .ai.b { background: #eff6ff; color: #1d4ed8; }
.combo-item .ai.c { background: #fef2f2; color: #b91c1c; }
.combo-item .ai.d { background: #fffbeb; color: #b45309; }
.combo-item .ai.e { background: #f5f3ff; color: #6d28d9; }
.combo-item .ai.f { background: #ecfeff; color: #0891b2; }
.combo-item .ai.has-photo { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ink-200); }
.combo-item .ai.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.combo-item .pri { font-size: 13px; font-weight: 600; color: var(--ink-800); }
.combo-item .sec { font-size: 11px; color: var(--ink-500); margin-top: 2px; }
.combo-item .price {
  font-size: 12px; color: var(--ink-500);
  font-variant-numeric: tabular-nums; font-weight: 600;
  white-space: nowrap;
}
.combo-section {
  font-size: 10px; font-weight: 700; color: var(--ink-400);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 10px;
}
.combo-empty {
  padding: 18px 12px; text-align: center;
  font-size: 12px; color: var(--ink-500);
}
.combo-create .ai {
  background: var(--brand-tint); color: var(--brand-700);
}
.combo-create .pri { color: var(--brand-700); }

/* the focused-popover affordance */
.combo.is-open .combo-input {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
}

/* When a client is picked, collapse the search input + clear button so
   the picked-client chip is the visible state. The hidden input
   (client_id) still carries the value to the server. */
.combo.is-picked .combo-input,
.combo.is-picked .combo-svg,
.combo.is-picked .combo-clear { display: none; }
.combo.is-picked + .picked-client { margin-top: 0; }

/* ---- Picked client preview chip ---- */
.picked-client {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-soft);
  border-radius: 10px;
  margin-top: 10px;
}
.picked-client .ai {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.picked-client .who { flex: 1; min-width: 0; }
.picked-client .name { font-weight: 600; color: var(--ink-900); }
.picked-client .meta {
  font-size: 12px; color: var(--ink-700); margin-top: 2px;
}
.picked-client .change {
  background: transparent; border: 0;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--brand-700); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--brand-soft);
  text-underline-offset: 3px;
}
.picked-client .change:hover { color: var(--brand-600); }

/* ---- Currency segmented control with mini flags ---- */
.segmented {
  display: inline-flex;
  background: var(--ink-100);
  border-radius: var(--r-control);
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: 0; background: transparent;
  padding: 8px 14px;
  border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-500); cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.segmented button.is-active {
  background: var(--surface);
  color: var(--ink-900);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.segmented .ic-flag {
  width: 18px; height: 12px; border-radius: 2px;
  display: inline-block; flex-shrink: 0;
}
.segmented .ic-flag.flag-usd {
  background: linear-gradient(180deg,#dc2626 33%,#fff 33% 66%,#1d4ed8 66%);
}
.segmented .ic-flag.flag-bdt {
  background: linear-gradient(180deg,#006a4e 50%,#f42a41 50%);
}
.segmented .ic-flag.flag-cad {
  background: linear-gradient(90deg,#d52b1e 25%,#fff 25% 75%,#d52b1e 75%);
}
.segmented .ic-flag.flag-aud {
  background: linear-gradient(180deg,#012169 60%,#e4002b 60%);
}
.segmented .ic-flag.flag-gbp {
  background: linear-gradient(180deg,#012169 35%,#fff 35% 65%,#c8102e 65%);
}
.segmented .ic-flag.flag-eur {
  background: radial-gradient(circle at center, #ffd900 0 6px, #003399 6px);
}
.segmented .ic-flag.flag-sgd {
  background: linear-gradient(180deg,#ed2939 50%,#fff 50%);
}
.segmented .ic-flag.flag-aed {
  background: linear-gradient(180deg,#00732f 33%,#fff 33% 66%,#000 66%);
}

/* ---- Line builder (services) ---- */
.lines { display: grid; gap: 10px; }
.lines-scroll {
  overflow-x: auto;
  overflow-y: visible;            /* don't clip the service dropdown */
  -webkit-overflow-scrolling: touch;
  margin: 0 -12px;
  padding: 0 12px 4px;
}
.lines-scroll > * { min-width: 840px; }
@media (max-width: 760px) {
  .lines-scroll { overflow-x: visible; margin: 0; padding: 0; }
  .lines-scroll > * { min-width: 0; }
}
.line-head {
  display: grid;
  grid-template-columns:
    minmax(300px, 1.6fr)  /* service — roomier so the search box + dropdown breathe */
    64px                 /* qty */
    120px                /* unit price */
    210px                /* discount */
    120px                /* line total */
    40px;                /* remove */
  gap: 10px;
  padding: 0 12px;
  font-size: 12px; font-weight: 700;
  color: var(--ink-500); letter-spacing: 0.04em; text-transform: uppercase;
}
.line-head .num { text-align: right; }

.line {
  display: grid;
  grid-template-columns:
    minmax(300px, 1.6fr) 64px 120px 210px 120px 40px;
  gap: 10px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 12px;
  transition: border-color 120ms, background 120ms;
}
.line:hover { border-color: var(--ink-300); }
.line.is-free {
  border-color: var(--brand-soft);
  background: var(--brand-tint);
}

/* uniform 40px line input baseline */
.line .field input,
.line .field select { height: 40px; padding-top: 0; padding-bottom: 0; }
.line .qty input { text-align: center; font-weight: 600; }
.line .price-wrap { position: relative; }
.line .price-wrap .currency-prefix {
  position: absolute; top: 50%; left: 12px; transform: translateY(-50%);
  font-size: 13px; color: var(--ink-400); font-weight: 600;
  pointer-events: none;
}
.line .price-wrap input {
  padding-left: 24px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.line-total {
  height: 40px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--ink-900);
}
.line.is-free .line-total {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  letter-spacing: 0.05em;
  font-size: 12px; font-weight: 800;
}

.line-remove {
  height: 40px; width: 36px;
  border: 1px solid var(--ink-200);
  background: var(--surface);
  border-radius: 8px;
  color: var(--ink-500);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.line-remove:hover {
  background: var(--bad-bg);
  border-color: #fecaca;
  color: var(--bad);
}

/* ---- Per-line discount pill (mode + value fused) ---- */
.discount {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.discount.has-value { grid-template-columns: 1fr 100px; }
.discount > select,
.discount > input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0 12px;
  font: inherit; font-size: 13px;
  color: var(--ink-800);
  outline: none;
  height: 100%;
}
.discount > select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
.discount > input {
  border-left: 1px solid var(--ink-200);
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
}
.discount:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
}
/* mode-coloured left edge */
.discount[data-mode="pct"]  { box-shadow: inset 3px 0 0 #3b82f6; }
.discount[data-mode="flat"] { box-shadow: inset 3px 0 0 #f59e0b; }
.discount[data-mode="fin"]  { box-shadow: inset 3px 0 0 #a855f7; }
.discount[data-mode="free"] { box-shadow: inset 3px 0 0 var(--brand); }
.discount[data-mode="pct"]  > select,
.discount[data-mode="flat"] > select,
.discount[data-mode="fin"]  > select,
.discount[data-mode="free"] > select { padding-left: 14px; }

/* ---- "Add a service line" CTA ---- */
.add-line {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1.5px dashed var(--ink-300);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-600);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
  width: 100%;
}
.add-line:hover {
  border-color: var(--brand);
  color: var(--brand-700);
  background: var(--brand-tint);
}

/* ---- Global discount panel (chip group) ---- */
.gdisc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.gdisc .chip-group {
  display: inline-flex; gap: 6px;
  background: var(--ink-100);
  padding: 3px;
  border-radius: 999px;
}
.chip {
  border: 0; background: transparent;
  padding: 6px 12px; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-500); cursor: pointer;
}
.chip.is-on {
  background: var(--surface); color: var(--ink-900);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.gdisc .gd-input {
  width: 160px; max-width: 100%; position: relative;
}
.gdisc .gd-input input {
  width: 100%; padding-right: 36px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gdisc .gd-suffix {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  font-size: 12px; font-weight: 700; color: var(--ink-500);
  pointer-events: none;
}
.gdisc .gd-savings {
  font-size: 12px; font-weight: 700; color: var(--brand-700);
  background: var(--brand-tint); border: 1px solid var(--brand-soft);
  padding: 6px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.gdisc .gd-savings.is-hidden { display: none; }

/* ---- Right-side sticky totals card ---- */
.totals-col { position: sticky; top: 84px; }
.totals-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.totals-card-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center;
}
.totals-card-head h3 {
  margin: 0; font-size: 14px; font-weight: 700;
}
.totals-card-head .badge-cur {
  margin-left: auto;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--ink-500);
}
.totals-rows { padding: 14px 20px; }
.trow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0;
  font-size: 13px; color: var(--ink-700);
}
.trow.disc { color: var(--brand-700); }
.trow .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.trow.divider {
  border-top: 1px dashed var(--ink-200);
  margin-top: 6px; padding-top: 12px;
  color: var(--ink-500); font-size: 12px;
}
.trow.divider .v { color: var(--ink-500); font-size: 12px; }

.grand {
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--ink-900) 0%, #111827 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.grand-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.grand-value {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.grand-fx {
  padding: 12px 20px; border-top: 1px solid var(--ink-100);
  font-size: 12px; color: var(--ink-500);
  display: flex; justify-content: space-between;
}
.grand-fx strong { color: var(--ink-800); font-weight: 700; }

.totals-actions {
  padding: 16px 20px;
  border-top: 1px solid var(--ink-100);
  display: flex; flex-direction: column; gap: 10px;
}
.btn-block { width: 100%; justify-content: center; }
.btn-link {
  background: transparent; border: 0; color: var(--ink-700);
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 6px;
  text-decoration: underline; text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
  text-align: center;
}
.btn-link:hover { color: var(--ink-900); }

/* ---- Auto-saved indicator ---- */
.auto-saved {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-500);
}
.auto-saved.foot { margin-top: 10px; padding: 0 4px; }
.auto-saved .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
  flex-shrink: 0;
}
.auto-saved .dot.is-saving { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.auto-saved .dot.is-error  { background: var(--bad);  box-shadow: 0 0 0 4px var(--bad-bg); }

/* ---- Responsive line layout ---- */
@media (max-width: 900px) {
  .line, .line-head {
    grid-template-columns:
      minmax(0, 1fr) 64px 100px 200px 100px 36px;
  }
}
@media (max-width: 760px) {
  .line-head { display: none; }
  .line {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "svc      svc"
      "qty      price"
      "discount discount"
      "total    remove";
    gap: 10px;
  }
  .line .svc           { grid-area: svc; }
  .line .qty           { grid-area: qty; }
  .line .price         { grid-area: price; }
  .line .discount-wrap { grid-area: discount; }
  .line .line-total    { grid-area: total; }
  .line .line-remove   { grid-area: remove; }
}

/* ---- Page-head action buttons gain icons ---- */
.page-head-actions .btn svg { flex-shrink: 0; }


/* =========================================================
   19. ESTIMATE / INVOICE VIEW (v3.13 — design rebuild)
   The two-column "rendered document on the left, action +
   meta + activity sidebar on the right" layout from the
   estimate-view mockup.
   ========================================================= */

/* ---- Page-head specifics ---- */
.ev-head .num { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ev-head h2 {
  margin: 0; font-size: 24px; font-weight: 700;
  letter-spacing: -0.015em;
}
.ev-head .sub {
  color: var(--ink-500); font-size: 13px; margin-top: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ev-head .sub .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-300);
  display: inline-block;
}
.ev-head .sub strong { color: var(--ink-700); font-weight: 600; }

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: var(--r-pill);
  letter-spacing: 0.01em;
}
.status-pill::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.status-sent     { background: #dbeafe; color: #1d4ed8; }
.status-accepted { background: var(--brand-tint); color: var(--brand-700); }
.status-declined { background: var(--bad-bg);    color: #b91c1c; }
.status-draft    { background: var(--ink-100);   color: var(--ink-700); }

/* ---- Two-column detail grid ---- */
.ev-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1100px) {
  .ev-grid { grid-template-columns: 1fr; }
}

/* ---- Document shell ---- */
.ev-doc {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

/* Letterhead */
.lh {
  padding: 28px 32px;
  background: linear-gradient(180deg, #fafbfc 0%, var(--surface) 100%);
  border-bottom: 3px solid var(--brand);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
.lh-brand { display: flex; align-items: center; gap: 14px; }
.lh-logo {
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand) 0%, #34d399 100%);
  color: #06251c; display: grid; place-items: center;
  font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
  flex-shrink: 0;
}
.lh-name { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink-900); }
.lh-tag  { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

.lh-doc { text-align: right; min-width: 240px; }
.lh-doc-label {
  font-size: 11px; font-weight: 700; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.lh-doc-num {
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; margin-top: 4px;
  color: var(--ink-900);
}
.lh-doc-meta {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 14px;
  justify-content: end;
  font-size: 12px;
  text-align: left;
}
.lh-doc-meta dt {
  color: var(--ink-500); font-weight: 500;
  text-align: right;
}
.lh-doc-meta dd {
  margin: 0;
  color: var(--ink-800); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Parties */
.parties {
  padding: 22px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--ink-100);
}
.party-label {
  font-size: 11px; font-weight: 700;
  color: var(--ink-500); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.party-name { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.party-line { font-size: 13px; color: var(--ink-700); margin-top: 2px; }
.party-meta { font-size: 12px; color: var(--ink-500); margin-top: 6px; }

/* Items table */
.items-wrap { padding: 22px 32px 0; }
.items {
  width: 100%; border-collapse: collapse;
  table-layout: fixed;
}
.items thead th {
  text-align: left;
  font-size: 11px; font-weight: 700;
  color: var(--ink-500); letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--ink-200);
}
.items thead th.num { text-align: right; }
.items tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--ink-100);
  font-size: 13px;
  vertical-align: top;
}
.items tbody tr:last-child td { border-bottom: 0; }
.items td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.items td.svc { word-wrap: break-word; }
.items td.svc .svc-title { font-weight: 600; color: var(--ink-900); }
.items td.svc .svc-sub {
  font-size: 12px; color: var(--ink-500); margin-top: 2px;
}
.items tr.is-free td.svc .svc-title { color: var(--brand-700); }
.items td.amount { line-height: 1.4; }
.items td.amount .strike-amt {
  display: block;
  font-size: 11px; font-weight: 500;
  color: var(--ink-400);
  text-decoration: line-through;
  margin-bottom: 2px;
}
.items td.amount .final-amt {
  display: block;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.items tr.is-free td.amount .final-amt { color: var(--brand-700); }
.items .free-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
}
/* discount mini chip inside the description cell */
.disc-mini {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
}
.disc-mini.pct  { background: #eff6ff; color: #1d4ed8; }
.disc-mini.fin  { background: #f5f3ff; color: #6d28d9; }
.disc-mini.flat { background: #fffbeb; color: #b45309; }

/* Totals block */
.ev-doc .totals-block {
  padding: 8px 32px 28px;
  display: flex; justify-content: flex-end;
  margin: 0;
}
.ev-doc .totals-table {
  width: 360px;
  max-width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
}
.ev-doc .totals-table .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-size: 13px;
}
.ev-doc .totals-table .row .v {
  font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-800);
}
.ev-doc .totals-table .row.disc .v { color: var(--brand-700); }
.ev-doc .totals-table .row.divider {
  border-top: 1px dashed var(--ink-200);
  margin-top: 4px; padding-top: 12px;
}
.ev-doc .grand {
  margin-top: 10px;
  background: linear-gradient(135deg, var(--ink-900) 0%, #111827 100%);
  color: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.ev-doc .grand-l {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.65);
}
.ev-doc .grand-v {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ev-doc .grand-fx-block {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
}
.ev-doc .grand-fx-line {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px;
  gap: 12px;
}
.ev-doc .grand-fx-line + .grand-fx-line { margin-top: 4px; }
.ev-doc .grand-fx-line .lbl  { color: var(--ink-500); }
.ev-doc .grand-fx-line .val  {
  color: var(--ink-800); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ev-doc .grand-fx-line .note { color: var(--ink-500); font-size: 11px; }

/* Formation summary callout */
.summary-block {
  padding: 22px 32px;
  border-top: 1px solid var(--ink-100);
}
.summary-card {
  background: var(--brand-tint);
  border: 1px solid var(--brand-soft);
  border-radius: 10px;
  padding: 16px 18px;
}
.summary-card h4 {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 700;
  color: var(--brand-700); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.summary-card p {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-800); white-space: pre-wrap;
}

/* Doc footer (notes + signature) */
.doc-foot {
  padding: 22px 32px 28px;
  border-top: 1px solid var(--ink-100);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px; align-items: start;
}
.doc-foot-notes h4 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; color: var(--ink-500);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.doc-foot-notes p {
  margin: 0; font-size: 12px; color: var(--ink-700); line-height: 1.6;
  max-width: 56ch; white-space: pre-wrap;
}
.doc-foot-sign {
  text-align: right;
  font-size: 11px; color: var(--ink-500);
  min-width: 200px;
}
.doc-foot-sign .sign-name {
  margin-top: 2px; color: var(--ink-700); font-weight: 600;
}
.sign-line {
  width: 200px; height: 1px; background: var(--ink-300);
  margin: 28px 0 6px auto;
}

/* ---- SIDEBAR ---- */
.ev-side {
  position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 1100px) {
  .ev-side { position: static; }
}

.ev-side .action-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.ev-side .btn-block { width: 100%; justify-content: center; }
.ev-side .action-divider {
  height: 1px; background: var(--ink-100);
  margin: 4px 0;
}
.action-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  cursor: pointer;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
}
.action-link:hover { background: var(--ink-50); color: var(--ink-900); }
.action-link svg   { color: var(--ink-500); flex-shrink: 0; }
.action-link.is-danger { color: var(--bad); }
.action-link.is-danger:hover { background: var(--bad-bg); color: var(--bad); }
.action-link.is-danger svg   { color: var(--bad); }

/* email recipient strip */
.ev-side .email-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-soft);
  border-radius: 8px;
  font-size: 12px;
}
.ev-side .email-row .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
  flex-shrink: 0;
}
.ev-side .email-row .e-text { flex: 1; min-width: 0; line-height: 1.4; }
.ev-side .email-row .e-name { font-weight: 600; color: var(--ink-900); }
.ev-side .email-row .e-email {
  font-size: 11px; color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* meta card */
.meta-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.meta-card .head {
  padding: 12px 16px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-500); letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-100);
}
.meta-card dl { margin: 0; padding: 8px 16px; }
.meta-card .row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--ink-100);
  gap: 12px;
}
.meta-card .row:last-child { border: 0; }
.meta-card dt { color: var(--ink-500); font-weight: 500; }
.meta-card dd {
  margin: 0;
  color: var(--ink-900); font-weight: 600;
  text-align: right;
}
.meta-card dd.num { font-variant-numeric: tabular-nums; }

/* Activity timeline */
.timeline { padding: 8px 16px 16px; }
.tl-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.tl-row::before {
  content: ''; position: absolute;
  left: 11px; top: 28px; bottom: -10px;
  width: 2px; background: var(--ink-200);
}
.tl-row:last-child::before { display: none; }
.tl-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink-100);
  display: grid; place-items: center;
  color: var(--ink-500);
  flex-shrink: 0;
  z-index: 1;
}
.tl-row.is-pending .tl-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink-300);
}
.tl-row.is-done .tl-dot { background: var(--brand); color: #fff; }
.tl-row.is-done::before { background: var(--brand); }
.tl-row.is-current .tl-dot {
  background: var(--brand); color: #fff;
  box-shadow: 0 0 0 4px var(--brand-tint);
}
.tl-text { font-size: 13px; color: var(--ink-800); line-height: 1.4; }
.tl-text strong { font-weight: 600; }
.tl-time { font-size: 11px; color: var(--ink-500); margin-top: 2px; }

/* ---- Responsive doc paddings ---- */
@media (max-width: 760px) {
  .lh, .parties, .items-wrap, .ev-doc .totals-block,
  .summary-block, .doc-foot { padding-left: 18px; padding-right: 18px; }
  .lh { grid-template-columns: 1fr; }
  .lh-doc { text-align: left; }
  .parties { grid-template-columns: 1fr; }
  .doc-foot { grid-template-columns: 1fr; }
  .doc-foot-sign { text-align: left; }
  .sign-line { margin-left: 0; }
  .items-wrap { overflow-x: auto; padding-bottom: 4px; }
  .items { min-width: 600px; }
  .ev-doc .totals-table { min-width: 100%; width: 100%; }
}


/* =========================================================
   20. EXPENSES (v3.14 — design rebuild)
   The two-column expenses page from the mockup: full-width
   KPI strip + filter bar + category tabs above, then a
   document-style table on the left and a breakdown +
   "tag to invoices" prompt on the right.
   ========================================================= */

/* ---- Two-column layout ---- */
.exp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .exp-layout { grid-template-columns: 1fr; }
}

/* ---- Filter bar additions ---- */
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-control);
  background: var(--surface-2);
  border: 1px solid var(--ink-200);
  font-size: 12px; font-weight: 600; color: var(--ink-700);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.filter-chip:hover { background: var(--ink-100); }
.filter-chip.is-on {
  background: var(--brand-tint);
  border-color: var(--brand-soft);
  color: var(--brand-700);
}
.filter-chip.is-on::before {
  content: '✓'; font-weight: 800; font-size: 10px; color: var(--brand-700);
}

/* ---- Expenses table ---- */
.exp-tbl {
  width: 100%;
  border-collapse: collapse;
}
.exp-tbl thead th {
  text-align: left;
  padding: 12px 18px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-500); letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface-2);
  border-bottom: 1px solid var(--ink-200);
  white-space: nowrap;
}
.exp-tbl thead th.num { text-align: right; }
.exp-tbl thead th.act { text-align: right; width: 72px; }
.exp-tbl tbody tr {
  transition: background 100ms;
}
.exp-tbl tbody tr:hover { background: var(--ink-50); }
.exp-tbl tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-100);
  font-size: 13px;
  vertical-align: middle;
}
.exp-tbl tbody tr:last-child td { border-bottom: 0; }

/* Date cell */
.exp-date {
  font-variant-numeric: tabular-nums;
  color: var(--ink-700); font-weight: 500;
  font-size: 12px;
}
.exp-date small {
  display: block; color: var(--ink-400);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Description cell */
.exp-desc {
  color: var(--ink-900); font-weight: 600;
}
.exp-desc small {
  display: block; color: var(--ink-500);
  font-size: 11px; font-weight: 500; margin-top: 2px;
}

/* Category pills (mockup palette) */
.cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cat-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.cat-state_fee         { background: #eff6ff; color: #1d4ed8; }
.cat-partner_cost      { background: #f5f3ff; color: #6d28d9; }
.cat-software          { background: #fffbeb; color: #b45309; }
.cat-ads               { background: #fdf2f8; color: #be185d; }
.cat-salary            { background: #fef2f2; color: #b91c1c; }
.cat-commission_payout { background: #ecfdf5; color: var(--brand-700); }
.cat-office            { background: #f1f5f9; color: var(--ink-700); }
.cat-other             { background: var(--ink-100); color: var(--ink-700); }

/* "Linked to" link badge */
.link-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-700);
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.link-tag:hover {
  background: var(--ink-100);
  color: var(--ink-900);
  border-color: var(--ink-300);
}
.link-tag .ic { color: var(--ink-400); flex-shrink: 0; }
.link-tag.is-empty {
  background: transparent; border-color: transparent;
  color: var(--ink-400); padding-left: 0;
}

/* Recorder cell with avatar tile */
.recorder {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-700);
  white-space: nowrap;
}
.recorder .av {
  width: 24px; height: 24px; border-radius: 50%;
  color: #fff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* Amount cell */
.exp-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--ink-900);
}

/* Row actions */
.exp-tbl td.act { text-align: right; }

/* Table foot */
.exp-tbl-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  background: var(--surface-2);
  border-top: 1px solid var(--ink-100);
  font-size: 12px; color: var(--ink-500);
  flex-wrap: wrap; gap: 12px;
}

/* ---- Sidebar cards ---- */
.exp-side .side-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.exp-side .side-card + .side-card { margin-top: 14px; }
.exp-side .side-card .head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; gap: 10px;
}
.exp-side .side-card .head h3 {
  margin: 0; font-size: 13px; font-weight: 700;
}
.exp-side .side-card .head .grow { flex: 1; }
.exp-side .side-card .head .sub {
  font-size: 11px; color: var(--ink-500); font-weight: 500;
}

/* Breakdown rows */
.bd-row {
  padding: 12px 18px;
  border-bottom: 1px solid var(--ink-100);
}
.bd-row:last-child { border: 0; }
.bd-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 12px; margin-bottom: 6px;
}
.bd-head .name {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-800); font-weight: 600;
}
.bd-head .name .dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.bd-head .v {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--ink-900);
}
.bd-bar {
  height: 6px; background: var(--ink-100);
  border-radius: 3px; overflow: hidden;
}
.bd-bar > span {
  display: block; height: 100%; border-radius: 3px;
}
.bd-foot {
  font-size: 11px; color: var(--ink-500);
  margin-top: 4px;
}

/* Quick-add prompt card */
.exp-side .quick-add { padding: 16px 18px; }
.exp-side .quick-add h4 {
  margin: 0 0 8px; font-size: 13px; font-weight: 700;
}
.exp-side .quick-add p {
  margin: 0 0 12px; font-size: 12px; color: var(--ink-500);
  line-height: 1.5;
}
.exp-side .quick-add .btn { width: 100%; justify-content: center; }

/* ---- KPI sparkline ---- */
.kpi-spark {
  position: absolute; right: 0; bottom: 0;
  width: 100%; height: 32px; pointer-events: none;
  opacity: 0.85;
}

/* ---- Responsive table ---- */
@media (max-width: 900px) {
  .exp-tbl { min-width: 720px; }
}


/* =========================================================
   21. INVOICE CREATOR EXTRAS (v3.15)
   These build on top of section 18's shared creator shell:
     • from-est banner shown when creating from an estimate
     • brand-tinted recurring card with iOS-style toggle
     • larger 42x24 switch variant for the recurring block
     • two-column reveal panel for the renewal cycle + date
     • compact "Schedule" sidebar card under the totals card
   ========================================================= */

/* From-estimate banner */
.from-est {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface) 100%);
  border: 1px solid var(--brand-soft);
  border-radius: var(--r-card);
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: var(--sh-card);
}
.from-est .ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.from-est .text { flex: 1; min-width: 0; line-height: 1.4; }
.from-est .text strong { color: var(--ink-900); font-weight: 700; }
.from-est .text .meta {
  font-size: 12px; color: var(--ink-700); margin-top: 2px;
}
.from-est a { font-size: 12px; font-weight: 600; }

/* Recurring block — looks like a pill card that highlights when on */
.recurring-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  transition: background 160ms, border-color 160ms;
}
.recurring-block.is-on {
  background: var(--brand-tint);
  border-color: var(--brand-soft);
}
.recurring-block .rb-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ink-100); color: var(--ink-500);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 160ms, color 160ms;
}
.recurring-block.is-on .rb-icon {
  background: var(--brand); color: #fff;
}
.recurring-block .rb-meta {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.rb-title { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.rb-sub   { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

/* iOS-style toggle — 42x24 variant scoped to the recurring card.
   The legacy .switch (36x20, defined in section 6) stays intact for
   other places that already use it. */
.switch.switch-lg {
  width: 42px; height: 24px;
}
.switch.switch-lg .track::after {
  top: 3px; left: 3px;
  width: 18px; height: 18px;
}
.switch.switch-lg input:checked + .track::after {
  transform: translateX(18px);
}
.switch.switch-lg input:focus-visible + .track {
  box-shadow: 0 0 0 4px var(--brand-tint);
}

/* Renewal-cycle reveal panel */
.recurring-details {
  margin-top: 14px;
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) {
  .recurring-details { grid-template-columns: 1fr; }
}

/* Schedule card lives below the live-totals card.
   The `.totals-card.sched-card` qualifier matches the markup so
   nothing else inherits these padding tweaks. */
.totals-card.sched-card .totals-rows {
  padding: 14px 20px;
}
.totals-card.sched-card .trow strong {
  font-weight: 700;
}


/* =========================================================
   22. INVOICE VIEW EXTRAS (v3.16)
   These build on top of section 19's shared estimate-view
   shell. Net-new bits are commented; everything else
   inherits from .ev-grid / .ev-doc / .meta-card / .timeline.
   ========================================================= */

/* Status pills specific to invoices. status-sent / status-draft
   already exist in section 19; the rest are new colour variants. */
.status-paid     { background: var(--brand-tint); color: var(--brand-700); }
.status-partial  { background: #fffbeb;          color: #b45309; }
.status-overdue  { background: var(--bad-bg);    color: #b91c1c; }
.status-cancelled{ background: var(--ink-100);   color: var(--ink-500); }

/* Letterhead due-date emphasis (red-coloured value with a small
   "in N days" subline). Scoped to .ev-doc so it doesn't leak. */
.ev-doc .lh-doc-meta dd.due {
  color: var(--bad); font-weight: 700;
}
.ev-doc .lh-doc-meta dd.due small {
  display: block; font-size: 10px; font-weight: 600;
  color: var(--bad); margin-top: 1px;
}

/* Totals table — green "paid" row. */
.ev-doc .totals-table .row.paid .v { color: var(--brand-700); }

/* Balance Due banner — replaces the simple "Estimate Total" tile.
   Same dark-gradient shell, plus a sub line + inline progress bar.
   When fully paid it switches to a brand-green gradient. */
.ev-doc .grand.balance {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 16px 18px;
}
.ev-doc .grand.balance.is-paid {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 100%);
}
.ev-doc .grand.balance .grand-sub {
  font-size: 11px; color: rgba(255,255,255,0.65);
  margin-top: 6px;
}
.ev-doc .grand.balance .grand-sub strong { color: #fff; font-weight: 700; }
.ev-doc .grand.balance .pay-progress {
  grid-column: 1 / -1;
  margin-top: 4px;
  height: 6px; border-radius: 4px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.ev-doc .grand.balance .pay-progress > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, #34d399 100%);
  border-radius: 4px;
}
.ev-doc .grand.balance.is-paid .pay-progress { background: rgba(255,255,255,0.20); }
.ev-doc .grand.balance.is-paid .pay-progress > span { background: #fff; }

/* Payments-Received block (lives inside .ev-doc, after totals). */
.payments-block {
  padding: 22px 32px;
  border-top: 1px solid var(--ink-100);
}
.payments-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.payments-head h3 {
  margin: 0; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.005em;
}
.payments-head .pay-count {
  display: inline-flex; align-items: center;
  background: var(--brand-tint); color: var(--brand-700);
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 999px;
}

.pay-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.pay-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto 30px;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-100);
  background: var(--surface);
  transition: background 120ms;
}
.pay-row:last-child { border-bottom: 0; }
.pay-row:hover { background: var(--surface-2); }

.pay-method-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-700);
  flex-shrink: 0;
}
.pay-method-icon.bank   { background: #eff6ff; color: #1d4ed8; }
.pay-method-icon.wise   { background: #f0fdfa; color: #0f766e; }
.pay-method-icon.bkash  { background: #fdf2f8; color: #be185d; }
.pay-method-icon.cash   { background: #f5f5f4; color: #57534e; }
.pay-method-icon.stripe { background: #f5f3ff; color: #6d28d9; }
.pay-method-icon.other  { background: var(--ink-100); color: var(--ink-700); }

.pay-meta { min-width: 0; }
.pay-method-name {
  font-size: 13px; font-weight: 600; color: var(--ink-900);
}
.pay-ref {
  font-size: 11px; color: var(--ink-500);
  margin-top: 2px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pay-when {
  font-size: 12px; color: var(--ink-500);
  text-align: right; min-width: 88px;
}
.pay-when small {
  display: block; font-size: 11px; color: var(--ink-400);
}

.pay-amount {
  font-size: 14px; font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.pay-amount small {
  display: block;
  font-size: 11px; color: var(--ink-500);
  font-weight: 500; margin-top: 2px;
}

.pay-delete {
  width: 28px; height: 28px;
  border-radius: 6px; border: 0;
  background: transparent; color: var(--ink-400);
  cursor: pointer; display: grid; place-items: center;
  transition: background 120ms, color 120ms;
}
.pay-delete:hover { background: var(--bad-bg); color: var(--bad); }

/* Empty state for the payments list */
.pay-empty {
  padding: 28px 24px; text-align: center;
  border: 1px dashed var(--ink-300);
  border-radius: 12px;
  background: var(--surface);
}
.pay-empty .ico {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-700);
  display: inline-grid; place-items: center;
  margin-bottom: 10px;
}
.pay-empty p { font-size: 13px; color: var(--ink-700); margin: 0; }
.pay-empty p strong { color: var(--ink-900); font-weight: 600; }

/* Sidebar Record-a-Payment card */
.pay-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.pay-card-head {
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--ink-100);
}
.pay-card-head h3 {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-900);
  display: flex; align-items: center; gap: 8px;
}
.pay-card-head h3 svg { color: var(--brand-700); }
.pay-card-sub {
  font-size: 11px; color: var(--ink-500); margin-top: 2px;
}
.pay-card-sub strong { color: var(--ink-700); font-weight: 600; }
.pay-card-body { padding: 14px 16px; }

.field-stack { display: flex; flex-direction: column; gap: 12px; }
.lbl-mini {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--ink-700); margin-bottom: 4px;
}
.input-mini {
  width: 100%; padding: 9px 12px;
  font: inherit; font-size: 13px; color: var(--ink-800);
  background: var(--surface);
  border: 1px solid var(--ink-200); border-radius: 8px;
}
.input-mini:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
}
.amount-input { position: relative; }
.amount-input .prefix {
  position: absolute; top: 50%; left: 12px; transform: translateY(-50%);
  font-size: 13px; color: var(--ink-400); font-weight: 600;
  pointer-events: none;
}
.amount-input input {
  padding-left: 24px; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums;
  padding-right: 56px;
}
.amount-input .quick {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  padding: 4px 8px; border-radius: 999px;
  border: 0; background: var(--ink-100); color: var(--ink-700);
  cursor: pointer;
  font-family: inherit;
}
.amount-input .quick:hover { background: var(--ink-200); color: var(--ink-900); }

/* Method-chip grid (sidebar). Visual chips for the four primary
   methods, plus a fallback "Other" select for the long tail. */
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.method-chip {
  border: 1px solid var(--ink-200);
  background: var(--surface);
  border-radius: 10px;
  padding: 9px 6px;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  cursor: pointer; font-family: inherit;
  color: var(--ink-700);
  transition: border-color 120ms, background 120ms, color 120ms;
}
.method-chip:hover { border-color: var(--ink-300); }
.method-chip.is-on {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-700);
}
.method-chip svg { width: 18px; height: 18px; }
.method-chip span {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
}

.pay-card-foot {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--ink-100);
}

/* Print-friendly tweaks: hide sidebar on print so the document
   prints cleanly. */
@media print {
  .ev-side, .page-head-actions { display: none !important; }
  .ev-grid { grid-template-columns: 1fr !important; }
}

/* Responsive payments list */
@media (max-width: 760px) {
  .payments-block { padding-left: 18px; padding-right: 18px; }
  .pay-row {
    grid-template-columns: 36px 1fr auto;
    grid-template-areas:
      "icon meta   amount"
      "icon when   delete";
    row-gap: 6px;
  }
  .pay-method-icon { grid-area: icon; }
  .pay-meta        { grid-area: meta; }
  .pay-amount      { grid-area: amount; }
  .pay-when        { grid-area: when; text-align: left; }
  .pay-delete      { grid-area: delete; }
  .method-grid     { grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   v3.21 — SETTINGS shell (left-rail tabs + design cards)
   Mirrors `designs/settings.html`. All rules are scoped to
   `.settings-page` so the rest of the app can't pick them up
   accidentally.
   ========================================================= */
.settings-page .settings-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: start;
}

/* left rail */
.settings-page .tab-rail {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  padding: 8px;
  position: sticky; top: 18px;
}
.settings-page .tab-rail .rail-section {
  font-size: 10px; font-weight: 700;
  color: var(--ink-500);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 12px 10px 6px;
}
.settings-page .tab-rail a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-700); text-decoration: none;
  margin-bottom: 1px;
}
.settings-page .tab-rail a:hover { background: var(--ink-50); color: var(--ink-900); }
.settings-page .tab-rail a.is-on {
  background: var(--brand-tint); color: var(--brand-700);
}
.settings-page .tab-rail a svg {
  width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85;
}
.settings-page .tab-rail a .ct {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  background: var(--ink-100); color: var(--ink-700);
  padding: 2px 8px; border-radius: 999px;
}
.settings-page .tab-rail a.is-on .ct {
  background: var(--brand); color: #fff;
}

/* settings card */
.settings-page .settings-card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  margin-bottom: 16px;
}
.settings-page .sc-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: flex-start; gap: 12px;
}
.settings-page .sc-head h3 {
  margin: 0; font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
}
.settings-page .sc-head .sub {
  color: var(--ink-500); font-size: 12px; margin-top: 2px;
}
.settings-page .sc-head .grow { flex: 1; }
.settings-page .sc-head .help {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-500); font-weight: 600;
}
.settings-page .sc-body { padding: 18px 20px; }
.settings-page .sc-foot {
  padding: 14px 20px; background: var(--surface-2);
  border-top: 1px solid var(--ink-100);
  display: flex; align-items: center; gap: 10px;
}
.settings-page .sc-foot .grow {
  flex: 1; font-size: 12px; color: var(--ink-500);
}

/* form bits used inside cards */
.settings-page label.field { display: block; }
.settings-page label.field .lbl {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ink-700); margin-bottom: 6px;
}
.settings-page label.field input,
.settings-page label.field textarea,
.settings-page label.field select {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px;
  font: inherit; color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
}
.settings-page label.field textarea { resize: vertical; min-height: 84px; }
.settings-page label.field input:focus,
.settings-page label.field textarea:focus,
.settings-page label.field select:focus {
  outline: none; border-color: var(--brand-soft);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.settings-page label.field .hint {
  display: block; margin-top: 6px;
  font-size: 11px; color: var(--ink-500);
}
.settings-page .row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 760px) {
  .settings-page .row-2 { grid-template-columns: 1fr; }
}
.settings-page .form-section {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-500);
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-top: 16px;
}
.settings-page .form-section .meta {
  font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--ink-400);
}

/* saved pill (topbar) */
.settings-page .saved-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-tint);
  padding: 5px 12px; border-radius: 999px;
}

/* logo dropzone */
.settings-page .logo-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px; align-items: start;
}
.settings-page .logo-tile {
  width: 100px; height: 100px;
  border-radius: 16px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 38px; letter-spacing: -0.02em;
  color: #06251c;
  background: linear-gradient(135deg, var(--brand) 0%, #34d399 100%);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
}
.settings-page .logo-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.settings-page .logo-actions .lbl-mini {
  font-size: 12px; font-weight: 600; color: var(--ink-700);
}
.settings-page .logo-actions .row { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-page .logo-actions .hint { font-size: 11px; color: var(--ink-500); }

/* colour picker rows (overrides the global .color-field defined earlier) */
.settings-page .color-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.settings-page .color-field {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 12px; align-items: center;
  padding: 8px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-control);
  background: var(--surface);
}
.settings-page .color-field input[type="color"] {
  width: 40px; height: 40px;
  border: 0; padding: 0;
  border-radius: 8px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  background: transparent;
}
.settings-page .color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.settings-page .color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.settings-page .color-text { display: flex; flex-direction: column; gap: 2px; }
.settings-page .color-text .name {
  font-size: 12px; font-weight: 700; color: var(--ink-700);
}
.settings-page .color-text input[type="text"] {
  border: 0; background: transparent;
  font: inherit; font-size: 13px; padding: 0;
  color: var(--ink-800); font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.settings-page .color-text input[type="text"]:focus {
  outline: none; color: var(--ink-900);
}
@media (max-width: 760px) {
  .settings-page .color-row { grid-template-columns: 1fr; }
  .settings-page .settings-grid { grid-template-columns: 1fr; }
  .settings-page .tab-rail { position: static; }
}

/* preset palette */
.settings-page .palette {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.settings-page .palette button {
  width: 28px; height: 28px;
  border-radius: 8px; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  position: relative; padding: 0;
}
.settings-page .palette button.is-on::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 11px;
  box-shadow: 0 0 0 2px var(--ink-900);
}

/* live preview card inside Branding */
.settings-page .preview-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 18px;
  margin-top: 18px;
}
.settings-page .pv-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.settings-page .pv-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand) 0%, #34d399 100%);
  color: #06251c; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.settings-page .pv-name { font-weight: 700; color: var(--ink-900); }
.settings-page .pv-tag  { font-size: 11px; color: var(--ink-500); margin-top: 1px; }
.settings-page .pv-buttons {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.settings-page .pv-buttons .btn { font-size: 12px; padding: 7px 14px; }

/* "look at the permissions tab" hint */
.settings-page .nav-hint {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface) 200%);
  border: 1px solid var(--brand-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 18px;
}
.settings-page .nav-hint .ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.settings-page .nav-hint .text { flex: 1; min-width: 0; line-height: 1.4; }
.settings-page .nav-hint .text strong { color: var(--ink-900); }
.settings-page .nav-hint .text .meta { font-size: 12px; color: var(--ink-700); margin-top: 1px; }


/* =========================================================
   23. COMPLIANCE TRACKER (v3.54)
   Staff-facing recurring-obligation tracker. List (KPI tiles +
   type tabs + filter bar + table + right rail), the numbered
   creator, and the per-obligation detail view. Reuses the base
   .card / .btn / .pill / .data-table components; everything
   below is the compliance-specific chrome.
   ========================================================= */

/* ---- two-column layout (table + rail) shared by list & view ---- */
.cmp-layout {
  display: grid; grid-template-columns: 1fr 312px;
  gap: 18px; align-items: start;
}
.cmp-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 18px; }

/* ---- KPI tiles (clickable filters) ---- */
.cmp-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-bottom: 22px;
}
.cmp-kpis .cmp-kpi { text-decoration: none; display: block; transition: border-color 120ms, box-shadow 120ms; }
.cmp-kpi:hover { border-color: var(--ink-300); }
.cmp-kpi.is-active { border-color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-900); }
.cmp-kpi .kpi-l .ic {
  width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center;
}
.cmp-ic-bad  { background: var(--bad-bg);  color: #b91c1c; }
.cmp-ic-warn { background: var(--warn-bg); color: #b45309; }
.cmp-ic-info { background: var(--info-bg); color: #1d4ed8; }
.cmp-ic-ok   { background: var(--ok-bg);   color: var(--brand-700); }
.cmp-kpi .kpi-v.warn { color: #b45309; }

/* ---- type tabs ---- */
.cmp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cmp-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--ink-200); background: var(--surface);
  color: var(--ink-700); text-decoration: none;
}
.cmp-tab:hover { background: var(--ink-50); }
.cmp-tab.active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.cmp-tab .n { font-size: 11px; opacity: 0.6; }
.cmp-tab.active .n { opacity: 0.75; }
.cmp-tab.active .cmp-type { background: rgba(255,255,255,0.16); color: #fff; }

/* ---- type pills (coloured by tone) ---- */
.cmp-type {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill);
}
.cmp-type-info    { background: var(--info-bg); color: #1d4ed8; }
.cmp-type-violet  { background: #f5f3ff;        color: #6d28d9; }
.cmp-type-ok      { background: var(--ok-bg);   color: var(--brand-700); }
.cmp-type-warn    { background: var(--warn-bg); color: #b45309; }
.cmp-type-pink    { background: #fdf2f8;        color: #be185d; }
.cmp-type-neutral { background: var(--ink-100); color: var(--ink-700); }

/* ---- filter bar pieces ---- */
.cmp-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--ink-200);
  border-radius: var(--r-control); padding: 8px 12px;
  min-width: 220px; flex: 1; max-width: 340px; color: var(--ink-500);
}
.cmp-search input { border: 0; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--ink-800); font: inherit; font-size: 13px; }
.cmp-select select {
  appearance: none; -webkit-appearance: none;
  background: var(--surface); border: 1px solid var(--ink-200);
  border-radius: var(--r-control); padding: 9px 30px 9px 12px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-700); cursor: pointer;
}

/* ---- table cells ---- */
.cmp-cl { display: flex; align-items: center; gap: 11px; }
.cmp-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.cmp-cl-name { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.cmp-obl { font-size: 13px; font-weight: 600; color: var(--ink-800); }
.cmp-rel-bad   { color: var(--bad); }
.cmp-rel-warn  { color: #b45309; }
.cmp-rel-muted { color: var(--ink-400); }

/* row action group (primary button + send-reminder icon) */
.cmp-row-act { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.cmp-row-act form { margin: 0; }
.cmp-icon-act {
  width: 32px; height: 32px; border-radius: 7px;
  border: 1px solid var(--ink-200); background: var(--surface);
  color: var(--ink-600); display: grid; place-items: center; cursor: pointer;
}
.cmp-icon-act:hover { background: var(--ink-50); color: var(--ink-900); }

/* by-type donut */
.cmp-donut-wrap { display: flex; align-items: center; gap: 16px; padding: 4px 2px; }
.cmp-donut { flex-shrink: 0; transform: rotate(-90deg); }
.cmp-donut-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cmp-donut-row { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; font-size: 12px; text-decoration: none; }
.cmp-donut-row:hover .cmp-donut-name { color: var(--ink-900); }
.cmp-donut-key { width: 10px; height: 10px; border-radius: 3px; }
.cmp-donut-name { color: var(--ink-700); }
.cmp-donut-val { color: var(--ink-500); font-variant-numeric: tabular-nums; font-weight: 600; }
.cmp-tablefoot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-top: 1px solid var(--ink-100);
  font-size: 12px; color: var(--ink-500); flex-wrap: wrap; gap: 10px;
}
.cmp-pager { display: inline-flex; align-items: center; gap: 4px; }
.cmp-page {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--ink-200); border-radius: 7px;
  background: var(--surface); color: var(--ink-700);
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.cmp-page:hover { background: var(--ink-50); color: var(--ink-900); }
.cmp-page.is-active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.cmp-page.is-disabled { color: var(--ink-300); pointer-events: none; }
.cmp-page-gap { padding: 0 4px; color: var(--ink-400); }

/* bulk select column + action bar */
.cmp-selcol { width: 38px; text-align: center; }
.cmp-selcol input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.cmp-bulkbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--ink-100);
  background: var(--brand-tint);
}
.cmp-bulkbar .grow { flex: 1; }
.cmp-bulkcount { font-size: 13px; font-weight: 600; color: var(--brand-700); }

/* ---- right-rail mini calendar ---- */
.cmp-cal { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ink-100); text-decoration: none; }
.cmp-cal:last-child { border-bottom: 0; }
.cmp-cal-date {
  width: 46px; flex-shrink: 0; text-align: center; border-radius: 9px;
  padding: 6px 0; background: var(--ink-100);
}
.cmp-cal-date.is-bad  { background: var(--bad-bg); }
.cmp-cal-date.is-soon { background: var(--warn-bg); }
.cmp-cal-date .m { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ink-500); letter-spacing: 0.04em; }
.cmp-cal-date.is-bad .m  { color: #b91c1c; }
.cmp-cal-date.is-soon .m { color: #b45309; }
.cmp-cal-date .d { font-size: 16px; font-weight: 800; color: var(--ink-900); line-height: 1.1; }
.cmp-cal-meta .t { font-size: 12px; font-weight: 600; color: var(--ink-800); }
.cmp-cal-meta .s { font-size: 11px; color: var(--ink-500); margin-top: 1px; }

/* ---- reminder automation lines ---- */
.cmp-rem-line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-700); padding: 7px 0; }
.cmp-rem-line .ic { width: 18px; height: 18px; border-radius: 5px; background: var(--brand-tint); flex-shrink: 0; }
.cmp-rem-line b { color: var(--ink-900); }

/* ---- creator ---- */
.cmp-creator { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.cmp-form-col { display: flex; flex-direction: column; gap: 18px; }
.cmp-creator-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 18px; }

/* form fields inside the creator — the base stylesheet only styles
   controls inside .form-card/.form-grid, so the creator's .field
   wrappers need their own scoped styling. */
.cmp-creator .field { display: flex; flex-direction: column; margin-bottom: 16px; }
.cmp-creator .field:last-child { margin-bottom: 0; }
.cmp-creator .field > label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ink-700); margin-bottom: 6px;
}
.cmp-creator .field input,
.cmp-creator .field select,
.cmp-creator .field textarea {
  width: 100%; font: inherit; font-size: 14px;
  background: var(--surface); border: 1px solid var(--ink-200);
  border-radius: var(--r-control); padding: 10px 12px;
  color: var(--ink-900); transition: border-color 120ms, box-shadow 120ms;
}
.cmp-creator .field input::placeholder { color: var(--ink-400); }
.cmp-creator .field input:focus,
.cmp-creator .field select:focus,
.cmp-creator .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}
.cmp-creator .field textarea { resize: vertical; min-height: 70px; }
.cmp-creator .card-head { gap: 10px; }
.cmp-sec-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink-900); color: #fff; font-size: 12px; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
}
.cmp-req { color: var(--bad); }
.cmp-hint { font-size: 11px; color: var(--ink-400); margin-top: 5px; }
.cmp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp-field-row .field { margin-bottom: 0; }
.cmp-money { position: relative; }
.cmp-money .cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-500); font-size: 14px; font-weight: 600; z-index: 1; }
.cmp-money input { padding-left: 28px !important; }

.cmp-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cmp-type-card {
  border: 1px solid var(--ink-200); border-radius: var(--r-control);
  padding: 12px 13px; cursor: pointer; display: flex; align-items: center; gap: 12px;
  transition: border-color 120ms, background 120ms;
}
.cmp-type-card:hover { background: var(--ink-50); }
.cmp-type-card.active { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand); }
.cmp-tc-ic { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.cmp-tc-t { display: block; font-size: 13px; font-weight: 700; color: var(--ink-900); }
.cmp-tc-d { display: block; font-size: 11px; color: var(--ink-500); margin-top: 1px; }

/* segmented control (recurrence) */
.cmp-seg { display: inline-flex; background: var(--ink-100); border-radius: var(--r-control); padding: 4px; gap: 4px; flex-wrap: wrap; }
.cmp-seg button {
  border: 0; background: transparent; padding: 8px 14px; border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-500); cursor: pointer;
}
.cmp-seg button.active { background: var(--surface); color: var(--ink-900); box-shadow: var(--sh-card); }

/* iOS toggle (reminder master) */
.cmp-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.cmp-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cmp-switch .track { width: 40px; height: 23px; border-radius: 999px; background: var(--ink-300); position: relative; transition: background 140ms; flex-shrink: 0; }
.cmp-switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform 140ms; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cmp-switch.on .track { background: var(--brand); }
.cmp-switch.on .track::after { transform: translateX(17px); }
/* keep the visual in sync even without JS, via :checked */
.cmp-switch input[type="checkbox"]:checked ~ .track { background: var(--brand); }
.cmp-switch input[type="checkbox"]:checked ~ .track::after { transform: translateX(17px); }
.cmp-switch input[type="checkbox"]:focus-visible ~ .track { box-shadow: 0 0 0 3px rgba(16,185,129,0.3); }
.cmp-switch .lbl { font-size: 13px; font-weight: 600; color: var(--ink-800); }
.cmp-rem-schedule { font-size: 12px; color: var(--ink-500); margin-top: 8px; line-height: 1.5; }

/* custom-recurrence "every N months" reveal */
.cmp-custom-months { margin-top: 10px; }
.cmp-custom-months label { font-size: 13px; color: var(--ink-700); display: inline-flex; align-items: center; }
.cmp-custom-months input { font: inherit; font-size: 14px; border: 1px solid var(--ink-200); border-radius: var(--r-control); padding: 8px 10px; }
.cmp-custom-months input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(16,185,129,0.16); }
.cmp-custom-months.is-hidden { display: none; }

/* state "Other / non-US" free-text reveal */
.cmp-state-other.is-hidden { display: none; }

/* ---- detail view ---- */
.cmp-banner { align-items: center; gap: 14px; }
.cmp-doc { padding: 0; overflow: hidden; }
.cmp-doc-head {
  padding: 24px 26px; border-bottom: 3px solid var(--brand);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.cmp-doc-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-700); }
.cmp-doc-head h1 { margin: 6px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-900); }
.cmp-doc-meta { font-size: 13px; color: var(--ink-500); }
.cmp-doc-badge { width: 52px; height: 52px; border-radius: 13px; }
.cmp-doc-section { padding: 22px 26px; border-bottom: 1px solid var(--ink-100); }
.cmp-doc-section:last-child { border-bottom: 0; }
.cmp-doc-section h4 { margin: 0 0 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); }
.cmp-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.cmp-kv .k { font-size: 12px; color: var(--ink-500); }
.cmp-kv .v { font-size: 14px; font-weight: 600; color: var(--ink-900); margin-top: 3px; }
.cmp-kv .v.bad { color: var(--bad); }
.cmp-kv .v.big { font-size: 18px; font-weight: 800; }
.cmp-note { margin-top: 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--ink-200); border-radius: var(--r-control); font-size: 13px; color: var(--ink-700); line-height: 1.55; }

/* filing-history timeline */
.cmp-tl { display: flex; flex-direction: column; }
.cmp-tl-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; padding: 12px 0; position: relative; }
.cmp-tl-row:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 34px; bottom: -4px; width: 2px; background: var(--ink-100); }
.cmp-tl-ic { width: 28px; height: 28px; border-radius: 8px; z-index: 1; display: grid; place-items: center; }
.cmp-tl-ok   { background: var(--ok-bg);   color: var(--brand-700); }
.cmp-tl-info { background: var(--info-bg); color: #1d4ed8; }
.cmp-tl-warn { background: var(--warn-bg); color: #b45309; }
.cmp-tl-bad  { background: var(--bad-bg);  color: #b91c1c; }
.cmp-tl-txt { font-size: 13px; color: var(--ink-700); line-height: 1.5; align-self: center; }
.cmp-tl-time { font-size: 11px; color: var(--ink-400); white-space: nowrap; align-self: center; }

/* detail rail — client mini-hero */
.cmp-client-mini { display: flex; align-items: center; gap: 12px; padding: 16px 18px 8px; }
.cmp-av-lg { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.cmp-client-name { font-size: 14px; font-weight: 700; color: var(--ink-900); text-decoration: none; }
.cmp-client-name:hover { color: var(--brand-700); }

/* detail rail meta + reminder log */
.cmp-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ink-100); font-size: 13px; }
.cmp-meta-row:last-child { border-bottom: 0; }
.cmp-meta-row .k { color: var(--ink-500); }
.cmp-meta-row .v { color: var(--ink-900); font-weight: 600; text-align: right; }
.cmp-rl-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--ink-100); }
.cmp-rl-row:last-child { border-bottom: 0; }
.cmp-rl-ic { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--ok-bg); color: var(--brand-700); }
.cmp-rl-ic.next { background: var(--ink-100); color: var(--ink-400); }
.cmp-rl-ic.bad  { background: var(--bad-bg); color: #b91c1c; }
.cmp-rl-meta .t { font-size: 12px; font-weight: 600; color: var(--ink-800); }
.cmp-rl-meta .s { font-size: 11px; color: var(--ink-500); margin-top: 1px; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .cmp-layout, .cmp-creator { grid-template-columns: 1fr; }
  .cmp-rail, .cmp-creator-rail { position: static; }
  .cmp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cmp-type-grid { grid-template-columns: 1fr; }
  .cmp-field-row { grid-template-columns: 1fr; }
  .cmp-kv-grid { grid-template-columns: 1fr; }
  .cmp-kpis { grid-template-columns: 1fr; }
}