/* ============================================================
   CSA CRM — crm.css
   Inherits design tokens from admin.css. Any rule here
   that overlaps admin.css intentionally overrides for CRM context.
   ============================================================ */

:root {
  --bg-0: #0a0a0f;
  --bg-1: #111118;
  --bg-2: #16161f;
  --bg-3: #1d1d28;
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(110,160,184,0.3);
  --text: #f0f2f5;
  --text-dim: #a0a8b4;
  --text-muted: #6b7280;
  --accent: #6ea0b8;
  --accent-light: #8fbdd4;
  --accent-bright: #a3d5e8;
  --danger: #e06d6d;
  --success: #7fc492;
  --warning: #e4b15e;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 10px 40px rgba(0,0,0,0.5);
  --crm-sidebar-w: 240px;
  --crm-header-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
a { color: var(--accent-light); text-decoration: none; }
[hidden] { display: none !important; }

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.crm-login {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(800px 600px at 30% 40%, rgba(110,160,184,0.12), transparent 60%),
    radial-gradient(700px 500px at 70% 70%, rgba(163,213,232,0.06), transparent 70%),
    var(--bg-0);
  z-index: 100;
}
.crm-login-card {
  width: min(420px, 94vw);
  padding: 48px 40px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.crm-login-card h1 {
  font-size: 26px; font-weight: 700; margin-bottom: 4px;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.crm-login-card .login-sub {
  color: var(--text-muted); font-size: 13px; margin-bottom: 32px;
}
.crm-login-card .login-role-note {
  font-size: 12px; color: var(--text-muted);
  padding: 10px 14px;
  background: rgba(110,160,184,0.08);
  border: 1px solid rgba(110,160,184,0.18);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}
.crm-login-card label {
  display: block; margin-bottom: 20px;
  font-size: 12px; text-transform: uppercase;
  color: var(--text-dim); letter-spacing: 0.5px;
}
.crm-login-card input {
  display: block; width: 100%; margin-top: 8px;
  padding: 12px 14px; font-size: 15px;
  background: var(--bg-1); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  outline: none;
}
.crm-login-card input:focus { border-color: var(--accent); }
.crm-login-card .btn-submit {
  width: 100%; padding: 12px; margin-top: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #0a1720; font-weight: 600; font-size: 15px;
  border-radius: var(--radius-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}
.crm-login-card .btn-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(110,160,184,0.3); }
.crm-login-card .btn-submit:disabled { opacity: 0.6; cursor: wait; }
.crm-login-error {
  margin-top: 14px; padding: 10px 14px;
  background: rgba(224,109,109,0.1); border: 1px solid rgba(224,109,109,0.3);
  border-radius: var(--radius-sm); color: var(--danger); font-size: 13px;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.crm-app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}

/* Top bar */
.crm-topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--crm-header-h); padding: 0 20px;
  background: var(--bg-1); border-bottom: 1px solid var(--border);
  flex-shrink: 0; gap: 16px; z-index: 10;
}
.crm-topbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; color: var(--text);
  text-decoration: none; flex-shrink: 0;
}
.crm-topbar-brand .infinity { color: var(--accent-bright); font-size: 22px; }
.crm-topbar-brand .label { font-weight: 600; }
.crm-topbar-brand .divider { color: var(--border-hover); margin: 0 2px; }
.crm-topbar-brand .crm-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent-light);
  padding: 2px 8px; border-radius: 4px;
  background: rgba(110,160,184,0.15);
}

/* Global search */
.crm-search-bar {
  flex: 1; max-width: 640px;
  display: flex; align-items: center; gap: 12px;
}
.crm-search-wrap {
  flex: 1; position: relative;
}
.crm-search-inactive {
  flex-shrink: 0;
}
.crm-search-input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; outline: none;
  transition: border-color 0.15s;
}
.crm-search-input:focus { border-color: var(--accent); }
.crm-search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
  width: 15px; height: 15px;
}
.crm-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  z-index: 200; overflow: hidden;
}
.crm-search-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-muted);
  padding: 10px 14px 4px;
}
.crm-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  transition: background 0.1s;
}
.crm-search-item:hover { background: rgba(110,160,184,0.08); }
.crm-search-item-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(110,160,184,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 12px; color: var(--accent-light);
}
.crm-search-item-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-search-item-sub  { font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-search-empty     { padding: 16px 14px; color: var(--text-muted); font-size: 13px; }

/* Two-column split so accounts + contacts are always both visible. */
.crm-search-split {
  display: grid; grid-template-columns: 1fr 1fr;
}
.crm-search-split .crm-search-col {
  min-width: 0; overflow: hidden;
}
.crm-search-split .crm-search-col:first-child {
  border-right: 1px solid var(--border);
}
.crm-search-viewall {
  display: block; width: 100%;
  padding: 11px 14px; border: none; border-top: 1px solid var(--border);
  background: var(--bg-1); color: var(--accent-bright);
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center;
}
.crm-search-viewall:hover { background: rgba(110,160,184,0.12); }
@media (max-width: 640px) {
  .crm-search-split { grid-template-columns: 1fr; }
  .crm-search-split .crm-search-col:first-child {
    border-right: none; border-bottom: 1px solid var(--border);
  }
}

.crm-topbar-user {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; flex-shrink: 0;
}
.crm-topbar-user .user-name { color: var(--text-dim); }
.crm-role-badge {
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(110,160,184,0.15); color: var(--accent-light);
  border-radius: 20px;
}
.crm-role-badge.marketing { background: rgba(143,189,212,0.15); color: var(--accent-bright); }
.crm-role-badge.rsm       { background: rgba(127,196,146,0.15); color: var(--success); }
/* Site-wide: hide the signed-in user's site-role pill in the topbar (the pill
   next to the name / sign-out). Targets only the topbar role badges by id so
   the reusable .crm-role-badge tag (used for other labels) is unaffected. */
#user-role, #crm-role-badge, #rsm-role-badge { display: none !important; }

/* ============================================================
   BODY LAYOUT: sidebar + content
   ============================================================ */
.crm-body {
  display: flex; flex: 1; overflow: hidden;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.crm-sidebar {
  width: var(--crm-sidebar-w); flex-shrink: 0;
  padding: 16px 10px;
  background: var(--bg-1); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
}
.crm-nav-section {
  margin-bottom: 4px;
}
.crm-nav-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 4px;
}
.crm-nav-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.9px; color: var(--text-muted);
}
.crm-nav-add {
  width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 16px; line-height: 1;
  transition: background 0.1s, color 0.1s;
}
.crm-nav-add:hover { background: rgba(110,160,184,0.15); color: var(--accent-bright); }
.crm-nav-add[disabled], .crm-nav-add[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }

/* "New" button (was the + add button) */
.crm-nav-add {
  width: auto; min-width: 42px; height: 22px; padding: 0 10px;
  margin: 0 10px 0 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px;
  border: 1px solid var(--border); background: var(--bg-2);
  flex-shrink: 0;
}
.crm-nav-add:hover {
  background: rgba(110,160,184,0.18); color: var(--accent-bright);
  border-color: rgba(110,160,184,0.45);
}

/* Primary "My Accounts" / "My Contacts" button */
.crm-nav-primary-btn {
  flex: 1; display: flex; align-items: center; gap: 8px;
  text-align: left; padding: 8px 12px;
  border-radius: 6px; cursor: pointer;
  background: none; border: none;
  transition: background 0.1s, color 0.1s;
}
.crm-nav-primary-btn:hover { background: rgba(110,160,184,0.1); }
.crm-nav-primary-label {
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  transition: color 0.1s;
}
.crm-nav-primary-btn:hover .crm-nav-primary-label { color: var(--text); }
.crm-nav-primary-btn.active {
  background: rgba(110,160,184,0.15);
}
.crm-nav-primary-btn.active .crm-nav-primary-label { color: var(--accent-bright); }

/* Notification pill on My Accounts / My Contacts */
.crm-nav-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px rgba(224,109,109,0.18);
}

/* Collapsible "All …" tree */
.crm-nav-tree { margin-top: 2px; }
.crm-nav-tree-toggle {
  width: 100%; display: flex; align-items: center; gap: 6px;
  text-align: left; padding: 6px 12px;
  border-radius: 6px; cursor: pointer;
  background: none; border: none;
  transition: background 0.1s;
}
.crm-nav-tree-toggle:hover { background: rgba(110,160,184,0.08); }
.crm-nav-tree-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0;
  font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--text-muted);
}
.crm-nav-tree-toggle.expanded .crm-nav-tree-caret { color: var(--accent-bright); }
.crm-nav-tree-list { margin-top: 2px; }

.crm-nav-search:focus { border-color: var(--accent); }
.crm-nav-search::placeholder { color: var(--text-muted); }

.crm-nav-sort:focus { border-color: var(--accent); }

.crm-nav-btn {
  width: 100%; padding: 8px 12px; text-align: left;
  font-size: 13px; color: var(--text-dim); border-radius: 6px;
  transition: background 0.1s, color 0.1s;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 36px;
}
.crm-nav-btn:hover { background: var(--bg-2); color: var(--text); }
.crm-nav-btn.active {
  background: rgba(110,160,184,0.15); color: var(--accent-bright);
}
.crm-nav-btn-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.crm-nav-section-divider {
  height: 1px; background: var(--border);
  margin: 8px 0;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.crm-content {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* Work area uses full dynamic width site-wide: the top-level view wrapper
   never caps its width, so content stretches with the window. Scoped to DIRECT
   children — modals (appended to <body>) and inner elements with their own
   max-width are untouched. */
.crm-content > .crm-detail,
.crm-content > [style*="max-width"],
.content > .crm-detail,
.content > [style*="max-width"] { max-width: none !important; width: 100%; }

/* Welcome / empty state when nothing is selected */
.crm-welcome {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 40px;
  color: var(--text-muted);
}
.crm-welcome-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(110,160,184,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.crm-welcome h2 { font-size: 20px; font-weight: 600; color: var(--text-dim); }
.crm-welcome p  { font-size: 14px; text-align: center; max-width: 360px; line-height: 1.6; }

.crm-list-header h1 {
  font-size: 20px; font-weight: 700;
}
.crm-list-header .subtitle {
  font-size: 12px; color: var(--text-dim); margin-top: 2px;
}

.crm-filter-select:focus { border-color: var(--accent); }

.crm-record-card:hover {
  border-color: var(--border-hover); transform: translateY(-1px);
}
.crm-record-card.selected {
  border-color: var(--accent); background: rgba(110,160,184,0.06);
}

.crm-record-avatar img { width: 100%; height: 100%; object-fit: cover; }

.crm-empty-state {
  padding: 64px 28px; text-align: center;
  color: var(--text-muted);
}

/* ============================================================
   DETAIL / RECORD VIEW
   ============================================================ */
.crm-detail {
  display: flex; flex-direction: column; flex: 1; overflow: hidden;
}
.crm-detail-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1); flex-shrink: 0;
}
.crm-detail-back {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim); cursor: pointer;
  padding: 6px 10px; border-radius: 6px;
  transition: background 0.1s, color 0.1s;
}
.crm-detail-back:hover { background: var(--bg-2); color: var(--text); }
.crm-detail-title { font-size: 18px; font-weight: 700; flex: 1; }
.crm-detail-actions { display: flex; gap: 8px; }

.crm-detail-body { flex: 1; overflow-y: auto; padding: 28px; }

/* Field groups */
.crm-field-group {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 20px;
  overflow: hidden;
}
.crm-field-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.crm-field-group-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim);
}
.crm-field-group-edit {
  font-size: 12px; color: var(--accent); cursor: pointer;
  padding: 4px 10px; border-radius: 4px;
  transition: background 0.1s;
}
.crm-field-group-edit:hover { background: rgba(110,160,184,0.1); }

.crm-fields-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; padding: 0;
}
.crm-field {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.crm-field:nth-child(even) { border-right: none; }
.crm-field.full { grid-column: 1 / -1; border-right: none; }
.crm-field:last-child, .crm-field:nth-last-child(2):nth-child(odd) { border-bottom: none; }

.crm-field-label-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.crm-field-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); font-weight: 600;
}
.crm-field-history-btn {
  width: 16px; height: 16px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); opacity: 0.6;
  font-size: 11px; cursor: pointer;
  transition: opacity 0.1s, color 0.1s;
}
.crm-field-history-btn:hover { opacity: 1; color: var(--accent); }
.crm-field-value {
  font-size: 14px; color: var(--text); line-height: 1.4;
}
.crm-field-value.empty { color: var(--text-muted); font-style: italic; }

/* Actionable field values: mailto/website links + copy-to-clipboard icon */
.crm-val-link {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(110,160,184,0.35);
}
.crm-val-link:hover { color: var(--accent-light, #8fbdd4); border-bottom-color: currentColor; }
.crm-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 6px; padding: 0;
  vertical-align: -4px;
  background: none; border: none; border-radius: 4px; cursor: pointer;
  color: var(--text-muted); opacity: 0.55;
  transition: opacity 0.1s, color 0.1s, background 0.1s;
}
.crm-field-value:hover .crm-copy-btn, .crm-copy-btn:hover, .crm-copy-btn:focus-visible { opacity: 1; }
.crm-copy-btn:hover { color: var(--accent); background: rgba(110,160,184,0.12); }
.crm-copy-btn.copied { color: var(--success, #7fc492); opacity: 1; }

/* Inline edit mode */
.crm-field.editing { background: rgba(110,160,184,0.04); }
.crm-field input,
.crm-field select,
.crm-field textarea {
  width: 100%; padding: 8px 10px; font-size: 14px;
  background: var(--bg-1); color: var(--text);
  border: 1px solid var(--accent); border-radius: 6px; outline: none;
}
.crm-field textarea { resize: vertical; min-height: 70px; font-family: inherit; }

/* ============================================================
   BRAND DEALERSHIP TABLE
   ============================================================ */
.crm-brand-table {
  width: 100%; border-collapse: collapse;
}
.crm-brand-table th {
  text-align: left; padding: 10px 18px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.crm-brand-table td {
  padding: 11px 18px; border-bottom: 1px solid var(--border);
  font-size: 13px; vertical-align: middle;
}
.crm-brand-table tr:last-child td { border-bottom: none; }
.crm-brand-table tr:hover td { background: rgba(110,160,184,0.03); }
.crm-brand-status {
  display: inline-flex; align-items: center; gap: 6px;
}
.crm-brand-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.crm-brand-dot.yes     { background: var(--success); }
.crm-brand-dot.no      { background: var(--danger); }
.crm-brand-dot.unknown { background: var(--text-muted); }

/* ============================================================
   CONTACTS TABLE (within account detail)
   ============================================================ */
.crm-contacts-table {
  width: 100%; border-collapse: collapse;
}
.crm-contacts-table th {
  text-align: left; padding: 10px 18px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.crm-contacts-table td {
  padding: 11px 18px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.crm-contacts-table tr:last-child td { border-bottom: none; }
.crm-contacts-table tr:hover td { background: rgba(110,160,184,0.03); }
.crm-contact-link { color: var(--accent-light); cursor: pointer; }
.crm-contact-link:hover { text-decoration: underline; }

/* ============================================================
   NOTES
   ============================================================ */
.crm-notes-list {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 14px;
  max-height: calc(5 * 68px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.crm-notes-list::-webkit-scrollbar { width: 5px; }
.crm-notes-list::-webkit-scrollbar-track { background: transparent; }
.crm-notes-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.crm-note-card {
  padding: 7px 10px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: flex-start; gap: 8px;
}
.crm-note-card-body { flex: 1; min-width: 0; }
.crm-note-meta {
  font-size: 10px; color: var(--text-muted);
  margin-bottom: 3px; display: flex; gap: 8px; align-items: center;
}
.crm-note-author { font-weight: 600; color: var(--text-dim); }
.crm-note-body { font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.crm-note-actions { flex-shrink: 0; }
/* .note-delete-btn now uses the shared .btn-delete style (see styles.css);
   class retained only as the JS click-handler hook. */

/* Notes that count as a notification (other-author, not dismissed). */
.crm-note-card.crm-note-notif {
  border-color: var(--accent, #506E78);
  background: color-mix(in srgb, var(--accent, #506E78) 7%, var(--bg-1));
}
.crm-note-notif-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #506E78); flex-shrink: 0;
}
.crm-note-actions { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.note-dismiss-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  color: var(--text-dim); font-size: 11px; line-height: 1;
  padding: 3px 8px; border-radius: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.note-dismiss-btn:hover {
  background: var(--accent, #506E78); color: #fff; border-color: var(--accent, #506E78);
}

.crm-note-compose {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.crm-note-compose textarea {
  width: 100%; padding: 10px 12px; font-size: 13px;
  background: var(--bg-1); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  resize: vertical; min-height: 80px; outline: none; font-family: inherit;
  transition: border-color 0.15s;
}
.crm-note-compose textarea:focus { border-color: var(--accent); }
.crm-note-compose-footer {
  display: flex; justify-content: flex-end; margin-top: 8px;
}

/* ============================================================
   FIELD HISTORY POPUP
   ============================================================ */
.crm-history-popup {
  position: fixed; z-index: 300;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  width: min(440px, 94vw); max-height: 400px;
  display: flex; flex-direction: column; overflow: hidden;
}
.crm-history-popup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.crm-history-popup-close {
  font-size: 18px; line-height: 1; padding: 2px 8px;
  color: var(--text-dim); cursor: pointer; border-radius: 4px;
}
.crm-history-popup-close:hover { background: var(--bg-3); color: var(--text); }
.crm-history-list {
  overflow-y: auto; flex: 1;
}
.crm-history-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.crm-history-row:last-child { border-bottom: none; }
.crm-history-values { display: flex; flex-direction: column; gap: 3px; }
.crm-history-old { color: var(--danger); text-decoration: line-through; font-family: ui-monospace, monospace; font-size: 11px; }
.crm-history-new { color: var(--success); font-family: ui-monospace, monospace; font-size: 11px; }
.crm-history-meta { text-align: right; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.crm-history-empty { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.crm-history-overlay {
  position: fixed; inset: 0; z-index: 299;
  background: transparent;
}

/* ============================================================
   MODAL (new record, confirmations)
   ============================================================ */
.crm-modal-backdrop {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px;
}
.crm-modal {
  /* Grow to fit content (so a long field no longer forces a horizontal
     scrollbar) but never exceed 75% of the viewport width; only past that
     cap does the body scroll. min keeps the comfortable form width. */
  width: fit-content; min-width: min(620px, 100%); max-width: 75vw; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
}
.crm-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.crm-modal-header h2 { font-size: 18px; font-weight: 600; }
.crm-modal-close { font-size: 22px; line-height: 1; padding: 4px 10px; color: var(--text-dim); cursor: pointer; border-radius: 6px; }
.crm-modal-close:hover { background: var(--bg-3); color: var(--text); }
.crm-modal-body { padding: 24px; overflow: auto; flex: 1; }
.crm-modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 24px; border-top: 1px solid var(--border); flex-shrink: 0;
}

/* ============================================================
   FORM ELEMENTS (modal / inline)
   ============================================================ */
.crm-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.crm-form-grid .full { grid-column: 1 / -1; }
.crm-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crm-form-field label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim); font-weight: 600;
}
.crm-form-field input,
.crm-form-field select,
.crm-form-field textarea {
  padding: 10px 12px; font-size: 14px;
  background: var(--bg-1); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none;
  width: 100%; box-sizing: border-box; min-width: 0;
}
.crm-form-field input:focus,
.crm-form-field select:focus,
.crm-form-field textarea:focus { border-color: var(--accent); }
.crm-form-field textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.crm-form-field .help { font-size: 11px; color: var(--text-muted); }
.crm-form-error {
  padding: 10px 14px; margin-top: 12px;
  background: rgba(224,109,109,0.08); border: 1px solid rgba(224,109,109,0.3);
  border-radius: var(--radius-sm); color: var(--danger); font-size: 13px;
}

/* Boolean toggle */
.crm-toggle-row {
  display: flex; align-items: center; gap: 10px;
}
.crm-toggle {
  position: relative; width: 38px; height: 22px;
  flex-shrink: 0;
}
.crm-toggle input {
  opacity: 0; width: 0; height: 0; position: absolute;
}
.crm-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 11px; transition: background 0.2s;
}
.crm-toggle-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  left: 2px; top: 2px; background: var(--text-muted);
  transition: transform 0.2s, background 0.2s;
}
.crm-toggle input:checked + .crm-toggle-slider { background: rgba(127,196,146,0.25); border-color: var(--success); }
.crm-toggle input:checked + .crm-toggle-slider::before { transform: translateX(16px); background: var(--success); }
.crm-toggle-label { font-size: 13px; color: var(--text); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  padding: 9px 18px; font-size: 13px; font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #0a1720; border-radius: var(--radius-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(110,160,184,0.3); }
.btn-primary:disabled { opacity: 0.5; cursor: wait; }

.btn-ghost {
  padding: 8px 14px; font-size: 13px;
  color: var(--text-dim); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: transparent;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-hover); }
.dup-tab.active {
  color: var(--accent-bright);
  border-color: var(--accent, #506E78);
  background: rgba(110,160,184,0.12);
  font-weight: 600;
}

.btn-danger {
  padding: 8px 14px; font-size: 13px; color: var(--danger);
  border: 1px solid rgba(224,109,109,0.3); border-radius: var(--radius-sm);
  background: transparent;
}
.btn-danger:hover { background: rgba(224,109,109,0.1); }
.btn-sm { padding: 5px 11px; font-size: 12px; }

/* ============================================================
   STATUS PILLS
   ============================================================ */
.pill {
  display: inline-block; padding: 2px 10px;
  font-size: 11px; font-weight: 600; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pill-ok      { background: rgba(127,196,146,0.15); color: var(--success); }
.pill-warn    { background: rgba(228,177,94,0.15);  color: var(--warning); }
.pill-err     { background: rgba(224,109,109,0.15); color: var(--danger); }
.pill-dim     { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.pill-accent  { background: rgba(110,160,184,0.15); color: var(--accent-light); }
.pill-read-only { background: rgba(228,177,94,0.1); color: var(--warning); font-size: 10px; }

/* ============================================================
   LOADING / SPINNER
   ============================================================ */
.crm-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 48px; color: var(--text-muted); font-size: 13px;
  gap: 10px;
}
.crm-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   TOAST
   ============================================================ */
.crm-toasts {
  position: fixed; bottom: 20px; right: 20px; z-index: 500;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.crm-toast {
  padding: 12px 18px; background: var(--bg-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); font-size: 13px; max-width: 360px;
  animation: crm-slidein 0.2s ease-out;
}
.crm-toast.success { border-left: 3px solid var(--success); }
.crm-toast.error   { border-left: 3px solid var(--danger); }
.crm-toast.info    { border-left: 3px solid var(--accent); }
@keyframes crm-slidein { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root { --crm-sidebar-w: 200px; }
  .crm-topbar-brand .label,
  .crm-topbar-brand .divider { display: none; }
  .crm-fields-grid { grid-template-columns: 1fr; }
  .crm-field { border-right: none; }
  .crm-field.full { border-right: none; }
  .crm-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --crm-sidebar-w: 0px; }
  .crm-sidebar { display: none; }
  .crm-search-wrap { max-width: none; }
}

/* ============================================================
   SIDEBAR SECTION BUTTONS (Accounts / Contacts / Projects)
   ============================================================ */
.crm-nav-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 4px 0;
}
.crm-nav-section-btn {
  flex: 1; text-align: left; padding: 7px 12px;
  border-radius: 6px; cursor: pointer;
  transition: background 0.1s, color 0.1s;
  background: none; border: none;
  display: flex; align-items: center; gap: 6px;
}
.crm-nav-section-btn:hover { background: rgba(110,160,184,0.1); }
.crm-nav-section-btn.active .crm-nav-section-label { color: var(--accent-bright); }
.crm-nav-section-btn .crm-nav-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.9px; color: var(--text-dim);
  transition: color 0.1s;
}
.crm-nav-section-btn:hover .crm-nav-section-label { color: var(--text); }

/* ============================================================
   LIST VIEW TABLE (main content area)
   ============================================================ */
.crm-list-view {
  display: flex; flex-direction: column; flex: 1; overflow: hidden;
}
.crm-list-view-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1); flex-shrink: 0; gap: 12px;
}
.crm-list-view-title { font-size: 18px; font-weight: 700; }
.crm-list-view-count {
  font-size: 13px; color: var(--text-muted);
  padding: 2px 10px; border-radius: 20px;
  background: var(--bg-3);
}
.crm-list-view-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1); flex-shrink: 0;
}
.crm-list-search {
  flex: 1; max-width: 320px;
  padding: 7px 12px 7px 34px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
.crm-list-search:focus { border-color: var(--accent); }
.crm-list-search-wrap { position: relative; flex: 1; max-width: 320px; }
.crm-list-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; width: 14px; height: 14px;
}
.crm-list-sort-select {
  padding: 7px 12px; font-size: 13px;
  background: var(--bg-2); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 6px; outline: none; cursor: pointer;
}
.crm-list-sort-select:focus { border-color: var(--accent); }

/* Table container */
.crm-list-table-wrap {
  flex: 1; overflow: auto;
}
.crm-list-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; min-width: 700px;
}
.crm-list-table thead { position: sticky; top: 0; z-index: 2; }
.crm-list-table th {
  padding: 0; background: var(--bg-1);
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap; font-weight: 600;
  text-align: left;
  user-select: none;
}
.crm-list-table th:last-child { border-right: none; }
.crm-list-table th .th-inner {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
}
/* Drag handle shown on hover */
.crm-list-table th .drag-handle {
  cursor: grab; color: var(--text-muted); opacity: 0;
  font-size: 14px; flex-shrink: 0; transition: opacity 0.1s;
}
.crm-list-table th:hover .drag-handle { opacity: 1; }
.crm-list-table th.dragging-over { background: rgba(110,160,184,0.12); }
.crm-list-table th.dragging      { opacity: 0.4; }
.crm-col-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted);
}

.crm-list-table td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border); vertical-align: middle;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-list-table td:last-child { border-right: none; }
.crm-list-table tbody tr { cursor: pointer; transition: background 0.08s; }
.crm-list-table tbody tr:hover td { background: rgba(110,160,184,0.05); }
.crm-list-table tbody tr:last-child td { border-bottom: none; }
.crm-list-table .cell-name {
  font-weight: 600; color: var(--text);
}
.crm-list-table .cell-link {
  color: var(--accent-light);
}
.crm-list-empty {
  padding: 60px 24px; text-align: center; color: var(--text-muted);
}

/* ============================================================
   SIDEBAR SUB-MENU LINKS
   ============================================================ */
.crm-sub-link {
  display: block; width: 100%;
  text-align: left; padding: 6px 12px 6px 22px;
  font-size: 12px; color: var(--text-dim);
  border-radius: 5px; cursor: pointer;
  background: none; border: none;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-sub-link:hover  { background: var(--bg-2); color: var(--text); }
.crm-sub-link.active {
  background: rgba(110,160,184,0.12);
  color: var(--accent-bright); font-weight: 600;
}
/* Sub-links that carry a count pill (My Accounts / My Contacts) lay the pill
   out to the right and don't clip it. */
.crm-sub-link:has(.crm-nav-pill) {
  display: flex; align-items: center; gap: 8px;
  overflow: visible;
}
.crm-sub-link .crm-nav-pill { margin-left: auto; }

/* Sales Support sub-links that carry their own "New" button (Contact Updates /
   Account Updates). Same idea as the pill rows above: lay the row out and let
   the button sit hard right. The button only appears for roles that may create
   records, so the label must still look right on its own. */
.crm-sub-link.ss-sub-with-new {
  display: flex; align-items: center; gap: 8px;
  overflow: visible;
}
.crm-sub-link.ss-sub-with-new .ss-sub-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-sub-link.ss-sub-with-new .ss-sub-new {
  margin: 0; min-width: 38px; height: 19px; padding: 0 8px;
  font-size: 10px; letter-spacing: 0.5px;
}

/* ============================================================
   SHOW INACTIVE TOGGLE (toolbar)
   ============================================================ */
.crm-inactive-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.crm-inactive-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.crm-inactive-slider {
  position: relative; display: inline-block;
  width: 32px; height: 18px; flex-shrink: 0;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 9px; transition: background 0.2s;
}
.crm-inactive-slider::before {
  content: ''; position: absolute;
  width: 12px; height: 12px; border-radius: 50%;
  left: 2px; top: 2px;
  background: var(--text-muted); transition: transform 0.2s, background 0.2s;
}
.crm-inactive-toggle input:checked + .crm-inactive-slider {
  background: rgba(224,109,109,0.35); border-color: var(--danger);
}
.crm-inactive-toggle input:checked + .crm-inactive-slider::before {
  transform: translateX(14px); background: var(--danger);
}
.crm-inactive-toggle input:checked ~ .crm-inactive-label {
  color: var(--danger); font-weight: 600;
}
.crm-inactive-label { font-size: 12px; color: var(--text-dim); }

/* ============================================================
   TABLE SORT INDICATORS
   ============================================================ */
.th-sorted { background: rgba(110,160,184,0.08) !important; }
.th-sorted .crm-col-label { color: var(--accent-bright); }

/* Per-column filter icon button — always visible (dimmed until hovered/active) */
.th-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin-left: auto; flex-shrink: 0;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-muted); cursor: pointer; opacity: 0.45;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s, background 0.12s;
}
.crm-list-table th:hover .th-filter-btn,
.th-filter-btn.th-filter-active { opacity: 1; }
.th-filter-btn:hover { background: var(--bg-2); border-color: var(--border); color: var(--text); }
.th-filter-btn.th-filter-active {
  color: var(--accent); border-color: rgba(110,160,184,.4); background: rgba(110,160,184,.1);
}
.th-col-filtered .crm-col-label { color: var(--accent); }

/* Sort arrows — always visible, dimmed when the column is not the active sort */
.th-sort-arrow {
  flex-shrink: 0; display: inline-flex; align-items: center;
  margin-left: 2px; color: var(--text-muted);
}
.th-sort-arrow .th-sort-up,
.th-sort-arrow .th-sort-down { opacity: 0.35; transition: opacity 0.12s; }
/* When this column is the active sort, fully show only the chosen direction */
.th-sort-arrow.th-sort-active.th-sort-asc  .th-sort-up   { opacity: 1; color: var(--accent-bright); }
.th-sort-arrow.th-sort-active.th-sort-asc  .th-sort-down { opacity: 0.25; }
.th-sort-arrow.th-sort-active.th-sort-desc .th-sort-down { opacity: 1; color: var(--accent-bright); }
.th-sort-arrow.th-sort-active.th-sort-desc .th-sort-up   { opacity: 0.25; }
.th-sort-arrow.th-sort-active { color: var(--accent-bright); }
/* Last row: remove bottom border */
.crm-list-table tbody tr.last-row td { border-bottom: none; }

/* Column width auto-sizing via table-layout:fixed is set inline */
.crm-list-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Site nav integration ──────────────────────────────────── */
/* Push CRM app shell below the fixed 80px site header */
.crm-app   { height: calc(100vh - 80px); margin-top: 80px; }
.crm-login { margin-top: 0; /* inline padding-top handles offset */ }

/* Ensure site header sits above CRM modals and overlays */
.site-header { z-index: 1000 !important; }


/* ============================================================
   APP SWITCHER (topbar dropdown — CRM & Admin pages)
   ============================================================ */
.app-switcher {
  position: relative; display: inline-flex; align-items: center;
}
.app-switcher-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
  color: var(--text-muted); cursor: pointer;
  transition: background .1s, color .1s;
  background: none; border: none;
}
.app-switcher-btn:hover { background: rgba(110,160,184,0.12); color: var(--accent-bright); }
.app-switcher-btn svg { transition: transform .2s; }
.app-switcher.open .app-switcher-btn svg { transform: rotate(180deg); }
.app-switcher-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 190px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; z-index: 500;
}
.app-switcher.open .app-switcher-menu { display: block; }
.app-switcher-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; text-decoration: none;
  color: var(--text-dim); font-size: 13px;
  transition: background .1s, color .1s;
}
.app-switcher-item:hover { background: rgba(110,160,184,0.08); color: var(--text); }
.app-switcher-item.current { color: var(--text-muted); cursor: default; pointer-events: none; }
.app-switcher-item.current:hover { background: none; }
.app-switcher-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; padding: 1px 6px; border-radius: 3px;
  background: rgba(110,160,184,0.15); color: var(--accent-light);
  flex-shrink: 0;
}
.app-switcher-label { font-size: 13px; }
.app-switcher-item + .app-switcher-item {
  border-top: 1px solid var(--border);
}

/* ============================================================
   MOBILE IMPROVEMENTS — CRM & ADMIN APP SHELL
   Sidebar becomes an overlay drawer on small screens.
   A toggle button in the topbar opens/closes it.
   ============================================================ */

/* ── Mobile sidebar toggle button (injected by JS on small screens) ── */
.crm-sidebar-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: none; border: none;
  color: var(--text-muted);
  border-radius: 6px; cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.crm-sidebar-toggle:hover { background: rgba(110,160,184,.12); color: var(--accent-bright); }

/* ── Drawer overlay backdrop ── */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 299;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

@media (max-width: 640px) {
  /* Show the toggle button */
  .crm-sidebar-toggle { display: flex; }

  /* Sidebar becomes a fixed drawer that slides in from the left */
  .crm-sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 260px !important;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    /* Align with overall app bg */
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    padding-top: 64px; /* clear the fixed topbar */
  }
  .crm-sidebar.drawer-open {
    transform: translateX(0);
  }

  /* Content area spans full width when sidebar is hidden */
  .crm-content, .content { margin-left: 0 !important; }

  /* Topbar adjustments */
  .crm-topbar { padding: 0 10px; gap: 6px; }
  .crm-search-wrap { max-width: none; flex: 1; }
  .crm-topbar-user .user-name { display: none; }

  /* Table: allow horizontal scroll on tiny screens */
  .crm-list-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Detail panels: single column */
  .crm-fields-grid { grid-template-columns: 1fr !important; }
  .crm-form-grid   { grid-template-columns: 1fr !important; }

  /* Project / card row stacks */
  .crm-project-row { flex-direction: column; gap: 8px; }

  /* Modal: full-screen on mobile */
  .modal {
    width: 100vw !important; max-width: none !important;
    height: 100dvh !important; max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    top: 0 !important; left: 0 !important;
    transform: none !important;
  }
  .modal-body { max-height: calc(100dvh - 120px) !important; }
}

@media (max-width: 420px) {
  /* Topbar: hide role badge to save space */
  .crm-role-badge { display: none; }
  /* Compact table cells */
  .crm-list-table td, .crm-list-table th { padding: 8px 8px !important; font-size: 12px; }
  /* Btn xs */
  .btn-xs { padding: 3px 6px !important; font-size: 11px !important; }
}

/* ── Inquiries: new-message pill + sidebar badge ──────────────────────── */
.pill-new-message {
  background: rgba(224,109,109,0.15);
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.pill-new-message::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  animation: inqPulse 1.6s ease-in-out infinite;
}
@keyframes inqPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.pill-dealer-app {
  background: rgba(94,160,228,0.15);
  color: #5ea0e4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  margin-left: 6px;
}
.da-pill-x {
  border: none;
  background: rgba(94,160,228,0.25);
  color: inherit;
  width: 16px; height: 16px;
  line-height: 14px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.da-pill-x:hover { background: rgba(94,160,228,0.45); }
.da-pill-x:disabled { opacity: .5; cursor: default; }

.crm-inq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Row-level notification badge (in the checkbox column, first data cell) */
.lv-row-notif {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-right: 6px;
  border-radius: 8px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  vertical-align: middle;
}

/* Notification filter toggle reuses the inactive-toggle styling but with
   an accent colour when engaged. */
.crm-notif-toggle input:checked + .crm-inactive-slider {
  background: rgba(224,109,109,0.35); border-color: var(--danger);
}
.crm-notif-toggle input:checked + .crm-inactive-slider::before {
  transform: translateX(14px); background: var(--danger);
}
.crm-notif-toggle input:checked ~ .crm-inactive-label {
  color: var(--danger); font-weight: 600;
}

/* Inquiry list rows */
.inq-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-1);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.inq-row:hover { border-color: var(--accent); background: var(--bg-2); }
.inq-row.open  { border-left: 3px solid var(--danger); }
.inq-row.resolved { opacity: .6; }
.inq-row-title { font-weight: 600; font-size: 14px; }
.inq-row-sub   { font-size: 12px; color: var(--text-dim); }
.inq-row-meta  { font-size: 11px; color: var(--text-muted); text-align: right; }
.inq-meta-slot { flex: none; display: inline-flex; align-items: center; justify-content: center; }

/* ── Inquiries table (contact card) ───────────────────────────────────── */
.inq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}
.inq-table thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.inq-table tbody td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.inq-trow { cursor: pointer; transition: background .15s; }
.inq-trow:hover td { background: var(--bg-2); }

/* Age flag chip */
.inq-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.inq-flag-green  { background: rgba(127,196,146,0.18); color: var(--success); }
.inq-flag-orange { background: rgba(228,177,94,0.20);  color: var(--warning); }
.inq-flag-red    { background: rgba(224,109,109,0.20); color: var(--danger); }
.inq-flag-none   { background: rgba(255,255,255,0.06); color: var(--text-muted); font-weight: 500; }

/* ============================================================
   EMPLOYEE APP LAYOUT STANDARD (2026-07-02)
   Every Employee Access page (all of them load crm.css — no public page does)
   is a single full-viewport shell: the PAGE itself never scrolls. Only the left
   sidebar and the content pane scroll, each on its own. The site header sits in
   flow at the top and the app shell flexes to fill the rest of the viewport —
   no position:fixed header and no magic 80px offset to drift out of sync.
   When adding a new Employee Access page, use this same shell (header +
   .app/.crm-app > topbar + .app-body/.crm-body > .crm-sidebar + content).
   ============================================================ */
html, body { height: 100%; }
body { margin: 0; overflow: hidden; display: flex; flex-direction: column; }
.site-header { position: sticky; top: 0; flex: 0 0 auto; }
.crm-app, .app { flex: 1 1 auto; min-height: 0; height: auto; margin-top: 0; }
.login-screen { flex: 1 1 auto; min-height: 0; overflow-y: auto; }