/* === Base Reset & Variables === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Cluster 8 — full audit: every legacy var redirected to a Tudi token.
     tudi-tokens.css defines the canonical palette; these aliases keep
     the old class names (.btn-primary, .btn-danger, etc.) working
     across thousands of inline-styled spots in dashboard.js without
     a per-rule rewrite. */
  --primary:        var(--red-button, #881720);
  --primary-hover:  var(--red-primary, #74131B);
  --primary-light:  var(--maroon-5,  #fbefef);
  --sidebar-bg:     #ffffff;
  --sidebar-text:   var(--fg-1,  #283133);
  --sidebar-active: rgba(116, 19, 27, 0.06);
  --topbar-bg:      #ffffff;
  --main-bg:        var(--bg-app,    #f8f8f8);
  --card-bg:        #ffffff;
  --text:           var(--fg-1,  #283133);
  --text-secondary: var(--fg-3,  #868b8c);
  --border:         var(--black-10, #eaecec);
  --success:        var(--green-50,  #15d667);
  --success-bg:     var(--green-10,  #e6fbef);
  --warning:        var(--yellow-50, #f6c204);
  --warning-bg:     var(--yellow-10, #fff7db);
  --danger:         var(--red-primary, #74131B);
  --danger-bg:      var(--red-10,    #ffece0);
  --info:           #28b8e2;
  --info-bg:        #d4f0fa;
  --radius:         6px;
  --radius-sm:      4px;
  --shadow:         var(--shadow-z1, 0 1px 3px rgba(0,0,0,0.08));
  --shadow-md:      var(--shadow-z2, 0 2px 4px rgba(0,0,0,0.08));
}

body {
  font-family: var(--font-primary, 'Montserrat', system-ui, sans-serif);
  font-weight: 300;
  background: var(--main-bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   App-shell scroll lock — only inner panes scroll, never the page.
   The dashboard chrome (sidebar + header) stays fixed; each
   .view owns its own scroll container. Pipeline board has its
   own column-level scrolling defined in #viewDeals rules.
   ============================================================ */
html:has(body.dashboard-locked),
body.dashboard-locked,
body[data-page="dashboard"] {
  height: 100%;
  overflow: hidden;
}
.dashboard-page, .app-shell, .layout {
  height: 100%;
  overflow: hidden;
}
/* Pipeline view — no whole-page scroll; columns scroll individually. */
#viewDeals.view-active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}
#viewDeals .page-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#viewDeals .tudi-board.pipeline-board {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
#viewDeals .tudi-col {
  height: 100%;
  min-height: 0;
}
#viewDeals .tudi-col-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* === Login Page (legacy rules — kept as no-op; new login.html provides
       its own Tudi chrome via /css/tudi-tokens.css + inline styles) === */
.login-page { /* superseded by login.html's lp-shell */ }
.login-container { width: 100%; max-width: 420px; padding: 20px; }
.login-card { background: var(--card-bg); border-radius: 12px; padding: 40px 32px; box-shadow: var(--shadow-md); }
.login-header { text-align: center; margin-bottom: 32px; }
.login-logo {
  width: 56px; height: 56px;
  background: var(--red-button, #881720);
  color: white;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; letter-spacing: 1.5px;
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 0 var(--red-secondary, #E54C59);
}
.login-header h1 { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: 1.5px; }
.login-header p { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.login-form .form-group { margin-bottom: 16px; }
.login-form label { display: block; font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; letter-spacing: .3px; }
.login-form input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--black-40, #c4c8c9);
  border-radius: 4px;
  font: 400 14px var(--font-primary, "Montserrat", sans-serif);
  background: #fff;
  color: var(--text);
  transition: outline-color 0.15s;
  outline: none;
}
.login-form input:focus { outline: 2px solid var(--red-primary, #74131B); outline-offset: -1px; border-color: transparent; }
.error-message {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--red-40, #f9b9a3);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
}
.login-footer { text-align: center; margin-top: 24px; font-size: 12px; color: var(--text-secondary); }
.login-footer strong { color: var(--red-primary, #74131B); }

/* === Buttons === Tudi-themed defaults */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  height: 32px;
  border: none;
  border-radius: var(--radius);
  font: 600 12px var(--font-primary, 'Montserrat', sans-serif);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  gap: 6px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary {
  background: var(--red-button, #881720); color: #fff;
  /* Self-sufficient layout in case a caller writes <button class="btn-primary">
     without the .btn base class — matches .btn-ghost/.btn so the button still
     sizes and aligns correctly. */
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 14px; height: 32px;
  border: none; border-radius: var(--radius);
  font: 600 12px var(--font-primary, 'Montserrat', sans-serif);
  cursor: pointer; white-space: nowrap; letter-spacing: 0.2px;
  transition: background 0.15s, color 0.15s;
}
.btn-primary:hover:not(:disabled) { background: var(--red-primary, #74131B); }
.btn-outline {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  color: var(--fg-2, var(--text-secondary));
  font-weight: 500;
}
.btn-outline:hover {
  background: var(--maroon-5, #fbefef);
  border-color: var(--red-primary, #74131B);
  color: var(--red-primary, #74131B);
}
.btn-danger { background: var(--red-50, #e16216); color: white; }
.btn-danger:hover { background: var(--red-80, #9d440f); }
.btn-success { background: var(--green-50, #15d667); color: white; }
.btn-success:hover { background: var(--green-80, #069744); }
.btn-secondary {
  background: #fff; color: var(--red-primary, #74131B);
  border: 2px solid var(--red-button, #881720);
}
.btn-secondary:hover { background: var(--red-secondary, #E54C59); color: #fff; }
.btn-sm { padding: 0 10px; height: 28px; font-size: 11px; font-weight: 500; }
.btn-full { width: 100%; height: 40px; font-size: 14px; }
/* Note: a Tudi-restyled .btn-ghost is appended later in this file — the
   legacy minimal `.btn-ghost` below is kept for in-text inline usage only. */
.btn-ghost-text { background: none; border: none; color: var(--text-secondary); padding: 4px 8px; cursor: pointer; }
.btn-ghost-text:hover { color: var(--red-primary, #74131B); background: var(--maroon-5, #fbefef); }

/* Icon buttons */
.icon-btn {
  width: 30px; height: 30px;
  border: none; background: none;
  color: var(--text-secondary);
  font-size: 15px; cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.icon-btn:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }
.icon-btn-danger { color: var(--red-50, #e16216); }
.icon-btn-danger:hover { background: var(--red-10, #ffece0); color: var(--red-primary, #74131B); }
.icon-btn-ghost { color: var(--text-secondary); }
.icon-btn-ghost:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }

/* === App Layout === */
.app { display: flex; flex-direction: row; height: 100vh; }

.topbar {
  height: 56px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: 10;
}

.topbar-left { display: flex; align-items: center; gap: 12px; }

.topbar-logo {
  width: 36px; height: 36px;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.topbar-title { font-size: 15px; font-weight: 600; color: var(--text); }

.topbar-right { display: flex; align-items: center; gap: 12px; }
/* Email nav button */
.btn-email-nav {
  background: var(--primary);
  color: white;
  border: none;
  position: relative;
}

.btn-email-nav:hover { background: var(--primary-hover); }

.email-nav-badge {
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

/* Keyword filter tags */
.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--main-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text);
}

.keyword-tag.exclude { background: var(--danger-bg); border-color: transparent; color: var(--danger); }

.keyword-tag button {
  border: none;
  background: none;
  font-size: 14px;
  cursor: pointer;
  color: inherit;
  padding: 0;
  line-height: 1;
}

.keyword-input-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.keyword-input-row input {
  flex: 1;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.keyword-input-row input:focus { border-color: var(--primary); }

.user-name { font-size: 14px; color: var(--text); font-weight: 500; }

.user-role-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--primary-light);
  color: var(--primary);
}

.layout { display: flex; flex: 1; overflow: hidden; }

/* === Object navigation (Phase 4a) — top tabs to switch between
       Dashboard / Leads / Companies / Deals / Quotes ============ */
.objnav {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 44px;
  flex-shrink: 0;
}
.objnav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  height: 100%;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.objnav-tab:hover {
  color: var(--text);
  background: var(--main-bg);
}
.objnav-tab.objnav-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Visual separator between department groups in the nav (Phase 5). */
.objnav-sep {
  color: var(--border);
  font-size: 18px;
  padding: 0 8px;
  user-select: none;
  align-self: center;
}

/* Help button on the right side of the department nav. */
.objnav-help {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
  margin-right: 4px;
}
.objnav-help:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-light);
}

/* Each top-level view fills the area below the object nav. Only the active
   one is visible; the router toggles `view-active`. */
.view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.view-active { display: flex !important; }

/* Generic empty-state wrapper for the new views */
.view-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  padding: 60px 20px;
  text-align: center;
}
.view-empty .empty-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 16px;
}
.view-empty h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.view-empty p {
  font-size: 14px;
  max-width: 480px;
}

/* === Sidebar === */
.sidebar {
  width: 300px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
}

.sidebar-header h3 { font-size: 16px; color: white; font-weight: 600; }

/* Staging button */
.staging-btn-wrap { padding: 0 16px 12px; }

.staging-btn {
  width: 100%;
  padding: 8px 12px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius);
  color: #fbbf24;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s;
}

.staging-btn:hover { background: rgba(245,158,11,0.25); }

.staging-badge {
  background: #f59e0b;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

.sidebar-search { padding: 0 16px 12px; }

.sidebar-search input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: white;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.sidebar-search input::placeholder { color: rgba(255,255,255,0.4); }
.sidebar-search input:focus { border-color: var(--primary); background: rgba(255,255,255,0.12); }

.sidebar-filters {
  display: flex;
  gap: 4px;
  padding: 0 16px 12px;
}

.filter-btn {
  flex: 1;
  padding: 5px 6px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.filter-btn:hover { background: rgba(255,255,255,0.12); }
.filter-btn.active { background: var(--primary); color: white; }

.sidebar-sort { padding: 0 16px 10px; }

.sidebar-sort-select {
  width: 100%;
  padding: 6px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: white;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.sidebar-sort-select option { background: var(--sidebar-bg); color: white; }

.client-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.client-item {
  padding: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.15s;
}

.client-item:hover { background: rgba(255,255,255,0.06); }
.client-item.active { background: var(--sidebar-active); }

.client-item-name {
  font-size: 14px;
  font-weight: 500;
  color: white;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-item-meta {
  font-size: 12px;
  color: var(--sidebar-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Status badges */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.lead { background: var(--info); }
.status-dot.qualified { background: var(--warning); }
.status-dot.won { background: var(--success); }
.status-dot.delivered { background: #8b5cf6; }

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.lead { background: var(--info-bg); color: var(--info); }
.status-badge.qualified { background: var(--warning-bg); color: var(--warning); }
.status-badge.won { background: var(--success-bg); color: var(--success); }
.status-badge.delivered { background: #ede9fe; color: #7c3aed; }
.status-badge.pending { background: var(--warning-bg); color: var(--warning); }
.status-badge.confirmed { background: var(--success-bg); color: var(--success); }
.status-badge.draft { background: var(--main-bg); color: var(--text-secondary); }
.status-badge.sent { background: var(--info-bg); color: var(--info); }
.status-badge.paid { background: var(--success-bg); color: var(--success); }
.status-badge.overdue { background: var(--danger-bg); color: var(--danger); }
.status-badge.lost { background: var(--danger-bg); color: var(--danger); }

/* === Main Content === */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
}

.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.3; }
.empty-state h2 { font-size: 20px; color: var(--text); margin-bottom: 8px; }
.empty-state p { font-size: 14px; }

/* === Detail View === */
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.detail-header h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.detail-meta span::before {
  margin-right: 4px;
  opacity: 0.6;
}

.detail-header-actions { display: flex; gap: 8px; align-items: center; }

.status-select {
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  outline: none;
}

.status-select:focus { border-color: var(--primary); }

/* === Tabs === */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.tab {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-header h3 { font-size: 16px; font-weight: 600; }

.inquiry-filters {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.inquiry-filters .filter-btn {
  padding: 5px 14px;
  background: var(--main-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.inquiry-filters .filter-btn:hover { background: var(--border); }
.inquiry-filters .filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* === Cards === */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s;
}

.card:hover { box-shadow: var(--shadow-md); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-date { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.card-actions { display: flex; gap: 4px; }

.card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.card-value { font-size: 14px; color: var(--text); }

/* Inquiry cards */
.inquiry-card .inquiry-message {
  background: var(--main-bg);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.inquiry-card .inquiry-response {
  background: var(--primary-light);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  border-left: 3px solid var(--primary);
}

.inquiry-card .response-by {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-style: italic;
}

.no-response {
  color: var(--warning);
  font-size: 13px;
  font-style: italic;
}

/* Sales table */
.sale-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0;
}

.sale-items-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--main-bg);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.sale-items-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.sale-total {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  margin-top: 8px;
}

.special-req {
  background: var(--warning-bg);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  margin-top: 8px;
  color: #92400e;
}

/* === Pricing Panel === */
.pricing-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 500px;
}

.pricing-field { margin-bottom: 20px; }
.pricing-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }

.pricing-field select,
.pricing-field input,
.pricing-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.pricing-field select:focus,
.pricing-field input:focus,
.pricing-field textarea:focus { border-color: var(--primary); }

.pricing-field textarea { resize: vertical; min-height: 60px; }

.adjustment-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adjustment-input button {
  width: 36px; height: 36px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--text);
}

.adjustment-input button:hover { background: var(--main-bg); }

.adjustment-input input {
  width: 80px;
  text-align: center;
  font-weight: 600;
}

.adjustment-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.pricing-actions { display: flex; gap: 8px; margin-top: 24px; }

/* === Modal === */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}

.modal {
  background: var(--card-bg);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 { font-size: 17px; font-weight: 600; }

.modal-close {
  width: 32px; height: 32px;
  border: none;
  background: none;
  font-size: 22px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.modal-close:hover { background: var(--main-bg); color: var(--text); }

.modal-body { padding: 24px; }

.modal-body .form-group { margin-bottom: 16px; }
.modal-body .form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.modal-body .form-group input,
.modal-body .form-group textarea,
.modal-body .form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.modal-body .form-group input:focus,
.modal-body .form-group textarea:focus,
.modal-body .form-group select:focus { border-color: var(--primary); }

.modal-body .form-group textarea { resize: vertical; min-height: 80px; }

.modal-body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Sale items editor */
.sale-item-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

.sale-item-row input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.sale-item-row input:focus { border-color: var(--primary); }

.remove-item-btn {
  width: 32px; height: 32px;
  border: none;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
}

.remove-item-btn:hover { background: var(--danger); color: white; }

.add-item-link {
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  border: none;
  background: none;
  font-family: inherit;
}

.add-item-link:hover { text-decoration: underline; }

/* Empty panel */
.panel-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* === File Attachments === */
.attachment-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.attachment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.attach-btn {
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.attach-btn:hover { background: var(--primary-light); }

.attachment-list { display: flex; flex-direction: column; gap: 4px; }

.attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--main-bg);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.attachment-name {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-name:hover { text-decoration: underline; }

.attachment-size {
  color: var(--text-secondary);
  font-size: 11px;
  flex-shrink: 0;
}

.drive-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  text-decoration: none;
  padding: 2px 6px;
  background: var(--success-bg);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.drive-link:hover { text-decoration: underline; }

/* === Integrations === */
.integration-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.integration-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--main-bg);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.integration-info { flex: 1; }
.integration-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.integration-info p { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }

.integration-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.integration-status.connected { background: var(--success-bg); color: var(--success); }
.integration-status.disconnected { background: var(--main-bg); color: var(--text-secondary); }

/* Email import list */
.email-list { max-height: 400px; overflow-y: auto; }

.email-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.email-item:hover { background: var(--primary-light); border-color: var(--primary); }
/* Temperature select */
.temp-select {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
}

.temp-select.temp-hot { background: var(--danger-bg); color: var(--danger); }
.temp-select.temp-medium { background: var(--warning-bg); color: #b45309; }
.temp-select.temp-cold { background: var(--info-bg); color: var(--info); }

/* Progress badges */
.progress-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 20px;
}

.progress-awaiting { background: var(--warning-bg); color: #b45309; }
.progress-responded { background: var(--success-bg); color: var(--success); }
.progress-converted { background: #ede9fe; color: #7c3aed; }

/* Lead channel badges */
.channel-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 20px;
}

.channel-organic { background: #d1fae5; color: #059669; }
.channel-direct { background: var(--info-bg); color: var(--info); }
.channel-social { background: #fce7f3; color: #db2777; }
.channel-marketplace { background: var(--warning-bg); color: #b45309; }

.email-from { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.email-subject { font-size: 14px; color: var(--text); }
.email-date { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* Email preview */
.email-preview-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.email-preview-subject {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}

/* Fetched response items */
.fetched-response-item {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.fetched-response-item:hover { background: var(--primary-light); border-color: var(--primary); }

.email-preview-body {
  background: var(--main-bg);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
  color: var(--text);
}

/* === Utilities === */
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }
.font-mono { font-family: 'SF Mono', 'Cascadia Code', monospace; }

/* Currency formatting */
.currency { font-family: 'SF Mono', 'Cascadia Code', monospace; font-weight: 600; }
.currency-positive { color: var(--success); }
.currency-negative { color: var(--danger); }

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

.sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* === Responsive === */
@media (max-width: 768px) {
  .sidebar { width: 260px; }
  .topbar-title { display: none; }
  .detail-header { flex-direction: column; gap: 12px; }
  .tabs { overflow-x: auto; }
}

/* === Shared component classes (ui-005, restyled to Tudi in cluster 7) === */
.kpi-tile {
  background: #fff;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 8px;
  padding: 14px;
}
.kpi-tile-label {
  font-size: 11px;
  color: var(--fg-3, var(--text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
}
.kpi-tile-value {
  font-size: 22px;
  font-weight: 400;
  color: var(--black-80, var(--text));
  margin-top: 4px;
  letter-spacing: -.3px;
}
.report-card {
  background: #fff;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: none;
}
.report-card > h3:first-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1, var(--text));
  margin: 0 0 10px;
}
.section-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.pipeline-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: move;
  box-shadow: var(--shadow);
}
.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.panel-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* === Mobile sweep (ui-004) === */
@media (max-width: 480px) {
  body { font-size: 14px; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 80%; max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 999;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-scrim {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 998;
  }
  .sidebar-scrim.mobile-open { display: block; }
  .mobile-hamburger {
    display: inline-block !important;
    background: none; border: none;
    font-size: 22px; cursor: pointer;
    padding: 6px 10px; color: var(--text);
  }
  .topbar { padding: 8px 10px; }
  .topbar-title { display: none; }
  .objnav-tab { padding: 8px 10px !important; font-size: 12px; }
  main, .content, .main-content { padding: 10px !important; }
  .detail-header { flex-direction: column; gap: 8px; align-items: flex-start; }
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .tab { white-space: nowrap; padding: 8px 12px; font-size: 13px; }
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  /* Cards/tiles stretch full width */
  .kpi-tile, .report-card { box-sizing: border-box; }
}
.mobile-hamburger { display: none; }

/* === Skeleton loaders (ui-003) === */
.skeleton-rows { padding: 12px; }
.skeleton-row {
  height: 14px;
  background: linear-gradient(90deg, var(--card-bg) 25%, var(--border) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 10px;
}
.skeleton-row:nth-child(1) { width: 70%; }
.skeleton-row:nth-child(2) { width: 92%; }
.skeleton-row:nth-child(3) { width: 56%; }
.skeleton-row:nth-child(4) { width: 80%; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =====================================================================
   Cluster 5 — Tudi visual refresh: outer nav sidebar + main area
   Replaces the legacy `.topbar` + `.objnav` strip. Renamed `.sidebar`
   inside the new shell to `.appsb` so it doesn't collide with the
   existing client-list `.sidebar` (which is nested inside #viewCompanies).
   ===================================================================== */

/* Hide legacy top-of-page nav rules in case any orphan markup persists */
.topbar, .objnav { display: none !important; }

/* Main area to the right of the sidebar */
.app-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--bg-app, #f8f8f8);
  overflow: hidden;
}
.app-actionbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border-1, #eaecec);
  flex-shrink: 0;
}
.app-actionbar .actionbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The active view fills the rest of the main area */
.app-main .view { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
.app-main .view-active { display: flex !important; }

/* ============== Outer nav sidebar (.appsb) — TUDI dark variant =========
   Matches the TUDI WMS screenshot: deep-maroon background with white text,
   maroon-secondary on hover, lighter coral on the active row.
   Replaces the prior white-sidebar variant from cluster 5. */
.appsb {
  background: var(--red-primary, #74131B);   /* deep maroon to match TUDI screenshot */
  color: #fff;
  border-right: 1px solid rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  transition: width .25s ease;
  position: relative;
  z-index: 5;
}
.appsb.appsb-expanded  { width: 220px; }
.appsb.appsb-collapsed { width: 64px; }

/* Brand row */
.appsb .sb-brand {
  display: flex; align-items: center; padding: 14px 12px 12px; gap: 10px; height: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0; position: relative;
}
.appsb .sb-logo {
  width: 36px; height: 36px; border-radius: 6px;
  background: #fff; color: var(--red-primary, #74131B);
  font-weight: 800; font-size: 13px; letter-spacing: .5px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.appsb .sb-brand .word { display: flex; flex-direction: column; min-width: 0; }
.appsb .sb-brand .word .top { font-weight: 800; font-size: 15px; letter-spacing: 2px; color: #fff; line-height: 1; }
.appsb .sb-brand .word .sub { font-size: 10px; color: rgba(255,255,255,0.65); letter-spacing: .3px; margin-top: 3px; }
.appsb .sb-toggle {
  margin-left: auto; width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 5px;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s, color .15s;
}
.appsb .sb-toggle:hover { background: rgba(255,255,255,0.15); color: #fff; }
.appsb .sb-toggle .ico { font-size: 16px; }
.appsb.appsb-collapsed .sb-toggle {
  position: absolute; right: -14px; top: 16px;
  background: var(--red-primary, #74131B); color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  border-color: rgba(255,255,255,0.25); z-index: 3;
}

/* User row */
.appsb .sb-user {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0; min-height: 56px;
}
.appsb .sb-user .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0; border: 2px solid rgba(255,255,255,0.35);
}
.appsb .sb-user .who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.appsb .sb-user .who .name {
  font-size: 13px; font-weight: 600; color: #fff;
  line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appsb .sb-user .who .role-line { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.appsb .sb-user .role-chip {
  font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  background: rgba(255,255,255,0.18); color: #fff;
  padding: 2px 7px; border-radius: 3px;
}

/* Nav scroll */
.appsb .sb-nav { flex: 1; overflow-y: auto; padding: 6px 0 12px; }
.appsb .sb-nav::-webkit-scrollbar { width: 6px; }
.appsb .sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border-radius: 3px; }
.appsb .sb-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }

/* Group block */
.appsb .sb-group { margin-top: 4px; }
.appsb .sb-group:first-child { margin-top: 0; }
.appsb .sb-group-head {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px 6px 14px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.55); cursor: pointer; user-select: none;
}
.appsb .sb-group-head:hover { color: #fff; }
.appsb .sb-group-head .label { flex: 1; }
.appsb .sb-group-head .chev { color: rgba(255,255,255,0.55); margin-left: auto; transition: transform .2s; }
.appsb .sb-group.open  .sb-group-head .chev { transform: rotate(0deg); }
.appsb .sb-group.closed .sb-group-head .chev { transform: rotate(-90deg); }

/* Items */
.appsb .sb-items { display: flex; flex-direction: column; }
.appsb .sb-group.closed .sb-items { display: none; }

.appsb .sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; height: 40px;
  color: rgba(255,255,255,0.85); cursor: pointer; position: relative;
  font-size: 13px; font-weight: 400;
  transition: background .12s, color .12s;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.appsb .sb-item:hover { background: var(--red-secondary, #E54C59); color: #fff; }
.appsb .sb-item .ico { font-size: 18px; flex-shrink: 0; color: rgba(255,255,255,0.85); width: 20px; text-align: center; }
.appsb .sb-item:hover .ico { color: #fff; }
.appsb .sb-item .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.appsb .sb-item.active {
  background: var(--red-40, #f9b9a3);
  color: var(--red-primary, #74131B);
  border-left-color: #fff;
}
.appsb .sb-item.active .label { font-weight: 700; }
.appsb .sb-item.active .ico { color: var(--red-primary, #74131B); }

.appsb .sb-pinned {
  padding: 6px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 4px;
}

/* Footer */
.appsb .sb-foot {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 8px 6px 12px; flex-shrink: 0; background: transparent;
}
.appsb .sb-foot-row {
  display: flex; gap: 2px; align-items: center; justify-content: space-around;
}
.appsb .sb-foot-btn {
  flex: 1; height: 32px; border: none; background: transparent;
  color: rgba(255,255,255,0.85); cursor: pointer;
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font: 500 11px var(--font-primary, "Montserrat", sans-serif);
}
.appsb .sb-foot-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.appsb .sb-foot-btn .ico { font-size: 16px; }
.appsb .sb-foot .ver {
  text-align: center; font-size: 9px;
  color: rgba(255,255,255,0.5); margin-top: 6px; letter-spacing: .3px;
}

/* Collapsed state */
.appsb.appsb-collapsed .sb-brand { padding: 14px 0; justify-content: center; }
.appsb.appsb-collapsed .sb-brand .word { display: none; }
.appsb.appsb-collapsed .sb-wordmark { display: none; }
/* Collapsed brand: nothing but the toggle button (clean) */
.appsb.appsb-collapsed .sb-user { padding: 12px 0; justify-content: center; }
.appsb.appsb-collapsed .sb-user .who { display: none; }
.appsb.appsb-collapsed .sb-user .avatar { width: 32px; height: 32px; }
.appsb.appsb-collapsed .sb-group-head { display: none; }
.appsb.appsb-collapsed .sb-group .sb-items { display: flex; }
.appsb.appsb-collapsed .sb-group {
  margin-top: 0; padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.appsb.appsb-collapsed .sb-group:last-child { border-bottom: none; }
.appsb.appsb-collapsed .sb-pinned {
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.appsb.appsb-collapsed .sb-item {
  padding: 0; height: 44px; justify-content: center; gap: 0;
}
.appsb.appsb-collapsed .sb-item .label { display: none; }
.appsb.appsb-collapsed .sb-item .ico { width: 22px; font-size: 20px; }
.appsb.appsb-collapsed .sb-item.active {
  background: var(--red-40, #f9b9a3);
}
.appsb.appsb-collapsed .sb-item.active .ico { color: var(--red-primary, #74131B); }

/* Tooltip on hover (collapsed only) */
.appsb .sb-item .tip { display: none; }
.appsb.appsb-collapsed .sb-item .tip {
  display: inline-flex; align-items: center; gap: 8px;
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #2a2a2c; color: #fff; padding: 7px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 400; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s;
  z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.appsb.appsb-collapsed .sb-item .tip::before {
  content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: #2a2a2c;
}
.appsb.appsb-collapsed .sb-item:hover .tip { opacity: 1; }

.appsb.appsb-collapsed .sb-foot-row { flex-direction: column; gap: 2px; }
.appsb.appsb-collapsed .sb-foot-btn { height: 32px; }
.appsb.appsb-collapsed .sb-foot-btn span:not(.ico) { display: none; }
.appsb.appsb-collapsed .sb-foot .ver { font-size: 0; }
.appsb.appsb-collapsed .sb-foot .ver::after { content: "v3.5"; font-size: 9px; }

/* =====================================================================
   Cluster 12 — TUDI sidebar/topbar restructure
   - .sb-brand-fullmark : the brand area is now ONLY the wordmark (no toggle button inside it)
   - .sb-toggle-floating : the collapse toggle floats on the sidebar/main seam, outside the sidebar
   - .app-topbar : right-aligned strip with Help, user identity, Sign out
   ===================================================================== */

/* Brand row — full-width logo, no inline toggle */
.appsb .sb-brand.sb-brand-fullmark {
  justify-content: center;
  padding: 16px 18px 14px;
  height: 72px;
}
.appsb .sb-brand.sb-brand-fullmark .sb-wordmark {
  height: 38px; width: 100%; max-width: 160px;
  object-fit: contain;
}
/* When collapsed, hide the entire brand row — the 64px column is too narrow for the
   wordmark and an empty maroon stripe at the top looks awkward. The floating toggle
   sits outside the sidebar so it's still reachable. */
.appsb.appsb-collapsed .sb-brand.sb-brand-fullmark { display: none !important; }
.appsb.appsb-collapsed .sb-brand.sb-brand-fullmark .sb-wordmark { display: none !important; }

/* Floating sidebar toggle — sits on the seam between sidebar and main */
.sb-toggle-floating {
  position: fixed;
  top: 28px;
  /* Sidebar is 220px expanded / 64px collapsed; nudge the button half over the edge. */
  left: calc(220px - 14px);
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff;
  color: var(--red-primary, #74131B);
  border: 1px solid var(--black-10, #eaecec);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 30;
  transition: left .25s ease, transform .15s ease, background .15s, color .15s;
}
.sb-toggle-floating:hover {
  background: var(--red-primary, #74131B);
  color: #fff;
}
.sb-toggle-floating .ico {
  font-family: "Material Icons Outlined";
  font-size: 18px; line-height: 1;
}
/* When collapsed, slide the floating toggle to the new seam.
   The chevron icon character itself is swapped by setupAppSidebar() in dashboard.js
   (chevron_left ⇄ chevron_right), so no CSS rotation is needed here. */
.appsb.appsb-collapsed ~ .sb-toggle-floating {
  left: calc(64px - 14px);
}

/* Top bar — right-aligned cluster (Help · user · Sign out) */
.app-topbar {
  display: flex; align-items: center;
  height: 56px;
  padding: 0 18px 0 28px;          /* leave room on the left for the floating toggle */
  background: #fff;
  border-bottom: 1px solid var(--border-1, #eaecec);
  flex-shrink: 0;
}
.app-topbar .topbar-spacer { flex: 1; }
.app-topbar .topbar-actions {
  display: flex; align-items: center; gap: 10px;
}
.app-topbar .topbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  background: transparent;
  color: var(--fg-2, #53595b);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font: 500 13px var(--font-primary, "Montserrat", sans-serif);
  transition: background .15s, color .15s, border-color .15s;
}
.app-topbar .topbar-btn .ico {
  font-family: "Material Icons Outlined";
  font-size: 18px; line-height: 1;
}
.app-topbar .topbar-btn:hover {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
}
.app-topbar .topbar-btn-signout {
  color: var(--red-primary, #74131B);
}
.app-topbar .topbar-btn-signout:hover {
  background: var(--red-primary, #74131B);
  color: #fff;
}
.app-topbar .topbar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px;
  border-left: 1px solid var(--border-1, #eaecec);
  border-right: 1px solid var(--border-1, #eaecec);
}
.app-topbar .topbar-user .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--red-primary, #74131B); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.app-topbar .topbar-user .who { display: flex; flex-direction: column; min-width: 0; }
.app-topbar .topbar-user .who .name {
  font-size: 13px; font-weight: 600; color: var(--fg-1, #283133); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.app-topbar .topbar-user .role-line { display: flex; align-items: center; margin-top: 2px; }
.app-topbar .topbar-user .role-chip {
  font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B);
  padding: 2px 6px; border-radius: 3px;
}

/* Hide labels on small screens; keep icons */
@media (max-width: 720px) {
  .app-topbar { padding: 0 12px 0 22px; height: 52px; }
  .app-topbar .topbar-btn .lbl { display: none; }
  .app-topbar .topbar-user .role-line { display: none; }
  .app-topbar .topbar-user .who .name { max-width: 110px; }
}

/* Material Icons utility — uses self-hosted woff2 from /fonts/ via tudi-tokens.css */
.appsb .ico {
  font-family: "Material Icons Outlined";
  font-style: normal; font-weight: normal;
  text-transform: none; letter-spacing: normal;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-size: 16px; line-height: 1;
}

/* =====================================================================
   Cluster 6 — Tudi visual port (Dashboard view)
   Mirrors TUDI-preview/dashboard.html. All rules scoped under
   #viewDashboard so they don't bleed into other views.
   ===================================================================== */

#viewDashboard .ico {
  font-family: "Material Icons Outlined";
  font-style: normal; font-weight: normal;
  font-size: 18px; line-height: 1; vertical-align: -3px;
  text-transform: none; letter-spacing: normal;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
}
#viewDashboard .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
#viewDashboard .right { text-align: right; }
#viewDashboard .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--fg-2, #53595b); }

#viewDashboard .page { padding: 16px 24px 32px; }
#viewDashboard .page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; gap: 16px; flex-wrap: wrap; }
#viewDashboard .page-head h1 { font-size: 22px; font-weight: 600; color: var(--fg-1, #283133); margin: 0; line-height: 1.2; }
#viewDashboard .page-head .crumb { font-size: 11px; color: var(--fg-3, #868b8c); margin-bottom: 2px; }
#viewDashboard .page-head .greeting { font-size: 12px; color: var(--fg-2, #53595b); font-weight: 300; margin-top: 2px; }
#viewDashboard .page-head .greeting b { font-weight: 600; color: var(--fg-1, #283133); }

/* Month picker */
#viewDashboard .month-picker {
  display: flex; align-items: center; gap: 0;
  background: #fff; border: 1px solid var(--border-1, #eaecec);
  border-radius: 6px; overflow: hidden; height: 32px;
  box-shadow: var(--shadow-z1, 0 1px 3px rgba(0,0,0,.12));
}
#viewDashboard .month-picker .step {
  width: 28px; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg-2, #53595b);
  border-right: 1px solid var(--border-1, #eaecec);
}
#viewDashboard .month-picker .step:last-child { border-right: none; border-left: 1px solid var(--border-1, #eaecec); }
#viewDashboard .month-picker .step:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }
#viewDashboard .month-picker .label {
  padding: 0 14px; font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
#viewDashboard .month-picker .label .ico { font-size: 14px; color: var(--fg-3, #868b8c); }
#viewDashboard .month-picker select { border: none; background: transparent; font: inherit; outline: none; cursor: pointer; padding: 0 2px; }
#viewDashboard .month-picker .apply {
  background: var(--red-button, #881720); color: #fff;
  padding: 0 12px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  height: 100%; border: none; cursor: pointer; font-family: inherit;
}
#viewDashboard .month-picker .apply:hover { background: var(--red-primary, #74131B); }

#viewDashboard .head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#viewDashboard .btn-ghost {
  background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 6px;
  padding: 0 12px; height: 32px;
  font: 500 12px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, #53595b); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
#viewDashboard .btn-ghost:hover { background: var(--black-5, #f8f8f8); color: var(--fg-1, #283133); }
#viewDashboard .btn-primary-tudi {
  background: var(--red-button, #881720); border: none; border-radius: 6px;
  padding: 0 14px; height: 32px;
  font: 600 12px var(--font-primary, "Montserrat", sans-serif);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
#viewDashboard .btn-primary-tudi:hover { background: var(--red-primary, #74131B); }

/* Layout grids */
#viewDashboard .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
#viewDashboard .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1100px) { #viewDashboard .kpi-row { grid-template-columns: repeat(2, 1fr); } #viewDashboard .row-2 { grid-template-columns: 1fr; } }

/* KPI tile */
#viewDashboard .tile {
  background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px;
  padding: 12px 14px 14px; position: relative;
}
#viewDashboard .tile .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--fg-3, #868b8c); font-weight: 500;
}
#viewDashboard .tile .label .sub {
  color: var(--fg-3, #868b8c); opacity: .7; font-weight: 300;
  text-transform: none; letter-spacing: 0; margin-left: 4px; font-size: 10px;
}
#viewDashboard .tile .value {
  font-size: 26px; font-weight: 400; color: var(--black-80, #283133);
  margin-top: 4px; line-height: 1.1; letter-spacing: -.4px;
}
#viewDashboard .tile .value .unit {
  font-size: 13px; color: var(--fg-3, #868b8c); font-weight: 300;
  margin-left: 4px; letter-spacing: 0;
}
#viewDashboard .tile .spark { margin-top: 8px; height: 32px; }
#viewDashboard .tile .meta {
  margin-top: 6px; font-size: 11px; color: var(--fg-2, #53595b);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
#viewDashboard .tile .meta .delta-up { color: var(--green-80, #069744); font-weight: 600; }
#viewDashboard .tile .meta .delta-down { color: var(--red-50, #e16216); font-weight: 600; }
#viewDashboard .tile .pbar {
  margin-top: 8px; height: 4px; background: var(--black-10, #eaecec);
  border-radius: 2px; position: relative; overflow: hidden;
}
#viewDashboard .tile .pbar > span {
  display: block; height: 100%; background: var(--red-primary, #74131B); border-radius: 2px;
}
#viewDashboard .tile .pbar.warn > span { background: var(--yellow-50, #f6c204); }
#viewDashboard .tile .pbar.good > span { background: var(--green-50, #15d667); }

/* Card chrome */
#viewDashboard .card { background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px; }
#viewDashboard .card + .card,
#viewDashboard .card-stack > .card + .card { margin-top: 12px; }
#viewDashboard .card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border-1, #eaecec); gap: 8px;
}
#viewDashboard .card-head h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--fg-1, #283133); }
#viewDashboard .card-head .h-meta { font-size: 11px; color: var(--fg-3, #868b8c); }
#viewDashboard .card-head .h-actions { display: flex; gap: 6px; }
#viewDashboard .card-head .h-actions .btn-ghost { height: 26px; padding: 0 8px; font-size: 11px; }
#viewDashboard .card-body { padding: 14px; }

/* Funnel */
#viewDashboard .funnel { display: flex; flex-direction: column; gap: 14px; }
#viewDashboard .stage { display: grid; grid-template-columns: 200px 1fr 140px; gap: 16px; align-items: center; }
@media (max-width: 760px) { #viewDashboard .stage { grid-template-columns: 1fr; } }
#viewDashboard .stage .name { font-size: 13px; font-weight: 500; color: var(--fg-1, #283133); }
#viewDashboard .stage .name small { display: block; font-size: 11px; color: var(--fg-3, #868b8c); font-weight: 300; margin-top: 2px; }
#viewDashboard .bar-stack { display: flex; flex-direction: column; gap: 4px; }
#viewDashboard .bar-row { display: grid; grid-template-columns: 50px 1fr 90px; gap: 8px; align-items: center; font-size: 11px; color: var(--fg-2, #53595b); }
#viewDashboard .bar-row .tag { color: var(--fg-3, #868b8c); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
#viewDashboard .bar-track { height: 14px; background: var(--black-5, #f8f8f8); border: 1px solid var(--border-1, #eaecec); border-radius: 2px; position: relative; overflow: hidden; }
#viewDashboard .bar-fill { height: 100%; background: var(--red-primary, #74131B); }
#viewDashboard .bar-fill.target {
  background: repeating-linear-gradient(45deg, var(--maroon-30, #f2b8a6) 0 4px, transparent 4px 8px);
  border-right: 2px solid var(--maroon-60, #9c2030);
}
#viewDashboard .bar-fill.won { background: var(--green-50, #15d667); }
#viewDashboard .bar-row .num { font-size: 12px; font-weight: 500; color: var(--fg-1, #283133); text-align: right; }
#viewDashboard .bar-row .num small { color: var(--fg-3, #868b8c); font-size: 10px; font-weight: 300; }
#viewDashboard .stage .drop { font-size: 11px; color: var(--fg-2, #53595b); text-align: right; }
#viewDashboard .stage .drop b { display: block; font-size: 14px; font-weight: 600; color: var(--red-50, #e16216); }
#viewDashboard .stage .drop.first b { color: var(--green-80, #069744); }

/* Hot inquiries / compact table */
#viewDashboard table.compact { width: 100%; border-collapse: collapse; font-size: 12px; }
#viewDashboard table.compact th {
  text-align: left; font-weight: 500; color: var(--fg-3, #868b8c); font-size: 10px;
  text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
}
#viewDashboard table.compact td { padding: 10px; border-bottom: 1px solid var(--border-1, #eaecec); color: var(--fg-1, #283133); vertical-align: middle; }
#viewDashboard table.compact tr:last-child td { border-bottom: none; }
#viewDashboard table.compact tr:hover td { background: var(--maroon-5, #fbefef); cursor: pointer; }

/* Temperature chips */
#viewDashboard .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
}
#viewDashboard .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
#viewDashboard .chip.hot { background: #fde7d8; color: var(--red-50, #e16216); }
#viewDashboard .chip.hot::before { background: var(--red-50, #e16216); }
#viewDashboard .chip.warm { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
#viewDashboard .chip.warm::before { background: var(--yellow-50, #f6c204); }
#viewDashboard .chip.cold { background: #e3f3f9; color: #1a7a9b; }
#viewDashboard .chip.cold::before { background: #28b8e2; }

#viewDashboard .stage-chip {
  display: inline-flex; padding: 2px 6px; border-radius: 3px;
  background: var(--black-10, #eaecec); color: var(--fg-2, #53595b);
  font-size: 10px; font-weight: 500; letter-spacing: .3px;
}

/* Stale deals */
#viewDashboard .deal {
  padding: 10px 12px; border: 1px solid var(--border-1, #eaecec);
  border-left: 3px solid var(--red-50, #e16216); border-radius: 4px;
  margin-bottom: 8px; background: #fff; cursor: pointer; transition: background .15s;
}
#viewDashboard .deal:hover { background: var(--maroon-5, #fbefef); }
#viewDashboard .deal:last-child { margin-bottom: 0; }
#viewDashboard .deal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#viewDashboard .deal-head .name { font-size: 13px; font-weight: 500; color: var(--fg-1, #283133); }
#viewDashboard .deal-head .value { font-size: 12px; font-weight: 600; color: var(--red-primary, #74131B); }
#viewDashboard .deal-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 11px; color: var(--fg-2, #53595b); flex-wrap: wrap; }
#viewDashboard .deal-meta .age { color: var(--red-50, #e16216); font-weight: 600; }
#viewDashboard .deal-meta .own-av {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--black-80, #283133); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600;
}
#viewDashboard .deal-meta .stage-pip { font-size: 10px; color: var(--fg-3, #868b8c); }

/* Spark colors (for the dashboard tile sparklines) */
#viewDashboard .spark .up { stroke: #28b8e2; }
#viewDashboard .spark .dn { stroke: var(--red-50, #e16216); }

/* =====================================================================
   Cluster 7 — Tudi global chrome (all non-dashboard views)
   The `.tudi-page` / `.tudi-page-head` / `.tudi-head-actions` /
   `.btn-primary-tudi` rules from this section were normalized away in
   cluster 16 (everywhere now uses `.page-wrap` / `.page-head` /
   `.head-actions` / `.btn-primary` — see `.app-main .page-wrap` block
   above). Only the still-referenced classes remain below.
   ===================================================================== */

/* Buttons */
.btn-ghost {
  background: #fff;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 6px;
  padding: 0 12px; height: 32px;
  font: 500 12px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary)); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.btn-ghost:hover { background: var(--black-5, var(--main-bg)); color: var(--fg-1, var(--text)); }
.btn-ghost.active,
.btn-ghost.on { background: var(--maroon-5, #fbefef); border-color: var(--red-primary, #74131B); color: var(--red-primary, #74131B); }
.btn-ghost[disabled] { opacity: .55; cursor: not-allowed; }

/* (.btn-primary-tudi removed in cluster 16; .btn-primary now uses the
   same Tudi red-button styling — see :root variable redirect at the
   top of this file from cluster 8.) */

/* Tudi card (non-colliding with existing .card) */
.tudi-card { background: #fff; border: 1px solid var(--border-1, var(--border)); border-radius: 8px; }
.tudi-card + .tudi-card { margin-top: 12px; }
.tudi-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border-1, var(--border)); gap: 8px;
}
.tudi-card-head h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--fg-1, var(--text)); }
.tudi-card-head .h-meta { font-size: 11px; color: var(--fg-3, var(--text-secondary)); }
.tudi-card-head .h-actions { display: flex; gap: 6px; }
.tudi-card-head .h-actions .btn-ghost { height: 26px; padding: 0 8px; font-size: 11px; }
.tudi-card-body { padding: 14px; }

/* Layout grids */
.tudi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tudi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tudi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) {
  .tudi-grid-3, .tudi-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tudi-grid-2 { grid-template-columns: 1fr; }
}

.tudi-section-spacer { height: 16px; }

/* Compact table — used by reports, leads/deals/quotes, hot inquiries */
table.tudi-compact { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
table.tudi-compact th {
  text-align: left; font-weight: 500;
  color: var(--fg-3, var(--text-secondary));
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-1, var(--border));
  background: var(--black-5, var(--main-bg));
}
table.tudi-compact td {
  padding: 10px; border-bottom: 1px solid var(--border-1, var(--border));
  color: var(--fg-1, var(--text)); vertical-align: middle;
}
table.tudi-compact tr:last-child td { border-bottom: none; }
table.tudi-compact tr:hover td { background: var(--maroon-5, #fbefef); cursor: pointer; }
table.tudi-compact .right { text-align: right; }
table.tudi-compact .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
table.tudi-compact .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--fg-2, var(--text-secondary)); }

/* Tudi temperature / status chips (non-colliding name) */
.tudi-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
}
.tudi-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.tudi-chip.hot   { background: #fde7d8;       color: var(--red-50, #e16216); }
.tudi-chip.hot::before   { background: var(--red-50, #e16216); }
.tudi-chip.warm,
.tudi-chip.warning,
.tudi-chip.medium { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
.tudi-chip.warm::before, .tudi-chip.warning::before, .tudi-chip.medium::before { background: var(--yellow-50, #f6c204); }
.tudi-chip.cold  { background: #e3f3f9;       color: #1a7a9b; }
.tudi-chip.cold::before  { background: #28b8e2; }
.tudi-chip.success,
.tudi-chip.won,
.tudi-chip.green { background: var(--green-10, #e6fbef); color: var(--green-80, #069744); }
.tudi-chip.success::before, .tudi-chip.won::before, .tudi-chip.green::before { background: var(--green-50, #15d667); }
.tudi-chip.danger,
.tudi-chip.lost,
.tudi-chip.red { background: var(--red-10, #ffece0); color: var(--red-primary, #74131B); }
.tudi-chip.danger::before, .tudi-chip.lost::before, .tudi-chip.red::before { background: var(--red-primary, #74131B); }

.tudi-stage-chip {
  display: inline-flex; padding: 2px 6px; border-radius: 3px;
  background: var(--black-10, var(--border)); color: var(--fg-2, var(--text-secondary));
  font-size: 10px; font-weight: 500; letter-spacing: .3px;
}

/* KPI mini-tile (alternative compact tile for non-dashboard views) */
.tudi-mini-tile {
  background: #fff; border: 1px solid var(--border-1, var(--border)); border-radius: 8px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.tudi-mini-tile .lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--fg-3, var(--text-secondary)); font-weight: 500;
}
.tudi-mini-tile .val {
  font-size: 22px; font-weight: 400; color: var(--black-80, var(--text));
  letter-spacing: -.3px;
}
.tudi-mini-tile .sub {
  font-size: 11px; color: var(--fg-2, var(--text-secondary));
}

/* Tabs (Tudi style — bottom-border accent, used by Reports etc.) */
.tudi-tabs {
  border-bottom: 1px solid var(--border-1, var(--border));
  display: flex; gap: 4px;
  margin-bottom: 14px;
}
.tudi-tab {
  padding: 10px 16px; cursor: pointer;
  font: 500 13px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  border: none; border-bottom: 2px solid transparent;
  background: transparent;
}
.tudi-tab:hover { color: var(--fg-1, var(--text)); }
.tudi-tab.active {
  color: var(--red-primary, #74131B);
  border-bottom-color: var(--red-primary, #74131B);
  font-weight: 600;
}

/* Pipeline kanban — minimal port from pipeline.html mockup */
/* Phase 2026-05 — 5 columns now (Lost dropped from board view); each fills the
   page width equally. data-col-count is set by the renderer so adding/removing
   columns keeps the grid consistent without a CSS change. */
#viewDeals .tudi-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; }
#viewDeals .tudi-board[data-col-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#viewDeals .tudi-board[data-col-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#viewDeals .tudi-col { display: flex; flex-direction: column; min-height: 600px; }
#viewDeals .tudi-col-head {
  /* Two-row header: row 1 = title + add button, row 2 = dedicated value display.
     Column flex so every pipeline column has identical height regardless of
     whether the value is Rp 0 or Rp 16.2B. */
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; background: #fff;
  border: 1px solid var(--border-1, var(--border)); border-radius: 8px 8px 0 0;
  border-bottom: 2px solid var(--accent, var(--black-50, #868b8c));
}
#viewDeals .tudi-col-head .col-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
#viewDeals .tudi-col-head h3 { font-size: 13px; font-weight: 600; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
#viewDeals .tudi-col-head h3 .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
#viewDeals .tudi-col-head .count { font-size: 11px; color: var(--fg-3, var(--text-secondary)); }
/* Dedicated valuation row — uniform across all 5 columns, always rendered.
   Renders Rp 0 in muted grey when the column is empty so the title cards
   line up vertically column-to-column. */
#viewDeals .tudi-col-head .col-head-value {
  display: flex; align-items: baseline; justify-content: space-between;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
  border-top: 1px dashed var(--border-1, #eaecec);
}
#viewDeals .tudi-col-head .col-head-value-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3, var(--text-secondary));
  font-weight: 600;
}
#viewDeals .tudi-col-head .col-head-value-amount {
  font-size: 13px; font-weight: 700;
  color: var(--fg-1, var(--text));
}
#viewDeals .tudi-col-head .col-head-value[data-empty="true"] .col-head-value-amount {
  color: var(--fg-3, #868b8c);
  font-weight: 500;
}
#viewDeals .tudi-col-body {
  background: var(--black-5, var(--main-bg));
  border: 1px solid var(--border-1, var(--border)); border-top: none;
  border-radius: 0 0 8px 8px; padding: 8px; flex: 1;
  display: flex; flex-direction: column; gap: 8px;
}
#viewDeals .tudi-col.col-leads     { --accent: #94a3a8; }
#viewDeals .tudi-col.col-qualified { --accent: #28b8e2; }
#viewDeals .tudi-col.col-set       { --accent: #f6c204; }
#viewDeals .tudi-col.col-conducted { --accent: var(--red-50, #e16216); }
#viewDeals .tudi-col.col-won       { --accent: var(--green-50, #15d667); }
#viewDeals .tudi-col.col-lost      { --accent: var(--red-primary, #74131B); }
/* Phase 2026-05 — Lost column subtly desaturates the cards so wins/in-flight pop. */
#viewDeals .tudi-col.col-lost .tudi-pcard { opacity: .82; }
#viewDeals .tudi-col.col-lost .tudi-pcard .name { text-decoration: line-through; text-decoration-color: var(--red-primary, #74131B); text-decoration-thickness: 1px; }

#viewDeals .tudi-pcard {
  background: #fff;
  border: 1px solid var(--border-1, var(--border));
  border-left: 3px solid var(--accent, var(--black-50));
  border-radius: 4px; padding: 10px 11px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .1s;
  position: relative;
}
#viewDeals .tudi-pcard:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08); }
#viewDeals .tudi-pcard.stale { border-left-color: var(--red-50, #e16216); border-left-width: 4px; }
#viewDeals .tudi-pcard .name { font-size: 13px; font-weight: 500; line-height: 1.3; padding-right: 22px; }
#viewDeals .tudi-pcard .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#viewDeals .tudi-pcard .meeting {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11px; color: var(--fg-2, var(--text-secondary));
  padding: 5px 7px; background: var(--black-5, var(--main-bg)); border-radius: 3px;
}
#viewDeals .tudi-pcard .meeting .ago { color: var(--fg-3, var(--text-secondary)); margin-left: auto; font-size: 10px; }
#viewDeals .tudi-pcard .meeting .ago.warn { color: var(--red-50, #e16216); font-weight: 600; }
#viewDeals .tudi-pcard .foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border-1, var(--border));
}
#viewDeals .tudi-pcard .foot .owner { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg-2, var(--text-secondary)); }
#viewDeals .tudi-pcard .foot .owner .av {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--black-80, var(--text)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600;
}
#viewDeals .tudi-pcard .foot .amount { font-size: 12px; font-weight: 700; color: var(--red-primary, #74131B); font-variant-numeric: tabular-nums; }
#viewDeals .tudi-pcard .foot .amount.empty { color: var(--fg-3, var(--text-secondary)); font-weight: 400; }
#viewDeals .tudi-pcard .foot .amount.won { color: var(--green-80, #069744); }

/* =====================================================================
   Companies legacy sidebar — repaint from dark navy to Tudi white
   The legacy `.sidebar` inside #viewCompanies (the client-list rail)
   was the OLD app-nav sidebar before cluster 5. We can't delete its
   rules (still uses .sidebar / .client-item / .sidebar-search etc.)
   but we override every dark-theme rule when scoped under #viewCompanies.
   ===================================================================== */

#viewCompanies .sidebar {
  background: #fff;
  color: var(--fg-1, var(--text));
  border-right: 1px solid var(--black-10, var(--border));
  width: 280px;
}

#viewCompanies .sidebar-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--black-10, var(--border)); }
#viewCompanies .sidebar-header h3 {
  font-size: 14px; color: var(--fg-1, var(--text)); font-weight: 600;
  letter-spacing: .2px;
}
#viewCompanies .sidebar-header .btn-primary,
#viewCompanies .sidebar-header .btn-sm.btn-primary {
  background: var(--red-button, #881720) !important;
  color: #fff !important; border: none !important;
}
#viewCompanies .sidebar-header .btn-primary:hover,
#viewCompanies .sidebar-header .btn-sm.btn-primary:hover {
  background: var(--red-primary, #74131B) !important;
}

#viewCompanies .staging-btn-wrap { padding: 10px 14px 8px; }
#viewCompanies .staging-btn {
  background: var(--yellow-10, #fff7db);
  border: 1px solid var(--yellow-50, #f6c204);
  color: var(--yellow-80, #a68309);
  font-weight: 500;
  border-radius: 6px;
}
#viewCompanies .staging-btn:hover { background: #fff2b8; }
#viewCompanies .staging-badge {
  background: var(--yellow-50, #f6c204);
  color: var(--yellow-80, #a68309);
}

#viewCompanies .sidebar-search { padding: 10px 14px 8px; }
#viewCompanies .sidebar-search input {
  background: var(--black-5, var(--main-bg));
  border: 1px solid var(--black-10, var(--border));
  color: var(--fg-1, var(--text));
  border-radius: 6px;
  font: 400 13px var(--font-primary, "Montserrat", sans-serif);
  padding: 8px 10px;
}
#viewCompanies .sidebar-search input::placeholder { color: var(--fg-3, var(--text-secondary)); }
#viewCompanies .sidebar-search input:focus {
  outline: 2px solid var(--red-primary, #74131B);
  outline-offset: -1px; border-color: transparent;
  background: #fff;
}

#viewCompanies .sidebar-filters { padding: 0 14px 8px; gap: 4px; }
#viewCompanies .filter-btn {
  background: var(--black-5, var(--main-bg));
  color: var(--fg-2, var(--text-secondary));
  border: 1px solid var(--black-10, var(--border));
  font: 500 11px var(--font-primary, "Montserrat", sans-serif);
  border-radius: 4px;
}
#viewCompanies .filter-btn:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }
#viewCompanies .filter-btn.active {
  background: var(--red-button, #881720);
  border-color: var(--red-button, #881720);
  color: #fff;
}

#viewCompanies .sidebar-sort { padding: 0 14px 10px; }
#viewCompanies .sidebar-sort-select {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  color: var(--fg-1, var(--text));
  font: 400 12px var(--font-primary, "Montserrat", sans-serif);
  border-radius: 6px; padding: 7px 10px;
}
#viewCompanies .sidebar-sort-select option { background: #fff; color: var(--fg-1, var(--text)); }

#viewCompanies .client-list { padding: 4px 8px 8px; }
#viewCompanies .client-item {
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  color: var(--fg-1, var(--text));
}
#viewCompanies .client-item:hover {
  background: var(--maroon-5, #fbefef);
  color: var(--fg-1, var(--text));
}
#viewCompanies .client-item.active {
  background: rgba(116, 19, 27, 0.06);
  border-left-color: var(--red-primary, #74131B);
  color: var(--fg-1, var(--text));
}
/* Legacy children inside .client-item that used --sidebar-text */
#viewCompanies .client-item *,
#viewCompanies .client-item small,
#viewCompanies .client-item .meta,
#viewCompanies .client-item span { color: inherit; }

/* =====================================================================
   Action bar (top of main area) — restyle to match Tudi
   ===================================================================== */
.app-actionbar { background: #fff; padding: 10px 14px; }

/* Emails / WhatsApp / Tools buttons in the action bar */
.app-actionbar .btn-email-nav {
  background: var(--red-button, #881720);
  color: #fff !important;
  border: none;
  height: 32px;
  border-radius: 6px;
  font: 600 12px var(--font-primary, "Montserrat", sans-serif);
  padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.app-actionbar .btn-email-nav:hover { background: var(--red-primary, #74131B); }
.app-actionbar .email-nav-badge {
  background: #fff;
  color: var(--red-primary, #74131B);
  font-weight: 700;
}

.app-actionbar .btn-outline,
.app-actionbar .btn-sm.btn-outline {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  color: var(--fg-2, var(--text-secondary));
  height: 32px;
  border-radius: 6px;
  font: 500 12px var(--font-primary, "Montserrat", sans-serif);
  padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.app-actionbar .btn-outline:hover,
.app-actionbar .btn-sm.btn-outline:hover {
  background: var(--maroon-5, #fbefef);
  border-color: var(--red-primary, #74131B);
  color: var(--red-primary, #74131B);
}

/* Tools dropdown menu items — Tudi look */
.app-actionbar #toolsMenu { border: 1px solid var(--black-10, var(--border)); border-radius: 8px; box-shadow: var(--shadow-z2, 0 4px 12px rgba(0,0,0,.06)); }
.app-actionbar #toolsMenu a { font: 400 13px var(--font-primary, "Montserrat", sans-serif); padding: 9px 14px; }
.app-actionbar #toolsMenu a:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }

/* =====================================================================
   Cluster 9 — Companies detail (co-head) port from company.html mockup.
   Cluster 17 — wrapper switched from .client-detail → .co-page (#clientDetail);
   breadcrumb + page padding rules now live in the cluster-17 block at the
   bottom of this file. The inner co-head/co-info/co-logo/co-name/co-meta/
   co-actions/co-tabs rules below still apply.
   ===================================================================== */

#viewCompanies .co-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--black-10, var(--border));
  margin: 0 0 0 0;
}
#viewCompanies .co-info { display: flex; gap: 14px; align-items: flex-start; }
#viewCompanies .co-logo {
  width: 56px; height: 56px; border-radius: 8px;
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 16px var(--font-primary, "Montserrat", sans-serif);
  letter-spacing: .5px;
  border: 1px solid var(--black-10, var(--border));
  flex-shrink: 0;
}
#viewCompanies .co-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#viewCompanies .co-name h1 { font-size: 22px; font-weight: 600; margin: 0; color: var(--fg-1, var(--text)); }
#viewCompanies .co-status-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 3px;
  font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  background: var(--green-10, #e6fbef); color: var(--green-80, #069744);
}
#viewCompanies .co-status-badge[data-kind="lost"] { background: var(--red-10, #ffece0); color: var(--red-primary, #74131B); }
#viewCompanies .co-status-badge[data-kind="neutral"] { background: var(--black-10, var(--border)); color: var(--fg-2, var(--text-secondary)); }

/* Account code badge — the 4-letter human code (ADIS, BJJ, MAJU) shown next to
   the company name. Monospace, maroon-tinted to match the brand. */
.co-code-badge {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  padding: 2px 7px; border-radius: 3px;
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  border: 1px solid var(--red-40, #f9b9a3);
  vertical-align: middle;
}

/* Phase 12 — editable Lead Mark dropdown next to the company-name h1.
   Styled like a chip so it doesn't visually compete with the page title. */
#viewCompanies .co-status-select {
  font: 600 10px var(--font-primary, "Montserrat", sans-serif);
  letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 22px 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--black-10, #eaecec);
  background: #fff;
  color: var(--fg-2, #53595b);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'><path fill='%2353595b' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px 10px;
}
#viewCompanies .co-status-select:hover {
  border-color: var(--red-primary, #74131B);
  color: var(--red-primary, #74131B);
}
#viewCompanies .co-status-select:focus {
  outline: 2px solid var(--red-primary, #74131B);
  outline-offset: -1px;
}

/* Phase 12 — Pricing tier chip surfaces saved pricing on the company header
   so users see the change reflected immediately after saving the Pricing tab. */
#viewCompanies .co-pricing-chip {
  font: 600 10px var(--font-primary, "Montserrat", sans-serif);
  letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  border: 1px solid var(--red-40, #f9b9a3);
}

/* Phase 12 — Lead row 3-dot floating menu */
.lead-row-menu {
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--black-10, #eaecec);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  padding: 4px 0;
  font: 400 13px var(--font-primary, "Montserrat", sans-serif);
}
.lead-row-menu .lrm-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: none; border: none; cursor: pointer;
  color: var(--fg-1, #283133); text-align: left;
  font: inherit;
}
.lead-row-menu .lrm-item .material-icons-outlined { font-size: 18px; color: var(--fg-3, #868b8c); }
.lead-row-menu .lrm-item:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }
.lead-row-menu .lrm-item:hover .material-icons-outlined { color: var(--red-primary, #74131B); }
.lead-row-menu .lrm-item.lrm-danger { color: var(--red-primary, #74131B); }
.lead-row-menu .lrm-item.lrm-danger:hover { background: var(--red-primary, #74131B); color: #fff; }
.lead-row-menu .lrm-item.lrm-danger:hover .material-icons-outlined { color: #fff; }

/* Phase 12 — +New Deal modal: search-as-you-type company picker */
.newdeal-results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--black-10, #eaecec);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  max-height: 240px; overflow-y: auto;
  z-index: 1000;
}
.newdeal-results .ndr-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--black-10, #eaecec);
  font-size: 13px;
}
.newdeal-results .ndr-item:last-child { border-bottom: none; }
.newdeal-results .ndr-item:hover { background: var(--maroon-5, #fbefef); }
.newdeal-results .ndr-item .submeta {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--fg-3, #868b8c);
}
.newdeal-results .ndr-item.ndr-create {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  font-weight: 600;
}
.newdeal-results .ndr-item.ndr-create:hover {
  background: var(--red-primary, #74131B);
  color: #fff;
}

/* Phase 12 — Inquiry → Meetings sub-section */
.inquiry-meetings-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-3, #868b8c);
  background: var(--black-5, #f8f8f8);
  border-radius: 4px;
  margin-top: 4px;
}
.inquiry-meetings {
  display: flex; flex-direction: column;
  gap: 6px; margin-top: 4px;
}
.inquiry-meetings .im-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px;
  background: var(--black-5, #f8f8f8);
  border: 1px solid var(--black-10, #eaecec);
  border-radius: 4px;
}
.inquiry-meetings .im-info { min-width: 0; flex: 1; }
.inquiry-meetings .im-line {
  font-size: 13px; color: var(--fg-1, #283133);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.inquiry-meetings .im-meta {
  font-size: 11px; color: var(--fg-3, #868b8c);
  margin-top: 2px;
}
.inquiry-meetings .im-actions {
  display: flex; gap: 6px; flex-shrink: 0; align-items: center;
}
.mtg-chip {
  font-size: 10px; padding: 2px 8px; border-radius: 3px;
  font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
}
.mtg-chip.mtg-scheduled { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
.mtg-chip.mtg-conducted { background: var(--green-10, #e6fbef);  color: var(--green-80, #069744); }
.mtg-chip.mtg-noshow    { background: var(--red-10, #ffece0);    color: var(--red-primary, #74131B); }

/* Phase 12 — POC Outcome modal radio control */
.poc-radio {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--black-10, #eaecec);
  border-radius: 6px;
  background: #fff;
  color: var(--fg-2, #53595b);
  font: 600 12px var(--font-primary, "Montserrat", sans-serif);
  cursor: pointer; user-select: none;
  transition: background .12s, color .12s, border-color .12s;
}
.poc-radio:hover { border-color: var(--red-primary, #74131B); }
.poc-radio.sel {
  background: var(--red-primary, #74131B);
  color: #fff;
  border-color: var(--red-primary, #74131B);
}

/* Phase 12 — ANUM chip control (Authority/Need/Urgency/Money toggle) */
.anum-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 30px;
  padding: 0 10px;
  border: 1px solid var(--black-10, #eaecec);
  border-radius: 16px;
  background: #fff;
  color: var(--fg-2, #53595b);
  font: 700 12px var(--font-primary, "Montserrat", sans-serif);
  cursor: pointer; user-select: none;
  transition: background .12s, color .12s, border-color .12s;
}
.anum-chip:hover { border-color: var(--red-primary, #74131B); }
.anum-chip.sel {
  background: var(--red-primary, #74131B);
  color: #fff;
  border-color: var(--red-primary, #74131B);
}
#viewCompanies .co-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 8px;
  font-size: 12px; color: var(--fg-2, var(--text-secondary));
}
#viewCompanies .co-meta span {
  display: inline-flex; align-items: center; gap: 5px;
}
#viewCompanies .co-meta .material-icons-outlined {
  color: var(--fg-3, var(--text-secondary)); font-size: 14px;
}
#viewCompanies .co-meta a { color: var(--red-primary, #74131B); text-decoration: none; }
#viewCompanies .co-meta a:hover { text-decoration: underline; }

#viewCompanies .co-actions { display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; flex-wrap: wrap; }
#viewCompanies .co-actions .btn-ghost,
#viewCompanies .co-actions .btn-danger-ghost,
#viewCompanies .co-actions .btn-primary-tudi {
  height: 32px; border-radius: 6px;
  padding: 0 14px;
  font: 600 12px var(--font-primary, "Montserrat", sans-serif);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
#viewCompanies .co-actions .btn-ghost {
  background: #fff; border: 1px solid var(--black-10, var(--border));
  color: var(--fg-2, var(--text-secondary)); font-weight: 500;
}
#viewCompanies .co-actions .btn-ghost:hover {
  background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); border-color: var(--red-primary, #74131B);
}
#viewCompanies .co-actions .btn-danger-ghost {
  background: #fff; border: 1px solid var(--black-10, var(--border));
  color: var(--red-50, #e16216); font-weight: 500;
}
#viewCompanies .co-actions .btn-danger-ghost:hover {
  background: #fff5ee; border-color: var(--red-50, #e16216); color: var(--red-50, #e16216);
}
#viewCompanies .co-actions .btn-primary-tudi {
  background: var(--red-button, #881720); color: #fff; border: none;
}
#viewCompanies .co-actions .btn-primary-tudi:hover { background: var(--red-primary, #74131B); }

/* Tab row override (the legacy .tabs is restyled to the Tudi pattern just for #viewCompanies) */
#viewCompanies .co-tabs {
  display: flex;
  border-bottom: 1px solid var(--black-10, var(--border));
  margin: 18px 0 16px;
  gap: 0;
  padding: 0;
  background: transparent;
}
#viewCompanies .co-tabs .tab {
  padding: 12px 16px;
  font: 500 13px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s;
}
#viewCompanies .co-tabs .tab:hover { color: var(--fg-1, var(--text)); }
#viewCompanies .co-tabs .tab.active {
  color: var(--red-primary, #74131B);
  border-bottom-color: var(--red-primary, #74131B);
  font-weight: 600;
}
#viewCompanies .co-tabs .badge-count {
  font-size: 10px;
  background: var(--black-10, var(--border));
  color: var(--fg-2, var(--text-secondary));
  padding: 1px 6px; border-radius: 8px;
  font-weight: 600; min-width: 18px; text-align: center;
}
#viewCompanies .co-tabs .tab.active .badge-count {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
}

/* =====================================================================
   Cluster 9 — Pricing modal port from "TUDI CRM Price List Modal v2.html"
   Scoped under #priceListOverlay so it doesn't affect other modals.
   ===================================================================== */

#priceListOverlay .modal {
  max-width: 1100px;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.08);
}
#priceListOverlay .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--black-10, var(--border));
}
#priceListOverlay .modal-header h3 {
  font: 600 16px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
}
#priceListOverlay .modal-body { padding: 0; }

/* Tudi-styled tabs inside the price list */
#priceListOverlay .pl-tab {
  padding: 12px 16px !important;
  font: 500 12px var(--font-primary, "Montserrat", sans-serif) !important;
  color: var(--fg-2, var(--text-secondary)) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  cursor: pointer;
  display: inline-flex !important; align-items: center; gap: 6px;
  transition: color .15s, background .15s;
}
#priceListOverlay .pl-tab:hover {
  color: var(--fg-1, var(--text)) !important;
  background: var(--black-5, var(--main-bg)) !important;
}
#priceListOverlay .pl-tab.pl-tab-active {
  color: var(--red-primary, #74131B) !important;
  border-bottom-color: var(--red-primary, #74131B) !important;
  background: #fff !important;
  font-weight: 600 !important;
}

/* Make the panels' tables Tudi */
#priceListOverlay table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  background: #fff;
}
#priceListOverlay table thead tr {
  background: var(--black-5, var(--main-bg)) !important;
  border-bottom: 1px solid var(--black-10, var(--border)) !important;
}
#priceListOverlay table thead th {
  padding: 9px 14px !important;
  font: 600 10px var(--font-primary, "Montserrat", sans-serif) !important;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3, var(--text-secondary)) !important;
}
#priceListOverlay table tbody tr {
  border-bottom: 1px solid var(--black-5, var(--main-bg)) !important;
  transition: background .12s;
}
#priceListOverlay table tbody tr:hover {
  background: var(--maroon-5, #fbefef) !important;
}
#priceListOverlay table tbody td {
  padding: 10px 14px !important;
  font: 400 13px var(--font-primary, "Montserrat", sans-serif) !important;
  color: var(--fg-1, var(--text)) !important;
  vertical-align: middle;
}
#priceListOverlay table tbody td code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--fg-2, var(--text-secondary));
  background: var(--black-5, var(--main-bg));
  padding: 1px 6px; border-radius: 3px;
}

/* "+ New Item / Vendor / Price" buttons inside the modal use red-button */
#priceListOverlay .modal-body button.btn-primary,
#priceListOverlay .modal-body .btn.btn-sm.btn-primary {
  background: var(--red-button, #881720) !important;
  color: #fff !important;
  border: none !important;
  height: 32px !important;
  border-radius: 6px !important;
  font: 600 12px var(--font-primary, "Montserrat", sans-serif) !important;
  padding: 0 14px !important;
}
#priceListOverlay .modal-body button.btn-primary:hover,
#priceListOverlay .modal-body .btn.btn-sm.btn-primary:hover {
  background: var(--red-primary, #74131B) !important;
}

/* Outline / danger inline action buttons in the modal */
#priceListOverlay .modal-body .btn.btn-sm.btn-outline {
  background: #fff !important;
  border: 1px solid var(--black-10, var(--border)) !important;
  color: var(--fg-2, var(--text-secondary)) !important;
  height: 26px !important; padding: 0 10px !important;
  font: 500 11px var(--font-primary, "Montserrat", sans-serif) !important;
}
#priceListOverlay .modal-body .btn.btn-sm.btn-outline:hover {
  background: var(--maroon-5, #fbefef) !important;
  border-color: var(--red-primary, #74131B) !important;
  color: var(--red-primary, #74131B) !important;
}
#priceListOverlay .modal-body .btn.btn-sm.btn-danger {
  background: #fff !important;
  border: 1px solid var(--red-50, #e16216) !important;
  color: var(--red-50, #e16216) !important;
  height: 26px !important; padding: 0 10px !important;
  font: 500 11px var(--font-primary, "Montserrat", sans-serif) !important;
}
#priceListOverlay .modal-body .btn.btn-sm.btn-danger:hover {
  background: var(--red-10, #ffece0) !important;
}

/* Tab row container inside the price list modal — bottom border */
#priceListOverlay .modal-body > div:first-child {
  border-bottom: 1px solid var(--black-10, var(--border)) !important;
  background: var(--black-5, var(--main-bg)) !important;
  padding: 0 !important;
  margin-bottom: 16px;
}

/* Panel tabs body - more breathing room */
#priceListOverlay #plPanelItems,
#priceListOverlay #plPanelVendors,
#priceListOverlay #plPanelPrices,
#priceListOverlay #plPanelVariance { padding: 0 18px 18px; }

/* =====================================================================
   Cluster 9 — Leads view port from sales-additions.html (#/leads)
   ===================================================================== */

/* #viewLeads .page-wrap — inherits from .app-main .page-wrap */
#viewLeads .breadcrumb {
  font-size: 11px; color: var(--fg-3, var(--text-secondary));
  display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
  text-transform: none; letter-spacing: 0;
}
#viewLeads .breadcrumb a { color: var(--fg-2, var(--text-secondary)); cursor: pointer; }
#viewLeads .breadcrumb a:hover { color: var(--red-primary, #74131B); }
#viewLeads .breadcrumb .sep { color: var(--black-40, #c4c8c9); }
#viewLeads .breadcrumb .here { color: var(--fg-1, var(--text)); font-weight: 500; }

/* #viewLeads .page-head — inherits from .app-main .page-wrap .page-head */

/* Toolbar */
#viewLeads .toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: #fff;
  border: 1px solid var(--black-10, var(--border)); border-bottom: none;
  border-radius: 8px 8px 0 0; flex-wrap: wrap;
}
#viewLeads .toolbar-left, #viewLeads .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#viewLeads .filt-chip {
  font: 500 11px var(--font-primary, "Montserrat", sans-serif);
  padding: 5px 10px; border-radius: 4px;
  border: 1px solid var(--black-10, var(--border)); background: #fff;
  color: var(--fg-2, var(--text-secondary)); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: all .12s;
}
#viewLeads .filt-chip:hover { background: var(--black-5, var(--main-bg)); }
#viewLeads .filt-chip.on {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  border-color: var(--red-primary, #74131B);
}
#viewLeads .filt-chip .count {
  font-size: 10px;
  background: var(--black-10, var(--border));
  color: var(--fg-2, var(--text-secondary));
  padding: 0 6px; border-radius: 8px;
  font-weight: 600; line-height: 14px; min-width: 18px; text-align: center;
}
#viewLeads .filt-chip.on .count { background: var(--red-primary, #74131B); color: #fff; }
#viewLeads .filt-divider { width: 1px; height: 22px; background: var(--black-10, var(--border)); margin: 0 2px; }

#viewLeads .search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 30px;
  border: 1px solid var(--black-10, var(--border)); border-radius: 6px;
  background: #fff; min-width: 240px;
}
#viewLeads .search:focus-within { border-color: var(--red-primary, #74131B); }
#viewLeads .search .material-icons-outlined { color: var(--fg-3, var(--text-secondary)); font-size: 16px; }
#viewLeads .search input {
  border: none; outline: none; flex: 1;
  font: 400 12px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text)); background: transparent; min-width: 0;
}
#viewLeads .meta-count { font-size: 11px; color: var(--fg-3, var(--text-secondary)); }

/* Leads table */
#viewLeads .leads-card {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-top: none;
  border-radius: 0 0 8px 8px; overflow: hidden;
}
#viewLeads .data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#viewLeads .data-table th {
  text-align: left; font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3, var(--text-secondary));
  padding: 9px 14px;
  border-bottom: 1px solid var(--black-10, var(--border));
  background: var(--black-5, var(--main-bg)); white-space: nowrap;
}
#viewLeads .data-table th.r { text-align: right; }
#viewLeads .data-table th.c { text-align: center; }
#viewLeads .data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--black-5, var(--main-bg));
  font-weight: 400; vertical-align: middle;
}
#viewLeads .data-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
#viewLeads .data-table tr:last-child td { border-bottom: none; }
#viewLeads .data-table tbody tr { transition: background .1s; }
#viewLeads .data-table tbody tr:hover td { background: var(--maroon-5, #fbefef); }
#viewLeads .data-table tbody tr.selected td { background: rgba(116, 19, 27, .07); }
#viewLeads .data-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--red-primary, #74131B);
}
#viewLeads .data-table .checkbox-cell { width: 36px; padding-right: 0; }
#viewLeads .data-table .checkbox-cell input {
  width: 14px; height: 14px;
  accent-color: var(--red-primary, #74131B); cursor: pointer;
}

/* Avatars */
#viewLeads .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--black-80, var(--text)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; flex-shrink: 0;
}
#viewLeads .avatar.sm { width: 22px; height: 22px; font-size: 9px; }
#viewLeads .avatar-cell { display: inline-flex; align-items: center; gap: 7px; }
#viewLeads .avatar.c1 { background: #74131b; }
#viewLeads .avatar.c2 { background: #28b8e2; }
#viewLeads .avatar.c3 { background: #069744; }
#viewLeads .avatar.c4 { background: #a68309; }
#viewLeads .avatar.c5 { background: #4c1799; }
#viewLeads .avatar.c6 { background: #e16216; }
#viewLeads .avatar.c7 { background: #283133; }

/* Status / source chips */
#viewLeads .lchip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 3px;
  letter-spacing: .3px; text-transform: uppercase; line-height: 1.5;
}
#viewLeads .lchip.dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; background: currentColor; opacity: .85;
}
#viewLeads .lchip.s-new       { background: var(--purple-10, #f1e9fd); color: var(--purple-80, #4c1799); }
#viewLeads .lchip.s-contacted { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
#viewLeads .lchip.s-qualified { background: var(--green-10, #e6fbef);  color: var(--green-80, #069744); }
#viewLeads .lchip.s-disq      { background: var(--black-10, var(--border)); color: var(--fg-2, var(--text-secondary)); }
#viewLeads .lchip.s-converted { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }

/* Source */
#viewLeads .src-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 3px 8px; border-radius: 4px;
  background: var(--black-5, var(--main-bg));
  color: var(--fg-2, var(--text-secondary));
  font-weight: 500;
  border: 1px solid var(--black-10, var(--border));
}
#viewLeads .src-chip .material-icons-outlined { font-size: 13px; }
#viewLeads .src-web      { background: #eaf8fd; color: #0f6f8f; border-color: #c9e9f4; }
#viewLeads .src-whatsapp { background: #e7f8ee; color: #057a3a; border-color: #c1ebd0; }
#viewLeads .src-email    { background: #f3eefe; color: #4c1799; border-color: #e2d5fb; }
#viewLeads .src-partner,
#viewLeads .src-partnership { background: #fff3df; color: #876300; border-color: #f5d99c; }
#viewLeads .src-google   { background: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
#viewLeads .src-instagram { background: #fdebef; color: #ad1457; border-color: #f8bbd0; }
#viewLeads .src-tokopedia { background: #e6f5e9; color: #2e7d32; border-color: #c8e6c9; }
#viewLeads .src-referral { background: #fff3df; color: #876300; border-color: #f5d99c; }
#viewLeads .src-other    { background: var(--black-10, var(--border)); color: var(--fg-2, var(--text-secondary)); }

#viewLeads .submeta { font-size: 10.5px; color: var(--fg-3, var(--text-secondary)); margin-top: 1px; line-height: 1.3; }
#viewLeads .row-actions { display: inline-flex; gap: 2px; }
#viewLeads .btn-text {
  background: transparent; border: none;
  font: 500 11px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 4px;
}
#viewLeads .btn-text:hover { background: var(--black-5, var(--main-bg)); color: var(--fg-1, var(--text)); }
#viewLeads .btn-text .material-icons-outlined { font-size: 14px; }

/* Bulk action bar */
#viewLeads .bulk-bar {
  display: none; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--bg-sidenav, var(--black-80, #404041));
  color: #fff; border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-z2, 0 4px 12px rgba(0,0,0,.06));
}
#viewLeads .bulk-bar.visible { display: flex; }
#viewLeads .bulk-bar .count { font-weight: 600; font-size: 12px; }
#viewLeads .bulk-bar .count b {
  background: var(--red-button, #881720);
  padding: 1px 8px; border-radius: 3px;
  font-size: 11px; margin-right: 4px;
}
#viewLeads .bulk-bar .b-sep { width: 1px; height: 18px; background: rgba(255,255,255,.18); }
#viewLeads .bulk-bar .bulk-btn {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; height: 28px; padding: 0 10px; border-radius: 5px;
  font: 600 11px var(--font-primary, "Montserrat", sans-serif);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
#viewLeads .bulk-bar .bulk-btn:hover { background: rgba(255,255,255,.14); }
#viewLeads .bulk-bar .bulk-btn.primary { background: var(--red-button, #881720); border-color: var(--red-button, #881720); }
#viewLeads .bulk-bar .bulk-btn.primary:hover { background: var(--red-primary, #74131B); }
#viewLeads .bulk-bar .bulk-btn.danger:hover { background: rgba(225,98,22,.20); color: #ffb4ba; }
#viewLeads .bulk-bar .clear { margin-left: auto; opacity: .7; font-size: 11px; cursor: pointer; }
#viewLeads .bulk-bar .clear:hover { opacity: 1; }

/* =====================================================================
   Cluster 10 — Reports view port from reports.html
   ===================================================================== */

/* #viewReports .page-wrap — inherits from .app-main .page-wrap */
#viewReports .breadcrumb {
  font-size: 11px; color: var(--fg-3, var(--text-secondary));
  display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
  text-transform: none; letter-spacing: 0;
}
#viewReports .breadcrumb a { color: var(--fg-2, var(--text-secondary)); cursor: pointer; }
#viewReports .breadcrumb a:hover { color: var(--red-primary, #74131B); }
#viewReports .breadcrumb .sep { color: var(--black-40, #c4c8c9); }
#viewReports .breadcrumb .here { color: var(--fg-1, var(--text)); font-weight: 500; }

/* #viewReports .page-head — inherits from .app-main .page-wrap .page-head */

/* Report tabs (rtabs) — bottom-border accent like Companies tabs */
#viewReports .rtabs {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--black-10, var(--border));
  margin-bottom: 18px; padding: 0;
}
#viewReports .rtab {
  padding: 12px 16px;
  font: 500 13px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .12s;
}
#viewReports .rtab:hover { color: var(--fg-1, var(--text)); }
#viewReports .rtab.active {
  color: var(--red-primary, #74131B);
  border-bottom-color: var(--red-primary, #74131B);
  font-weight: 600;
}
#viewReports .rtab .material-icons-outlined { font-size: 16px; }

/* Override the legacy .rep-tab styling for Tudi look */
#viewReports .rep-tab,
#viewReports button.rep-tab {
  padding: 12px 16px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer;
  font: 500 13px var(--font-primary, "Montserrat", sans-serif) !important;
  color: var(--fg-2, var(--text-secondary)) !important;
  margin-bottom: -1px;
}
#viewReports .rep-tab:hover { color: var(--fg-1, var(--text)) !important; }
#viewReports .rep-tab.active {
  color: var(--red-primary, #74131B) !important;
  border-bottom-color: var(--red-primary, #74131B) !important;
  font-weight: 600 !important;
}

/* Mini KPI tile pattern (for Reports — smaller than Dashboard) */
#viewReports .mkpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
#viewReports .mkpi {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 8px; padding: 12px 14px;
}
#viewReports .mkpi .lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--fg-3, var(--text-secondary)); font-weight: 500;
}
#viewReports .mkpi .val {
  font-size: 24px; font-weight: 400; color: var(--black-80, var(--text));
  margin-top: 4px; line-height: 1.05; letter-spacing: -.4px;
}
#viewReports .mkpi .delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; margin-top: 4px; font-weight: 600;
}
#viewReports .mkpi .delta.up { color: var(--green-80, #069744); }
#viewReports .mkpi .delta.down { color: var(--red-50, #e16216); }
#viewReports .mkpi .delta .vs { color: var(--fg-3, var(--text-secondary)); font-weight: 400; margin-left: 2px; }
#viewReports .mkpi .target { font-size: 11px; color: var(--fg-3, var(--text-secondary)); margin-top: 4px; }

/* Card chrome shared with reports body */
#viewReports .card {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 8px;
  margin-bottom: 12px;
}
#viewReports .card .card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--black-10, var(--border));
  gap: 8px;
}
#viewReports .card .card-head h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--fg-1, var(--text)); }
#viewReports .card .card-head h3 .meta { font-size: 11px; color: var(--fg-3, var(--text-secondary)); font-weight: 400; margin-left: 4px; }
#viewReports .card .card-head .legend { display: flex; gap: 12px; font-size: 11px; color: var(--fg-2, var(--text-secondary)); align-items: center; }
#viewReports .card .card-head .legend i { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 4px; }
#viewReports .card .card-head .legend .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-left: 2px; }
#viewReports .card .card-body { padding: 14px; }
#viewReports .chart-wrap { padding: 14px; }

/* Period picker button */
#viewReports .period-pick {
  margin-left: auto;
  background: #fff; border: 1px solid var(--black-10, var(--border));
  border-radius: 6px; padding: 0 10px; height: 30px;
  font: 500 12px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
#viewReports .period-pick:hover { background: var(--black-5, var(--main-bg)); color: var(--fg-1, var(--text)); }
#viewReports .period-pick .material-icons-outlined { font-size: 16px; color: var(--fg-3, var(--text-secondary)); }
#viewReports .rtabs-spacer { flex: 1; }

/* =====================================================================
   Cluster 11 — Quotes view port (#viewQuotes — same data-table pattern as Leads)
   ===================================================================== */

/* #viewQuotes .page-wrap — inherits from .app-main .page-wrap */
#viewQuotes .breadcrumb {
  font-size: 11px; color: var(--fg-3, var(--text-secondary));
  display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
#viewQuotes .breadcrumb a { color: var(--fg-2, var(--text-secondary)); cursor: pointer; }
#viewQuotes .breadcrumb a:hover { color: var(--red-primary, #74131B); }
#viewQuotes .breadcrumb .sep { color: var(--black-40, #c4c8c9); }
#viewQuotes .breadcrumb .here { color: var(--fg-1, var(--text)); font-weight: 500; }

/* #viewQuotes .page-head — inherits from .app-main .page-wrap .page-head */

#viewQuotes .leads-card {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 8px; overflow: hidden;
}
#viewQuotes .data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#viewQuotes .data-table th {
  text-align: left; font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3, var(--text-secondary));
  padding: 9px 14px;
  border-bottom: 1px solid var(--black-10, var(--border));
  background: var(--black-5, var(--main-bg)); white-space: nowrap;
}
#viewQuotes .data-table th.r { text-align: right; }
#viewQuotes .data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--black-5, var(--main-bg));
  font-weight: 400; vertical-align: middle;
}
#viewQuotes .data-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
#viewQuotes .data-table tr:last-child td { border-bottom: none; }
#viewQuotes .data-table tbody tr { transition: background .1s; }
#viewQuotes .data-table tbody tr:hover td { background: var(--maroon-5, #fbefef); }
#viewQuotes .quote-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 600; color: var(--fg-1, var(--text));
}
#viewQuotes .quote-num:hover { color: var(--red-primary, #74131B); }

/* Status / Source chips — shared rules */
#viewQuotes .lchip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 3px;
  letter-spacing: .3px; text-transform: uppercase; line-height: 1.5;
}
#viewQuotes .lchip.dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; background: currentColor; opacity: .85;
}
#viewQuotes .lchip.q-draft    { background: var(--black-10, var(--border)); color: var(--fg-2, var(--text-secondary)); }
#viewQuotes .lchip.q-sent     { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }
#viewQuotes .lchip.q-accepted { background: var(--green-10, #e6fbef); color: var(--green-80, #069744); }
#viewQuotes .lchip.q-rejected { background: var(--red-10, #ffece0); color: var(--red-80, #9d440f); }

/* Avatars (same palette as Leads) */
#viewQuotes .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--black-80, var(--text)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; flex-shrink: 0;
}
#viewQuotes .avatar.sm { width: 22px; height: 22px; font-size: 9px; }
#viewQuotes .avatar-cell { display: inline-flex; align-items: center; gap: 7px; }
#viewQuotes .avatar.c1 { background: #74131b; }
#viewQuotes .avatar.c2 { background: #28b8e2; }
#viewQuotes .avatar.c3 { background: #069744; }
#viewQuotes .avatar.c4 { background: #a68309; }
#viewQuotes .avatar.c5 { background: #4c1799; }
#viewQuotes .avatar.c6 { background: #e16216; }
#viewQuotes .avatar.c7 { background: #283133; }

#viewQuotes .submeta { font-size: 10.5px; color: var(--fg-3, var(--text-secondary)); margin-top: 1px; }
#viewQuotes .row-actions { display: inline-flex; gap: 2px; }
#viewQuotes .btn-text {
  background: transparent; border: none;
  font: 500 11px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 4px;
}
#viewQuotes .btn-text:hover { background: var(--black-5, var(--main-bg)); color: var(--fg-1, var(--text)); }
#viewQuotes .btn-text .material-icons-outlined { font-size: 14px; }

/* =====================================================================
   Cluster 12 — Generic page chrome (fallback for any view that uses
   .page-wrap / .breadcrumb / .page-head without its own scoped rules)
   ===================================================================== */

.app-main .page-wrap { padding: 14px 24px 32px; max-width: 1480px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.app-main .page-wrap.page-wrap--mid    { max-width: 1180px; }
.app-main .page-wrap.page-wrap--narrow { max-width: 900px; }
.app-main .page-wrap .breadcrumb,
.app-main .pl-wrap .breadcrumb,
.app-main .pipeline-page .breadcrumb,
.app-main .co-page .breadcrumb {
  font-size: 11px; color: var(--fg-3, var(--text-secondary));
  display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.app-main .page-wrap .breadcrumb a,
.app-main .pl-wrap .breadcrumb a,
.app-main .pipeline-page .breadcrumb a,
.app-main .co-page .breadcrumb a { color: var(--fg-2, var(--text-secondary)); cursor: pointer; }
.app-main .page-wrap .breadcrumb a:hover,
.app-main .pl-wrap .breadcrumb a:hover,
.app-main .pipeline-page .breadcrumb a:hover,
.app-main .co-page .breadcrumb a:hover { color: var(--red-primary, #74131B); }
.app-main .page-wrap .breadcrumb .sep,
.app-main .pl-wrap .breadcrumb .sep,
.app-main .pipeline-page .breadcrumb .sep,
.app-main .co-page .breadcrumb .sep { color: var(--black-40, #c4c8c9); }
.app-main .page-wrap .breadcrumb .here,
.app-main .pl-wrap .breadcrumb .here,
.app-main .pipeline-page .breadcrumb .here,
.app-main .co-page .breadcrumb .here { color: var(--fg-1, var(--text)); font-weight: 500; }

.app-main .page-wrap .page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.app-main .page-wrap .page-head h1 {
  font-size: 22px; font-weight: 600; margin: 0;
  color: var(--fg-1, var(--text)); line-height: 1.2;
}
.app-main .page-wrap .page-head .sub {
  font-size: 12px; color: var(--fg-3, var(--text-secondary)); margin-top: 4px;
}
.app-main .page-wrap .page-head .sub b { color: var(--fg-2, var(--text-secondary)); font-weight: 600; }
.app-main .page-wrap .head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Generic data-table fallback */
.app-main .page-wrap .data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.app-main .page-wrap .data-table th {
  text-align: left; font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3, var(--text-secondary));
  padding: 9px 14px;
  border-bottom: 1px solid var(--black-10, var(--border));
  background: var(--black-5, var(--main-bg)); white-space: nowrap;
}
.app-main .page-wrap .data-table th.r { text-align: right; }
.app-main .page-wrap .data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--black-5, var(--main-bg));
  vertical-align: middle;
}
.app-main .page-wrap .data-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.app-main .page-wrap .data-table tbody tr:hover td { background: var(--maroon-5, #fbefef); cursor: pointer; }
.app-main .page-wrap .data-table tr:last-child td { border-bottom: none; }

/* Generic Tudi card */
.app-main .page-wrap .tudi-card {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 8px;
}
.app-main .page-wrap .tudi-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--black-10, var(--border));
}
.app-main .page-wrap .tudi-card-head h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--fg-1, var(--text)); }
.app-main .page-wrap .tudi-card-body { padding: 14px; }

/* =====================================================================
   Cluster 14 — Journey timeline deep port (matches company.html mockup)
   Scoped under #viewCompanies #journeyPanel.
   ===================================================================== */

#viewCompanies #journeyPanel { padding: 8px 4px 24px; }

#viewCompanies #journeyPanel .panel-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 14px; gap: 16px; flex-wrap: wrap;
}
#viewCompanies #journeyPanel .panel-head h2 {
  font-size: 16px; font-weight: 600; margin: 0;
  color: var(--fg-1, var(--text));
}
#viewCompanies #journeyPanel .panel-head .subtitle {
  font-size: 12px; color: var(--fg-3, var(--text-secondary)); margin-top: 2px;
}
#viewCompanies #journeyPanel .panel-head .subtitle b { color: var(--fg-2, var(--text-secondary)); font-weight: 600; }
#viewCompanies #journeyPanel .panel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

#viewCompanies #journeyPanel .journey-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;
}
@media (max-width: 1100px) { #viewCompanies #journeyPanel .journey-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { #viewCompanies #journeyPanel .journey-kpis { grid-template-columns: 1fr; } }

#viewCompanies #journeyPanel .jkpi {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 8px; padding: 14px 16px;
}
#viewCompanies #journeyPanel .jkpi .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--fg-3, var(--text-secondary)); font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
#viewCompanies #journeyPanel .jkpi .label .material-icons-outlined {
  font-size: 14px; color: var(--fg-3, var(--text-secondary));
}
#viewCompanies #journeyPanel .jkpi .value {
  font-size: 24px; font-weight: 500;
  color: var(--black-80, var(--text));
  margin-top: 6px; line-height: 1.1; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
}
#viewCompanies #journeyPanel .jkpi .value .unit {
  font-size: 12px; color: var(--fg-3, var(--text-secondary));
  font-weight: 300; margin-left: 4px; letter-spacing: 0;
}
#viewCompanies #journeyPanel .jkpi .meta {
  font-size: 11px; color: var(--fg-2, var(--text-secondary)); margin-top: 4px;
}
#viewCompanies #journeyPanel .jkpi .meta b { color: var(--fg-1, var(--text)); font-weight: 600; }
#viewCompanies #journeyPanel .jkpi .meta .partner {
  color: var(--red-primary, #74131B); font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
#viewCompanies #journeyPanel .jkpi .meta .partner .material-icons-outlined {
  font-size: 13px;
}

/* Timeline */
#viewCompanies #journeyPanel .timeline-wrap {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 8px;
  padding: 18px 18px 22px;
}
#viewCompanies #journeyPanel .timeline-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--black-10, var(--border));
}
#viewCompanies #journeyPanel .timeline-head .filt { display: flex; gap: 6px; flex-wrap: wrap; }
#viewCompanies #journeyPanel .filt-chip {
  font: 500 11px var(--font-primary, "Montserrat", sans-serif);
  padding: 4px 10px; border-radius: 14px;
  border: 1px solid var(--black-10, var(--border));
  background: #fff; color: var(--fg-2, var(--text-secondary));
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  user-select: none;
}
#viewCompanies #journeyPanel .filt-chip:hover { background: var(--black-5, var(--main-bg)); }
#viewCompanies #journeyPanel .filt-chip.on {
  background: var(--red-primary, #74131B); color: #fff;
  border-color: var(--red-primary, #74131B);
}
#viewCompanies #journeyPanel .filt-chip .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
#viewCompanies #journeyPanel .filt-chip.on .dot { background: #fff !important; }

#viewCompanies #journeyPanel .timeline { position: relative; padding-left: 36px; }
#viewCompanies #journeyPanel .timeline::before {
  content: ""; position: absolute; left: 13px; top: 4px; bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--black-10, var(--border)),
    var(--black-10, var(--border)) 95%,
    transparent);
}

#viewCompanies #journeyPanel .tl-item { position: relative; margin-bottom: 18px; }
#viewCompanies #journeyPanel .tl-item:last-child { margin-bottom: 0; }
#viewCompanies #journeyPanel .tl-item .pin {
  position: absolute; left: -36px; top: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kind, var(--black-50, #868b8c));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--kind, var(--black-50, #868b8c));
  z-index: 1;
}
#viewCompanies #journeyPanel .tl-item .pin .material-icons-outlined { font-size: 14px; }

#viewCompanies #journeyPanel .tl-card {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-left: 3px solid var(--kind, var(--black-50, #868b8c));
  border-radius: 4px;
  padding: 12px 14px;
}
#viewCompanies #journeyPanel .tl-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
}
#viewCompanies #journeyPanel .tl-head .kind-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  background: var(--kind-bg, var(--black-10, var(--border)));
  color: var(--kind, var(--black-50, #868b8c));
}
#viewCompanies #journeyPanel .tl-head .when {
  font-size: 11px; color: var(--fg-3, var(--text-secondary));
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
#viewCompanies #journeyPanel .tl-head .when b { color: var(--fg-2, var(--text-secondary)); font-weight: 600; }
#viewCompanies #journeyPanel .tl-title {
  font-size: 13px; font-weight: 500; color: var(--fg-1, var(--text));
  margin-top: 6px; line-height: 1.4;
}
#viewCompanies #journeyPanel .tl-body {
  font-size: 12px; color: var(--fg-2, var(--text-secondary));
  margin-top: 4px; line-height: 1.5;
}
#viewCompanies #journeyPanel .tl-body b { font-weight: 600; color: var(--fg-1, var(--text)); }
#viewCompanies #journeyPanel .tl-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
  font-size: 11px; color: var(--fg-3, var(--text-secondary));
  flex-wrap: wrap;
}
#viewCompanies #journeyPanel .tl-foot .who { display: inline-flex; align-items: center; gap: 5px; }
#viewCompanies #journeyPanel .tl-foot .who .av {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--black-80, var(--text)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600;
}
#viewCompanies #journeyPanel .tl-foot .who .av.c1 { background: #74131b; }
#viewCompanies #journeyPanel .tl-foot .who .av.c2 { background: #28b8e2; }
#viewCompanies #journeyPanel .tl-foot .who .av.c3 { background: #069744; }
#viewCompanies #journeyPanel .tl-foot .who .av.c4 { background: #a68309; }
#viewCompanies #journeyPanel .tl-foot .who .av.c5 { background: #4c1799; }
#viewCompanies #journeyPanel .tl-foot .who .av.c6 { background: #e16216; }
#viewCompanies #journeyPanel .tl-foot .who .av.c7 { background: #283133; }

#viewCompanies #journeyPanel .tl-foot .meta-pip {
  display: inline-flex; align-items: center; gap: 4px;
}
#viewCompanies #journeyPanel .tl-foot .meta-pip .material-icons-outlined {
  font-size: 13px; color: var(--fg-3, var(--text-secondary));
}

/* KIND VARIANTS — set --kind / --kind-bg per kind class */
#viewCompanies #journeyPanel .kind-inquiry       { --kind: #28b8e2;                          --kind-bg: #e3f3f9; }
#viewCompanies #journeyPanel .kind-meeting       { --kind: var(--yellow-50, #f6c204);        --kind-bg: var(--yellow-10, #fff7db); }
#viewCompanies #journeyPanel .kind-sale          { --kind: var(--green-50, #15d667);         --kind-bg: var(--green-10, #e6fbef); }
#viewCompanies #journeyPanel .kind-quote         { --kind: var(--purple-50, #7725ef);        --kind-bg: var(--purple-10, #f1e9fd); }
#viewCompanies #journeyPanel .kind-note          { --kind: var(--black-50, #868b8c);         --kind-bg: var(--black-10, #eaecec); }
/* Phase 12 — additional kinds (POs, invoices, manual activities) */
#viewCompanies #journeyPanel .kind-purchaseorder { --kind: #2563eb;                          --kind-bg: #dbeafe; }
#viewCompanies #journeyPanel .kind-invoice       { --kind: var(--yellow-80, #a68309);        --kind-bg: var(--yellow-10, #fff7db); }
#viewCompanies #journeyPanel .kind-call          { --kind: var(--maroon-60, #9c2030);        --kind-bg: var(--maroon-5, #fbefef); }
#viewCompanies #journeyPanel .kind-email         { --kind: #28b8e2;                          --kind-bg: #e3f3f9; }
#viewCompanies #journeyPanel .kind-visit         { --kind: var(--purple-50, #7725ef);        --kind-bg: var(--purple-10, #f1e9fd); }
#viewCompanies #journeyPanel .kind-reminder      { --kind: var(--red-primary, #74131B);      --kind-bg: var(--red-10, #ffece0); }

/* Phase 12 — Journey composer styling (above the timeline) */
#viewCompanies #journeyPanel .journey-composer {
  background: #fff;
  border: 1px solid var(--black-10, #eaecec);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-z1, 0 1px 3px rgba(0,0,0,0.06));
}
#viewCompanies #journeyPanel .jc-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--black-10, #eaecec);
  padding-bottom: 8px;
}
#viewCompanies #journeyPanel .jc-tab {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px 10px; border-radius: 4px;
  font: 600 11px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-3, #868b8c);
  text-transform: uppercase; letter-spacing: .3px;
  transition: background .12s, color .12s;
}
#viewCompanies #journeyPanel .jc-tab .material-icons-outlined { font-size: 14px; }
#viewCompanies #journeyPanel .jc-tab:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }
#viewCompanies #journeyPanel .jc-tab.active {
  background: var(--red-primary, #74131B); color: #fff;
}
#viewCompanies #journeyPanel #jcSubject,
#viewCompanies #journeyPanel #jcBody {
  width: 100%;
  border: 1px solid var(--black-10, #eaecec);
  border-radius: 4px;
  padding: 8px 10px;
  font: 400 13px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, #283133);
  margin-bottom: 8px;
  resize: vertical;
}
#viewCompanies #journeyPanel #jcSubject:focus,
#viewCompanies #journeyPanel #jcBody:focus {
  outline: 2px solid var(--red-primary, #74131B);
  outline-offset: -1px; border-color: transparent;
}
#viewCompanies #journeyPanel .jc-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ATTRIBUTION pill — meeting → won-sale within 14d */
#viewCompanies #journeyPanel .attribution {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  background: var(--green-10, #e6fbef);
  color: var(--green-80, #069744);
  border: 1px solid var(--green-40, #b0f0c8);
  border-radius: 14px;
  padding: 4px 10px 4px 8px;
  font-size: 11px; font-weight: 600;
}
#viewCompanies #journeyPanel .attribution .arrow { font-size: 14px; line-height: 1; }
#viewCompanies #journeyPanel .attribution b { font-weight: 700; }

/* WON SALE highlight */
#viewCompanies #journeyPanel .tl-card.won-card {
  background: linear-gradient(180deg, var(--green-10, #e6fbef) 0%, #fff 60%);
}
#viewCompanies #journeyPanel .tl-card.won-card .tl-title { font-weight: 600; }

/* Empty state */
#viewCompanies #journeyPanel .tl-empty {
  padding: 32px 16px; text-align: center;
  color: var(--fg-3, var(--text-secondary)); font-size: 12px;
}

/* =====================================================================
   Cluster 15 — Pipeline kanban deep port (matches pipeline.html mockup)
   The base .tudi-board / .tudi-col / .tudi-pcard rules from cluster 7
   already exist; this section adds the inner card structure (.chips,
   .meeting, .foot, .actions, .check, .sub-name, .amount.won, etc.) and
   the floating .bulkbar pill styling.
   ===================================================================== */

#viewDeals .tudi-col-empty {
  color: var(--fg-3, var(--text-secondary));
  text-align: center; font-size: 11px;
  padding: 24px 8px;
}

#viewDeals .tudi-col-head .total {
  font-size: 9.5px;
  color: var(--fg-3, var(--text-secondary));
  display: block; text-align: right;
  text-transform: uppercase; letter-spacing: .5px;
  margin-top: 2px;
}
#viewDeals .tudi-col-head .total b {
  font-size: 11px; color: var(--fg-1, var(--text));
  font-weight: 600; font-variant-numeric: tabular-nums; display: block;
}

/* Card sub-name (contact person line under company name) */
#viewDeals .tudi-pcard .sub-name {
  font-size: 11px;
  color: var(--fg-3, var(--text-secondary));
  margin-top: 2px;
  padding-right: 22px;
}
/* Sub-detail (industry line) */
#viewDeals .tudi-pcard .sub-detail {
  font-size: 10px;
  color: var(--fg-3, var(--text-secondary));
  margin-top: 6px;
}

/* Chips row */
#viewDeals .tudi-pcard .chips {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
#viewDeals .tudi-pcard .tudi-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: .2px; text-transform: uppercase;
}
#viewDeals .tudi-pcard .tudi-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
#viewDeals .tudi-pcard .tudi-chip.temp-hot       { background: #fde7d8; color: var(--red-50, #e16216); }
#viewDeals .tudi-pcard .tudi-chip.temp-hot::before { background: var(--red-50, #e16216); }
#viewDeals .tudi-pcard .tudi-chip.temp-warm      { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
#viewDeals .tudi-pcard .tudi-chip.temp-warm::before { background: var(--yellow-50, #f6c204); }
#viewDeals .tudi-pcard .tudi-chip.temp-cold      { background: #e3f3f9; color: #1a7a9b; }
#viewDeals .tudi-pcard .tudi-chip.temp-cold::before { background: #28b8e2; }

#viewDeals .tudi-pcard .tudi-chip.qual-mql { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }
#viewDeals .tudi-pcard .tudi-chip.qual-pql { background: var(--purple-10, #f1e9fd); color: var(--purple-80, #4c1799); }
#viewDeals .tudi-pcard .tudi-chip.qual-sql { background: var(--green-10, #e6fbef); color: var(--green-80, #069744); }
/* qual chips don't need the leading dot */
#viewDeals .tudi-pcard .tudi-chip.qual-mql::before,
#viewDeals .tudi-pcard .tudi-chip.qual-pql::before,
#viewDeals .tudi-pcard .tudi-chip.qual-sql::before { display: none; }

#viewDeals .tudi-pcard .tudi-chip.partner {
  background: #fff; color: var(--fg-2, var(--text-secondary));
  border: 1px solid var(--black-10, var(--border));
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
#viewDeals .tudi-pcard .tudi-chip.partner::before { display: none; }
#viewDeals .tudi-pcard .tudi-chip.partner .material-icons-outlined { font-size: 11px; }

#viewDeals .tudi-pcard .tudi-chip.score {
  background: var(--black-5, var(--main-bg));
  color: var(--fg-2, var(--text-secondary));
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
#viewDeals .tudi-pcard .tudi-chip.score::before { display: none; }

/* Phase 12 — POC sentiment chips on pipeline cards */
#viewDeals .tudi-pcard .tudi-chip.poc-high,
#viewDeals .tudi-pcard .tudi-chip.poc-med,
#viewDeals .tudi-pcard .tudi-chip.poc-low {
  text-transform: none; letter-spacing: 0; font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px;
}
#viewDeals .tudi-pcard .tudi-chip.poc-high {
  background: var(--green-10, #e6fbef); color: var(--green-80, #069744);
  border: 1px solid var(--green-40, #b0f0c8);
}
#viewDeals .tudi-pcard .tudi-chip.poc-med {
  background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309);
  border: 1px solid #f1d97a;
}
#viewDeals .tudi-pcard .tudi-chip.poc-low {
  background: var(--red-10, #ffece0); color: var(--red-primary, #74131B);
  border: 1px solid var(--red-40, #f9b9a3);
}
#viewDeals .tudi-pcard .tudi-chip.poc-high::before,
#viewDeals .tudi-pcard .tudi-chip.poc-med::before,
#viewDeals .tudi-pcard .tudi-chip.poc-low::before { display: none; }
#viewDeals .tudi-pcard .tudi-chip.poc-high .material-icons-outlined,
#viewDeals .tudi-pcard .tudi-chip.poc-med .material-icons-outlined,
#viewDeals .tudi-pcard .tudi-chip.poc-low .material-icons-outlined { font-size: 11px; }

/* Meeting line */
#viewDeals .tudi-pcard .meeting {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: 11px; color: var(--fg-2, var(--text-secondary));
  padding: 5px 7px;
  background: var(--black-5, var(--main-bg));
  border-radius: 3px;
}
#viewDeals .tudi-pcard .meeting .material-icons-outlined {
  font-size: 13px; color: var(--fg-3, var(--text-secondary));
}
#viewDeals .tudi-pcard .meeting .ago {
  color: var(--fg-3, var(--text-secondary));
  margin-left: auto; font-size: 10px;
}
/* Phase 2026-05 — Edit Meeting dialog: Google Calendar sync status row.
   Synced = green pill, Unsynced = grey pill with "Push" button. */
.mte-cal {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font: 500 12px var(--font-primary, "Montserrat", sans-serif);
}
.mte-cal .material-icons-outlined { font-size: 16px; flex-shrink: 0; }
.mte-cal-synced {
  background: var(--green-10, #e6fbef);
  color: var(--green-80, #069744);
  border: 1px solid var(--green-50, #15d667);
}
.mte-cal-unsynced {
  background: var(--black-5, #f8f8f8);
  color: var(--fg-2, #5a5f60);
  border: 1px solid var(--border-1, #eaecec);
}
.mte-cal .mte-cal-link {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--green-80, #069744);
  text-decoration: none;
  font-weight: 600; font-size: 11px;
}
.mte-cal .mte-cal-link:hover { text-decoration: underline; }
.mte-cal .mte-cal-link .material-icons-outlined { font-size: 13px; }
.mte-cal .mte-cal-push {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--red-button, #881720);
  color: #fff;
  border: none; border-radius: 4px;
  font: 600 11px var(--font-primary, "Montserrat", sans-serif);
  cursor: pointer;
}
.mte-cal .mte-cal-push:hover { background: var(--red-primary, #74131B); }
.mte-cal .mte-cal-push:disabled { opacity: 0.6; cursor: default; }
.mte-cal .mte-cal-push .material-icons-outlined { font-size: 13px; }

/* Phase 2026-05 — Inbound-lead cards in Pipeline (status=new from leads.json).
   Visually muted vs deal cards (cyan-ish stripe) so reps can tell at a glance
   the upstream pipeline from in-flight deals. */
#viewDeals .tudi-pcard.is-lead { border-left: 3px solid #28b8e2; }
#viewDeals .tudi-pcard.is-lead .name .lead-num {
  font: 600 10px ui-monospace, "SF Mono", Menlo, monospace;
  color: #1a7a9b;
  background: #d4f0fa;
  padding: 1px 5px; border-radius: 3px;
  margin-left: 4px;
}
#viewDeals .tudi-pcard .tudi-chip.lead-chip {
  background: #d4f0fa;
  color: #1a7a9b;
  font-weight: 600;
}
#viewDeals .tudi-pcard .tudi-chip.lead-chip .material-icons-outlined {
  font-size: 11px;
}
/* Phase 2026-05 — source pill (Inbound Leads card) styled to match temp/ANUM neighbours */
#viewDeals .tudi-pcard .tudi-chip.src-chip {
  background: var(--black-5, #f8f8f8);
  color: var(--fg-2, #475569);
  font-weight: 500;
  text-transform: capitalize;
}
#viewDeals .tudi-pcard .tudi-chip.src-chip .material-icons-outlined {
  font-size: 11px;
}

/* Phase 2026-05 — clickable meeting row opens the MoM / reschedule dialog */
#viewDeals .tudi-pcard .meeting.meeting-clickable { cursor: pointer; transition: background .12s, border-color .12s; border: 1px solid transparent; }
#viewDeals .tudi-pcard .meeting.meeting-clickable:hover {
  background: var(--maroon-5, #fbefef);
  border-color: var(--maroon-10, #f3d4d4);
}
#viewDeals .tudi-pcard .meeting.meeting-clickable:hover .meeting-edit-ico { opacity: 1; }
#viewDeals .tudi-pcard .meeting .meeting-edit-ico {
  font-size: 12px;
  margin-left: 4px;
  opacity: 0;
  color: var(--red-primary, #74131B);
  transition: opacity .12s;
}
#viewDeals .tudi-pcard .meeting .ago.warn {
  color: var(--red-50, #e16216); font-weight: 600;
}

/* Foot — owner + amount */
#viewDeals .tudi-pcard .foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--black-10, var(--border));
}
#viewDeals .tudi-pcard .foot .owner {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--fg-2, var(--text-secondary));
}
#viewDeals .tudi-pcard .foot .owner .av {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--black-80, var(--text)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600;
}
#viewDeals .tudi-pcard .foot .owner .av.c1 { background: #74131b; }
#viewDeals .tudi-pcard .foot .owner .av.c2 { background: #28b8e2; }
#viewDeals .tudi-pcard .foot .owner .av.c3 { background: #069744; }
#viewDeals .tudi-pcard .foot .owner .av.c4 { background: #a68309; }
#viewDeals .tudi-pcard .foot .owner .av.c5 { background: #4c1799; }
#viewDeals .tudi-pcard .foot .owner .av.c6 { background: #e16216; }
#viewDeals .tudi-pcard .foot .owner .av.c7 { background: #283133; }

#viewDeals .tudi-pcard .foot .amount {
  font-size: 12px; font-weight: 700;
  color: var(--red-primary, #74131B);
  font-variant-numeric: tabular-nums;
}
#viewDeals .tudi-pcard .foot .amount.empty { color: var(--fg-3, var(--text-secondary)); font-weight: 400; }
#viewDeals .tudi-pcard .foot .amount.won   { color: var(--green-80, #069744); }

/* Selection state */
#viewDeals .tudi-pcard .check {
  position: absolute; top: 6px; right: 6px;
  width: 16px; height: 16px; border-radius: 3px;
  background: var(--red-primary, #74131B); color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 12px;
}
#viewDeals .tudi-pcard.selected {
  border-color: var(--red-primary, #74131B);
  border-left-color: var(--red-primary, #74131B);
  border-left-width: 3px;
  box-shadow: 0 0 0 2px var(--red-primary, #74131B), 0 2px 6px rgba(116, 19, 27, .12);
}
#viewDeals .tudi-pcard.selected .check { display: inline-flex; }
#viewDeals .tudi-pcard.stale {
  border-left-color: var(--red-50, #e16216);
  border-left-width: 4px;
}

/* Card name padding to clear the check chip */
#viewDeals .tudi-pcard .name { padding-right: 22px; }

/* Inline action buttons inside the card */
#viewDeals .tudi-pcard .actions {
  display: flex; flex-wrap: nowrap; gap: 0;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--black-10, var(--border));
  overflow: hidden;
}
#viewDeals .tudi-pcard .actions .btn-text {
  background: transparent; border: none;
  font: 500 9.5px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer; padding: 2px 4px; border-radius: 3px;
  display: inline-flex; align-items: center; gap: 2px;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
#viewDeals .tudi-pcard .actions .btn-text:last-child { margin-left: auto; }
#viewDeals .tudi-pcard .actions .btn-text:hover {
  background: var(--black-5, var(--main-bg)); color: var(--fg-1, var(--text));
}
#viewDeals .tudi-pcard .actions .btn-text.primary { color: var(--red-primary, #74131B); }
#viewDeals .tudi-pcard .actions .btn-text.primary:hover { background: var(--maroon-5, #fbefef); }
#viewDeals .tudi-pcard .actions .btn-text.success { color: var(--green-80, #069744); }
#viewDeals .tudi-pcard .actions .btn-text.success:hover { background: var(--green-10, #e6fbef); }
#viewDeals .tudi-pcard .actions .btn-text.danger { color: var(--red-50, #e16216); }
#viewDeals .tudi-pcard .actions .btn-text.danger:hover { background: var(--red-10, #ffece0); }
#viewDeals .tudi-pcard .actions .btn-text .material-icons-outlined { font-size: 11px; }

/* =====================================================================
   Cluster 15 — Floating bulk-action pill (.bulkbar)
   Position: fixed at bottom-center; appears only when ≥1 card selected.
   ===================================================================== */
.bulkbar {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-sidenav, var(--black-80, #283133));
  color: #fff;
  border-radius: 999px;
  padding: 8px 8px 8px 18px;
  display: none; align-items: center; gap: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.30);
  z-index: 9998;
  font-family: var(--font-primary, "Montserrat", sans-serif);
}
.bulkbar.show { display: inline-flex; }
.bulkbar .count { font-size: 13px; font-weight: 600; }
.bulkbar .count b {
  background: var(--red-button, #881720);
  padding: 1px 8px; border-radius: 3px;
  font-size: 11px; margin-right: 4px;
}
.bulkbar .sep { width: 1px; height: 22px; background: rgba(255,255,255,.18); }
.bulkbar .b-actions { display: inline-flex; gap: 4px; }
.bulkbar .b-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  height: 28px; padding: 0 12px; border-radius: 999px;
  font: 600 11px var(--font-primary, "Montserrat", sans-serif);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s;
}
.bulkbar .b-btn:hover { background: rgba(255,255,255,.14); }
.bulkbar .b-btn .material-icons-outlined { font-size: 14px; }
.bulkbar .b-btn.success { color: #b0f0c8; }
.bulkbar .b-btn.success:hover { background: rgba(21,214,103,.18); }
.bulkbar .b-btn.danger  { color: #ffb4ba; }
.bulkbar .b-btn.danger:hover  { background: rgba(225,98,22,.20); }
.bulkbar .b-btn.clear {
  border: none; background: transparent;
  color: rgba(255,255,255,.7);
  padding-left: 10px; padding-right: 14px;
}
.bulkbar .b-btn.clear:hover { background: rgba(255,255,255,.10); color: #fff; }

/* =====================================================================
   Cluster 17 — Companies view scrapped + rebuilt from
   TUDI CRM Company Detail.html mockup. Two pages share #viewCompanies:
     1. #companiesPicker (.co-page) — empty-state grid of companies
     2. #clientDetail   (.co-page) — single-company detail (co-head + tabs)
   Tabs share .co-tabs (cluster 9), tab panels use .panel-head + .panel-body.
   ===================================================================== */

#viewCompanies .co-page {
  padding: 14px 16px 40px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Page-head (shared with cluster 9 patterns but tightened for Companies) */
#viewCompanies .co-page .breadcrumb {
  font-size: 11px;
  color: var(--fg-3, var(--text-secondary));
  display: flex; align-items: center; gap: 4px;
  margin: 0 0 10px;
  text-transform: none; letter-spacing: 0;
}
#viewCompanies .co-page .breadcrumb a { color: var(--fg-2, var(--text-secondary)); text-decoration: none; }
#viewCompanies .co-page .breadcrumb a:hover { color: var(--red-primary, #74131B); }
#viewCompanies .co-page .breadcrumb .sep { color: var(--black-40, #c4c8c9); }
#viewCompanies .co-page .breadcrumb #detailCrumbIndustry { color: var(--fg-2, var(--text-secondary)); font-weight: 500; }
#viewCompanies .co-page .breadcrumb #detailCrumbName { color: var(--fg-1, var(--text)); font-weight: 500; }

#viewCompanies .co-page .page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: 0 0 18px;
  padding: 0;
  border: none; background: transparent;
}
#viewCompanies .co-page .page-head h1 {
  font: 600 22px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
  margin: 0;
}
#viewCompanies .co-page .page-head .sub {
  font-size: 12px; color: var(--fg-3, var(--text-secondary)); margin-top: 4px;
}
#viewCompanies .co-page .page-head .head-actions {
  display: flex; gap: 8px; align-items: center;
}

/* Picker search + sort bar */
#viewCompanies .co-picker-bar {
  display: flex; gap: 10px; align-items: center;
  margin: 0 0 14px;
  padding: 8px 0;
}
#viewCompanies .co-picker-bar .search {
  flex: 1; max-width: 480px;
  position: relative;
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 6px;
  height: 34px; padding: 0 10px 0 32px;
  transition: border-color .12s, box-shadow .12s;
}
#viewCompanies .co-picker-bar .search:focus-within {
  border-color: var(--red-primary, #74131B);
  box-shadow: 0 0 0 2px rgba(116,19,27,.10);
}
#viewCompanies .co-picker-bar .search > .material-icons-outlined {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--fg-3, var(--text-secondary));
}
#viewCompanies .co-picker-bar .search input {
  flex: 1; height: 100%; border: none; outline: none; background: transparent;
  font: 400 13px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
}
#viewCompanies .co-picker-bar .search input::placeholder { color: var(--fg-3, var(--text-secondary)); }
#viewCompanies .co-sort-select {
  height: 34px; padding: 0 28px 0 10px;
  border: 1px solid var(--black-10, var(--border)); border-radius: 6px;
  background: #fff;
  font: 500 12px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23868b8c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
#viewCompanies .co-sort-select:hover { border-color: var(--red-primary, #74131B); }

/* "Recently Integrated" staging button */
#viewCompanies .staging-btn {
  position: relative;
  height: 34px; padding: 0 12px;
  background: #fff; border: 1px solid var(--black-10, var(--border));
  border-radius: 6px;
  font: 500 12px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
#viewCompanies .staging-btn:hover {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  border-color: var(--red-primary, #74131B);
}
#viewCompanies .staging-btn .staging-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--red-primary, #74131B); color: #fff;
  font: 700 10px var(--font-primary, "Montserrat", sans-serif);
  letter-spacing: .3px;
}

/* The "+ New Company" / "+ New Inquiry" red-button */
#viewCompanies .co-page .page-head .btn-primary,
#viewCompanies .co-actions .btn-primary {
  height: 34px; padding: 0 14px;
  background: var(--red-button, #881720); color: #fff; border: none;
  border-radius: 6px;
  font: 600 12px var(--font-primary, "Montserrat", sans-serif);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: background .12s;
}
#viewCompanies .co-page .page-head .btn-primary:hover,
#viewCompanies .co-actions .btn-primary:hover { background: var(--red-primary, #74131B); }

/* CARD GRID — locked to 4 columns on normal desktop viewports (≥980px),
   graceful collapse to 2 / 1 columns on smaller screens.
   No 5-column tier on wide monitors — keep the 4-up rhythm everywhere it fits. */
#viewCompanies .co-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 0;
}
@media (min-width: 980px) {
  #viewCompanies .co-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  #viewCompanies .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  #viewCompanies .co-grid { grid-template-columns: 1fr; }
}

/* Cluster 19 — Industry tone tokens (set per-card via data-tone attribute).
   Six TUDI palette tones reused across 14 industry categories on purpose:
   palette discipline > color-per-category. Tones drive the avatar bg, the
   industry chip, and a 4px left-border accent. The card body stays white so
   the dense 4-up grid reads cleanly. */
#viewCompanies .co-card[data-tone="maroon"] { --ind-color: var(--maroon-80, #74131B); --ind-bg: var(--maroon-5, #fbefef); }
#viewCompanies .co-card[data-tone="yellow"] { --ind-color: var(--yellow-80, #a68309); --ind-bg: var(--yellow-10, #fff7db); }
#viewCompanies .co-card[data-tone="purple"] { --ind-color: var(--purple-80, #4c1799); --ind-bg: var(--purple-10, #f1e9fd); }
#viewCompanies .co-card[data-tone="green"]  { --ind-color: var(--green-80, #069744);  --ind-bg: var(--green-10, #e6fbef); }
#viewCompanies .co-card[data-tone="red"]    { --ind-color: var(--red-80, #9d440f);    --ind-bg: var(--red-10, #ffece0); }
#viewCompanies .co-card[data-tone="grey"]   { --ind-color: var(--black-50, #868b8c);  --ind-bg: var(--black-10, #eaecec); }

#viewCompanies .co-card {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-left: 4px solid var(--ind-color, var(--black-10, #eaecec));
  border-radius: 8px;
  padding: 14px 14px 14px 14px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .06s;
  outline: none;
  min-width: 0;
}
#viewCompanies .co-card:hover {
  border-color: var(--red-primary, #74131B);
  border-left-color: var(--ind-color, var(--red-primary, #74131B));
  box-shadow: 0 2px 8px rgba(116,19,27,.06);
}
#viewCompanies .co-card:focus-visible {
  border-color: var(--red-primary, #74131B);
  border-left-color: var(--ind-color, var(--red-primary, #74131B));
  box-shadow: 0 0 0 2px rgba(116,19,27,.18);
}
#viewCompanies .co-card.active {
  border-color: var(--red-primary, #74131B);
  border-left-color: var(--ind-color, var(--red-primary, #74131B));
  background: var(--maroon-5, #fbefef);
}
#viewCompanies .co-card-logo {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--ind-bg, var(--maroon-5, #fbefef));
  color: var(--ind-color, var(--red-primary, #74131B));
  border: 1px solid var(--black-10, var(--border));
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px var(--font-primary, "Montserrat", sans-serif);
  letter-spacing: .5px;
  flex-shrink: 0;
}

/* Industry chip — small TUDI-style tag rendered next to company name.
   Uses the per-card --ind-color/--ind-bg so chip + avatar + border accent
   all match the same industry tone. */
#viewCompanies .co-card-industry {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 10.5px var(--font-primary, "Montserrat", sans-serif);
  letter-spacing: .2px;
  background: var(--ind-bg, var(--black-10, #eaecec));
  color: var(--ind-color, var(--black-80, #283133));
  white-space: nowrap;
  flex-shrink: 0;
}
#viewCompanies .co-card-industry .material-icons-outlined {
  font-size: 12px;
  color: var(--ind-color, var(--black-80, #283133));
}
#viewCompanies .co-card-info { flex: 1; min-width: 0; }
#viewCompanies .co-card-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-width: 0;
}
#viewCompanies .co-card-name h3 {
  font: 500 13.5px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
  flex: 1 1 100%;
}
#viewCompanies .co-card-meta {
  display: flex; flex-wrap: wrap; gap: 3px 10px;
  margin-top: 4px;
  font-size: 10.5px; color: var(--fg-3, var(--text-secondary));
}
#viewCompanies .co-card-meta span {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
#viewCompanies .co-card-meta .material-icons-outlined {
  font-size: 13px; color: var(--fg-3, var(--text-secondary));
}
#viewCompanies .co-card-meta .co-card-temp.temp-hot {
  color: var(--red-50, #e16216); font-weight: 600;
}
#viewCompanies .co-card-meta .co-card-temp.temp-hot .material-icons-outlined {
  color: var(--red-50, #e16216);
}
#viewCompanies .co-card-chevron {
  font-size: 18px; color: var(--fg-3, var(--text-secondary));
  flex-shrink: 0;
  transition: color .12s, transform .12s;
}
#viewCompanies .co-card:hover .co-card-chevron {
  color: var(--red-primary, #74131B);
  transform: translateX(2px);
}

/* Empty state inside the grid */
#viewCompanies .co-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  background: #fff;
  border: 1px dashed var(--black-10, var(--border));
  border-radius: 8px;
  color: var(--fg-2, var(--text-secondary));
}
#viewCompanies .co-empty-title {
  margin-top: 8px;
  font: 500 14px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
}
#viewCompanies .co-empty-sub {
  margin-top: 4px;
  font-size: 12px; color: var(--fg-3, var(--text-secondary));
}

/* DETAIL — co-head spacing tightened for the new .co-page wrapper.
   (Cluster-9 .co-info / .co-logo / .co-name / .co-meta / .co-actions / .co-tabs
   rules already cover the inner styling — see lines ~2187–2293.) */
#viewCompanies #clientDetail .co-head {
  margin-top: 0;
}
#viewCompanies #clientDetail .co-tabs {
  margin: 18px 0 16px;
}

/* TAB PANELS */
#viewCompanies .tab-panels { margin-top: 0; }
#viewCompanies .tab-panel { display: none; }
#viewCompanies .tab-panel.active { display: block; }

/* Panel-head — header row inside each tab panel (replaces legacy .panel-header) */
#viewCompanies .panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
#viewCompanies .panel-head h2 {
  font: 600 16px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
  margin: 0;
}
#viewCompanies .panel-head .subtitle {
  font-size: 12px; color: var(--fg-3, var(--text-secondary));
  margin-top: 2px;
}
#viewCompanies .panel-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* Inquiry temperature filter chips inside #panel-inquiries */
#viewCompanies .inq-temp-filter-bar {
  display: inline-flex; gap: 4px;
  padding: 3px;
  background: var(--black-5, var(--main-bg));
  border-radius: 18px;
}
#viewCompanies .inq-temp-filter-bar .filter-btn {
  height: 26px; padding: 0 12px;
  background: transparent; border: none;
  border-radius: 14px;
  font: 500 11px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
  transition: background .12s, color .12s;
}
#viewCompanies .inq-temp-filter-bar .filter-btn:hover {
  color: var(--fg-1, var(--text));
}
#viewCompanies .inq-temp-filter-bar .filter-btn.active {
  background: #fff;
  color: var(--red-primary, #74131B);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* PANEL BODY — empty-state pill */
#viewCompanies .panel-body { margin: 0; }
#viewCompanies .panel-empty {
  text-align: center;
  padding: 32px 16px;
  background: #fff;
  border: 1px dashed var(--black-10, var(--border));
  border-radius: 8px;
  font-size: 13px;
  color: var(--fg-2, var(--text-secondary));
}

/* RESPONSIVE */
@media (max-width: 760px) {
  #viewCompanies .co-page { padding: 12px 12px 32px; }
  #viewCompanies .co-grid { grid-template-columns: 1fr; }
  #viewCompanies .co-page .page-head {
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  #viewCompanies .co-page .page-head .head-actions {
    justify-content: stretch;
  }
  #viewCompanies .co-page .page-head .head-actions > * {
    flex: 1;
  }
  #viewCompanies .co-picker-bar { flex-wrap: wrap; }
  #viewCompanies .co-picker-bar .search { max-width: none; width: 100%; }
  #viewCompanies #clientDetail .co-head {
    flex-direction: column; align-items: stretch;
  }
  #viewCompanies #clientDetail .co-actions { justify-content: stretch; flex-wrap: wrap; }
  #viewCompanies #clientDetail .co-tabs { overflow-x: auto; }
}

/* =====================================================================
   Cluster 17 — Ad Performance view (#viewAds)
   Cross-channel KPI tiles + 12-week CPL trend + campaigns table.
   Wired to /api/marketing/ads/summary (existing endpoint, cluster 2).
   ===================================================================== */

#viewAds .ads-kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) { #viewAds .ads-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { #viewAds .ads-kpi-strip { grid-template-columns: 1fr; } }

#viewAds .ads-tile {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-top: 3px solid var(--ch-color, var(--red-primary, #74131B));
  border-radius: 8px;
  padding: 12px 14px 14px;
}
#viewAds .ads-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
#viewAds .ads-tile-name {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
}
#viewAds .ads-tile-name .swatch {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--ch-color, var(--red-primary, #74131B));
}
#viewAds .ads-tile-period {
  font-size: 10px; font-weight: 600;
  color: var(--fg-3, var(--text-secondary));
  text-transform: uppercase; letter-spacing: .5px;
}
#viewAds .ads-tile-stats {
  display: flex; flex-wrap: wrap; gap: 12px 14px;
  margin-bottom: 8px;
}
#viewAds .ads-tile-stats .stat { display: flex; flex-direction: column; gap: 2px; }
#viewAds .ads-tile-stats .lab {
  font-size: 9px; font-weight: 600;
  color: var(--fg-3, var(--text-secondary));
  text-transform: uppercase; letter-spacing: .6px;
}
#viewAds .ads-tile-stats .val {
  font: 600 14px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
  font-variant-numeric: tabular-nums;
}
#viewAds .ads-spark {
  display: block; width: 100%; height: 32px;
  margin-top: 4px;
}

/* CPL chart card */
#viewAds #adsCplCard .tudi-card-head { padding: 12px 14px; }
#viewAds #adsCplBody { padding: 8px 6px 12px; }

/* Channel chip in the campaigns table */
#viewAds .ads-channel-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: .2px;
}
#viewAds .ads-channel-chip .material-icons-outlined { font-size: 13px; }

/* CPL classification cell */
#viewAds .ads-cpl-cell {
  font: 600 12px var(--font-primary, "Montserrat", sans-serif);
  padding: 2px 7px; border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
#viewAds .ads-cpl-cell.good { background: var(--green-10, #e6fbef); color: var(--green-80, #069744); }
#viewAds .ads-cpl-cell.mid  { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
#viewAds .ads-cpl-cell.bad  { background: var(--red-10, #ffece0);   color: var(--red-50, #e16216); }

#viewAds .ads-empty {
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 8px; padding: 32px 16px;
  text-align: center;
}
#viewAds .ads-empty code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; padding: 1px 5px;
  background: var(--black-5, var(--main-bg));
  border-radius: 3px;
}
#viewAds .submeta { font-size: 10.5px; color: var(--fg-3, var(--text-secondary)); margin-top: 1px; }

/* Reuse the global .data-table chrome under #viewAds */
#viewAds .data-table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
#viewAds .data-table th {
  text-align: left; font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3, var(--text-secondary));
  padding: 9px 14px;
  border-bottom: 1px solid var(--black-10, var(--border));
  background: var(--black-5, var(--main-bg)); white-space: nowrap;
}
#viewAds .data-table th.r { text-align: right; }
#viewAds .data-table td { padding: 10px 14px; border-bottom: 1px solid var(--black-5, var(--main-bg)); vertical-align: middle; }
#viewAds .data-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
#viewAds .data-table tr:last-child td { border-bottom: none; }
#viewAds .data-table tbody tr:hover td { background: var(--maroon-5, #fbefef); }

/* =====================================================================
   Cluster 18 — Lead screening lifecycle (Marketing → Sales > Leads → Companies)
   - Persisted status chips (cluster-9 .lchip base extended with .lt-* + .src-pql)
   - Partner column + PQL pill + Direct/partner ID variants
   - Status-aware row actions (Screen / Send to Companies → / Re-open)
   - Single screening modal with Accept ↔ Reject radio-card options
   ===================================================================== */

/* Source cell — PQL pill (purple semantic, matches Tudi tokens) */
#viewLeads .src-chip.src-pql {
  background: var(--purple-10, #f1e9fd);
  color: var(--purple-80, #4c1799);
  font-weight: 600;
}
#viewLeads .src-chip.src-pql .material-icons-outlined {
  color: var(--purple-80, #4c1799);
  font-size: 13px;
}

/* Partner cell — generic .lt-partner pill + .lt-direct sentinel */
#viewLeads .lchip.lt-partner {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
#viewLeads .lchip.lt-direct {
  background: var(--black-5, #f4f5f5);
  color: var(--fg-2, var(--text-secondary));
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
#viewLeads .lchip.lt-partner .material-icons-outlined,
#viewLeads .lchip.lt-direct .material-icons-outlined {
  font-size: 13px;
}

/* Disqualified rows are dimmed but still readable */
#viewLeads .lead-row-disq {
  opacity: 0.62;
  background: linear-gradient(0deg, var(--black-5, #f4f5f5), var(--black-5, #f4f5f5));
}
#viewLeads .lead-row-disq:hover { opacity: 0.85; }

/* Row action buttons — primary (red) + ghost. Reused by Screen / Send-to-Companies / Re-open */
#viewLeads .row-actions {
  display: flex; align-items: center; gap: 2px;
  justify-content: flex-end; flex-wrap: nowrap;
}
/* Compact icon-only action button — same shape across all row states */
#viewLeads .leads-act-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: none; border-radius: 6px;
  background: transparent; color: var(--fg-2, #5a5f60);
  cursor: pointer; text-decoration: none;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
#viewLeads .leads-act-btn:hover {
  background: var(--black-10, #eaecec); color: var(--fg-1, #283133);
}
#viewLeads .leads-act-btn.primary {
  background: var(--red-button, #881720); color: #fff;
}
#viewLeads .leads-act-btn.primary:hover {
  background: var(--red-primary, #74131B);
}
#viewLeads .leads-act-btn .material-icons-outlined { font-size: 16px; }

/* Screening modal — context line + radio-card option list */
.lead-screen-context {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--black-5, #f4f5f5);
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 12px; color: var(--fg-2, var(--text-secondary));
}
.lead-screen-context .material-icons-outlined {
  font-size: 16px; color: var(--fg-3, var(--text-secondary));
}
.lead-screen-context b { color: var(--fg-1, var(--text)); font-weight: 600; }

.lead-screen-options {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
}
.lead-screen-options .opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.lead-screen-options .opt:hover {
  border-color: var(--black-40, #c4c8c9);
}
.lead-screen-options .opt.opt-on {
  border-color: var(--red-primary, #74131B);
  background: var(--maroon-5, #fbefef);
  box-shadow: 0 0 0 2px rgba(116,19,27,.10);
}
.lead-screen-options .opt input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--red-primary, #74131B);
}
.lead-screen-options .opt-body { flex: 1; }
.lead-screen-options .opt-title {
  font: 600 13px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
  display: flex; align-items: center; gap: 6px;
}
.lead-screen-options .opt-title .material-icons-outlined {
  font-size: 16px;
}
.lead-screen-options .opt-accept .opt-title .material-icons-outlined {
  color: var(--green-80, #069744);
}
.lead-screen-options .opt-reject .opt-title .material-icons-outlined {
  color: var(--red-50, #e16216);
}
.lead-screen-options .opt-sub {
  font-size: 11px;
  color: var(--fg-3, var(--text-secondary));
  margin-top: 2px;
}
.lead-screen-options .opt-extra {
  margin-top: 10px;
}
.lead-screen-options .opt-extra label {
  display: block;
  font: 500 11px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-2, var(--text-secondary));
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}
.lead-screen-options .opt-extra select,
.lead-screen-options .opt-extra textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 6px;
  font: 400 13px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
  background: #fff;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  resize: vertical;
}
.lead-screen-options .opt-extra select:focus,
.lead-screen-options .opt-extra textarea:focus {
  border-color: var(--red-primary, #74131B);
  box-shadow: 0 0 0 2px rgba(116,19,27,.12);
}

/* =====================================================================
   Cluster 19 — Inquiry/Sale/Invoice/PO card icons + stage selector
   The renderInquiries/renderSales/renderInvoices/renderPOs functions used
   to emit HTML-entity icons (&#9998; ✏ &#128465; 🗑 &#8644; ⇄ &#9654; ▶)
   and inline color hex on the funnel-stage select. They now emit Material
   Icons inside .icon-btn buttons + class-based stage selectors.
   ===================================================================== */

/* Material-icon sizing inside .icon-btn (the legacy 15px font-size targets
   the entity glyph; Material Icons need their own size override). */
.icon-btn .material-icons-outlined {
  font-size: 18px;
  line-height: 1;
}

/* New icon-btn variants for the inquiry "View Sale" + sale "Reconcile" buttons */
.icon-btn-converted { color: var(--purple-80, #4c1799); }
.icon-btn-converted:hover { background: var(--purple-10, #f1e9fd); color: var(--purple-80, #4c1799); }
.icon-btn-info { color: var(--blue-50, #28b8e2); }
.icon-btn-info:hover { background: var(--blue-10, #d4f0fa); color: var(--blue-50, #28b8e2); }

/* Funnel stage selector — Lead / MQL / SQL pill-style select inside inquiries */
.stage-select {
  font: 600 11px var(--font-primary, "Montserrat", sans-serif);
  padding: 2px 22px 2px 10px;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  height: 22px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-repeat: no-repeat;
  background-position: right 6px center;
  letter-spacing: .3px;
  text-transform: uppercase;
  outline: none;
  transition: filter .12s, box-shadow .12s;
}
.stage-select:hover  { filter: brightness(0.97); }
.stage-select:focus  { box-shadow: 0 0 0 2px rgba(116,19,27,.18); }
.stage-select.stage-lead {
  background-color: var(--black-10, #eaecec);
  color: var(--fg-2, #5d6364);
  border-color: var(--black-10, #eaecec);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%235d6364' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
}
.stage-select.stage-mql {
  background-color: var(--yellow-10, #fff7db);
  color: var(--yellow-80, #a68309);
  border-color: var(--yellow-50, #f6c204);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23a68309' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
}
.stage-select.stage-sql {
  background-color: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  border-color: var(--red-primary, #74131B);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%2374131B' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
}

/* Inquiry card meta line (Owner: … · ANUM score: …) */
.card-meta-line {
  font-size: 11px;
  color: var(--fg-3, var(--text-secondary));
  margin: 4px 0;
}
.card-meta-line strong { color: var(--fg-1, var(--text)); font-weight: 600; }

/* "Cost reconciled" green pill on a sale's header */
.cost-reconciled-pill {
  font-size: 11px;
  background: var(--green-10, #e6fbef);
  color: var(--green-80, #069744);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

/* Sale items table — muted cells, variance up/down semantic colors, catalog tag */
.sale-items-table .cost-muted { color: var(--fg-3, var(--text-secondary)); }
.sale-items-table .variance-up   { color: var(--red-primary, #74131B); font-weight: 600; }
.sale-items-table .variance-down { color: var(--green-80, #069744); font-weight: 600; }
.sale-items-table .catalog-tag {
  color: var(--fg-3, var(--text-secondary));
  font-size: 10px;
  margin-left: 4px;
}

/* Lost-deal reason banner */
.sale-lost-reason {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--red-10, #ffece0);
  color: var(--red-primary, #74131B);
  border-radius: 6px;
  font-size: 13px;
}
.sale-lost-reason .lost-when {
  color: var(--fg-3, var(--text-secondary));
  font-weight: 400;
  font-size: 11px;
}

/* Sale owner / priority footer */
.sale-owner-line {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-2, var(--text-secondary));
}
.sale-owner-line strong { color: var(--fg-1, var(--text)); font-weight: 600; }

/* =====================================================================
   Cluster 20 — Lead detail modal (click a row in Sales > Leads)
   - Whole row is clickable; modal shows full inquiry + contact + source +
     attribution + lifecycle history.
   - Status-aware action button at the bottom (Screen / Send to Companies /
     Re-open / Open Company).
   ===================================================================== */

/* Row hover affordance — make it obvious the row is clickable */
#viewLeads .lead-row-clickable { cursor: pointer; transition: background .12s; }
#viewLeads .lead-row-clickable:hover td {
  background: var(--maroon-5, #fbefef);
}
#viewLeads .lead-row-clickable.lead-row-disq:hover td {
  background: var(--black-10, #eaecec);
}

/* Detail modal container */
.lead-detail {
  display: flex; flex-direction: column; gap: 16px;
  font-size: 13px;
}

/* Header — name + company on the left, status + leadType pill on the right */
.lead-detail .ld-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--black-10, var(--border));
}
.lead-detail .ld-head-left .ld-name {
  font: 600 16px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-1, var(--text));
}
.lead-detail .ld-head-left .ld-co {
  font: 400 12px var(--font-primary, "Montserrat", sans-serif);
  color: var(--fg-3, var(--text-secondary));
  margin-top: 2px;
}
.lead-detail .ld-head-right {
  display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap;
}

/* Lead-type pills (PQL purple / SQL maroon / Inbound neutral) */
.lead-detail-pill {
  font: 600 10px var(--font-primary, "Montserrat", sans-serif);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: .3px;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.lead-detail-pill .material-icons-outlined { font-size: 12px; }
.lead-detail-pill.pill-pql {
  background: var(--purple-10, #f1e9fd);
  color: var(--purple-80, #4c1799);
}
.lead-detail-pill.pill-sql {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
}
.lead-detail-pill.pill-inbound {
  background: var(--black-10, #eaecec);
  color: var(--fg-2, var(--text-secondary));
}

/* Each section: small uppercase label + a 2-column key/value grid */
.lead-detail .ld-section h4 {
  font: 500 10px var(--font-primary, "Montserrat", sans-serif);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--fg-3, var(--text-secondary));
  margin: 0 0 8px;
}
.lead-detail .ld-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.lead-detail .ld-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px;
  font-size: 12px;
  align-items: baseline;
}
.lead-detail .ld-key {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--fg-3, var(--text-secondary));
  font-weight: 500;
  white-space: nowrap;
}
.lead-detail .ld-key .material-icons-outlined {
  font-size: 14px;
  color: var(--fg-3, var(--text-secondary));
}
.lead-detail .ld-val {
  color: var(--fg-1, var(--text));
  word-break: break-word;
}
.lead-detail .ld-val a { color: var(--red-primary, #74131B); text-decoration: none; }
.lead-detail .ld-val a:hover { text-decoration: underline; }
.lead-detail .ld-val b { font-weight: 600; }
.lead-detail .ld-id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  background: var(--black-5, #f4f5f5);
  color: var(--fg-3, var(--text-secondary));
  padding: 1px 6px; border-radius: 3px;
  margin-left: 4px;
}
.lead-detail .ld-muted { color: var(--fg-3, var(--text-secondary)); }
.lead-detail .ld-reason {
  margin-top: 4px;
  font-style: italic;
  color: var(--red-primary, #74131B);
  background: var(--red-10, #ffece0);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
}

/* Inquiry text — full content block, reads like an email body */
.lead-detail .ld-inquiry {
  background: var(--black-5, #f4f5f5);
  border: 1px solid var(--black-10, var(--border));
  border-left: 3px solid var(--red-primary, #74131B);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-1, var(--text));
  white-space: pre-wrap;
  font-family: var(--font-primary, "Montserrat", sans-serif);
}
.lead-detail .ld-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--fg-3, var(--text-secondary));
  padding: 8px 0;
}

/* Action footer — link variant of btn-primary used for "Open Company" */
.lead-detail + .modal-actions a.btn-primary {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}

@media (max-width: 640px) {
  .lead-detail .ld-grid { grid-template-columns: 1fr; }
  .lead-detail .ld-row { grid-template-columns: 90px 1fr; }
}

/* =====================================================================
   Cluster 17 — Pipeline view chrome (mirrors TUDI CRM Pipeline.html)
   Page-head with summary stats · segmented mode toggle · filters row ·
   hint · column "Add deal" footer · column-meetset alias.
   The card / column / bulkbar styles already live above (clusters 7+15).
   ===================================================================== */

.pipeline-page { padding: 0; }
.pipeline-page-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 16px 10px; gap: 16px; flex-wrap: wrap; }
.pipeline-page-head .crumb { font-size: 11px; color: var(--fg-3, var(--text-secondary)); letter-spacing: .2px; }
.pipeline-page-head .pipeline-h1 { font-size: 22px; font-weight: 600; margin: 2px 0 0; color: var(--fg-1, var(--text)); line-height: 1.2; }
.pipeline-summary { font-size: 12px; color: var(--fg-2, var(--text-secondary)); margin-top: 4px; }
.pipeline-summary b { color: var(--fg-1, var(--text)); font-weight: 600; }
.pipeline-summary .muted { color: var(--fg-3, var(--text-secondary)); font-style: italic; }

.pipeline-head-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pipeline-new-deal { color: #fff; }

/* Segmented mode-toggle (Kanban / Pipeline / Table) */
.pipeline-seg.seg {
  display: inline-flex; background: #fff; border: 1px solid var(--black-10, var(--border));
  border-radius: 6px; overflow: hidden; height: 32px;
}
.pipeline-seg button {
  background: #fff; border: none; padding: 0 10px;
  font: 500 12px var(--font-primary, "Montserrat", sans-serif); color: var(--fg-2, var(--text-secondary));
  cursor: pointer; border-right: 1px solid var(--black-10, var(--border));
  display: inline-flex; align-items: center; gap: 6px;
}
.pipeline-seg button:last-child { border-right: none; }
.pipeline-seg button:hover { background: var(--black-5, var(--main-bg)); color: var(--fg-1, var(--text)); }
.pipeline-seg button.on { background: var(--red-primary, #74131B); color: #fff; }
.pipeline-seg button.on:hover { background: var(--red-primary, #74131B); color: #fff; }
.pipeline-seg button .material-icons-outlined { font-size: 16px; }

.pipeline-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  background: var(--red-primary, #74131B); color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: 0; line-height: 1;
}

/* Filters row */
.pipeline-filters {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 12px; flex-wrap: wrap;
  font-family: var(--font-primary, "Montserrat", sans-serif);
}
.pipeline-filters .label {
  font-size: 11px; color: var(--fg-3, var(--text-secondary));
  text-transform: uppercase; letter-spacing: .5px; margin-right: 4px;
}
.pipeline-search {
  background: #fff; border: 1px solid var(--black-10, var(--border));
  border-radius: 6px; height: 32px; display: inline-flex;
  align-items: center; padding: 0 10px; gap: 6px; min-width: 240px;
}
.pipeline-search input {
  border: none; outline: none; background: transparent;
  font: inherit; flex: 1; color: var(--fg-1, var(--text));
}
.pipeline-search .material-icons-outlined { color: var(--fg-3, var(--text-secondary)); font-size: 16px; }

.pipeline-select {
  height: 32px; padding: 0 8px;
  border: 1px solid var(--black-10, var(--border)); border-radius: 6px;
  background: #fff; color: var(--fg-1, var(--text));
  font: 500 12px var(--font-primary, "Montserrat", sans-serif);
  cursor: pointer; min-width: 110px;
}
.pipeline-select:hover { background: var(--black-5, var(--main-bg)); }
.pipeline-select:focus { outline: 2px solid var(--red-primary, #74131B); outline-offset: -1px; border-color: transparent; }

.pipeline-sort-btn { margin-left: auto; }

/* Hint row */
.pipeline-hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px 10px; font-size: 11px; color: var(--fg-3, var(--text-secondary));
}
.pipeline-hint .kbd, .bulkbar .kbd {
  display: inline-flex; padding: 1px 5px; border-radius: 3px;
  background: #fff; border: 1px solid var(--black-10, var(--border));
  font: 500 10px ui-monospace, Menlo, monospace; color: var(--fg-2, var(--text-secondary));
}

/* Pipeline board layout — wraps clusters 7+15 .tudi-board with page padding */
#viewDeals .pipeline-board { padding: 0 16px 80px; gap: 10px; align-items: start; }

/* Column accent alias — reference uses col-meetset, our existing CSS uses col-set */
#viewDeals .tudi-col.col-meetset { --accent: #f6c204; }

/* Column header total label (small grey "pipeline" + bold value) */
#viewDeals .tudi-col-head .total {
  font-size: 10px; color: var(--fg-3, var(--text-secondary));
  display: inline-flex; flex-direction: column; align-items: flex-end;
  letter-spacing: .2px;
}
#viewDeals .tudi-col-head .total b {
  font-size: 11px; color: var(--fg-1, var(--text)); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Column footer "Add deal" button */
#viewDeals .col-add {
  background: transparent; border: 1px dashed var(--black-40, var(--border-2));
  color: var(--fg-3, var(--text-secondary));
  border-radius: 6px; padding: 6px 8px;
  font: 500 11px var(--font-primary, "Montserrat", sans-serif);
  display: inline-flex; align-items: center; gap: 4px; justify-content: center;
  cursor: pointer; margin-top: 4px;
}
#viewDeals .col-add:hover {
  color: var(--red-primary, #74131B);
  border-color: var(--red-primary, #74131B);
  background: #fff;
}

/* Sticky column heads scroll-aware: stay below topbar (48px) so they don't fight the app header */
#viewDeals .tudi-col-head { position: sticky; top: 0; z-index: 2; }

/* Won-stage card accent always green even when not stale */
#viewDeals .tudi-pcard[data-pipeline-col="won"] { border-left-color: var(--green-50, #15d667); }

/* Tighten Pipeline page on small viewports — collapse filter row to wrap */
@media (max-width: 900px) {
  .pipeline-filters { padding: 0 12px 12px; }
  .pipeline-sort-btn { margin-left: 0; }
  #viewDeals .pipeline-board { grid-template-columns: 1fr; }
}

/* =====================================================================
   Cluster 19 — Pipeline UX upgrade: independent column scroll +
   header-mounted Add button + Kanban (compact) + Table mode.
   No more scrolling-to-bottom to add a deal — every column's "+" sits
   in the always-visible header.
   ===================================================================== */

/* Column shell: fixed total height so the body scrolls instead of the page */
#viewDeals .tudi-col {
  height: calc(100vh - 280px);    /* leave room for topbar + page-head + filters + hint */
  min-height: 480px;
  max-height: 820px;
}
/* Body: takes remaining space, scrolls vertically */
#viewDeals .tudi-col-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  min-height: 120px;
}
#viewDeals .tudi-col-body::-webkit-scrollbar { width: 6px; }
#viewDeals .tudi-col-body::-webkit-scrollbar-thumb { background: var(--black-40, var(--border-2)); border-radius: 3px; }
#viewDeals .tudi-col-body::-webkit-scrollbar-thumb:hover { background: var(--fg-3, var(--text-secondary)); }

/* Header: stays put. Hosts both the "total" pill and a compact "+" Add button.
   Override the earlier sticky rule — the column itself is now the scroll context. */
#viewDeals .tudi-col-head {
  flex: 0 0 auto;
  position: relative !important;
  top: auto !important;
  z-index: 1;
}
#viewDeals .tudi-col-head .col-head-actions {
  display: inline-flex; align-items: center; gap: 6px;
}
#viewDeals .col-add-btn {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--black-5, var(--main-bg));
  border: 1px solid var(--black-10, var(--border));
  border-radius: 4px;
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
  padding: 0;
}
#viewDeals .col-add-btn:hover {
  background: var(--red-primary, #74131B);
  color: #fff;
  border-color: var(--red-primary, #74131B);
}
#viewDeals .col-add-btn:active { transform: scale(.94); }
#viewDeals .col-add-btn .material-icons-outlined { font-size: 16px; }

/* Empty-state inside the body looks lighter now that body has a fixed bg */
#viewDeals .tudi-col-empty {
  text-align: center;
  color: var(--fg-3, var(--text-secondary));
  font-size: 11px; font-style: italic;
  padding: 24px 8px;
  background: transparent;
}

/* ===== Kanban mode (compact cards) ===== */
#viewDeals .tudi-pcard.tudi-pcard-compact {
  padding: 7px 9px;
  border-left-width: 3px;
}
#viewDeals .tudi-pcard.tudi-pcard-compact .name { font-size: 12px; line-height: 1.25; padding-right: 18px; }
#viewDeals .tudi-pcard.tudi-pcard-compact .chips { gap: 3px; margin-top: 4px; }
#viewDeals .tudi-pcard.tudi-pcard-compact .tudi-chip {
  font-size: 9px; padding: 1px 5px; letter-spacing: .2px;
}
#viewDeals .tudi-pcard.tudi-pcard-compact .foot {
  margin-top: 6px; padding-top: 5px;
}
#viewDeals .tudi-pcard.tudi-pcard-compact .foot .amount { font-size: 11px; }
#viewDeals .tudi-pcard.tudi-pcard-compact .foot .owner .av { width: 16px; height: 16px; font-size: 8px; }

/* In compact (Kanban) mode the columns stretch wider and pack denser */
#viewDeals .pipeline-board-compact { grid-template-columns: repeat(5, minmax(220px, 1fr)); }
#viewDeals .pipeline-board-compact .tudi-col { min-height: 420px; }

/* ===== Table mode ===== */
.pipeline-table-wrap {
  margin: 0 16px 80px;
  background: #fff;
  border: 1px solid var(--black-10, var(--border));
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-z2, 0 1px 3px rgba(0,0,0,.06));
}
.pipeline-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-primary, "Montserrat", sans-serif);
  font-size: 12px; color: var(--fg-1, var(--text));
}
.pipeline-table thead th {
  background: var(--black-5, var(--main-bg));
  text-align: left; font-weight: 600; padding: 10px 12px;
  font-size: 11px; color: var(--fg-2, var(--text-secondary));
  text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1px solid var(--black-10, var(--border));
  position: sticky; top: 0; z-index: 1;
}
.pipeline-table thead th.r,
.pipeline-table tbody td.r { text-align: right; }
.pipeline-table tbody td {
  padding: 10px 12px; vertical-align: middle;
  border-bottom: 1px solid var(--black-10, var(--border));
  font-weight: 300;
}
.pipeline-table tbody tr { cursor: pointer; transition: background .12s; }
.pipeline-table tbody tr:hover { background: var(--maroon-5, #fbefef); }
.pipeline-table tbody tr.stale { box-shadow: inset 3px 0 0 var(--red-50, #e16216); }
.pipeline-table .pt-company { font-weight: 500; color: var(--fg-1, var(--text)); }
.pipeline-table .pt-contact { font-size: 11px; color: var(--fg-3, var(--text-secondary)); margin-top: 2px; }
.pipeline-table .pt-owner {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-2, var(--text-secondary));
}
.pipeline-table .pt-owner .av {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--black-80, var(--text)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600;
}
.pipeline-table .pt-days-warn { color: var(--red-50, #e16216); font-weight: 600; }
.pipeline-table .muted { color: var(--fg-3, var(--text-secondary)); font-style: italic; font-size: 11px; }
.pipeline-table .btn-text {
  background: transparent; border: none; cursor: pointer;
  color: var(--fg-3, var(--text-secondary));
  display: inline-flex; align-items: center;
  padding: 4px 6px; border-radius: 4px;
  text-decoration: none;
}
.pipeline-table .btn-text:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }
.pipeline-table .btn-text .material-icons-outlined { font-size: 16px; }

/* Stage badge (Table mode) */
.pipeline-stage-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
  background: var(--black-10, var(--border)); color: var(--fg-2, var(--text-secondary));
}
.pipeline-stage-badge.stage-leads     { background: #e9edee; color: #5a6669; }
.pipeline-stage-badge.stage-qualified { background: #e3f3f9; color: #1a7a9b; }
.pipeline-stage-badge.stage-set       { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
.pipeline-stage-badge.stage-conducted { background: #fde7d8; color: var(--red-50, #e16216); }
.pipeline-stage-badge.stage-won       { background: var(--green-10, #e6fbef); color: var(--green-80, #069744); }
.pipeline-stage-badge.stage-lost      { background: var(--red-10, #ffece0); color: var(--red-primary, #74131B); }

/* Phase 2026-05 — Pipeline table reconciliation: Industry chip / Quote # /
   PO # / Lost-row tint / Calendar-synced indicator. */
.pipeline-table .pt-industry {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font: 600 10.5px var(--font-primary, "Montserrat", sans-serif);
  background: var(--ind-bg, var(--black-10, #eaecec));
  color: var(--ind-color, var(--black-80, #283133));
  white-space: nowrap;
}
.pipeline-table .pt-industry .material-icons-outlined { font-size: 11px; color: var(--ind-color, var(--black-80, #283133)); }
.pipeline-table .pt-industry[data-tone="maroon"] { --ind-color: var(--maroon-80, #74131B); --ind-bg: var(--maroon-5, #fbefef); }
.pipeline-table .pt-industry[data-tone="yellow"] { --ind-color: var(--yellow-80, #a68309); --ind-bg: var(--yellow-10, #fff7db); }
.pipeline-table .pt-industry[data-tone="purple"] { --ind-color: var(--purple-80, #4c1799); --ind-bg: var(--purple-10, #f1e9fd); }
.pipeline-table .pt-industry[data-tone="green"]  { --ind-color: var(--green-80,  #069744); --ind-bg: var(--green-10,  #e6fbef); }
.pipeline-table .pt-industry[data-tone="red"]    { --ind-color: var(--red-80,    #9d440f); --ind-bg: var(--red-10,    #ffece0); }
.pipeline-table .pt-industry[data-tone="grey"]   { --ind-color: var(--black-50,  #868b8c); --ind-bg: var(--black-10,  #eaecec); }
.pipeline-table .pt-quote {
  font: 600 10.5px ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--red-primary, #74131B);
  letter-spacing: .2px;
}
.pipeline-table tr.pt-row-lost { background: rgba(116, 19, 27, 0.03); }
.pipeline-table tr.pt-row-lost .pt-company { text-decoration: line-through; text-decoration-color: var(--red-primary, #74131B); text-decoration-thickness: 1px; opacity: .8; }
.pipeline-table tr.pt-row-won  { background: rgba(21, 214, 103, 0.03); }
.pipeline-table tr { cursor: pointer; }
.pipeline-table tr:hover td { background: var(--black-5, #f8f8f8); }

/* Active segmented-button icon stays white */
.pipeline-seg button.on .material-icons-outlined { color: #fff; }

/* On really tall screens cap the column at a sensible max */
@media (min-height: 1200px) {
  #viewDeals .tudi-col { max-height: 980px; }
}

/* Mobile: column shell drops the height cap (single-column wrap looks ugly with fixed height) */
@media (max-width: 900px) {
  #viewDeals .tudi-col { height: auto; min-height: 360px; max-height: 70vh; }
}

/* ============================================================
   Pipeline-card ANUM button + pips (single button, full form on click)
   ============================================================ */
#viewDeals .anum-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 3px 8px 3px 6px;
  background: var(--black-5, #f8f8f8);
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 4px; cursor: pointer;
  font-size: 10px; font-family: inherit;
  color: var(--fg-2, #5a5f60);
  transition: border-color .12s, background .12s;
}
#viewDeals .anum-btn:hover {
  border-color: var(--red-primary, #74131B);
  background: #fff;
}
#viewDeals .anum-btn .anum-btn-label {
  font-weight: 700; font-size: 9px; letter-spacing: .5px;
  color: var(--fg-3, #868b8c); text-transform: uppercase;
}
#viewDeals .anum-btn .anum-pips {
  display: inline-flex; gap: 2px;
}
#viewDeals .anum-btn .anum-pip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--card-bg, #fff);
  color: var(--fg-3, #ccc);
  border: 1px solid var(--border-1, #eaecec);
  font-weight: 700; font-size: 8px;
  transition: background .12s, color .12s, border-color .12s;
}
#viewDeals .anum-btn .anum-pip.on {
  background: var(--red-primary, #74131B); color: #fff;
  border-color: var(--red-primary, #74131B);
}
#viewDeals .anum-btn .anum-pip.noted:not(.on) {
  border-color: var(--red-primary, #74131B);
  color: var(--red-primary, #74131B);
}
#viewDeals .anum-btn .anum-score {
  padding-left: 6px;
  border-left: 1px solid var(--border-1, #eaecec);
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--fg-2, #5a5f60);
}
/* Phase 2026-05 — when ANUM widget lives INSIDE .chips row (right of HOT badge),
   drop the standalone margin-top so it aligns with neighbouring chips, and
   right-align it (margin-left:auto pushes it to the row's far right). The
   3/4 score readout was removed — the 4 pips already convey it visually. */
#viewDeals .tudi-pcard .chips .anum-btn {
  margin-top: 0;
  margin-left: auto;
  padding: 2px 7px 2px 6px;
}
#viewDeals .tudi-pcard .chips .anum-btn .anum-score {
  display: none;     /* belt-and-braces: any cached card markup with the old span gets hidden too */
}

/* Phase 2026-05 — Pipeline card industry chip. Mirrors .co-card-industry styling
   from Companies cards but scoped to the pipeline card. data-tone on the chip
   itself drives the colour pair (no need to bubble to parent). */
#viewDeals .pcard-industry {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 10px var(--font-primary, "Montserrat", sans-serif);
  letter-spacing: .2px;
  background: var(--ind-bg, var(--black-10, #eaecec));
  color: var(--ind-color, var(--black-80, #283133));
  white-space: nowrap;
  width: fit-content;
}
#viewDeals .pcard-industry .material-icons-outlined {
  font-size: 11px;
  color: var(--ind-color, var(--black-80, #283133));
}
#viewDeals .pcard-industry[data-tone="maroon"] { --ind-color: var(--maroon-80, #74131B); --ind-bg: var(--maroon-5, #fbefef); }
#viewDeals .pcard-industry[data-tone="yellow"] { --ind-color: var(--yellow-80, #a68309); --ind-bg: var(--yellow-10, #fff7db); }
#viewDeals .pcard-industry[data-tone="purple"] { --ind-color: var(--purple-80, #4c1799); --ind-bg: var(--purple-10, #f1e9fd); }
#viewDeals .pcard-industry[data-tone="green"]  { --ind-color: var(--green-80,  #069744); --ind-bg: var(--green-10,  #e6fbef); }
#viewDeals .pcard-industry[data-tone="red"]    { --ind-color: var(--red-80,    #9d440f); --ind-bg: var(--red-10,    #ffece0); }
#viewDeals .pcard-industry[data-tone="grey"]   { --ind-color: var(--black-50,  #868b8c); --ind-bg: var(--black-10,  #eaecec); }

/* ============================================================
   ANUM full-form dialog (all 4 criteria in one modal)
   ============================================================ */
.anum-dlg-form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 0 4px;
}
.anum-dlg-row {
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 6px; padding: 10px 12px 10px;
  transition: border-color .15s, background .15s;
}
.anum-dlg-row-on {
  border-color: var(--red-primary, #74131B);
  background: color-mix(in srgb, var(--red-primary, #74131B) 5%, transparent);
}
.anum-dlg-check {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; margin-bottom: 8px;
}
.anum-dlg-check input[type="checkbox"] {
  width: 15px; height: 15px; flex-shrink: 0;
  accent-color: var(--red-primary, #74131B); cursor: pointer;
}
.anum-dlg-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--black-5, #f4f4f4);
  border: 1px solid var(--border-1, #eaecec);
  font-weight: 800; font-size: 11px;
  color: var(--fg-2, #5a5f60); flex-shrink: 0;
}
.anum-dlg-row-on .anum-dlg-letter {
  background: var(--red-primary, #74131B); color: #fff;
  border-color: var(--red-primary, #74131B);
}
.anum-dlg-name {
  font-size: 13px; font-weight: 600; color: var(--fg-1, #1a1a1a);
}
.anum-dlg-txt {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-1, #eaecec); border-radius: 5px;
  padding: 7px 10px; font-size: 12px; font-family: inherit;
  resize: vertical; outline: none; background: var(--card-bg, #fff);
  color: var(--fg-1, #1a1a1a);
  transition: border-color .12s;
}
.anum-dlg-txt:focus { border-color: var(--red-primary, #74131B); }
.anum-dlg-row-on .anum-dlg-txt { border-color: color-mix(in srgb, var(--red-primary,#74131B) 40%, transparent); }

/* ============================================================
   Pipeline-card quotation badge — visible when sale has a QTE
   number minted. Click → opens Doc URL or generates the Doc.
   ============================================================ */
#viewDeals .quote-badge {
  margin-top: 8px; padding: 5px 7px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--black-5, #f8f8f8);
  border: 1px solid var(--border-1, #eaecec);
  border-left: 3px solid var(--accent, #74131B);
  border-radius: 4px;
  font-size: 11px; color: var(--fg-2, #5a5f60);
  cursor: pointer;
  width: 100%;
}
#viewDeals .quote-badge:hover { background: #fbefef; }
#viewDeals .quote-badge .material-icons-outlined { font-size: 13px; color: var(--red-primary, #74131B); }
#viewDeals .quote-badge .qn { font-weight: 700; color: var(--fg-1, #1a1d1e); font-variant-numeric: tabular-nums; }
#viewDeals .quote-badge .qs { color: var(--fg-3, #868b8c); }
#viewDeals .quote-badge.quote-sent   { border-left-color: var(--red-50, #e16216); }
#viewDeals .quote-badge.quote-viewed { border-left-color: #28b8e2; }
#viewDeals .quote-badge.quote-signed { border-left-color: var(--green-80, #069744); }

/* ============================================================
   Settings (Administration) — management-only system config UI.
   ============================================================ */
#viewSettings.view-active { display: block !important; overflow-y: auto; }
#viewSettings .settings-page { padding-bottom: 60px; }
#viewSettings .settings-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 16px 0 18px;
  border-bottom: 1px solid var(--border-1, #eaecec);
}
#viewSettings .settings-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 500;
  color: var(--fg-2, #5a5f60);
  cursor: pointer; transition: color .12s, border-color .12s;
}
#viewSettings .settings-tab .material-icons-outlined { font-size: 16px; }
#viewSettings .settings-tab:hover { color: var(--red-primary, #74131B); }
#viewSettings .settings-tab.active {
  color: var(--red-primary, #74131B);
  border-bottom-color: var(--red-primary, #74131B);
}
#viewSettings .settings-loading { padding: 40px; text-align: center; color: var(--fg-3); }
#viewSettings .settings-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 8px;
  margin-bottom: 18px;
  overflow: hidden;
}
#viewSettings .settings-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
}
#viewSettings .settings-card-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg-1); }
#viewSettings .settings-card-head p { margin: 4px 0 0; font-size: 12px; color: var(--fg-3); }
#viewSettings .settings-card-head code { font-family: ui-monospace, monospace; background: rgba(0,0,0,.04); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
#viewSettings .settings-card-body { padding: 16px 18px; }
#viewSettings .settings-card-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
  display: flex; gap: 8px; justify-content: flex-end;
}
#viewSettings .settings-field {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-1, #eaecec);
}
#viewSettings .settings-field:last-child { border-bottom: 0; }
#viewSettings .settings-field-label {
  font-size: 12px; font-weight: 600; color: var(--fg-1);
  display: flex; flex-direction: column; gap: 3px;
}
#viewSettings .settings-field-label small { font-weight: 400; color: var(--fg-3); font-size: 11px; }
#viewSettings .settings-field-input input,
#viewSettings .settings-field-input textarea,
#viewSettings .settings-field-input select {
  width: 100%; max-width: 520px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 5px;
  font-size: 13px; font-family: inherit;
}
#viewSettings .settings-field-input input:focus,
#viewSettings .settings-field-input textarea:focus {
  outline: none; border-color: var(--red-primary, #74131B);
  box-shadow: 0 0 0 2px rgba(116,19,27,.12);
}
#viewSettings .settings-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer;
}
#viewSettings .settings-toggle input { width: 16px; height: 16px; }

/* Users table — page-access chip grid */
#viewSettings .settings-users-table { font-size: 12px; }
#viewSettings .settings-users-table td { vertical-align: top; padding: 12px 10px; }
#viewSettings .user-role-select {
  padding: 5px 8px;
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 4px; font-size: 12px;
  background: #fff;
}
#viewSettings .user-page-grid {
  display: flex; flex-wrap: wrap; gap: 4px;
  max-width: 540px;
}
#viewSettings .user-page-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: var(--black-5, #f8f8f8);
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s;
}
#viewSettings .user-page-chip input { width: 12px; height: 12px; margin: 0; }
#viewSettings .user-page-chip:hover { border-color: var(--red-primary, #74131B); }
#viewSettings .user-page-chip.granted {
  background: #fbefef;
  border-color: var(--red-primary, #74131B);
  color: var(--red-primary, #74131B);
  font-weight: 600;
}
#viewSettings .user-page-chip.forced {
  background: var(--black-5, #f8f8f8);
  cursor: not-allowed;
  opacity: 0.7;
}
#viewSettings .btn.danger,
#viewSettings .btn-outline.danger { color: var(--red-50, #e16216); border-color: var(--red-50, #e16216); }
#viewSettings .btn.danger:hover { background: var(--red-50, #e16216); color: #fff; }
#viewSettings .panel-empty,
#viewSettings .panel-error {
  padding: 24px; text-align: center;
  color: var(--fg-3, #868b8c); font-size: 13px;
}
#viewSettings .panel-error { color: var(--red-50, #e16216); }

/* ============================================================
   Price List / Products view (#viewProducts)
   Mirrors TUDI CRM Price List Modal v2 design.
   ============================================================ */

/* Page shell */
#viewProducts { overflow-y: auto; }
.pl-wrap { padding: 14px 16px 32px; max-width: 1480px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.pl-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.pl-h1 { font-size: 22px; font-weight: 600; margin: 0; color: var(--fg-1, #283133); line-height: 1.2; }
.pl-sub { font-size: 12px; color: var(--fg-3, #868b8c); margin-top: 4px; }
.pl-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Card container */
.pl-card { background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px; overflow: hidden; }

/* Tabs */
.pl-tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-1, #eaecec); background: var(--black-5, #f8f8f8); }
.pl-tab { padding: 12px 16px; font-size: 12px; font-weight: 500; color: var(--fg-2, #575e5f); cursor: pointer;
          border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px;
          transition: color .15s, background .15s; user-select: none; }
.pl-tab .ico { font-family: "Material Icons Outlined"; font-size: 15px; font-style: normal; font-weight: normal;
               line-height: 1; vertical-align: -2px; -webkit-font-feature-settings: 'liga'; }
.pl-tab:hover { color: var(--fg-1, #283133); background: rgba(255,255,255,.5); }
.pl-tab.active { color: var(--red-primary, #74131B); border-bottom-color: var(--red-primary, #74131B); font-weight: 600; background: #fff; }
.pl-tab .count { font-size: 10px; background: var(--black-10, #eaecec); color: var(--fg-2, #575e5f);
                 padding: 1px 6px; border-radius: 8px; font-weight: 600; min-width: 18px; text-align: center; }
.pl-tab.active .count { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }

/* Toolbar */
.pl-toolbar { display: flex; align-items: center; padding: 10px 16px;
              border-bottom: 1px solid var(--border-1, #eaecec); gap: 8px; flex-wrap: wrap;
              background: var(--black-5, #f8f8f8); }
.pl-search-inline {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-1, #eaecec); border-radius: 5px;
  background: #fff; padding: 0 10px; height: 30px; min-width: 200px;
  transition: border-color .12s;
}
.pl-search-inline:focus-within { border-color: var(--red-primary, #74131B); }
.pl-search-inline .ico {
  font-family: "Material Icons Outlined"; font-size: 15px;
  font-style: normal; font-weight: normal; line-height: 1;
  color: var(--fg-3, #868b8c); flex-shrink: 0;
  text-transform: none; letter-spacing: normal;
}
.pl-search-inline input {
  border: none; outline: none; font-size: 12px;
  color: var(--fg-1, #283133); background: transparent;
  width: 100%; font-family: inherit;
}
.pl-select {
  height: 30px; padding: 0 28px 0 10px; border: 1px solid var(--border-1, #eaecec);
  border-radius: 5px; background: #fff; font-size: 12px; color: var(--fg-1, #283133);
  font-family: inherit; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23868b8c'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: border-color .12s;
}
.pl-select:focus { outline: none; border-color: var(--red-primary, #74131B); }
.pl-select:hover { border-color: var(--fg-3, #868b8c); }
.pl-clear-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 12px; border-radius: 5px; margin-left: auto;
  border: 1px solid var(--border-1, #eaecec); background: #fff;
  font-size: 11px; font-weight: 500; color: var(--fg-2, #575e5f);
  cursor: pointer; transition: background .1s, color .1s, border-color .1s;
}
.pl-clear-btn:hover { background: #fce8e8; color: var(--red-primary, #74131B); border-color: var(--red-primary, #74131B); }
.pl-clear-btn .ico {
  font-family: "Material Icons Outlined"; font-size: 14px;
  font-style: normal; font-weight: normal; line-height: 1;
  text-transform: none; letter-spacing: normal;
}
.pl-toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-count { font-size: 11px; color: var(--fg-3, #868b8c); }
.filt-chip { font: 500 11px var(--font-primary, 'Montserrat', sans-serif); padding: 5px 10px; border-radius: 4px;
             border: 1px solid var(--border-1, #eaecec); background: #fff; color: var(--fg-2, #575e5f);
             cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.filt-chip .ico { font-family: "Material Icons Outlined"; font-size: 13px; font-style: normal; font-weight: normal;
                  line-height: 1; vertical-align: -2px; -webkit-font-feature-settings: 'liga'; }
.filt-chip:hover { background: var(--black-5, #f8f8f8); }
.filt-chip.on { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); border-color: var(--red-primary, #74131B); }

/* Items table */
.pl-table-wrap { overflow-x: auto; }
table.items { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 900px; }
table.items th { text-align: left; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
                 color: var(--fg-3, #868b8c); padding: 9px 14px; border-bottom: 1px solid var(--border-1, #eaecec);
                 background: var(--black-5, #f8f8f8); white-space: nowrap; }
table.items th.r { text-align: right; }
table.items th .sort { display: inline-block; margin-left: 3px; opacity: .5; font-size: 12px; vertical-align: -1px; }
table.items th.sorted .sort { opacity: 1; color: var(--red-primary, #74131B); }
table.items td { padding: 10px 14px; border-bottom: 1px solid var(--black-5, #f8f8f8); font-weight: 400; vertical-align: middle; }
table.items td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.items tr:hover td { background: var(--maroon-5, #fbefef); }
table.items tr:last-child td { border-bottom: none; }

/* Item name cell */
.sku { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--fg-2, #575e5f); }
.item-name { font-weight: 500; color: var(--fg-1, #283133); }
.item-name .brand { font-size: 11px; color: var(--fg-3, #868b8c); font-weight: 400; display: block; margin-top: 1px; }
.cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg-2, #575e5f); }
.cat .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* Stock chips */
.stock-chip { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 3px; font-weight: 600;
              letter-spacing: .3px; text-transform: uppercase; }
.stock-avail { background: var(--green-10, #e6fbef); color: var(--green-80, #069744); }
.stock-low   { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
.stock-out   { background: var(--red-10, #ffece0); color: var(--red-50, #e16216); }
.stock-disc  { background: var(--black-10, #eaecec); color: var(--fg-2, #575e5f); }

/* Margin cells */
.margin-cell { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.margin-cell .ico { font-family: "Material Icons Outlined"; font-size: 13px; font-style: normal; font-weight: normal;
                    line-height: 1; -webkit-font-feature-settings: 'liga'; }
.margin-good { color: var(--green-80, #069744); }
.margin-mid  { color: var(--yellow-80, #a68309); }
.margin-bad  { color: var(--red-50, #e16216); }

/* Row actions */
.row-actions { display: inline-flex; gap: 2px; }
.row-actions button { width: 26px; height: 26px; padding: 0; border: none; background: transparent; border-radius: 4px;
                      color: var(--fg-3, #868b8c); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.row-actions button:hover { background: var(--black-10, #eaecec); color: var(--fg-1, #283133); }
.row-actions button .ico { font-family: "Material Icons Outlined"; font-size: 16px; font-style: normal; font-weight: normal;
                            line-height: 1; -webkit-font-feature-settings: 'liga'; }

/* Footer / pagination */
.pl-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
           border-top: 1px solid var(--border-1, #eaecec); background: var(--black-5, #f8f8f8); font-size: 11px; color: var(--fg-2, #575e5f); }
.pager { display: inline-flex; align-items: center; gap: 4px; }
.pager .pg { width: 28px; height: 28px; border: 1px solid var(--border-1, #eaecec); background: #fff; border-radius: 4px;
             font: 500 11px var(--font-primary, 'Montserrat', sans-serif); color: var(--fg-2, #575e5f); cursor: pointer;
             display: inline-flex; align-items: center; justify-content: center; }
.pager .pg:hover { background: var(--black-5, #f8f8f8); }
.pager .pg.active { background: var(--red-primary, #74131B); color: #fff; border-color: var(--red-primary, #74131B); }
.pager .pg[disabled] { opacity: .35; cursor: default; pointer-events: none; }
.pager .pg .ico { font-family: "Material Icons Outlined"; font-size: 16px; font-style: normal; font-weight: normal;
                  line-height: 1; -webkit-font-feature-settings: 'liga'; }

/* Empty state */
.pl-empty { padding: 48px 24px; text-align: center; color: var(--fg-3, #868b8c); }
.pl-empty .ico { font-family: "Material Icons Outlined"; font-style: normal; font-weight: normal;
                 line-height: 1; -webkit-font-feature-settings: 'liga'; display: block; margin: 0 auto 12px; }
.pl-empty p { font-size: 13px; line-height: 1.5; }

/* --- Item modal form styles --- */
.pl-form-section { padding: 14px 0 16px; border-bottom: 1px dashed var(--border-1, #eaecec); }
.pl-form-section:first-child { padding-top: 4px; }
.pl-form-section:last-child { border-bottom: none; padding-bottom: 0; }
.pl-section-label { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
                    color: var(--fg-3, #868b8c); margin: 0 0 10px; display: inline-flex; align-items: center; gap: 6px; }
.pl-section-label .ico { font-family: "Material Icons Outlined"; font-size: 13px; font-style: normal; font-weight: normal;
                          line-height: 1; -webkit-font-feature-settings: 'liga';
                          text-transform: none; letter-spacing: normal; }
.pl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pl-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pl-field.full { grid-column: 1 / -1; }
.pl-field > label { font-size: 11px; color: var(--fg-2, #575e5f); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.pl-req { color: var(--red-primary, #74131B); font-weight: 700; }
.pl-hint { font-weight: 400; color: var(--fg-3, #868b8c); margin-left: auto; font-size: 10px; }
.pl-help { font-size: 10px; color: var(--fg-3, #868b8c); margin-top: 2px; line-height: 1.3; }
.pl-field input,
.pl-field select,
.pl-field textarea {
  height: 34px; border: 1px solid var(--border-1, #eaecec); border-radius: 5px;
  padding: 0 11px; font: 400 13px var(--font-primary, 'Montserrat', sans-serif); background: #fff; color: var(--fg-1, #283133); min-width: 0;
  transition: border-color .12s, box-shadow .12s;
}
.pl-field textarea { height: 72px; padding: 8px 11px; resize: vertical; line-height: 1.45; }
.pl-field select { padding-right: 28px; -webkit-appearance: none; 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'><path fill='%2378787a' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; }
.pl-field input:focus,
.pl-field select:focus,
.pl-field textarea:focus { outline: none; border-color: var(--red-primary, #74131B); box-shadow: 0 0 0 3px rgba(116, 19, 27, .12); }
.pl-field input::placeholder, .pl-field textarea::placeholder { color: var(--fg-3, #868b8c); font-weight: 300; }
.pl-field input.is-valid { border-color: var(--green-50, #15d667); }

/* SKU input group */
.pl-sku-group { display: flex; gap: 6px; align-items: flex-start; }
.pl-sku-wrap { position: relative; flex: 1; }
.pl-sku-wrap input { width: 100%; padding-right: 80px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.pl-sku-status { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
                 font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pl-sku-status .ico { font-family: "Material Icons Outlined"; font-size: 14px; font-style: normal; font-weight: normal;
                      line-height: 1; -webkit-font-feature-settings: 'liga'; }
.pl-sku-status.valid    { color: var(--green-80, #069744); }
.pl-sku-status.checking { color: var(--fg-3, #868b8c); }
.pl-sku-status.invalid  { color: var(--red-50, #e16216); }
.pl-gen-btn { height: 34px; padding: 0 10px; border: 1px solid var(--border-1, #eaecec); background: #fff; border-radius: 5px;
              font: 600 11px var(--font-primary, 'Montserrat', sans-serif); color: var(--fg-2, #575e5f); cursor: pointer;
              display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; transition: all .12s; }
.pl-gen-btn:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); border-color: var(--red-primary, #74131B); }
.pl-gen-btn .ico { font-family: "Material Icons Outlined"; font-size: 14px; font-style: normal; font-weight: normal;
                   line-height: 1; -webkit-font-feature-settings: 'liga'; }

/* Rupiah prefix input */
.pl-rp-wrap { position: relative; }
.pl-rp-wrap input { padding-left: 32px; width: 100%; font-variant-numeric: tabular-nums; }
.pl-rp-wrap::before { content: "Rp"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
                      font: 600 11px var(--font-primary, 'Montserrat', sans-serif); color: var(--fg-3, #868b8c);
                      pointer-events: none; letter-spacing: .3px; z-index: 1; }

/* Live margin readout */
.pl-margin-readout { background: var(--black-5, #f8f8f8); border: 1px solid var(--border-1, #eaecec); border-radius: 6px;
                     padding: 10px 12px; display: flex; align-items: center; justify-content: space-between;
                     gap: 12px; margin-top: 2px; transition: background .15s, border-color .15s; }
.pl-margin-readout.empty { opacity: .55; }
.pl-margin-readout.good { background: #f0faf5; border-color: var(--green-50, #15d667); }
.pl-margin-readout.mid  { background: var(--yellow-10, #fff7db); border-color: var(--yellow-50, #f6c204); }
.pl-margin-readout.bad  { background: #fdf2f3; border-color: var(--red-50, #e16216); }
.pl-readout-label { font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--fg-2, #575e5f);
                    display: inline-flex; align-items: center; gap: 5px; }
.pl-readout-label .ico { font-family: "Material Icons Outlined"; font-size: 13px; font-style: normal; font-weight: normal;
                          line-height: 1; -webkit-font-feature-settings: 'liga';
                          text-transform: none; letter-spacing: normal; }
.pl-readout-stats { display: flex; align-items: baseline; gap: 14px; }
.pl-margin-stat { font-size: 10px; color: var(--fg-3, #868b8c); display: inline-flex; flex-direction: column; gap: 1px; align-items: flex-end; }
.pl-margin-stat b { font-size: 12px; color: var(--fg-1, #283133); font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-margin-chip { font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 4px; font-variant-numeric: tabular-nums;
                  background: var(--black-10, #eaecec); color: var(--fg-2, #575e5f);
                  display: inline-flex; align-items: center; gap: 4px; min-width: 70px; justify-content: center; }
.pl-margin-chip .ico { font-family: "Material Icons Outlined"; font-size: 14px; font-style: normal; font-weight: normal;
                       line-height: 1; -webkit-font-feature-settings: 'liga';
                       text-transform: none; letter-spacing: normal; }
.pl-margin-readout.good .pl-margin-chip { background: var(--green-50, #15d667); color: #fff; }
.pl-margin-readout.mid  .pl-margin-chip { background: var(--yellow-50, #f6c204); color: var(--yellow-80, #a68309); }
.pl-margin-readout.bad  .pl-margin-chip { background: var(--red-50, #e16216); color: #fff; }

/* Icon font inside buttons — btn-primary/ghost set font: shorthand which
   resets font-family on descendants, breaking Material Icons inheritance. */
#viewProducts .btn-primary .ico,
#viewProducts .btn-ghost .ico,
#viewProducts .btn-outline .ico {
  font-family: "Material Icons Outlined";
  font-style: normal; font-weight: normal;
  font-size: 16px; line-height: 1;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  vertical-align: -3px;
}

/* Search box in the toolbar */
#viewProducts .search {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-1, #eaecec); border-radius: 5px;
  background: #fff; padding: 0 10px; height: 32px; min-width: 220px;
  transition: border-color .12s;
}
#viewProducts .search:focus-within { border-color: var(--red-primary, #74131B); }
#viewProducts .search .ico {
  font-family: "Material Icons Outlined";
  font-style: normal; font-weight: normal;
  font-size: 16px; line-height: 1; color: var(--fg-3, #868b8c);
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  flex-shrink: 0;
}
#viewProducts .search input {
  border: none; outline: none; background: transparent;
  font: 400 12px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-1, #283133); width: 100%;
}
#viewProducts .search input::placeholder { color: var(--fg-3, #868b8c); }

/* =============================================================================
   Price List — 2-section redesign (Hardware + Consumables)
   ============================================================================= */
/* Filter chip bar */
.pl-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px; border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
}
.pl-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--border-1, #eaecec); background: #fff;
  color: var(--fg-2, #575e5f); cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}
.pl-chip:hover { background: var(--maroon-5, #fbefef); border-color: var(--red-primary, #74131B); color: var(--red-primary, #74131B); }
.pl-chip.active { background: var(--red-primary, #74131B); border-color: var(--red-primary, #74131B); color: #fff; }

/* Category badge in table cell */
.hw-cat-badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  background: var(--black-10, #eaecec); color: var(--fg-1, #283133);
  white-space: nowrap;
}
/* Hardware group colors */
.hw-cat-deras          { background: #e8f0fe; color: #1a5fcd; }
.hw-cat-antenna        { background: #e8f5e9; color: #2e7d32; }
.hw-cat-fixed-reader   { background: #fce4ec; color: #9c2030; }
.hw-cat-mobile-reader  { background: #fff3e0; color: #e65100; }
.hw-cat-cable          { background: #ede7f6; color: #512da8; }
.hw-cat-mobile-computer{ background: #e0f7fa; color: #006064; }
.hw-cat-accessories    { background: #f3e5f5; color: #6a1b9a; }
.hw-cat-printer        { background: #fafafa; color: #424242; border: 1px solid #e0e0e0; }
.hw-cat-kit            { background: #fff8e1; color: #f57f17; }
/* Consumable sub-category colors */
.consum-cat-wet-inlay  { background: #e3f2fd; color: #0d47a1; }
.consum-cat-hard-tag   { background: #efebe9; color: #4e342e; }
.consum-cat-label      { background: #e8f5e9; color: #1b5e20; }
.consum-cat-anti-metal { background: #fce4ec; color: #880e4f; }
.consum-cat-laundry    { background: #e0f7fa; color: #006064; }
.consum-cat-id-card    { background: #e8eaf6; color: #283593; }
.consum-cat-specialty  { background: #fff3e0; color: #bf360c; }

/* SKU monospace */
.sku-mono { font-family: 'Courier New', monospace; font-size: 11px; color: var(--fg-2, #575e5f); }

.pl-tab-bar {
  display: flex; gap: 0; border-bottom: 2px solid var(--border-1, #eaecec);
  margin-bottom: 12px; background: transparent;
}
.pl-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--fg-2, #575e5f); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  cursor: pointer; transition: color .12s, border-color .12s;
}
.pl-tab:hover { color: var(--fg-1, #283133); }
.pl-tab.active { color: var(--red-primary, #74131B); border-bottom-color: var(--red-primary, #74131B); }
.pl-tab .ico {
  font-family: "Material Icons Outlined"; font-size: 16px;
  font-style: normal; font-weight: normal; line-height: 1;
  text-transform: none; letter-spacing: normal;
}
.pl-tab .pl-section-count {
  font-size: 10px; background: var(--black-10, #eaecec);
  color: var(--fg-2, #575e5f); padding: 1px 6px; border-radius: 8px;
  font-weight: 600;
}
.pl-tab.active .pl-section-count {
  background: #fce8e8; color: var(--red-primary, #74131B);
}
.pl-section-card {
  background: #fff;
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
/* Pricing Setup → Pricing Formula tab: Tier discount table (LEFT) +
   Consumable Qty Bands (RIGHT) side-by-side.
   The Tier table is much narrower than the Qty Bands (2 cols vs 5+ cols), so
   we use an asymmetric split (~38% / 62%) instead of 50/50 — keeps each card
   sized to its content without wasted space. Stacks on screens <960px. */
.ps-split {
  display: grid;
  grid-template-columns: minmax(360px, 38%) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ps-split > .ps-card { margin: 0; min-width: 0; }
@media (max-width: 959px) {
  .ps-split { grid-template-columns: 1fr; }
}
.pl-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
}
.pl-section-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--fg-1, #283133);
}
.pl-section-title .ico {
  font-family: "Material Icons Outlined"; font-size: 16px;
  font-style: normal; font-weight: normal; line-height: 1;
  color: var(--red-primary, #74131B);
  text-transform: none; letter-spacing: normal;
}
.pl-section-count {
  font-size: 10px; background: var(--black-10, #eaecec);
  color: var(--fg-2, #575e5f); padding: 1px 7px; border-radius: 8px;
  font-weight: 600; min-width: 22px; text-align: center;
}
.pl-section-search {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-1, #eaecec); border-radius: 5px;
  background: #fff; padding: 0 10px; height: 30px; min-width: 200px;
  transition: border-color .12s;
}
.pl-section-search:focus-within { border-color: var(--red-primary, #74131B); }
.pl-section-search .ico {
  font-family: "Material Icons Outlined"; font-size: 15px;
  font-style: normal; font-weight: normal; line-height: 1;
  color: var(--fg-3, #868b8c); flex-shrink: 0;
}
.pl-section-search input {
  border: none; outline: none; background: transparent;
  font: 400 12px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-1, #283133); width: 100%;
}
.pl-section-search input::placeholder { color: var(--fg-3, #868b8c); }

/* Hardware table */
table.hw-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 1060px; }
table.hw-table th {
  text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--fg-3, #868b8c);
  padding: 8px 10px; background: var(--black-5, #f8f8f8);
  border-bottom: 1px solid var(--border-1, #eaecec); white-space: nowrap;
}
table.hw-table th.l { text-align: left; }
table.hw-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--black-5, #f8f8f8);
  vertical-align: middle; font-weight: 400;
}
table.hw-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.hw-table td.c { text-align: center; font-variant-numeric: tabular-nums; }
table.hw-table tr:hover td { background: var(--maroon-5, #fbefef); }

/* Tier price column headers */
.th-msrp    { border-left: 2px solid var(--border-1, #eaecec); }
.th-diamond { color: #1a6b8a !important; border-left: 1px solid var(--border-1, #eaecec); }
.th-gold    { color: var(--yellow-80, #a68309) !important; border-left: 1px solid var(--border-1, #eaecec); }
.th-silver  { color: #78787a !important; border-left: 1px solid var(--border-1, #eaecec); }
.th-bronze  { color: #9c5e2b !important; border-left: 1px solid var(--border-1, #eaecec); }
.th-srp     { color: var(--fg-2, #575e5f) !important; border-left: 1px solid var(--border-1, #eaecec); }
.th-pds     { border-left: 2px solid var(--border-1, #eaecec); }

/* Price cells — centered + left borders matching headers */
.td-msrp    { border-left: 2px solid var(--border-1, #eaecec); }
.price-diamond { color: #1a6b8a; font-weight: 600; border-left: 1px solid var(--border-1, #eaecec); }
.price-gold    { color: var(--yellow-80, #a68309); font-weight: 600; border-left: 1px solid var(--border-1, #eaecec); }
.price-silver  { color: #78787a; font-weight: 600; border-left: 1px solid var(--border-1, #eaecec); }
.price-bronze  { color: #9c5e2b; font-weight: 600; border-left: 1px solid var(--border-1, #eaecec); }
.price-srp     { color: var(--fg-2, #575e5f); font-weight: 500; border-left: 1px solid var(--border-1, #eaecec); }
.td-pds        { border-left: 2px solid var(--border-1, #eaecec); }

/* "Rp" prefix label inside price cells */
.pl-rp { font-size: 9px; font-weight: 400; color: var(--fg-3, #868b8c); margin-right: 1px; }

/* Muted dash for zero/falsy prices */
.pl-muted { color: var(--fg-3, #868b8c); }

/* Consumables table */
table.consm-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 1060px; }
table.consm-table th {
  text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--fg-3, #868b8c);
  padding: 8px 10px; background: var(--black-5, #f8f8f8);
  border-bottom: 1px solid var(--border-1, #eaecec); white-space: nowrap;
}
table.consm-table th.l { text-align: left; }
table.consm-table td {
  padding: 10px 10px; border-bottom: 1px solid var(--black-5, #f8f8f8);
  vertical-align: middle;
}
table.consm-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.consm-table td.c { text-align: center; font-variant-numeric: tabular-nums; }
table.consm-table tr:last-child td { border-bottom: none; }
table.consm-table tr.consm-item-row { cursor: pointer; }
table.consm-table tr.consm-item-row:hover td { background: var(--maroon-5, #fbefef); }
table.consm-table tr.consm-expand-row td { padding: 0; background: var(--black-5, #f8f8f8); }

.consm-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0;
  transition: transform .15s;
}
.consm-chevron .ico {
  font-family: "Material Icons Outlined"; font-size: 16px;
  font-style: normal; font-weight: normal; line-height: 1;
  color: var(--fg-3, #868b8c);
  display: inline-block; transition: transform .15s;
}
.consm-chevron.open .ico { transform: rotate(90deg); }
.consm-main { display: flex; align-items: center; gap: 8px; }
.consm-brand-badge {
  display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 0.4px;
  padding: 2px 6px; border-radius: 3px; background: var(--black-10, #eaecec);
  color: var(--fg-2, #575e5f); white-space: nowrap;
}
.consm-price-summary { font-size: 11px; color: var(--fg-3, #868b8c); }

/* Expanded qty-band sub-table */
.consm-sub-wrap { padding: 0 0 0 40px; }
table.consm-sub { width: 100%; border-collapse: collapse; font-size: 11px; }
table.consm-sub th {
  text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--fg-3, #868b8c);
  padding: 6px 10px; border-bottom: 1px solid var(--border-1, #eaecec);
  white-space: nowrap; background: #eef0f1;
}
table.consm-sub th.l { text-align: left; }
table.consm-sub th.th-msrp { border-left: 2px solid var(--border-1, #eaecec); }
table.consm-sub td {
  padding: 7px 10px; border-bottom: 1px solid rgba(0,0,0,.04);
  text-align: center; font-variant-numeric: tabular-nums; color: var(--fg-1, #283133);
}
table.consm-sub td.l { text-align: left; }
table.consm-sub td.td-msrp { border-left: 2px solid var(--border-1, #eaecec); }
table.consm-sub tr:last-child td { border-bottom: none; }
table.consm-sub tr:hover td { background: rgba(255,255,255,0.6); }
.qty-band-label { font-weight: 600; color: var(--fg-1, #283133); white-space: nowrap; }
.qty-band-note { font-size: 9px; color: var(--fg-3, #868b8c); font-weight: 400; margin-left: 4px; }

/* Row action buttons in hw/consm tables */
.pl-act-btn {
  width: 26px; height: 26px; padding: 0; border: none; background: transparent;
  border-radius: 4px; color: var(--fg-3, #868b8c); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pl-act-btn:hover { background: var(--black-10, #eaecec); color: var(--fg-1, #283133); }
.pl-act-btn .ico {
  font-family: "Material Icons Outlined"; font-size: 16px;
  font-style: normal; font-weight: normal; line-height: 1;
}

/* PDS download button (table cell) */
.pl-pds-dl {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-decoration: none;
  color: var(--red-primary, #74131B);
  border: 1px solid color-mix(in srgb, var(--red-primary,#74131B) 40%, transparent);
  background: color-mix(in srgb, var(--red-primary,#74131B) 6%, transparent);
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.pl-pds-dl:hover {
  background: color-mix(in srgb, var(--red-primary,#74131B) 14%, transparent);
}
.pl-pds-dl .ico {
  font-family: "Material Icons Outlined"; font-size: 14px;
  font-style: normal; font-weight: normal; line-height: 1;
  text-transform: none; letter-spacing: normal;
}
.pl-pds-na {
  font-size: 10px; color: var(--fg-3, #aaa);
  font-weight: 500; letter-spacing: .3px;
}

/* PDS upload row inside item modal */
.pl-pds-upload-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--black-5, #f8f8f8);
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 6px;
}
.pl-pds-current {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--red-primary, #74131B);
  text-decoration: none; font-weight: 500;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-pds-current .ico, .pl-pds-none .ico {
  font-family: "Material Icons Outlined"; font-size: 16px;
  font-style: normal; font-weight: normal; line-height: 1;
  text-transform: none; letter-spacing: normal; flex-shrink: 0;
}
.pl-pds-none {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--fg-3, #aaa);
}
.pl-pds-pick-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  background: #fff; border: 1px solid var(--border-1, #d0d0d0);
  color: var(--fg-1, #283133);
  transition: border-color .12s, background .12s;
}
.pl-pds-pick-btn:hover { border-color: var(--red-primary,#74131B); }
.pl-pds-pick-btn .ico {
  font-family: "Material Icons Outlined"; font-size: 15px;
  font-style: normal; font-weight: normal; line-height: 1;
  text-transform: none; letter-spacing: normal;
}
.pl-pds-chosen {
  font-size: 11px; color: var(--fg-2, #5a5f60);
  font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}

/* ============================================================
   Quotation Form — modal-wide + in-CRM quotation machine
   ============================================================ */
.modal-wide { max-width: 760px !important; }

.qf-wrap { padding: 0 0 4px; }

.qf-qte-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--black-5, #f8f8f8); border-radius: 6px;
  padding: 8px 12px; margin-bottom: 14px;
  border: 1px solid var(--border-1, #eaecec);
}
.qf-qte-num { font-weight: 700; font-size: 13px; color: var(--fg-1, #283133); }
.qf-doc-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--red-primary, #74131B);
  text-decoration: none; font-weight: 600;
}
.qf-doc-link:hover { text-decoration: underline; }
.qf-doc-link .material-icons-outlined { font-size: 14px; }

.qf-meta-row {
  display: flex; gap: 12px; margin-bottom: 16px;
}
.qf-field { flex: 1; }
.qf-field label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--fg-2, #5a5f60); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 5px;
}
.qf-field input[type="date"] {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border-1, #eaecec);
  border-radius: 5px; font-size: 13px; font-family: inherit;
  background: var(--card-bg, #fff); color: var(--fg-1, #283133);
  outline: none;
}
.qf-field input[type="date"]:focus { border-color: var(--red-primary, #74131B); }

.qf-section-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fg-2, #5a5f60);
  margin-bottom: 8px;
}
.qf-add-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 10px; border: 1px solid var(--border-1, #eaecec);
  border-radius: 4px; background: var(--card-bg, #fff);
  font-size: 11px; font-weight: 600; color: var(--fg-2, #5a5f60);
  cursor: pointer; transition: border-color .12s, color .12s;
}
.qf-add-btn:hover { border-color: var(--red-primary, #74131B); color: var(--red-primary, #74131B); }
.qf-add-btn .material-icons-outlined { font-size: 14px; }

.qf-table-wrap { overflow-x: auto; margin-bottom: 12px; }
.qf-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.qf-table thead th {
  padding: 6px 8px; background: var(--black-5, #f8f8f8);
  border-bottom: 2px solid var(--border-1, #eaecec);
  font-weight: 700; font-size: 10px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--fg-2, #5a5f60);
  white-space: nowrap; text-align: left;
}
.qf-th-seq  { width: 32px; text-align: center !important; }
.qf-th-qty  { width: 60px; }
.qf-th-price { width: 140px; }
.qf-th-total { width: 130px; text-align: right !important; }
.qf-th-del  { width: 32px; }
.qf-item-row td { padding: 5px 6px; border-bottom: 1px solid var(--border-1, #eaecec); vertical-align: middle; }
.qf-seq { text-align: center; color: var(--fg-3, #868b8c); font-size: 11px; }
.qf-desc  { width: 100%; padding: 5px 7px; border: 1px solid var(--border-1, #eaecec); border-radius: 4px; font-size: 12px; font-family: inherit; outline: none; }
.qf-qty   { width: 52px; padding: 5px 7px; border: 1px solid var(--border-1, #eaecec); border-radius: 4px; font-size: 12px; font-family: inherit; outline: none; text-align: center; }
.qf-price { width: 120px; padding: 5px 7px; border: 1px solid var(--border-1, #eaecec); border-radius: 4px; font-size: 12px; font-family: inherit; outline: none; text-align: right; }
.qf-desc:focus, .qf-qty:focus, .qf-price:focus { border-color: var(--red-primary, #74131B); }
.qf-line-total { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-1, #283133); white-space: nowrap; }
.qf-del-btn {
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  border-radius: 3px; color: var(--fg-3, #868b8c); cursor: pointer; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.qf-del-btn:hover { background: #fee2e2; color: #dc2626; }

.qf-totals {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; margin-bottom: 14px;
}
.qf-total-row {
  display: flex; gap: 32px; font-size: 12px;
  color: var(--fg-2, #5a5f60);
}
.qf-total-row span:last-child {
  min-width: 160px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.qf-grand {
  font-size: 14px; font-weight: 700; color: var(--fg-1, #283133);
  padding-top: 6px; border-top: 2px solid var(--border-1, #eaecec);
  margin-top: 2px;
}

.qf-notes-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fg-2, #5a5f60); margin-bottom: 6px;
}
.qf-notes {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--border-1, #eaecec); border-radius: 5px;
  font-size: 12px; font-family: inherit; resize: vertical;
  outline: none; background: var(--card-bg, #fff); color: var(--fg-1, #283133);
}
.qf-notes:focus { border-color: var(--red-primary, #74131B); }

/* ============================================================
   Pricing Setup view
   ============================================================ */
.ps-wrap { padding: 24px 28px; max-width: none; width: 100%; box-sizing: border-box; }
.ps-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 10px; overflow: hidden;
}
/* Tab strip — sits above the active tab body. Mirrors the pricing-card visual
   weight from the formula tab so all 3 tabs feel equally first-class. */
.ps-tab-strip {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  margin-bottom: 18px;
}
.ps-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: transparent; border: none;
  font: inherit; color: var(--fg-2, #475569);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.ps-tab:hover { color: var(--fg-1, #283133); }
.ps-tab.active {
  color: var(--red-primary, #74131B);
  border-bottom-color: var(--red-primary, #74131B);
  font-weight: 600;
}
.ps-tab .material-icons-outlined {
  font-size: 16px;
  text-transform: none; letter-spacing: normal;
}
/* Costing tab — forex panel rows */
.ps-fx-grid {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 14px 18px;
}
.ps-fx-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
}
.ps-fx-ccy {
  display: inline-block; min-width: 38px;
  padding: 2px 8px; border-radius: 4px;
  background: var(--black-5, #f8f8f8);
  font-weight: 600; font-size: 11px;
  text-align: center;
}
.ps-fx-eq, .ps-fx-unit { color: var(--fg-3, #868b8c); font-size: 11px; }
.ps-input {
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 4px;
  padding: 5px 8px;
  font: inherit; font-size: 12px;
  background: #fff;
}
.ps-input.ps-num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-input:focus {
  outline: none;
  border-color: var(--red-primary, #74131B);
  box-shadow: 0 0 0 2px var(--red-50, #fdebec);
}
.ps-chip {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 999px;
  background: #fff;
  font: inherit; font-size: 11px; color: var(--fg-2, #475569);
  cursor: pointer;
}
.ps-chip:hover { background: var(--black-5, #f8f8f8); }
.ps-chip.active {
  background: var(--red-primary, #74131B);
  border-color: var(--red-primary, #74131B);
  color: #fff;
  font-weight: 600;
}
/* Costing + Pricing List tables — shared styles */
.ps-costing-table, .ps-pricinglist-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.ps-costing-table thead th, .ps-pricinglist-table thead th {
  text-align: right;
  padding: 8px 10px;
  font-size: 11px; font-weight: 600;
  color: var(--fg-3, #868b8c);
  border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
  white-space: nowrap;
}
.ps-costing-table thead th.l, .ps-pricinglist-table thead th.l { text-align: left; }
.ps-costing-table tbody td, .ps-pricinglist-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  vertical-align: middle;
}
.ps-num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ps-cost-computed { font-weight: 600; color: var(--fg-1, #283133); }
.ps-variance.good { color: #15a34a; }
.ps-variance.mid  { color: #d97706; }
.ps-variance.bad  { color: #b91c1c; font-weight: 600; }
.ps-row-save {
  padding: 4px 8px;
  display: inline-flex; align-items: center;
  margin-right: 4px;
}
.ps-lock-chip {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 3px;
  padding: 1px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}
/* Pricing List consumable expand: qty-band × tier matrix */
.ps-band-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ps-band-matrix thead th {
  text-align: right;
  padding: 6px 8px;
  font-size: 10px; font-weight: 600;
  color: var(--fg-3, #868b8c);
  border-bottom: 1px solid var(--border-1, #eaecec);
  white-space: nowrap;
}
.ps-band-matrix thead th.l { text-align: left; }
.ps-band-matrix tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ps-band-matrix tbody td.l { text-align: left; }
.ps-band-matrix tbody td.c { text-align: center; }
.ps-band-matrix tbody tr:last-child td { border-bottom: none; }
/* Per-row action buttons in Pricing List — match Pricelist's pl-act-btn */
.pl-act-btn.pl-act-danger:hover { color: var(--red-primary, #74131B); }
/* Tab strip inside ps-card — visual continuity with Pricelist's pl-tab-bar */
.ps-card .pl-tab-bar { background: var(--black-5, #f8f8f8); border-bottom: 1px solid var(--border-1, #eaecec); padding: 0 14px; }
.ps-card .pl-tab-bar .pl-tab { border-radius: 0; }
.ps-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-1, #eaecec);
  font-weight: 700; font-size: 13px; color: var(--fg-1, #283133);
  background: var(--black-5, #f8f8f8);
}
.ps-card-head .material-icons-outlined { font-size: 18px; color: var(--red-primary, #74131B); text-transform: none; letter-spacing: normal; }
.ps-card-sub { font-weight: 400; font-size: 11px; color: var(--fg-3, #868b8c); margin-left: 4px; }
.ps-note {
  padding: 10px 18px; font-size: 11px; color: var(--fg-3, #868b8c);
  background: var(--black-5, #f8f8f8); border-top: 1px solid var(--border-1, #eaecec);
  display: flex; align-items: center; gap: 5px;
}
.ps-note .material-icons-outlined { text-transform: none; letter-spacing: normal; }
.ps-tier-table { width: 100%; border-collapse: collapse; }
.ps-tier-table thead th {
  padding: 8px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fg-3, #868b8c);
  background: var(--black-5, #f8f8f8); text-align: left;
  border-bottom: 1px solid var(--border-1, #eaecec);
}
.ps-tier-table tbody tr:hover td { background: var(--black-5, #f8f8f8); }
.ps-band-table { width: 100%; border-collapse: collapse; }
.ps-band-table thead th {
  padding: 8px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fg-3, #868b8c);
  background: var(--black-5, #f8f8f8); text-align: left;
  border-bottom: 1px solid var(--border-1, #eaecec);
}
.ps-band-table tbody tr { border-bottom: 1px solid var(--border-1, #eaecec); }
.ps-band-table tbody tr:last-child { border-bottom: none; }
.ps-input {
  padding: 5px 8px; border: 1px solid var(--border-1, #eaecec); border-radius: 4px;
  font-size: 12px; font-family: inherit; outline: none;
}
.ps-input:focus { border-color: var(--red-primary, #74131B); }
.ps-del-btn {
  width: 22px; height: 22px; border: none; background: transparent;
  border-radius: 3px; cursor: pointer; font-size: 16px; color: var(--fg-3, #868b8c);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.ps-del-btn:hover { background: #fee2e2; color: #dc2626; }
.ps-add-band-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 12px 18px; padding: 6px 12px;
  border: 1px dashed var(--border-1, #eaecec); border-radius: 5px;
  background: transparent; font-size: 12px; color: var(--fg-2, #5a5f60);
  cursor: pointer; transition: border-color .12s, color .12s;
}
.ps-add-band-btn:hover { border-color: var(--red-primary, #74131B); color: var(--red-primary, #74131B); }
.ps-add-band-btn .material-icons-outlined { font-size: 15px; text-transform: none; letter-spacing: normal; }

/* ============================================================
   Sprint 2 — Pricing waterfall instrumentation
   Per-line margin chip on quote-builder rows; Margin Dashboard
   color-coded margin / discount cells.
   ============================================================ */
/* Per-line margin chip (quote builder) */
.pi-margin-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  cursor: help;
  white-space: nowrap;
}
.pi-margin-chip[data-state="empty"] { display: none; }
.pi-margin-chip[data-state="good"]  { background: #dcfce7; color: #15803d; }
.pi-margin-chip[data-state="mid"]   { background: #fef3c7; color: #92400e; }
.pi-margin-chip[data-state="bad"]   { background: #fee2e2; color: #b91c1c; }

/* Margin Dashboard layout */
.md-wrap { padding: 24px 28px; max-width: none; width: 100%; box-sizing: border-box; }
.md-note {
  background: #fef9c3; border: 1px solid #fde047; color: #92400e;
  padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 12px;
}
.md-empty {
  padding: 32px; text-align: center; color: var(--fg-3, #868b8c);
  font-size: 13px;
}
.md-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.md-kpi {
  background: #fff;
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.md-kpi-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3, #868b8c);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.md-kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-1, #283133);
  font-variant-numeric: tabular-nums;
}
.md-margin-good { color: #15803d; }
.md-margin-mid  { color: #d97706; }
.md-margin-bad  { color: #b91c1c; }

/* Margin Dashboard tables (reuses ps-card chrome from Pricing Setup) */
.md-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.md-table thead th {
  text-align: right;
  padding: 8px 10px;
  font-size: 11px; font-weight: 600;
  color: var(--fg-3, #868b8c);
  border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
  white-space: nowrap;
}
.md-table thead th.l { text-align: left; }
.md-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.md-table tbody td.l { text-align: left; }
.md-table tbody tr:hover td { background: var(--black-5, #f8f8f8); }
.md-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================================
   PHASE 1 — My Day · Activity Timeline · Task Card
   ============================================================================ */

/* My Day page shell */
.md-wrap { padding: 24px 28px; max-width: 1400px; }
.md-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.md-eyebrow { font-size: 11px; color: var(--fg-3, #868b8c); text-transform: uppercase; letter-spacing: .5px; }
.md-title { font-size: 26px; font-weight: 600; margin: 4px 0 0; color: var(--fg-1, #283133); }

.md-stats-row {
  display: flex; gap: 18px; align-items: center;
  background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px;
  padding: 14px 20px; margin-bottom: 18px;
}
.md-stat { display: flex; flex-direction: column; min-width: 80px; }
.md-stat-num { font-size: 22px; font-weight: 700; color: var(--fg-1, #283133); font-variant-numeric: tabular-nums; }
.md-stat-lbl { font-size: 11px; color: var(--fg-3, #868b8c); }
.md-stat-note { margin-left: auto; font-size: 11px; color: var(--fg-3, #868b8c); font-style: italic; }

.md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.md-card-wide { grid-column: 1 / -1; }
@media (max-width: 1024px) { .md-grid { grid-template-columns: 1fr; } }

.md-card { background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px; overflow: hidden; }
.md-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-1, #eaecec);
  font-weight: 600; font-size: 13px; background: var(--black-5, #f8f8f8);
}
.md-card-head .material-icons-outlined { font-size: 18px; }
.md-count {
  margin-left: auto; padding: 1px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-1, #eaecec);
  font-size: 11px; font-weight: 500; color: var(--fg-2, #475569);
}
.md-card-body { padding: 8px; max-height: 360px; overflow-y: auto; }
.md-empty-mini {
  padding: 24px 12px; text-align: center;
  font-size: 12px; color: var(--fg-3, #868b8c);
}

.md-stale-row, .md-wa-row {
  padding: 10px 12px; border-radius: 6px; cursor: pointer;
  margin-bottom: 4px;
  transition: background 100ms;
}
.md-stale-row:hover, .md-wa-row:hover { background: var(--black-5, #f8f8f8); }
.md-stale-name { font-size: 13px; }
.md-stale-meta { font-size: 11px; color: var(--fg-3, #868b8c); margin-top: 3px; }
.md-wa-msg { font-size: 12px; color: var(--fg-2, #475569); margin-top: 3px; line-height: 1.4; }

/* Phase 2026-05 — My Day · Today's Meetings (clickable rows open MoM dialog) */
.md-mtg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  margin-bottom: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.md-mtg-row:hover {
  background: var(--maroon-5, #fbefef);
  border-color: var(--maroon-10, #f3d4d4);
}
.md-mtg-time {
  font: 600 11px ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--black-5, #f8f8f8);
  padding: 4px 7px; border-radius: 4px;
  color: var(--fg-1, #283133);
  flex-shrink: 0; min-width: 50px; text-align: center;
}
.md-mtg-main { flex: 1; min-width: 0; font-size: 12px; }
.md-mtg-main b { font-weight: 600; color: var(--fg-1, #283133); }
.md-mtg-notes {
  font-size: 11px; color: var(--fg-3, #868b8c);
  margin-top: 2px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.md-mtg-right { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.md-mtg-outcome {
  font: 600 9px var(--font-primary, "Montserrat", sans-serif);
  text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 6px; border-radius: 3px;
}
.md-mtg-outcome.scheduled { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
.md-mtg-outcome.conducted { background: var(--green-10, #e6fbef); color: var(--green-80, #069744); }

/* Phase 2026-05 — My Day · My Pipeline rows (mini Pipeline cards) */
.md-pipe-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  margin-bottom: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.md-pipe-row:hover {
  background: var(--maroon-5, #fbefef);
  border-color: var(--maroon-10, #f3d4d4);
}
.md-pipe-main { flex: 1; min-width: 0; font-size: 12px; }
.md-pipe-main b { font-weight: 600; color: var(--fg-1, #283133); }
.md-pipe-qte {
  font: 600 10px ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--red-primary, #74131B);
  background: var(--maroon-5, #fbefef);
  padding: 1px 5px; border-radius: 3px;
  margin-left: 4px;
}
.md-pipe-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-size: 11px; color: var(--fg-3, #868b8c);
}
.md-pipe-anum { display: inline-flex; gap: 1px; }
.md-anum-pip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff;
  color: var(--fg-3, #ccc);
  border: 1px solid var(--border-1, #eaecec);
  font-weight: 700; font-size: 8px;
}
.md-anum-pip.on {
  background: var(--red-primary, #74131B);
  color: #fff;
  border-color: var(--red-primary, #74131B);
}
.md-pipe-stage {
  font: 600 9px var(--font-primary, "Montserrat", sans-serif);
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--black-10, #eaecec);
  color: var(--fg-2, #475569);
  padding: 2px 6px; border-radius: 3px;
}
.md-pipe-amount {
  font: 600 13px var(--font-primary, "Montserrat", sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--red-primary, #74131B);
  flex-shrink: 0;
}

/* Reusable timeline */
.crm-timeline-empty { text-align: center; padding: 32px 16px; color: var(--fg-3, #868b8c); }
.crm-timeline-empty .ico { display: block; margin: 0 auto 8px; }
.crm-day-group { margin-bottom: 18px; }
.crm-day-head {
  font-size: 11px; font-weight: 600; color: var(--fg-3, #868b8c);
  text-transform: uppercase; letter-spacing: .5px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  margin-bottom: 6px;
}
.crm-act-row {
  display: flex; gap: 10px; padding: 10px 12px;
  border-radius: 6px;
}
.crm-act-row.dense { padding: 6px 12px; }
.crm-act-row:hover { background: var(--black-5, #f8f8f8); }
.crm-act-icon {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.crm-act-row.dense .crm-act-icon { width: 24px; height: 24px; }
.crm-act-icon .material-icons-outlined { font-size: 18px; }
.crm-act-row.dense .crm-act-icon .material-icons-outlined { font-size: 14px; }
.crm-act-body { flex: 1; min-width: 0; }
.crm-act-line1 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13px; color: var(--fg-1, #283133);
}
.crm-act-line1 b { font-weight: 500; }
.crm-act-time { font-size: 11px; color: var(--fg-3, #868b8c); flex-shrink: 0; }
.crm-act-body-text {
  font-size: 12px; color: var(--fg-2, #475569);
  margin-top: 3px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}
.crm-act-meta { font-size: 11px; color: var(--fg-3, #868b8c); margin-top: 3px; }

/* Task card */
.crm-task-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border-1, #eaecec); border-radius: 6px;
  background: #fff;
  margin-bottom: 6px;
  transition: border-color 100ms, box-shadow 100ms;
}
.crm-task-card:hover { border-color: var(--fg-3, #94a3b8); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.crm-task-card.prio-urgent { border-left: 3px solid #b91c1c; }
.crm-task-card.prio-high   { border-left: 3px solid #d97706; }
.crm-task-check {
  background: transparent; border: none; cursor: pointer;
  padding: 0; color: var(--fg-3, #868b8c);
  flex-shrink: 0;
  margin-top: 1px;
}
.crm-task-check:hover { color: var(--red-primary, #74131B); }
.crm-task-check .material-icons-outlined { font-size: 20px; }
.crm-task-body { flex: 1; min-width: 0; }
.crm-task-title { font-size: 13px; color: var(--fg-1, #283133); font-weight: 500; }
.crm-task-title.done { text-decoration: line-through; color: var(--fg-3, #868b8c); }
.crm-task-links { font-size: 11px; color: var(--fg-2, #475569); margin-top: 3px; }
.crm-task-foot {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 11px; margin-top: 4px;
  color: var(--fg-3, #868b8c);
}
.crm-due-overdue { color: #b91c1c; font-weight: 500; }
.crm-due-today   { color: #74131B; font-weight: 500; }
.crm-due-soon    { color: #d97706; }
.crm-due-muted   { color: var(--fg-3, #868b8c); }
.crm-task-actions { flex-shrink: 0; }
.crm-icon-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 4px; color: var(--fg-3, #868b8c); border-radius: 4px;
}
.crm-icon-btn:hover { background: var(--black-5, #f8f8f8); color: var(--fg-1, #283133); }
.crm-icon-btn .material-icons-outlined { font-size: 16px; }

/* Placeholder shells (Forecast/Assets/Audit Log) */
.placeholder-wrap { padding: 24px 28px; max-width: 900px; }
.placeholder-card {
  margin-top: 24px;
  background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 10px;
  padding: 40px 24px; text-align: center;
}
.placeholder-card h3 { margin: 12px 0 6px; font-weight: 600; color: var(--fg-1, #283133); }
.placeholder-card p { color: var(--fg-2, #475569); font-size: 13px; line-height: 1.6; margin: 0; }
.placeholder-card a { color: var(--red-primary, #74131B); cursor: pointer; text-decoration: underline; }

/* WhatsApp thread on Account/WhatsApp tab — chat-app-like bubble layout */
.wa-thread {
  max-height: 560px; overflow-y: auto;
  padding: 16px 8px;
  background: #efe6db; /* WA-ish neutral */
  border-radius: 6px;
}
.wa-bubble-row { display: flex; margin-bottom: 8px; }
.wa-bubble-row.in { justify-content: flex-start; }
.wa-bubble-row.out { justify-content: flex-end; }
.wa-bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
  font-size: 13px; line-height: 1.45;
}
.wa-bubble-row.out .wa-bubble { background: #d9fdd2; }   /* WA pale-green for self */
.wa-bubble-meta {
  font-size: 11px; color: var(--fg-3, #868b8c);
  margin-bottom: 3px;
}
.wa-bubble-body { color: var(--fg-1, #283133); white-space: pre-wrap; word-break: break-word; }

/* ============================================================================
   PHASE 1 — FORECAST view (Sales/Forecast)
   ============================================================================ */
.fc-wrap { padding: 24px 28px; max-width: 1600px; }
.fc-page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; flex-wrap: wrap; gap: 16px; }
.fc-controls { display: flex; gap: 10px; }

.fc-rep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.fc-rep-card {
  background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px;
  overflow: hidden;
}
.fc-rep-card.fc-totals {
  border-color: var(--red-primary, #74131B);
  box-shadow: 0 0 0 1px var(--red-primary, #74131B);
}
.fc-rep-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px; border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
}
.fc-rep-name { font-size: 14px; font-weight: 600; color: var(--fg-1, #283133); }
.fc-rep-quota { font-size: 11px; color: var(--fg-3, #868b8c); }

.fc-rep-rows { padding: 8px 16px; }
.fc-row {
  display: grid;
  grid-template-columns: 1fr auto 32px;
  gap: 8px; align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border-1, #f1f1f1);
}
.fc-row:last-child { border-bottom: none; }
.fc-row > span:nth-child(2) { font-variant-numeric: tabular-nums; color: var(--fg-1); font-weight: 500; }
.fc-count {
  background: var(--black-5, #f8f8f8);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px; color: var(--fg-3, #868b8c);
  text-align: center;
  min-width: 20px;
}
.fc-cat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--fg-2, #475569);
}
.fc-cat-commit { color: #b91c1c; font-weight: 600; }
.fc-cat-best { color: #d97706; font-weight: 600; }
.fc-cat-pipeline { color: #0891b2; font-weight: 500; }
.fc-cat-won { color: #15a34a; font-weight: 600; }

.fc-rep-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  background: var(--black-3, #fafafa);
  border-top: 1px solid var(--border-1, #eaecec);
}
.fc-foot-label { font-size: 10px; color: var(--fg-3, #868b8c); text-transform: uppercase; letter-spacing: .5px; }
.fc-foot-value { font-size: 16px; font-weight: 700; color: var(--fg-1, #283133); font-variant-numeric: tabular-nums; }
.fc-foot-pct {
  font-size: 12px; color: var(--fg-2, #475569);
  padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border-1);
}
.fc-pct-good { color: #15a34a; border-color: #15a34a40; }
.fc-pct-mid  { color: #d97706; border-color: #d9770640; }
.fc-pct-bad  { color: #b91c1c; border-color: #b91c1c40; }

/* Deal table */
.fc-deals-section {
  background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px;
  padding: 18px 22px;
}
.fc-section-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.fc-section-sub { margin: 0 0 14px; font-size: 12px; color: var(--fg-3, #868b8c); }
.fc-deal-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.fc-deal-table thead th {
  text-align: right; padding: 8px 10px;
  font-size: 11px; font-weight: 600; color: var(--fg-3, #868b8c);
  border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
  white-space: nowrap;
}
.fc-deal-table thead th.l { text-align: left; }
.fc-deal-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fc-deal-table tbody td.l { text-align: left; }
.fc-deal-table tbody tr:hover td { background: var(--black-5, #f8f8f8); }
.fc-deal-table tbody tr.fc-closed { background: #f0fdf4; }
.fc-deal-table tbody tr.fc-closed:hover td { background: #dcfce7; }
.fc-cat-select {
  padding: 3px 6px;
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 4px;
  font: inherit; font-size: 12px;
  background: #fff;
}
.fc-cat-select:focus { outline: none; border-color: var(--red-primary, #74131B); }

/* Stale-deal chip on Pipeline kanban cards (matches My Day's amber/red
   semantic for deals decaying past their stage-specific threshold). */
.tudi-chip.stale-chip {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-weight: 600;
}
.tudi-chip.stale-chip .material-icons-outlined { color: #92400e; }

/* ============================================================================
   PHASE 4 — ASSETS view (per-serial register)
   ============================================================================ */
.as-wrap { padding: 24px 28px; max-width: 1600px; }
.as-page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; gap: 16px; }
.as-stats-row {
  display: flex; gap: 24px; align-items: center;
  background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px;
  padding: 14px 22px; margin-bottom: 18px;
}
.as-table-wrap {
  background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px;
  margin-top: 14px;
}
.as-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.as-table thead th {
  text-align: left; padding: 10px 12px;
  font-size: 11px; font-weight: 600; color: var(--fg-3, #868b8c);
  border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
  text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap;
}
.as-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  vertical-align: middle;
}
.as-table tbody tr:hover td { background: var(--black-5, #f8f8f8); }
.as-table tbody tr:last-child td { border-bottom: none; }
.as-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.as-chip.good      { background: #dcfce7; color: #15803d; }
.as-chip.mid       { background: #fef3c7; color: #92400e; }
.as-chip.mid-soft  { background: #fef9c3; color: #854d0e; }
.as-chip.bad       { background: #fee2e2; color: #b91c1c; }
.as-chip.muted     { background: var(--black-5, #f8f8f8); color: var(--fg-3, #868b8c); }
.as-chip-btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 999px;
  background: #fff;
  font: inherit; font-size: 11px; color: var(--fg-2, #475569);
  cursor: pointer;
}
.as-chip-btn:hover { background: var(--black-5, #f8f8f8); }
.as-chip-btn.active {
  background: var(--red-primary, #74131B);
  border-color: var(--red-primary, #74131B);
  color: #fff; font-weight: 600;
}

/* ============================================================================
   PHASE 5 — Document Templates editor
   ============================================================================ */
.tpl-wrap { padding: 24px 28px; max-width: 1400px; }
.tpl-split { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1024px) { .tpl-split { grid-template-columns: 1fr; } }
.tpl-list { background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px; padding: 8px; max-height: 70vh; overflow-y: auto; }
.tpl-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: transparent; text-align: left; cursor: pointer; border-radius: 6px; font-size: 13px; }
.tpl-item:hover { background: var(--black-5, #f8f8f8); }
.tpl-item.active { background: #fdebec; color: var(--red-primary, #74131B); font-weight: 500; }
.tpl-kind { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: #fef3c7; color: #92400e; }
.tpl-kind.tpl-kind-spk { background: #dcfce7; color: #15803d; }
.tpl-kind.tpl-kind-msa { background: #dbeafe; color: #1e40af; }
.tpl-kind.tpl-kind-poc { background: #f3e8ff; color: #6b21a8; }
.tpl-kind.tpl-kind-cover { background: #fce7f3; color: #9f1239; }
.tpl-name { flex: 1; }
.tpl-lang { font-size: 10px; color: var(--fg-3); padding: 1px 5px; border: 1px solid var(--border-1); border-radius: 3px; }

.tpl-main { background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px; padding: 18px 22px; }
.tpl-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.tpl-help { font-size: 11px; color: var(--fg-3, #868b8c); padding: 8px 12px; background: var(--black-3, #fafafa); border-radius: 4px; line-height: 1.6; margin-bottom: 12px; }
.tpl-help code { background: #fff; padding: 1px 4px; border-radius: 3px; border: 1px solid var(--border-1, #eaecec); font-size: 11px; }
.tpl-body { width: 100%; min-height: 400px; padding: 14px; border: 1px solid var(--border-1, #eaecec); border-radius: 6px; font: inherit; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; line-height: 1.6; resize: vertical; }
.tpl-body:focus { outline: none; border-color: var(--red-primary, #74131B); }
.tpl-preview { margin-top: 18px; padding: 16px; background: var(--black-3, #fafafa); border-radius: 6px; }
.tpl-preview-title { font-size: 11px; font-weight: 600; color: var(--fg-3, #868b8c); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.tpl-preview pre { margin: 0; font-family: inherit; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--fg-1); }

/* ============================================================================
   PHASE 3 — Connections settings
   ============================================================================ */
.conn-wrap { padding: 24px 28px; max-width: 900px; }
.conn-card { background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px; margin-bottom: 18px; overflow: hidden; }
.conn-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-1, #eaecec); background: var(--black-5, #f8f8f8); }
.conn-card-head .material-icons-outlined { font-size: 24px; flex-shrink: 0; }
.conn-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg-1); }
.conn-card-head p { margin: 2px 0 0; font-size: 12px; color: var(--fg-2); }
.conn-card-body { padding: 16px 20px; }
.conn-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.conn-row label { font-size: 12px; color: var(--fg-2); font-weight: 500; }
.conn-row input { width: 100%; }
.conn-meta { font-size: 11px; color: var(--fg-3, #868b8c); margin-top: 4px; }
.conn-meta code { background: var(--black-5); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.conn-badge { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.conn-badge.conn-on  { background: #dcfce7; color: #15803d; }
.conn-badge.conn-off { background: #fee2e2; color: #b91c1c; }

/* Audit Log view — uses the timeline component */
.al-wrap { padding: 24px 28px; max-width: 1100px; }
.al-wrap #alTimeline {
  background: #fff; border: 1px solid var(--border-1, #eaecec); border-radius: 8px;
  padding: 14px 18px; max-height: 75vh; overflow-y: auto;
}

/* ============================================================
   Sprint 3 (v4) — Per-family partner-tier ladder UI
   ============================================================ */
/* Sub-tab strip inside the Pricing Formula card (Hardware / Consumables / Own Products) */
.ps-subtab-strip {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
  padding: 0 14px;
}
.ps-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: transparent; border: none;
  font: inherit; font-size: 12px; color: var(--fg-2, #475569);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.ps-subtab:hover { color: var(--fg-1, #283133); }
.ps-subtab.active {
  color: var(--red-primary, #74131B);
  border-bottom-color: var(--red-primary, #74131B);
  font-weight: 600;
  background: #fff;
}
.ps-subtab .material-icons-outlined { font-size: 14px; text-transform: none; letter-spacing: normal; }

.ps-family-help {
  padding: 10px 14px 6px;
  font-size: 11px;
  color: var(--fg-2, #475569);
  font-style: italic;
  border-bottom: 1px solid var(--border-1, #eaecec);
  margin-bottom: 6px;
}

/* NDA badge next to each tier name */
.ps-tier-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 6px;
  cursor: help;
}
.ps-tier-badge .material-icons-outlined { font-size: 11px; text-transform: none; letter-spacing: normal; }
.ps-tier-badge-open { background: #dcfce7; color: #15803d; }
.ps-tier-badge-nda  { background: #fef3c7; color: #92400e; }

/* Margin floor row below the tier table */
.ps-floor-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-1, #eaecec);
  background: var(--black-5, #f8f8f8);
  font-size: 12px;
  flex-wrap: wrap;
}
.ps-floor-label { font-weight: 600; color: var(--fg-1, #283133); }
.ps-floor-help  { color: var(--fg-3, #868b8c); font-size: 11px; margin-left: auto; }

/* Family chip in Pricing List tab — small <select> per row */
.ps-family-chip {
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border: 1px solid var(--border-1, #eaecec);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-align-last: center;
}
.ps-family-chip:hover { border-color: var(--fg-2, #475569); }
.ps-family-chip:focus { outline: 2px solid var(--red-primary, #74131B); outline-offset: 1px; }
.ps-family-chip.ps-family-hardware    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.ps-family-chip.ps-family-consumable  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ps-family-chip.ps-family-ownProduct  { background: #fef3c7; color: #92400e; border-color: #fde047; font-weight: 600; }

/* Below-floor indicator on per-line margin chip */
.pi-margin-chip[data-state="bad"]::after {
  content: ' 🔒';
  margin-left: 2px;
  font-size: 9px;
}

/* Quotation banner on sale cards (Companies > Sales tab) */
.sale-quote-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 6px 0 10px;
  background: var(--maroon-5, #fbefef);
  border: 1px solid var(--red-primary, #74131B);
  border-radius: 4px;
  font-size: 12px;
  color: var(--fg-1, #283133);
}
.sale-quote-banner .qte-num {
  font: 600 12px ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--red-primary, #74131B);
  letter-spacing: .3px;
}
.sale-quote-banner .qte-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--red-primary, #74131B);
  text-decoration: none;
  font-weight: 500;
  font-size: 11px;
}
.sale-quote-banner .qte-link:hover { text-decoration: underline; }
.sale-quote-banner button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  height: 24px;
  font-size: 11px;
  cursor: pointer;
}

/* Quotation card — validity chip + status emphasis */
.quotation-card { border-left: 3px solid var(--yellow-50, #f6c204); }
.quotation-card .status-badge.pending { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
.quotation-card .status-badge.draft   { background: var(--black-10, #eaecec); color: var(--fg-2, #53595b); }
.quotation-card .status-badge.sent    { background: #d4f0fa; color: #1a7a9b; }
.quotation-card .status-badge.lost    { background: var(--red-10, #ffece0); color: var(--red-primary, #74131B); }

.quote-validity {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 3px;
  font: 600 10px var(--font-primary, 'Montserrat', sans-serif);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.quote-validity.fresh    { background: var(--green-10, #e6fbef); color: var(--green-80, #069744); }
.quote-validity.expiring-soon { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
.quote-validity.expired  { background: var(--red-10, #ffece0); color: var(--red-primary, #74131B); }

.icon-btn-success { color: var(--green-80, #069744); }
.icon-btn-success:hover { background: var(--green-10, #e6fbef); color: var(--green-50, #15d667); }
.icon-btn-info { color: #1a7a9b; }
.icon-btn-info:hover { background: #d4f0fa; color: #28b8e2; }

/* Customer PO pill on Invoice cards (Companies > Invoices tab) */
.po-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 4px;
  font: 600 11px ui-monospace, "SF Mono", Menlo, monospace;
  background: #ede9fe;
  color: #5b21b6;
  letter-spacing: .2px;
}

/* ============================================================
   === Price List (4-tab Products view) ===
   Scope: all view styles under #viewProducts, all modal styles
   under .pl-form. Modal width override uses .modal.pl-modal-active
   added by JS so existing modals stay intact.
   ============================================================ */

#viewProducts { padding: 16px 18px 28px; overflow-y: auto; }

#viewProducts .pl-card {
  background: #fff;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 8px;
  overflow: hidden;
}

/* Tabs --------------------------------------------------------- */
#viewProducts .pl-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-1, var(--border));
  background: var(--black-5, #f8f8f8);
}
#viewProducts .pl-tab {
  padding: 12px 16px;
  font: 500 12px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, background .15s;
}
#viewProducts .pl-tab:hover {
  color: var(--fg-1, var(--text));
  background: rgba(255,255,255,.5);
}
#viewProducts .pl-tab.active {
  color: var(--red-primary, #74131B);
  border-bottom-color: var(--red-primary, #74131B);
  font-weight: 600;
  background: #fff;
}
#viewProducts .pl-tab .ico { font-size: 15px; }
#viewProducts .pl-tab .count {
  font-size: 10px;
  background: var(--black-10, var(--border));
  color: var(--fg-2, var(--text-secondary));
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
#viewProducts .pl-tab.active .count {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
}

/* Toolbar ----------------------------------------------------- */
#viewProducts .pl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-1, var(--border));
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
}
#viewProducts .pl-toolbar-left,
#viewProducts .pl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#viewProducts .pl-tb-btn-primary {
  background: var(--red-button, #881720);
  border: none;
  border-radius: 6px;
  padding: 0 14px;
  height: 32px;
  font: 600 12px var(--font-primary, 'Montserrat', sans-serif);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#viewProducts .pl-tb-btn-primary:hover { background: var(--red-primary, #74131B); }
#viewProducts .pl-tb-btn-ghost {
  background: #fff;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 6px;
  padding: 0 12px;
  height: 32px;
  font: 500 12px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#viewProducts .pl-tb-btn-ghost:hover {
  background: var(--black-5, #f8f8f8);
  color: var(--fg-1, var(--text));
}
#viewProducts .pl-tb-sep {
  width: 1px;
  height: 22px;
  background: var(--border-1, var(--border));
  margin: 0 4px;
}
#viewProducts .filt-chip {
  font: 500 11px var(--font-primary, 'Montserrat', sans-serif);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-1, var(--border));
  background: #fff;
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
}
#viewProducts .filt-chip:hover { background: var(--black-5, #f8f8f8); }
#viewProducts .filt-chip.on {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  border-color: var(--red-primary, #74131B);
}
#viewProducts .filt-chip .ico { font-size: 13px; }
#viewProducts .pl-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 32px;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 6px;
  background: #fff;
  min-width: 220px;
}
#viewProducts .pl-search:focus-within { border-color: var(--red-primary, #74131B); }
#viewProducts .pl-search .ico { color: var(--fg-3, var(--text-secondary)); font-size: 16px; }
#viewProducts .pl-search input {
  border: none;
  outline: none;
  flex: 1;
  font: 400 12px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-1, var(--text));
  background: transparent;
  min-width: 0;
}
#viewProducts .meta-count {
  font-size: 11px;
  color: var(--fg-3, var(--text-secondary));
  margin-right: 4px;
}
#viewProducts .pl-cat-popover,
#viewProducts .pl-cols-popover {
  position: absolute;
  top: 46px;
  background: #fff;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  padding: 6px;
  z-index: 30;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#viewProducts .pl-cat-popover button,
#viewProducts .pl-cols-popover label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  font: 500 11px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-2, var(--text-secondary));
  background: none;
  border: none;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
}
#viewProducts .pl-cat-popover button:hover,
#viewProducts .pl-cols-popover label:hover { background: var(--maroon-5, #fbefef); color: var(--red-primary, #74131B); }
#viewProducts .pl-cat-popover button .swatch {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
#viewProducts .pl-cols-popover input { margin-right: 4px; }

/* Table ------------------------------------------------------- */
#viewProducts .pl-table-wrap { overflow-x: auto; }
#viewProducts table.items {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 1100px;
}
#viewProducts table.items th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fg-3, var(--text-secondary));
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-1, var(--border));
  background: var(--black-5, #f8f8f8);
  white-space: nowrap;
}
#viewProducts table.items th.r { text-align: right; }
#viewProducts table.items td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--black-5, #f8f8f8);
  font-weight: 400;
  vertical-align: middle;
  color: var(--fg-1, var(--text));
}
#viewProducts table.items td.r {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#viewProducts table.items tr:hover td { background: var(--maroon-5, #fbefef); }
#viewProducts table.items tr:last-child td { border-bottom: none; }

/* Cell content ------------------------------------------------ */
#viewProducts .cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--fg-2, var(--text-secondary));
}
#viewProducts .cat .swatch {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
#viewProducts .sku {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--fg-2, var(--text-secondary));
}
#viewProducts .item-name {
  font-weight: 500;
  color: var(--fg-1, var(--text));
}
#viewProducts .item-name .brand {
  font-size: 11px;
  color: var(--fg-3, var(--text-secondary));
  font-weight: 400;
  display: block;
  margin-top: 1px;
}

#viewProducts .margin-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
#viewProducts .margin-cell .ico { font-size: 13px; }
#viewProducts .margin-good { color: var(--green-80, #069744); font-weight: 600; }
#viewProducts .margin-mid  { color: var(--yellow-80, #a68309); font-weight: 600; }
#viewProducts .margin-bad  { color: var(--red-50, #e16216); font-weight: 600; }
#viewProducts .margin-empty { color: var(--fg-3, var(--text-secondary)); font-weight: 400; }

#viewProducts .stock-chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
#viewProducts .stock-avail { background: var(--green-10, #e6fbef); color: var(--green-80, #069744); }
#viewProducts .stock-low   { background: var(--yellow-10, #fff7db); color: var(--yellow-80, #a68309); }
#viewProducts .stock-out   { background: var(--red-10, #ffece0); color: var(--red-primary, #74131B); }
#viewProducts .stock-disc  { background: var(--black-10, var(--border)); color: var(--fg-2, var(--text-secondary)); }

#viewProducts .row-actions { display: inline-flex; gap: 2px; }
#viewProducts .row-actions button {
  width: 26px; height: 26px;
  padding: 0; border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--fg-3, var(--text-secondary));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#viewProducts .row-actions button:hover {
  background: var(--black-10, var(--border));
  color: var(--fg-1, var(--text));
}
#viewProducts .row-actions button .ico { font-size: 16px; }

#viewProducts .pl-empty {
  text-align: center;
  padding: 40px 14px;
  color: var(--fg-3, var(--text-secondary));
  font-size: 12px;
}

/* Pagination -------------------------------------------------- */
#viewProducts .pl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border-1, var(--border));
  background: var(--black-5, #f8f8f8);
  font-size: 11px;
  color: var(--fg-2, var(--text-secondary));
  flex-wrap: wrap;
  gap: 8px;
}
#viewProducts .pager { display: inline-flex; align-items: center; gap: 4px; }
#viewProducts .pager .pg {
  width: 28px; height: 28px;
  border: 1px solid var(--border-1, var(--border));
  background: #fff;
  border-radius: 4px;
  font: 500 11px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#viewProducts .pager .pg:hover { background: var(--black-5, #f8f8f8); }
#viewProducts .pager .pg.active {
  background: var(--red-primary, #74131B);
  color: #fff;
  border-color: var(--red-primary, #74131B);
}
#viewProducts .pager .pg[disabled] { opacity: .35; cursor: default; }
#viewProducts .pager .pg .ico { font-size: 16px; }
#viewProducts .pager .pg-ellipsis {
  padding: 0 4px;
  color: var(--fg-3, var(--text-secondary));
}

/* Variance flag ---------------------------------------------- */
#viewProducts .var-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 3px;
  font: 600 10px var(--font-primary, 'Montserrat', sans-serif);
  background: var(--red-10, #ffece0);
  color: var(--red-primary, #74131B);
  letter-spacing: .3px;
}
#viewProducts .var-ok {
  display: inline-flex;
  font-size: 10px;
  color: var(--fg-3, var(--text-secondary));
}

/* ============================================================
   === Price List Item Modal (.pl-form) ===
   Scoped under .pl-form so existing modals are untouched.
   .modal.pl-modal-active is added to the parent .modal element
   when a pl-form modal opens — widens it and zeroes body padding.
   ============================================================ */

.modal.pl-modal-active { max-width: 720px; }
.modal.pl-modal-active .modal-header { display: none; }
.modal.pl-modal-active .modal-body { padding: 0; }

.pl-form { padding: 0; font: 400 13px var(--font-primary, 'Montserrat', sans-serif); }
.pl-form * { box-sizing: border-box; }

.pl-form .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border-1, var(--border));
  gap: 12px;
}
.pl-form .modal-head-left {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.pl-form .head-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pl-form .head-icon .ico { font-size: 20px; }
.pl-form .modal-head h2 {
  font-size: 16px; font-weight: 600;
  margin: 0; line-height: 1.2;
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-1, var(--text));
}
.pl-form .draft-pill {
  font: 700 9px var(--font-primary, 'Montserrat', sans-serif);
  letter-spacing: .6px;
  text-transform: uppercase;
  background: var(--yellow-10, #fff7db);
  color: var(--yellow-80, #a68309);
  padding: 2px 7px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pl-form .draft-pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow-50, #f6c204);
}
.pl-form .modal-sub {
  font-size: 11px;
  color: var(--fg-3, var(--text-secondary));
  margin-top: 3px;
  font-weight: 400;
  line-height: 1.4;
}
.pl-form .modal-head .close {
  width: 28px; height: 28px;
  border: none; background: transparent;
  border-radius: 4px;
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pl-form .modal-head .close:hover {
  background: var(--black-10, var(--border));
  color: var(--fg-1, var(--text));
}
.pl-form .modal-head .close .ico { font-size: 18px; }

.pl-form .form-section {
  padding: 14px 20px 16px;
  border-bottom: 1px dashed var(--border-1, var(--border));
}
.pl-form .form-section:first-of-type { padding-top: 16px; }
.pl-form .form-section:last-of-type { border-bottom: none; padding-bottom: 18px; }
.pl-form .section-label {
  font: 700 10px var(--font-primary, 'Montserrat', sans-serif);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--fg-3, var(--text-secondary));
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pl-form .section-label .ico {
  font-size: 13px;
  color: var(--fg-3, var(--text-secondary));
}

.pl-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.pl-form .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.pl-form .field.full { grid-column: 1 / -1; }
.pl-form .field > label {
  font: 500 11px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-2, var(--text-secondary));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.pl-form .field > label .req { color: var(--red-primary, #74131B); font-weight: 700; }
.pl-form .field > label .hint {
  font-weight: 400;
  color: var(--fg-3, var(--text-secondary));
  margin-left: auto;
  font-size: 10px;
}
.pl-form .field > input,
.pl-form .field > select,
.pl-form .field > textarea {
  height: 34px;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 5px;
  padding: 0 11px;
  font: 400 13px var(--font-primary, 'Montserrat', sans-serif);
  background: #fff;
  color: var(--fg-1, var(--text));
  min-width: 0;
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.pl-form .field > textarea {
  height: 72px;
  padding: 8px 11px;
  resize: vertical;
  line-height: 1.45;
}
.pl-form .field > select {
  padding-right: 28px;
  -webkit-appearance: none;
  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'><path fill='%2378787a' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.pl-form .field > input:focus,
.pl-form .field > select:focus,
.pl-form .field > textarea:focus {
  outline: none;
  border-color: var(--red-primary, #74131B);
  box-shadow: 0 0 0 3px rgba(116,19,27,.12);
}
.pl-form .field > input::placeholder,
.pl-form .field > textarea::placeholder {
  color: var(--fg-3, var(--text-secondary));
  font-weight: 300;
}
.pl-form .field > .help {
  font-size: 10px;
  color: var(--fg-3, var(--text-secondary));
  margin-top: 1px;
  line-height: 1.3;
}
.pl-form .field > .help.error { color: var(--red-50, #e16216); }
.pl-form .field code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: var(--black-5, #f8f8f8);
  padding: 1px 5px;
  border-radius: 3px;
}

/* SKU input row ----------------------------------------------- */
.pl-form .sku-input-group { display: flex; gap: 6px; }
.pl-form .sku-input-group .field-input-wrap { position: relative; flex: 1; }
.pl-form .sku-input-group input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 5px;
  padding: 0 88px 0 11px;
  font: 500 12.5px ui-monospace, Menlo, monospace;
  background: #fff;
  color: var(--fg-1, var(--text));
  transition: border-color .12s, box-shadow .12s;
}
.pl-form .sku-input-group input:focus {
  outline: none;
  border-color: var(--red-primary, #74131B);
  box-shadow: 0 0 0 3px rgba(116,19,27,.12);
}
.pl-form .sku-input-group input.is-valid { border-color: var(--green-50, #15d667); }
.pl-form .sku-input-group input.is-invalid { border-color: var(--red-50, #e16216); }
.pl-form .sku-status {
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  font: 600 10px var(--font-primary, 'Montserrat', sans-serif);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}
.pl-form .sku-status .ico { font-size: 14px; }
.pl-form .sku-status.valid { color: var(--green-80, #069744); }
.pl-form .sku-status.checking { color: var(--fg-3, var(--text-secondary)); }
.pl-form .sku-status.invalid { color: var(--red-50, #e16216); }
.pl-form .gen-btn {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-1, var(--border));
  background: #fff;
  border-radius: 5px;
  font: 600 11px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: all .12s;
}
.pl-form .gen-btn:hover {
  background: var(--maroon-5, #fbefef);
  color: var(--red-primary, #74131B);
  border-color: var(--red-primary, #74131B);
}
.pl-form .gen-btn .ico { font-size: 14px; }

/* Rp prefix -------------------------------------------------- */
.pl-form .input-prefix { position: relative; }
.pl-form .input-prefix > input {
  padding-left: 32px;
  height: 34px;
  width: 100%;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 5px;
  font: 500 13px var(--font-primary, 'Montserrat', sans-serif);
  background: #fff;
  color: var(--fg-1, var(--text));
  transition: border-color .12s, box-shadow .12s;
  font-variant-numeric: tabular-nums;
}
.pl-form .input-prefix > input:focus {
  outline: none;
  border-color: var(--red-primary, #74131B);
  box-shadow: 0 0 0 3px rgba(116,19,27,.12);
}
.pl-form .input-prefix::before {
  content: "Rp";
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  font: 600 11px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-3, var(--text-secondary));
  pointer-events: none;
  letter-spacing: .3px;
}

/* Margin readout panel --------------------------------------- */
.pl-form .margin-readout {
  background: var(--black-5, #f8f8f8);
  border: 1px solid var(--border-1, var(--border));
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  transition: background .15s, border-color .15s;
}
.pl-form .margin-readout.empty { opacity: .55; }
.pl-form .margin-readout.good {
  background: #f0faf5;
  border-color: var(--green-50, #15d667);
}
.pl-form .margin-readout.mid {
  background: var(--yellow-10, #fff7db);
  border-color: var(--yellow-50, #f6c204);
}
.pl-form .margin-readout.bad {
  background: #fdf2f3;
  border-color: var(--red-50, #e16216);
}
.pl-form .margin-readout-label {
  font: 600 10px var(--font-primary, 'Montserrat', sans-serif);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--fg-2, var(--text-secondary));
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pl-form .margin-readout-label .ico { font-size: 13px; }
.pl-form .margin-readout-stats {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.pl-form .margin-stat {
  font-size: 10px;
  color: var(--fg-3, var(--text-secondary));
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-end;
}
.pl-form .margin-stat b {
  font-size: 12px;
  color: var(--fg-1, var(--text));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pl-form .margin-pct-chip {
  font: 700 14px var(--font-primary, 'Montserrat', sans-serif);
  padding: 3px 10px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  background: var(--black-10, var(--border));
  color: var(--fg-2, var(--text-secondary));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  justify-content: center;
}
.pl-form .margin-pct-chip .ico { font-size: 14px; }
.pl-form .margin-readout.good .margin-pct-chip {
  background: var(--green-50, #15d667);
  color: #fff;
}
.pl-form .margin-readout.mid .margin-pct-chip {
  background: var(--yellow-50, #f6c204);
  color: var(--yellow-80, #a68309);
}
.pl-form .margin-readout.bad .margin-pct-chip {
  background: var(--red-50, #e16216);
  color: #fff;
}

/* Modal foot -------------------------------------------------- */
.pl-form .modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border-1, var(--border));
  background: var(--black-5, #f8f8f8);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  gap: 12px;
}
.pl-form .modal-foot-left { display: inline-flex; align-items: center; gap: 6px; }
.pl-form .modal-foot-right { display: inline-flex; gap: 8px; align-items: center; }
.pl-form .kbd-hint {
  font-size: 10px;
  color: var(--fg-3, var(--text-secondary));
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pl-form .kbd {
  font: 600 10px ui-monospace, Menlo, monospace;
  background: #fff;
  border: 1px solid var(--border-1, var(--border));
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--fg-2, var(--text-secondary));
  line-height: 1.2;
}
.pl-form .pl-foot-cancel {
  background: #fff;
  border: 1px solid var(--border-1, var(--border));
  border-radius: 6px;
  padding: 0 14px;
  height: 32px;
  font: 500 12px var(--font-primary, 'Montserrat', sans-serif);
  color: var(--fg-2, var(--text-secondary));
  cursor: pointer;
}
.pl-form .pl-foot-cancel:hover { background: var(--black-5, #f8f8f8); color: var(--fg-1, var(--text)); }
.pl-form .pl-foot-save {
  background: var(--red-button, #881720);
  border: none;
  border-radius: 6px;
  padding: 0 14px;
  height: 32px;
  font: 600 12px var(--font-primary, 'Montserrat', sans-serif);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pl-form .pl-foot-save:hover { background: var(--red-primary, #74131B); }
.pl-form .pl-foot-save .kbd {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  margin-left: 4px;
}