/* ═══════════════════════════════════════════════════════
   DEALDESK — Persistent Local Dashboard
   Minimalistic · Clear · Light
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   AURORA THEME SYSTEM
   Dark-first (default). [data-theme="light"] overrides.
   Legacy token names (--surface, --red, --green…) are kept
   and mapped onto Aurora colors so existing markup re-skins
   automatically; new Aurora names (--panel, --ok, --line…)
   are aliases for new views/charts.
   ═══════════════════════════════════════════════════════ */
:root {
  /* —— Aurora · Dark (default) —— */
  --bg:         #05060E;
  --app-bg:     radial-gradient(900px 520px at 82% -10%, rgba(120,99,240,.16), transparent 58%), radial-gradient(760px 460px at 6% 6%, rgba(70,150,235,.12), transparent 60%), #05060E;
  --panel:      #0A0C18;
  --panel-2:    #0D1020;
  --panel-hi:   #141831;
  --line:       rgba(150,160,255,.12);
  --line-2:     rgba(150,160,255,.22);
  --line-soft:  rgba(150,160,255,.07);
  --brand:      #0a1527;
  --ok:         #34C77F;  --ok-bg:     rgba(52,199,127,.12);  --ok-border:   rgba(52,199,127,.28);
  --warn:       #E0A33C;  --warn-bg:   rgba(224,163,60,.13);  --warn-border: rgba(224,163,60,.28);
  --bad:        #F2615A;  --bad-bg:    rgba(242,97,90,.13);   --bad-border:  rgba(242,97,90,.28);
  --teal:       #5FE0D0;  --teal-bg:   rgba(95,224,208,.14);
  --brand-grad:  linear-gradient(120deg, #7FA6FF, #B79BFF 55%, #6BE3D3);
  --mark-grad:   linear-gradient(135deg, #6E96F2, #9B6DFF 55%, #46D6C3);
  --panel-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -40px rgba(86,80,200,.55);
  --active-glow:  inset 0 0 0 1px rgba(126,139,255,.5), 0 0 26px -4px rgba(126,139,255,.45);
  --aurora: linear-gradient(120deg, #5B8DEF, #9B6DFF 52%, #46D6C3);

  /* —— Legacy aliases mapped to Aurora —— */
  --surface:      var(--panel);
  --surface-alt:  var(--panel-hi);
  --border:       var(--line);
  --border-light: var(--line-soft);
  --text:    #ECEDF6;
  --text-2:  #B6BAD0;
  --text-3:  #9DA2BE;
  --text-4:  #5F6486;
  --text-1:  var(--text);
  --accent:       #7E8BFF;
  --accent-soft:  rgba(126,139,255,.16);
  --accent-bg:    rgba(126,139,255,.16);
  --accent-hover: #95A0FF;
  --blue:         #7E8BFF;
  --red:        var(--bad);   --red-soft:    var(--bad-bg);   --red-border:    var(--bad-border);
  --amber:      var(--warn);  --amber-soft:  var(--warn-bg);  --amber-border:  var(--warn-border);
  --green:      var(--ok);    --green-soft:  var(--ok-bg);    --green-border:  var(--ok-border);
  --purple:     #9C8CFF;      --purple-soft: rgba(156,140,255,.13);
  --neutral-soft: rgba(150,160,255,.08);

  --shadow-xs: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 44px -36px rgba(86,80,200,.55);
  --shadow-sm: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 44px -36px rgba(86,80,200,.55);
  --shadow-md: 0 24px 60px -40px rgba(86,80,200,.6);
  --radius: 9px;
  --radius-lg: 14px;
  --font: 'Jost', system-ui, -apple-system, sans-serif;
  --font-display: 'Jost', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sidebar-w: 232px;
  --transition: 150ms ease;
}

/* —— Aurora · Light (overrides only) —— */
[data-theme="light"] {
  --bg:        #F3F4FA;
  --app-bg:    radial-gradient(900px 520px at 82% -10%, rgba(124,99,240,.12), transparent 58%), radial-gradient(760px 460px at 4% 4%, rgba(70,150,235,.10), transparent 60%), #F3F4FA;
  --panel:     #FFFFFF;
  --panel-2:   #FAFBFE;
  --panel-hi:  #EEF0F8;
  --line:      rgba(28,32,74,.10);
  --line-2:    rgba(28,32,74,.20);
  --line-soft: rgba(28,32,74,.06);
  --text:    #161A38;
  --text-2:  #3D4366;
  --text-3:  #565C78;
  --text-4:  #888EA6;
  --accent:       #5A5FE0;
  --accent-soft:  rgba(90,95,224,.12);
  --accent-bg:    rgba(90,95,224,.12);
  --accent-hover: #4A4FD0;
  --blue:         #5A5FE0;
  --ok:        #1F9D57;  --ok-bg:   rgba(31,157,87,.12);   --ok-border:   rgba(31,157,87,.28);
  --warn:      #B07A1E;  --warn-bg: rgba(176,122,30,.13);  --warn-border: rgba(176,122,30,.28);
  --bad:       #D7443F;  --bad-bg:  rgba(215,68,63,.11);   --bad-border:  rgba(215,68,63,.28);
  --purple:    #7A5CF0;  --purple-soft: rgba(122,92,240,.12);
  --teal:      #12A18E;  --teal-bg: rgba(18,161,142,.12);
  --neutral-soft: rgba(28,32,74,.06);
  --brand-grad:  linear-gradient(120deg, #5A5FE0, #8E7BF0 55%, #1FB3A3);
  --panel-shadow: 0 1px 2px rgba(28,32,74,.06), 0 18px 40px -30px rgba(86,80,200,.30);
  --active-glow:  inset 0 0 0 1px rgba(90,95,224,.35), 0 0 20px -6px rgba(90,95,224,.28);
  --shadow-xs: 0 1px 2px rgba(28,32,74,.05);
  --shadow-sm: 0 1px 3px rgba(28,32,74,.07);
  --shadow-md: 0 4px 12px rgba(28,32,74,.09);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; }

body {
  font-family: var(--font);
  background: var(--app-bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}

/* numbers / figures use the tabular mono stack */
.mono, .stat-value, .agent-metric-value, .unit-tag { font-family: var(--font-mono); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Layout ──────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────── */
.sb-brand {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border-light);
}
.sb-brand h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.3px;
}
.sb-brand span {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 2px;
  display: block;
}

.sb-nav { padding: 12px 10px; flex: 1; }

.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
  user-select: none;
  border: 1px solid transparent;
}
.sb-item:hover { background: var(--surface-alt); color: var(--text-2); }
.sb-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
  box-shadow: var(--active-glow);
}
.sb-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.sb-divider { height: 1px; background: var(--border-light); margin: 8px 12px; }

.sb-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border-light);
}
.sb-status {
  font-size: 11px;
  color: var(--text-4);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.sb-dot.offline { background: var(--text-4); }

/* ── Page Header ─────────────────────────────── */
.page-header {
  padding: 28px 32px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.page-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.5px;
}
.page-subtitle {
  font-size: 12px;
  color: var(--text-4);
  margin-top: 2px;
}

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}
.btn:hover { background: var(--surface-alt); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn svg { width: 14px; height: 14px; }
.btn-sm { padding: 5px 10px; font-size: 11.5px; }
.btn-ghost { border: none; background: none; }
.btn-ghost:hover { background: var(--surface-alt); }

/* ── Cards ───────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 0 32px 20px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-label { font-size: 11px; color: var(--text-4); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 28px; font-weight: 700; margin-top: 4px; letter-spacing: -1px; }
.stat-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* ── Content Area ────────────────────────────── */
.content { padding: 0 32px 32px; }

/* ── Tables ──────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  white-space: nowrap;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--accent); }
tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-hi); }

/* ── Badges / Pills ──────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-purple { background: var(--purple-soft); color: var(--purple); }
.badge-gray { background: var(--neutral-soft); color: var(--text-3); }
.badge-blue { background: var(--accent-soft); color: var(--accent); }

.unit-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  background: var(--neutral-soft);
  padding: 2px 7px;
  border-radius: 4px;
}

/* ── Filters Bar ─────────────────────────────── */
.filters {
  display: flex;
  gap: 8px;
  padding: 0 32px 16px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-chip {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-3);
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { background: var(--accent); color: white; border-color: var(--accent); }

/* ── Multi-Select Dropdown ───────────────────── */
.ms-dropdown { position: relative; display: inline-block; }
.ms-toggle {
  padding: 6px 28px 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; background: var(--surface); color: var(--text-2); cursor: pointer;
  white-space: nowrap; user-select: none; position: relative;
}
.ms-toggle::after {
  content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--text-4);
}
.ms-toggle.has-selection { color: var(--text-1); font-weight: 500; border-color: var(--accent); }
.ms-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 100;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); min-width: 180px; max-height: 260px;
  overflow-y: auto; padding: 4px 0;
}
.ms-dropdown.open .ms-menu { display: block; }
.ms-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px;
  cursor: pointer; color: var(--text-2); transition: background 0.1s;
}
.ms-item:hover { background: var(--surface-alt); }
.ms-item .ms-check {
  width: 16px; height: 16px; border: 1.5px solid var(--border); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.15s;
}
.ms-item.selected .ms-check { background: var(--accent); border-color: var(--accent); }
.ms-item.selected .ms-check::after { content: '✓'; color: white; font-size: 11px; font-weight: 700; }

/* ── Task List ───────────────────────────────── */
.task-input-row {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}
.task-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color var(--transition);
}
.task-input:focus { border-color: var(--accent); }
.task-input::placeholder { color: var(--text-4); }

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}
.task-item:hover { background: var(--surface-alt); }
.task-item:last-child { border-bottom: none; }

.task-check {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all var(--transition);
}
.task-check:hover { border-color: var(--accent); }
.task-item.completed .task-check {
  background: var(--green);
  border-color: var(--green);
}
.task-item.completed .task-check::after {
  content: '✓';
  color: white;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 13px; font-weight: 500; }
.task-item.completed .task-title { text-decoration: line-through; color: var(--text-4); }
.task-meta { font-size: 11px; color: var(--text-4); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }

.task-delete {
  opacity: 0;
  cursor: pointer;
  color: var(--text-4);
  padding: 2px;
  transition: all var(--transition);
}
.task-item:hover .task-delete { opacity: 1; }
.task-delete:hover { color: var(--red); }

/* ── Schedule Grid ───────────────────────────── */
.schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.week-card h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sched-table { width: 100%; }
.sched-table th {
  font-size: 11px;
  text-transform: uppercase;
  padding: 8px 12px;
  background: var(--surface-alt);
  text-align: center;
}
.sched-table th:first-child { text-align: left; }
.sched-table td { padding: 10px 12px; text-align: center; font-size: 13px; }
.sched-table td:first-child { text-align: left; font-weight: 500; color: var(--text-2); }
.sched-today { background: var(--accent-soft) !important; }
.sched-agent { font-weight: 500; }

.shift-totals {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.shift-chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--panel-hi);
  color: var(--text-2);
}

/* ── Actions Panel ───────────────────────────── */
.actions-panel {
  margin-top: 20px;
}
.action-item {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.action-item:last-child { border-bottom: none; }
.action-bullet {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  margin-top: 7px;
}
.action-bullet.urgent { background: var(--red); }
.action-bullet.done { background: var(--green); }
.action-deal-header {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
  margin-bottom: 2px;
}
.action-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-1);
  margin-bottom: 4px;
}
.action-details {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.45;
  margin-bottom: 4px;
}
.action-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.action-emails {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.action-email-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-bg);
  transition: background 0.15s;
}
.action-email-link:hover {
  background: var(--accent-soft);
  text-decoration: none;
}
.action-email-link svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
}

/* ── Action Note System ──────────────────────── */
.action-note-bar {
  margin-top: 8px;
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
}
.action-note-display {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: 6px;
  padding: 7px 10px;
}
.action-note-icon {
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.action-note-text {
  font-size: 12px;
  color: var(--text-2);
  flex: 1;
  line-height: 1.4;
}
.action-note-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.action-note-btn {
  font-size: 11px;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.action-note-btn:hover { color: var(--text); }
.action-note-form {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.action-note-input {
  flex: 1;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  resize: none;
  outline: none;
  line-height: 1.4;
  min-height: 34px;
}
.action-note-input:focus { border-color: var(--accent); }
.action-note-save {
  font-size: 12px;
  font-family: var(--font);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.action-note-save:hover { background: var(--accent-hover); }
.action-add-note-btn {
  font-size: 11px;
  color: var(--text-4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.action-add-note-btn:hover { color: var(--text-3); }

/* ── Empty States ────────────────────────────── */
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-4);
}
.empty-icon { font-size: 32px; margin-bottom: 12px; }
.empty-text { font-size: 14px; }
.empty-sub { font-size: 12px; margin-top: 6px; }

/* ── Refresh Indicator ───────────────────────── */
.refreshing .refresh-icon { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── View Transitions ────────────────────────── */
.view { display: none; }
.view.active { display: block; animation: fadeIn 200ms ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Select Dropdowns ────────────────────────── */
select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  outline: none;
}
select:focus { border-color: var(--accent); }

/* ── Agent Cards ─────────────────────────────── */
.agent-card { margin-bottom: 24px; }
.agent-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.agent-name { font-weight: 600; font-size: 15px; }
.agent-deal-count { font-size: 12px; color: var(--text-3); margin-left: 10px; }
.agent-badges { display: flex; gap: 8px; }
.agent-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-alt);
  text-align: center;
}
.agent-metric-label {
  font-size: 10px;
  color: var(--text-4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.agent-metric-value {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.3px;
}
.agent-section-label {
  padding: 12px 20px 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
}
.agent-section-label.closed { color: var(--green); border-top: 1px solid var(--border-light); }
.agent-section-label.backout { color: var(--red); border-top: 1px solid var(--border-light); }
.agent-deal-table { table-layout: fixed; width: 100%; }
.agent-deal-table th,
.agent-deal-table td { white-space: nowrap; text-align: center; }
.agent-deal-table th:first-child,
.agent-deal-table td:first-child { text-align: left; }

/* ── Sub-Tab Navigation ─────────────────────── */
.sub-tabs {
  display: flex;
  gap: 0;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.sub-tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  user-select: none;
}
.sub-tab:hover { color: var(--text-2); }
.sub-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.sub-view { display: none; }
.sub-view.active { display: block; animation: fadeIn 200ms ease; }

/* ── Dashboard Charts ───────────────────────── */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 0 32px 16px;
}
.dash-chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.dash-chart-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.dash-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
}
.dash-chart-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-4);
  margin-bottom: 14px;
}
.dash-chart-card canvas { max-height: 260px; }

.dash-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.dash-agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
  border-left: 3px solid var(--accent);
}
.dash-agent-name { font-weight: 600; font-size: 14px; }
.dash-agent-nick { font-size: 11px; color: var(--text-4); margin-top: 1px; }
.dash-agent-stats { margin-top: 12px; }
.dash-agent-stat {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12.5px;
}
.dash-agent-stat-label { color: var(--text-3); }
.dash-agent-stat-value { font-weight: 600; color: var(--text); }
.dash-agent-divider { border-top: 1px solid var(--border-light); margin: 8px 0; }

.dash-filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.dash-filter-bar label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-4);
}
.dash-filter-bar select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text-2);
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 900px) {
  .dash-chart-row { grid-template-columns: 1fr; }
  .dash-chart-row-3 { grid-template-columns: 1fr; }
  .dash-agent-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .schedule-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .agent-metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   AURORA POLISH — chrome, topbar, deal detail
   ═══════════════════════════════════════════════════════ */

/* sidebar */
.sidebar { background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 220px), var(--panel); }
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 22px 18px 20px; border-bottom: 1px solid var(--line); }
.sb-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--mark-grad); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px -6px rgba(110,150,242,.7);
}
.sb-mark svg { width: 16px; height: 16px; }
.sb-brand h1 { font-family: var(--font); font-size: 16px; font-weight: 600; letter-spacing: .01em; color: var(--text); }
.sb-brand span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); margin-top: 1px; }
.sb-item { font-size: 14px; gap: 11px; padding: 9px 11px; border-radius: 10px; }
.sb-item.active [data-navicon], .sb-item.active svg { color: var(--accent); }
.sb-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
.sb-dot { box-shadow: 0 0 8px var(--ok); animation: dd-pulse 2.6s ease-in-out infinite; }
@keyframes dd-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* global topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 32px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.topbar-spacer { flex: 1; }
.theme-toggle { display: flex; padding: 3px; gap: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.theme-toggle button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; padding: 6px 11px; border-radius: 7px;
  background: transparent; color: var(--text-3); transition: all var(--transition);
}
.theme-toggle button svg { width: 13px; height: 13px; }
.theme-toggle button.on { background: var(--panel-hi); color: var(--text); box-shadow: var(--active-glow); }
.tb-icon-btn {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text-3);
  cursor: pointer; transition: all var(--transition);
}
.tb-icon-btn:hover { color: var(--text); border-color: var(--line-2); }
.tb-icon-btn svg { width: 16px; height: 16px; }
.tb-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--mark-grad); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0; }

/* card / panel + hover lifts */
.card, .stat-card, .dash-chart-card, .dash-agent-card { box-shadow: var(--panel-shadow); }
.stat-card { transition: transform .18s ease, border-color .18s ease; }
.stat-card:hover { transform: translateY(-2px); border-color: var(--line-2); }

/* page title → Jost 600 */
.page-title { font-family: var(--font); font-weight: 600; font-size: 21px; letter-spacing: .01em; }

/* badges → pills */
.badge { border-radius: 999px; padding: 3px 10px; font-weight: 500; white-space: nowrap; }

/* primary buttons → gradient */
.btn-primary, .filter-chip.active, .action-note-save, .task-input-row button[onclick],
button.btn-primary { background: var(--mark-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 22px -8px rgba(110,150,242,.7); }
.btn-primary:hover { background: var(--mark-grad); filter: brightness(1.06); }

/* today highlight in schedule */
.sched-today { background: var(--accent-bg) !important; box-shadow: inset 2px 0 0 var(--accent); }

/* ═══ Deal Detail view ═══ */
.detail-back {
  display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0;
  color: var(--text-3); font-family: inherit; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 18px;
}
.detail-back:hover { color: var(--text); }
.detail-back svg { width: 15px; height: 15px; }
.detail-hero {
  position: relative; overflow: hidden; padding: 24px 26px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--panel); box-shadow: var(--panel-shadow); margin-bottom: 18px;
}
.detail-hero::before { content: ''; position: absolute; inset: 0; background: var(--aurora); opacity: .07; pointer-events: none; }
.detail-hero-row { position: relative; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.detail-unit { font-family: var(--font-mono); font-size: 26px; font-weight: 600; }
.detail-addr { font-size: 15px; color: var(--text-2); margin-top: 6px; }
.detail-agent { font-size: 13px; color: var(--text-4); margin-top: 3px; }
.detail-actions { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.detail-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--line);
  box-shadow: var(--panel-shadow); overflow: hidden; margin-bottom: 18px;
}
.detail-fact { padding: 16px 18px; background: var(--panel); }
.detail-fact-k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.detail-fact-v { font-family: var(--font-mono); font-size: 19px; margin-top: 6px; }
.detail-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.timeline-entry { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.timeline-entry:last-child { border-bottom: none; }
.timeline-rail { display: flex; flex-direction: column; align-items: center; padding-top: 3px; }
.timeline-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.timeline-line { flex: 1; width: 1px; background: var(--line); margin-top: 4px; }
.timeline-when { margin-left: auto; font-size: 11.5px; color: var(--text-4); font-family: var(--font-mono); }
.timeline-who { font-size: 11.5px; color: var(--accent); margin: 2px 0 4px; }
@media (max-width: 900px) {
  .detail-facts { grid-template-columns: repeat(2, 1fr); }
  .detail-cols { grid-template-columns: 1fr; }
}

/* dot helpers */
.dot { width: 7px; height: 7px; border-radius: 999px; flex: none; display: inline-block; }
.dot-bad { background: var(--bad); } .dot-warn { background: var(--warn); }
.dot-ok { background: var(--ok); } .dot-active, .dot-accent { background: var(--accent); }