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

:root {
  --crm-font: 'Urbanist', 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --crm-bg: #eef3f8;
  --crm-surface: #ffffff;
  --crm-surface-soft: #f7fafc;
  --crm-border: #dbe5ee;
  --crm-border-soft: #edf2f7;
  --crm-text: #132033;
  --crm-muted: #65758b;
  --crm-primary: #0f766e;
  --crm-primary-dark: #115e59;
  --crm-blue: #2563eb;
  --crm-orange: #ea580c;
  --crm-red: #dc2626;
  --crm-green: #16a34a;
  --crm-purple: #7c3aed;
  --crm-shadow: 0 16px 45px rgba(15, 23, 42, 0.08);
  --crm-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.06);
  --crm-radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--crm-bg);
}

body {
  min-height: 100vh;
  font-family: var(--crm-font) !important;
  color: var(--crm-text);
  background:
    linear-gradient(115deg, rgba(15, 118, 110, 0.08), transparent 30%),
    linear-gradient(245deg, rgba(37, 99, 235, 0.08), transparent 32%),
    var(--crm-bg) !important;
  letter-spacing: 0;
}

body.crm-app {
  padding: 24px !important;
}

h1 {
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font-family: var(--crm-font) !important;
}

button {
  min-height: 34px;
}

button:disabled,
.btn-primary:disabled,
.btn-action:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none !important;
  box-shadow: none !important;
}

body.crm-app > h1,
.header-bar {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(219, 229, 238, 0.9);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow-soft);
  backdrop-filter: blur(14px);
  padding: 18px 20px;
}

body.crm-app > h1 {
  margin-bottom: 16px !important;
}

.header-bar {
  gap: 16px;
  flex-wrap: wrap;
}

.header-bar h1 {
  margin: 0;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px !important;
  margin: 0 0 20px !important;
  padding: 10px !important;
  overflow-x: auto;
  border: 1px solid rgba(219, 229, 238, 0.92) !important;
  border-radius: var(--crm-radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--crm-shadow-soft);
  backdrop-filter: blur(16px);
}

.tab-btn {
  flex: 0 0 auto;
  border-radius: var(--crm-radius) !important;
  color: var(--crm-muted) !important;
  min-height: 40px;
  padding: 10px 16px !important;
}

.tab-btn:hover {
  background: #eef7f5 !important;
  color: var(--crm-primary-dark) !important;
}

.tab-btn.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--crm-primary), var(--crm-blue)) !important;
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.22) !important;
}

.panel,
.kpi-card,
.chart-card,
.price-box,
.bk-wizard,
#loginScreen,
#adminLoginOverlay .login-box {
  border-radius: var(--crm-radius) !important;
  border: 1px solid rgba(219, 229, 238, 0.95) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--crm-shadow-soft) !important;
}

.panel {
  padding: 22px !important;
}

.panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--crm-text) !important;
  border-bottom-color: var(--crm-border-soft) !important;
  letter-spacing: 0;
}

.section-header {
  color: var(--crm-text) !important;
  letter-spacing: 0.08em;
}

.kpi-grid,
.dashboard-grid {
  gap: 16px !important;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  padding: 20px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--crm-primary), var(--crm-blue), var(--crm-orange));
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.24) !important;
  box-shadow: var(--crm-shadow) !important;
}

.kpi-title {
  color: var(--crm-muted) !important;
  letter-spacing: 0.06em !important;
}

.kpi-value {
  color: var(--crm-text) !important;
  letter-spacing: 0;
}

.kpi-value.green { color: var(--crm-green) !important; }
.kpi-value.blue { color: var(--crm-blue) !important; }
.kpi-value.orange { color: var(--crm-orange) !important; }
.kpi-value.purple { color: var(--crm-purple) !important; }

.toolbar,
.filters {
  gap: 10px !important;
}

.table-responsive {
  border: 1px solid var(--crm-border-soft);
  border-radius: var(--crm-radius);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

table {
  border-collapse: separate !important;
  border-spacing: 0;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc !important;
  color: #64748b !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid var(--crm-border) !important;
}

td {
  color: #334155;
  border-bottom-color: var(--crm-border-soft) !important;
}

tbody tr {
  transition: background 0.14s ease;
}

tbody tr:hover {
  background: #f8fbfd !important;
}

.btn-primary,
.bk-btn-next,
.bk-submit {
  border-radius: var(--crm-radius) !important;
  border: none !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--crm-primary), var(--crm-blue)) !important;
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.18) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important;
}

.btn-primary:hover,
.bk-btn-next:hover,
.bk-submit:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 14px 28px rgba(15, 118, 110, 0.24) !important;
}

.btn-action,
.btn-danger,
.bk-btn-back,
.bk-btn-clear {
  border-radius: var(--crm-radius) !important;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
}

.btn-action {
  border: 1px solid var(--crm-border) !important;
  background: #f8fafc !important;
  color: var(--crm-text) !important;
}

.btn-action:hover {
  transform: translateY(-1px);
  background: #eef7f5 !important;
  color: var(--crm-primary-dark) !important;
  border-color: rgba(15, 118, 110, 0.28) !important;
}

.btn-danger {
  background: #fee2e2 !important;
  color: var(--crm-red) !important;
}

.btn-danger:hover {
  background: #fecaca !important;
}

.input-box,
.portal-input,
.notes-area,
.status-select,
.bk-input,
.bk-select,
#loginScreen input {
  border-radius: var(--crm-radius) !important;
  border: 1.5px solid var(--crm-border) !important;
  background: #fff !important;
  color: var(--crm-text) !important;
  box-shadow: none;
}

.input-box:focus,
.portal-input:focus,
.notes-area:focus,
.status-select:focus,
.bk-input:focus,
.bk-select:focus,
#loginScreen input:focus {
  border-color: var(--crm-primary) !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1) !important;
}

.result-box,
.bk-success-box {
  border-radius: var(--crm-radius) !important;
  border: 1px solid rgba(15, 118, 110, 0.22) !important;
  background: linear-gradient(135deg, #ecfdf5, #eff6ff) !important;
}

.link-output {
  border-radius: var(--crm-radius) !important;
  border-color: rgba(15, 118, 110, 0.28) !important;
  background: #fff !important;
}

.modal-overlay {
  backdrop-filter: blur(8px);
  background: rgba(15, 23, 42, 0.44) !important;
}

.modal {
  border-radius: var(--crm-radius) !important;
  border: 1px solid var(--crm-border);
  box-shadow: var(--crm-shadow) !important;
}

#loginScreen,
#adminLoginOverlay .login-box {
  max-width: 430px !important;
  margin-top: 9vh !important;
  padding: 34px !important;
}

#loginScreen h1,
#adminLoginOverlay h2 {
  color: var(--crm-text) !important;
}

.status-badge {
  border-radius: 999px !important;
}

body.order-page {
  padding: 0 !important;
}

.bk-header {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(37, 99, 235, 0.88)),
    linear-gradient(45deg, #0f172a, #0f766e) !important;
  padding-bottom: 96px !important;
  overflow: hidden;
}

.bk-header::after {
  content: '';
  position: absolute;
  inset: auto 12% -70px auto;
  width: 280px;
  height: 160px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: rotate(-18deg);
  z-index: -1;
}

.bk-header h1 {
  font-size: clamp(30px, 5vw, 46px) !important;
  letter-spacing: 0 !important;
}

.bk-header p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.bk-container {
  max-width: 900px !important;
}

.bk-wizard {
  overflow: hidden;
}

.bk-progress {
  background: #f8fafc !important;
}

.bk-prog-step {
  letter-spacing: 0.06em !important;
}

.bk-prog-step.active {
  color: var(--crm-primary) !important;
}

.bk-prog-step.active::after {
  background: linear-gradient(90deg, var(--crm-primary), var(--crm-blue)) !important;
}

.bk-step-title {
  color: var(--crm-text) !important;
}

.price-box {
  border-color: rgba(15, 118, 110, 0.28) !important;
  background: #f8fafc !important;
}

.price-box h2 {
  color: var(--crm-primary) !important;
}

@media (max-width: 980px) {
  body.crm-app {
    padding: 16px !important;
  }

  .kpi-grid,
  .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.crm-app {
    padding: 12px !important;
  }

  body.crm-app > h1,
  .header-bar,
  .panel {
    padding: 16px !important;
  }

  .tabs {
    top: 0;
  }

  .tab-btn {
    padding: 9px 13px !important;
    font-size: 13px !important;
  }

  .toolbar,
  .filters,
  .header-bar {
    align-items: stretch !important;
    flex-direction: column;
  }

  .filters > *,
  .toolbar > *,
  .btn-primary,
  .btn-action {
    width: 100%;
  }

  .bk-body {
    padding: 26px 18px !important;
  }
}

/* Admin dashboard refresh */
#tab-dashboard {
  --dash-ink: #121826;
  --dash-muted: #6b7280;
  --dash-line: #e5edf5;
  --dash-green: #22c55e;
  --dash-blue: #2563eb;
  --dash-purple: #7c3aed;
  --dash-orange: #f97316;
}

.admin-dashboard-shell {
  display: grid;
  gap: 18px;
}

.dash-hero,
.dash-panel,
.dash-kpi-card {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.55fr);
  gap: 22px;
  padding: 26px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(18, 24, 38, 0.96), rgba(15, 118, 110, 0.9)),
    linear-gradient(90deg, #111827, #0f766e);
  overflow: hidden;
}

.dash-hero-copy h2 {
  margin: 8px 0 8px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: 0;
}

.dash-hero-copy p {
  max-width: 660px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}

.dash-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.dash-hero-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.dash-hero-actions button:first-child {
  color: #102018;
  background: #86efac;
}

.dash-hero-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.16);
}

.dash-hero-actions button:first-child:hover {
  background: #bbf7d0;
}

.dash-range-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 6px 4px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  color: #71717a;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.dash-range-control select {
  min-height: 30px;
  padding: 4px 28px 4px 10px;
  border: 1px solid #d4d4d8;
  border-radius: 7px;
  color: #27272a;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
}

.dash-range-control select:focus {
  border-color: #2f6fed;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}

.dash-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border: 1px solid #dbeafe;
  border-radius: 50%;
  color: #2f6fed;
  background: #eff6ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}

.dash-help::after,
.dash-help::before {
  display: none;
}

.dash-hero-strip .dash-help,
.dash-kpi-top .dash-help {
  width: 14px;
  height: 14px;
  font-size: 9px;
}

.dash-floating-tip {
  position: fixed;
  z-index: 99999;
  max-width: min(280px, calc(100vw - 28px));
  padding: 10px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #1f2937;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.dash-floating-tip.visible {
  opacity: 1;
  transform: translateY(0);
}

.dash-floating-tip::after {
  content: '';
  position: absolute;
  left: var(--tip-arrow-left, 50%);
  bottom: -5px;
  width: 9px;
  height: 9px;
  border-right: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.dash-floating-tip.below::after {
  top: -5px;
  bottom: auto;
  border: 0;
  border-left: 1px solid #cbd5e1;
  border-top: 1px solid #cbd5e1;
}

.dash-eyebrow {
  display: inline-flex;
  align-items: center;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dash-hero .dash-eyebrow {
  color: #86efac;
}

.dash-hero-metric {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.dash-hero-metric span,
.dash-hero-metric small {
  color: rgba(255, 255, 255, 0.66);
  font-weight: 800;
}

.dash-hero-metric strong {
  display: block;
  margin: 6px 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: 0;
}

.dash-hero-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.dash-hero-strip div {
  min-width: 0;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.06);
}

.dash-hero-strip span {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-hero-strip small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dash-kpi-card {
  padding: 18px;
  background: #fff;
  overflow: hidden;
}

.dash-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.tone-green .dash-icon { background: var(--dash-green); }
.tone-blue .dash-icon { background: var(--dash-blue); }
.tone-purple .dash-icon { background: var(--dash-purple); }
.tone-orange .dash-icon { background: var(--dash-orange); }

.dash-kpi-card strong {
  display: block;
  margin-top: 14px;
  color: var(--dash-ink);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  letter-spacing: 0;
}

.dash-kpi-card p {
  min-height: 20px;
  margin: 8px 0 14px;
  color: var(--dash-muted);
  font-size: 13px;
  font-weight: 700;
}

.dash-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.dash-meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  transition: width 0.45s ease;
}

.tone-green .dash-meter span { background: linear-gradient(90deg, #16a34a, #86efac); }
.tone-blue .dash-meter span { background: linear-gradient(90deg, #2563eb, #38bdf8); }
.tone-purple .dash-meter span { background: linear-gradient(90deg, #7c3aed, #c084fc); }
.tone-orange .dash-meter span { background: linear-gradient(90deg, #ea580c, #fbbf24); }

.dash-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
}

.dash-main-grid-secondary {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
}

.dash-insight-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
}

.dash-panel {
  min-width: 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.96);
}

.dash-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dash-panel-head h3 {
  margin: 4px 0 0;
  color: var(--dash-ink);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0;
}

.dash-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.dash-chart-wrap {
  position: relative;
  height: 260px;
}

.dash-chart-tall {
  height: 330px;
}

.dash-donut-wrap {
  height: 210px;
}

.dash-status-legend,
.dash-source-list {
  display: grid;
  gap: 10px;
}

.dash-status-item,
.dash-source-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  color: var(--dash-muted);
  font-size: 13px;
  font-weight: 800;
}

.dash-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.dash-source-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.dash-source-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #2563eb);
}

.dash-route-list,
.dash-activity-list {
  display: grid;
  gap: 12px;
}

.dash-route-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e5edf5;
  border-radius: 8px;
  background: #f8fafc;
}

.dash-route-main {
  min-width: 0;
}

.dash-route-name {
  overflow: hidden;
  color: var(--dash-ink);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-route-sub {
  margin-top: 3px;
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 800;
}

.dash-route-badge {
  align-self: center;
  padding: 6px 9px;
  border-radius: 999px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.dash-activity-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5edf5;
  border-radius: 8px;
  background: #fff;
}

.dash-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  font-size: 13px;
  font-weight: 900;
}

.dash-activity-title {
  color: var(--dash-ink);
  font-size: 14px;
  font-weight: 900;
}

.dash-activity-sub {
  margin-top: 2px;
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 750;
}

.dash-activity-amount {
  color: #16a34a;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.dash-table-wrap {
  margin-top: 0;
  box-shadow: none;
}

#leaderboardTable {
  min-width: 680px;
}

#leaderboardTable td {
  vertical-align: middle;
}

.dash-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #111827;
  background: #f1f5f9;
  font-weight: 900;
}

.dash-agent-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-agent-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.dash-agent-name {
  color: var(--dash-ink);
  font-weight: 900;
}

.dash-agent-sub {
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 700;
}

.dash-money {
  color: #16a34a;
  font-weight: 900;
}

@media (max-width: 1100px) {
  .dash-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-main-grid,
  .dash-main-grid-secondary,
  .dash-insight-grid,
  .dash-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .dash-hero,
  .dash-panel,
  .dash-kpi-card {
    padding: 16px;
  }

  .dash-hero-actions button,
  .dash-activity-item {
    width: 100%;
  }

  .dash-activity-item {
    grid-template-columns: auto 1fr;
  }

  .dash-activity-amount {
    grid-column: 2;
  }

  .dash-kpi-grid,
  .dash-hero-strip {
    grid-template-columns: 1fr;
  }

  .dash-chart-wrap,
  .dash-chart-tall {
    height: 260px;
  }
}

/* Quieter dashboard variant */
.admin-dashboard-shell {
  gap: 14px;
}

.dash-hero,
.dash-panel,
.dash-kpi-card {
  border-color: #e6edf5;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.dash-hero {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  gap: 16px;
  padding: 18px;
  color: #111827;
  background: #fff;
}

.dash-hero-copy h2 {
  margin: 6px 0 6px;
  color: #111827;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 800;
}

.dash-hero-copy p {
  color: #64748b;
  font-size: 14px;
}

.dash-hero .dash-eyebrow,
.dash-eyebrow {
  color: #0f766e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.dash-hero-actions {
  margin-top: 14px;
}

.dash-hero-actions button {
  min-height: 36px;
  padding: 8px 12px;
  border-color: #dbe5ee;
  color: #334155;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
}

.dash-hero-actions button:first-child {
  color: #fff;
  background: #0f766e;
}

.dash-hero-actions button:hover {
  border-color: #bdd6ec;
  color: #0f172a;
  background: #eef6fb;
}

.dash-hero-actions button:first-child:hover {
  color: #fff;
  background: #115e59;
}

.dash-hero-metric {
  min-height: 116px;
  padding: 16px;
  border-color: #dbeafe;
  background: linear-gradient(180deg, #f8fbff, #f2f7fd);
  backdrop-filter: none;
}

.dash-hero-metric span,
.dash-hero-metric small {
  color: #64748b;
  font-weight: 750;
}

.dash-hero-metric strong {
  margin: 4px 0;
  color: #0f172a;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 850;
}

.dash-hero-strip {
  border-color: #e6edf5;
  background: #f8fafc;
}

.dash-hero-strip div {
  padding: 10px 14px;
  background: #fff;
}

.dash-hero-strip span {
  color: #111827;
  font-size: 19px;
  font-weight: 850;
}

.dash-hero-strip small {
  color: #64748b;
  font-size: 10px;
}

.dash-kpi-grid {
  gap: 12px;
}

.dash-kpi-card {
  padding: 14px;
}

.dash-kpi-top {
  font-size: 10px;
  font-weight: 800;
}

.dash-icon {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.dash-kpi-card strong {
  margin-top: 10px;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 850;
}

.dash-kpi-card p {
  min-height: 18px;
  margin: 6px 0 12px;
  font-size: 12px;
  font-weight: 650;
}

.dash-meter {
  height: 5px;
}

.dash-main-grid,
.dash-main-grid-secondary,
.dash-insight-grid {
  gap: 14px;
}

.dash-panel {
  padding: 16px;
  background: #fff;
}

.dash-panel-head {
  margin-bottom: 12px;
}

.dash-panel-head h3 {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 800;
}

.dash-chip {
  min-height: 26px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
}

.dash-chart-wrap {
  height: 220px;
}

.dash-chart-tall {
  height: 285px;
}

.dash-donut-wrap {
  height: 180px;
}

.dash-status-item,
.dash-source-item,
.dash-route-sub,
.dash-activity-sub,
.dash-agent-sub {
  font-weight: 650;
}

.dash-route-list,
.dash-activity-list {
  gap: 9px;
}

.dash-route-item,
.dash-activity-item {
  padding: 10px;
}

.dash-route-name,
.dash-activity-title,
.dash-agent-name,
.dash-money {
  font-weight: 800;
}

.dash-activity-icon,
.dash-agent-avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
}

.dash-rank {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

@media (max-width: 680px) {
  .dash-hero {
    padding: 14px;
  }

  .dash-hero-actions {
    gap: 8px;
  }
}

/* Warm neutral dashboard palette */
#tab-dashboard {
  --dash-ink: #18181b;
  --dash-muted: #71717a;
  --dash-line: #e7e5e4;
  --dash-green: #a16207;
  --dash-blue: #57534e;
  --dash-purple: #7c3aed;
  --dash-orange: #ef6f5e;
}

.dash-hero .dash-eyebrow,
.dash-eyebrow {
  color: #9a3412;
}

.dash-hero-actions button {
  border-color: #e7e5e4;
  color: #44403c;
  background: #fafaf9;
}

.dash-hero-actions button:first-child {
  color: #fff;
  background: #9a3412;
}

.dash-hero-actions button:hover {
  border-color: #d6d3d1;
  color: #1c1917;
  background: #f5f5f4;
}

.dash-hero-actions button:first-child:hover {
  background: #7c2d12;
}

.dash-hero-metric {
  border-color: #e7e5e4;
  background: linear-gradient(180deg, #fffaf5, #fafaf9);
}

.dash-chip {
  border-color: #fed7aa;
  color: #9a3412;
  background: #fff7ed;
}

.tone-green .dash-icon,
.tone-blue .dash-icon,
.tone-purple .dash-icon,
.tone-orange .dash-icon {
  background: #44403c;
}

.tone-green .dash-meter span { background: linear-gradient(90deg, #a16207, #f59e0b); }
.tone-blue .dash-meter span { background: linear-gradient(90deg, #57534e, #a8a29e); }
.tone-purple .dash-meter span { background: linear-gradient(90deg, #7c3aed, #c084fc); }
.tone-orange .dash-meter span { background: linear-gradient(90deg, #c2410c, #fb923c); }

.dash-source-bar span {
  background: linear-gradient(90deg, #78716c, #b45309, #ef6f5e);
}

.dash-route-badge {
  color: #7c2d12;
  background: #ffedd5;
}

.dash-activity-icon,
.dash-agent-avatar {
  background: linear-gradient(135deg, #44403c, #b45309);
}

.dash-money,
.dash-activity-amount {
  color: #b45309;
}

body.crm-app {
  background:
    linear-gradient(115deg, rgba(180, 83, 9, 0.055), transparent 30%),
    linear-gradient(245deg, rgba(120, 113, 108, 0.08), transparent 32%),
    #f2f0ed !important;
}

body.crm-app .tabs .tab-btn.active {
  background: #9a3412 !important;
  box-shadow: 0 8px 18px rgba(154, 52, 18, 0.16) !important;
}

body.crm-app .tabs .tab-btn:hover {
  background: #fff7ed !important;
  color: #7c2d12 !important;
}

/* Refined dashboard palette and chart sizing */
body.crm-app {
  background: #f5f6f8 !important;
}

body.crm-app .tabs .tab-btn.active {
  background: #1f2937 !important;
  box-shadow: 0 8px 18px rgba(31, 41, 55, 0.12) !important;
}

body.crm-app .tabs .tab-btn:hover {
  background: #f4f4f5 !important;
  color: #27272a !important;
}

#tab-dashboard {
  --dash-ink: #18181b;
  --dash-muted: #71717a;
  --dash-line: #e4e4e7;
  --dash-green: #6d5bd0;
  --dash-blue: #494657;
  --dash-purple: #8b7cf6;
  --dash-orange: #d76d77;
}

.dash-hero,
.dash-panel,
.dash-kpi-card {
  border-color: #e4e4e7;
  box-shadow: 0 6px 18px rgba(24, 24, 27, 0.045);
}

.dash-hero .dash-eyebrow,
.dash-eyebrow {
  color: #6d5bd0;
}

.dash-hero-actions button {
  border-color: #e4e4e7;
  color: #3f3f46;
  background: #fafafa;
}

.dash-hero-actions button:first-child {
  color: #fff;
  background: #494657;
}

.dash-hero-actions button:hover {
  border-color: #d4d4d8;
  background: #f4f4f5;
}

.dash-hero-actions button:first-child:hover {
  background: #34313f;
}

.dash-hero-metric {
  border-color: #e4e4e7;
  background: linear-gradient(180deg, #ffffff, #f8f8fb);
}

.dash-chip {
  border-color: #ddd6fe;
  color: #5b4bb7;
  background: #f5f3ff;
}

.tone-green .dash-icon,
.tone-blue .dash-icon,
.tone-purple .dash-icon,
.tone-orange .dash-icon {
  border: 1px solid #e4e4e7;
}

.tone-green .dash-icon {
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #eff6ff;
}

.tone-blue .dash-icon {
  border-color: #ddd6fe;
  color: #5b4bb7;
  background: #f5f3ff;
}

.tone-purple .dash-icon {
  border-color: #e9d5ff;
  color: #7c3aed;
  background: #faf5ff;
}

.tone-orange .dash-icon {
  border-color: #fecdd3;
  color: #be123c;
  background: #fff1f2;
}

.tone-green .dash-meter span { background: linear-gradient(90deg, #6d5bd0, #a78bfa); }
.tone-blue .dash-meter span { background: linear-gradient(90deg, #494657, #a1a1aa); }
.tone-purple .dash-meter span { background: linear-gradient(90deg, #8b7cf6, #c4b5fd); }
.tone-orange .dash-meter span { background: linear-gradient(90deg, #d76d77, #f0a1a8); }

.dash-chart-wrap {
  height: 200px;
}

.dash-chart-tall {
  height: 230px;
}

.dash-donut-wrap {
  height: 126px;
}

.dash-source-bar span {
  background: linear-gradient(90deg, #494657, #6d5bd0);
}

.dash-route-badge {
  color: #5b4bb7;
  background: #f5f3ff;
}

.dash-activity-icon,
.dash-agent-avatar {
  background: linear-gradient(135deg, #494657, #6d5bd0);
}

.dash-money,
.dash-activity-amount {
  color: #5b4bb7;
}

.dash-status-item,
.dash-source-item {
  font-size: 12px;
}

/* Focused blue accent for the dashboard summary area */
#tab-dashboard {
  --dash-focus-blue: #2f6fed;
  --dash-focus-blue-soft: #eff6ff;
}

.dash-hero {
  position: relative;
}

.dash-hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--dash-focus-blue);
}

.dash-hero .dash-eyebrow {
  color: var(--dash-focus-blue);
}

.dash-hero-actions button:first-child {
  background: var(--dash-focus-blue);
  box-shadow: 0 10px 20px rgba(47, 111, 237, 0.16);
}

.dash-hero-actions button:first-child:hover {
  background: #255ed3;
}

.dash-hero-metric {
  border-color: #cfe0ff;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.7), rgba(255, 255, 255, 0.95)),
    #fff;
}

.dash-hero-metric span {
  color: #49637e;
}

.dash-hero-metric strong {
  color: #102033;
}

.dash-hero-strip div:nth-child(2) {
  background: var(--dash-focus-blue-soft);
}

.dash-hero-strip div:nth-child(2) span {
  color: var(--dash-focus-blue);
}

/* Deterministic cartoon avatars for dashboard people */
.dash-cartoon-avatar {
  --avatar-bg: #f5f3ff;
  --avatar-face: #ffd7b0;
  --avatar-hair: #494657;
  --avatar-shirt: #6d5bd0;
  --avatar-eye: #27272a;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(109, 91, 208, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.86), transparent 24%),
    var(--avatar-bg);
  box-shadow: inset 0 -10px 0 var(--avatar-shirt);
}

.dash-cartoon-avatar::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -6px;
  height: 15px;
  border-radius: 14px 14px 0 0;
  background: var(--avatar-shirt);
}

.dash-avatar-face {
  position: relative;
  z-index: 2;
  display: block;
  width: 20px;
  height: 22px;
  margin-top: 4px;
  border-radius: 44% 44% 48% 48%;
  background: var(--avatar-face);
  box-shadow: 0 1px 0 rgba(24, 24, 27, 0.08);
}

.dash-avatar-face i {
  position: absolute;
  top: 9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--avatar-eye);
}

.dash-avatar-face i:first-child {
  left: 5px;
}

.dash-avatar-face i:nth-child(2) {
  right: 5px;
}

.dash-avatar-face b {
  position: absolute;
  left: 7px;
  bottom: 6px;
  width: 6px;
  height: 3px;
  border-bottom: 2px solid rgba(39, 39, 42, 0.46);
  border-radius: 0 0 999px 999px;
}

.dash-avatar-hair {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 10px;
  width: 18px;
  height: 11px;
  border-radius: 12px 12px 7px 7px;
  background: var(--avatar-hair);
}

.dash-avatar-hair::after {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -6px;
  width: 6px;
  height: 11px;
  border-radius: 999px;
  background: var(--avatar-hair);
}

.avatar-1 { --avatar-bg:#f5f3ff; --avatar-face:#ffd7b0; --avatar-hair:#494657; --avatar-shirt:#6d5bd0; }
.avatar-2 { --avatar-bg:#fff7ed; --avatar-face:#f6c99f; --avatar-hair:#7c2d12; --avatar-shirt:#d76d77; }
.avatar-3 { --avatar-bg:#eef2ff; --avatar-face:#f2c9a5; --avatar-hair:#312e81; --avatar-shirt:#8b7cf6; }
.avatar-4 { --avatar-bg:#f4f4f5; --avatar-face:#e8b98f; --avatar-hair:#27272a; --avatar-shirt:#71717a; }
.avatar-5 { --avatar-bg:#ecfeff; --avatar-face:#f1c59b; --avatar-hair:#164e63; --avatar-shirt:#5b8fa8; }
.avatar-6 { --avatar-bg:#fff1f2; --avatar-face:#ffd2bd; --avatar-hair:#881337; --avatar-shirt:#e8798c; }
.avatar-7 { --avatar-bg:#fefce8; --avatar-face:#d9a57b; --avatar-hair:#713f12; --avatar-shirt:#c9974a; }
.avatar-8 { --avatar-bg:#f8fafc; --avatar-face:#c99473; --avatar-hair:#1f2937; --avatar-shirt:#494657; }

.avatar-2 .dash-avatar-hair,
.avatar-6 .dash-avatar-hair {
  top: 6px;
  height: 13px;
  border-radius: 50% 50% 8px 8px;
}

.avatar-3 .dash-avatar-hair,
.avatar-7 .dash-avatar-hair {
  left: 9px;
  width: 20px;
  border-radius: 9px 14px 6px 9px;
}

.avatar-4 .dash-avatar-hair::after,
.avatar-8 .dash-avatar-hair::after {
  right: auto;
  left: -2px;
}

.dash-log-item {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.dash-log-item .dash-activity-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-log-action {
  justify-self: end;
  max-width: 150px;
  padding: 6px 9px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  color: #2563eb;
  background: #eff6ff;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.dash-empty-log {
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 720px) {
  .dash-log-item {
    grid-template-columns: auto 1fr;
  }

  .dash-log-action {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
  }
}

/* Admin workspace v2: a visibly different product layout */
body.crm-app {
  padding: 0 !important;
  background:
    linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%) !important;
}

.admin-app-header {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 40;
  width: 258px;
  height: 132px;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: space-between !important;
  border: 1px solid #dde6f1 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.96)) !important;
  box-shadow: 0 16px 34px rgba(31, 41, 55, 0.08) !important;
  backdrop-filter: blur(14px);
}

.admin-brand-area {
  width: 100%;
  gap: 12px !important;
  align-items: flex-start !important;
}

.admin-brand-logo {
  width: 132px !important;
  height: auto !important;
}

.admin-brand-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

.admin-client-badge {
  min-height: 24px !important;
  padding: 4px 9px !important;
  border: 1px solid #dbe7ff !important;
  border-radius: 999px !important;
  color: #356dff !important;
  background: #f3f7ff !important;
  font-size: 11px !important;
  font-weight: 550 !important;
}

.admin-logout-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  min-height: 34px !important;
  padding: 8px 10px !important;
  border-color: #d8e0ea !important;
  border-radius: 8px !important;
  color: #344054 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 550 !important;
}

.admin-logout-btn svg {
  width: 15px !important;
  height: 15px !important;
}

.admin-nav.tabs {
  position: fixed;
  top: 164px;
  left: 18px;
  bottom: 18px;
  z-index: 35;
  width: 258px;
  margin: 0 !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px !important;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #dde6f1 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 16px 34px rgba(31, 41, 55, 0.07) !important;
}

.admin-nav .tab-btn {
  width: 100%;
  min-height: 38px;
  justify-content: flex-start;
  padding: 9px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #667085 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 520 !important;
}

.admin-nav .tab-btn:hover {
  color: #1f2937 !important;
  border-color: #e5edf6 !important;
  background: #f8fafc !important;
}

.admin-nav .tab-btn.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #1f2937, #356dff) !important;
  box-shadow: 0 10px 22px rgba(53, 109, 255, 0.18) !important;
}

.tab-content {
  margin-left: 292px !important;
  padding: 18px 20px 28px !important;
}

.tab-content:not(.active) {
  display: none !important;
}

.admin-dashboard-shell {
  max-width: 1480px;
  gap: 10px;
}

.dash-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.32fr);
  gap: 12px;
  padding: 14px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,249,255,0.96)),
    #fff;
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.06);
}

.dash-hero::before {
  width: 3px;
}

.dash-hero-copy h2 {
  font-size: 22px;
  font-weight: 620;
}

.dash-hero-copy p {
  max-width: 700px;
  font-size: 13px;
}

.dash-hero-actions {
  margin-top: 11px;
}

.dash-hero-actions button,
.dash-range-control {
  min-height: 32px;
}

.dash-hero-metric {
  min-height: 104px;
}

.dash-hero-metric strong {
  font-size: 30px;
}

.dash-hero-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 0;
  gap: 8px;
  background: transparent;
}

.dash-hero-strip div {
  border: 1px solid #e7edf5;
  border-radius: 8px;
  background: #fff;
}

.dash-kpi-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.dash-kpi-card {
  min-height: 118px;
  padding: 13px;
  border: 0;
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.055);
}

.dash-kpi-card strong {
  font-size: 25px;
}

.dash-main-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.62fr);
  gap: 10px;
}

.dash-main-grid-secondary,
.dash-insight-grid {
  gap: 10px;
}

.dash-panel {
  border: 0;
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.055);
}

.dash-panel-head h3 {
  font-size: 15px;
}

.dash-chart-wrap {
  height: 198px;
}

.dash-chart-tall {
  height: 224px;
}

.dash-donut-wrap {
  height: 148px;
}

@media (max-width: 1020px) {
  .admin-app-header,
  .admin-nav.tabs {
    position: static;
    width: auto;
    height: auto;
    margin: 14px !important;
  }

  .admin-app-header {
    flex-direction: row;
    align-items: center !important;
  }

  .admin-logout-btn {
    position: static;
    margin-left: auto;
  }

  .admin-nav.tabs {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .admin-nav .tab-btn {
    width: auto;
    flex: 0 0 auto;
  }

  .tab-content {
    margin-left: 0 !important;
    padding: 14px !important;
  }
}

@media (max-width: 720px) {
  .admin-app-header {
    align-items: stretch !important;
    flex-direction: column;
  }

  .admin-logout-btn {
    width: 100%;
    justify-content: center;
  }

  .dash-kpi-grid,
  .dash-hero,
  .dash-main-grid,
  .dash-main-grid-secondary,
  .dash-insight-grid,
  .dash-hero-strip {
    grid-template-columns: 1fr;
  }
}

/* Dashboard panels that can grow over time keep their own scroll area. */
#recentActivity,
#topRoutes,
#sourceBreakdown,
.dash-status-legend {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

#recentActivity {
  max-height: 360px;
}

.dash-table-wrap {
  max-height: 390px;
  overflow: auto;
}

#leaderboardTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

#recentActivity::-webkit-scrollbar,
#topRoutes::-webkit-scrollbar,
#sourceBreakdown::-webkit-scrollbar,
.dash-status-legend::-webkit-scrollbar,
.dash-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#recentActivity::-webkit-scrollbar-track,
#topRoutes::-webkit-scrollbar-track,
#sourceBreakdown::-webkit-scrollbar-track,
.dash-status-legend::-webkit-scrollbar-track,
.dash-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

#recentActivity::-webkit-scrollbar-thumb,
#topRoutes::-webkit-scrollbar-thumb,
#sourceBreakdown::-webkit-scrollbar-thumb,
.dash-status-legend::-webkit-scrollbar-thumb,
.dash-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd5e1;
}

/* Professional dashboard redesign */
#tab-dashboard {
  --dash-ink: #1f2937;
  --dash-soft-ink: #344054;
  --dash-muted: #667085;
  --dash-faint: #98a2b3;
  --dash-line: #e7edf5;
  --dash-panel: rgba(255, 255, 255, 0.95);
  --dash-page: #f6f8fb;
  --dash-blue: #356dff;
  --dash-indigo: #6658f6;
  --dash-coral: #e56f68;
  --dash-amber: #d89b22;
  --dash-mint: #17a88b;
  --dash-shadow: 0 14px 34px rgba(31, 41, 55, 0.07);
  --dash-shadow-soft: 0 8px 20px rgba(31, 41, 55, 0.05);
}

.admin-dashboard-shell {
  gap: 12px;
  color: var(--dash-ink);
}

.dash-hero,
.dash-panel,
.dash-kpi-card {
  border: 1px solid rgba(231, 237, 245, 0.98);
  border-radius: 10px;
  background: var(--dash-panel);
  box-shadow: var(--dash-shadow-soft);
}

.dash-hero {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.36fr);
  gap: 16px;
  padding: 18px;
  color: var(--dash-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.96)),
    var(--dash-panel);
}

.dash-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(180deg, var(--dash-blue), var(--dash-indigo), var(--dash-coral));
}

.dash-hero-copy h2 {
  margin: 4px 0 5px;
  color: var(--dash-ink);
  font-size: 26px;
  font-weight: 650;
  line-height: 1.08;
}

.dash-hero-copy p {
  max-width: 760px;
  color: var(--dash-muted);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.45;
}

.dash-eyebrow,
.dash-hero .dash-eyebrow {
  color: var(--dash-blue);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.dash-hero-actions {
  gap: 8px;
  margin-top: 14px;
}

.dash-hero-actions button {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  color: #344054;
  background: #fff;
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
  font-size: 13px;
  font-weight: 550;
}

.dash-hero-actions button:hover {
  border-color: #b8c7dc;
  color: #1f2937;
  background: #f8fafc;
  box-shadow: 0 8px 18px rgba(31, 41, 55, 0.07);
}

.dash-hero-actions .dash-action-primary,
.dash-hero-actions button:first-child {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #356dff, #6658f6);
  box-shadow: 0 10px 24px rgba(53, 109, 255, 0.22);
}

.dash-hero-actions .dash-action-primary:hover,
.dash-hero-actions button:first-child:hover {
  color: #fff;
  background: linear-gradient(135deg, #275ce8, #594de6);
}

.dash-action-primary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 14px;
  font-weight: 600;
}

.dash-range-control {
  min-height: 34px;
  padding: 3px 5px 3px 10px;
  border-color: #d8e0ea;
  color: var(--dash-muted);
  background: #fff;
  font-size: 12px;
  font-weight: 550;
}

.dash-range-control select {
  min-height: 26px;
  border-color: #e3e9f2;
  color: var(--dash-ink);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 550;
}

.dash-hero-metric {
  min-height: 116px;
  padding: 14px 16px;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
  background:
    linear-gradient(140deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.9)),
    #fff;
  backdrop-filter: none;
}

.dash-hero-metric span,
.dash-hero-metric small {
  color: var(--dash-muted);
  font-size: 13px;
  font-weight: 550;
}

.dash-hero-metric strong {
  margin: 5px 0 4px;
  color: var(--dash-ink);
  font-size: 34px;
  font-weight: 680;
}

.dash-hero-strip {
  gap: 0;
  border-color: #e3e9f2;
  background: #fff;
}

.dash-hero-strip div {
  padding: 11px 14px;
  background: #fff;
  border-right: 1px solid #eef2f7;
}

.dash-hero-strip div:last-child {
  border-right: 0;
}

.dash-hero-strip small {
  display: flex;
  align-items: center;
  color: var(--dash-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.dash-hero-strip span {
  margin-top: 5px;
  color: var(--dash-ink);
  font-size: 20px;
  font-weight: 650;
}

.dash-kpi-grid {
  gap: 12px;
}

.dash-kpi-card {
  position: relative;
  min-height: 144px;
  padding: 15px;
  overflow: hidden;
}

.dash-kpi-card::after {
  content: '';
  position: absolute;
  inset: auto 14px 0 14px;
  height: 2px;
  border-radius: 999px;
  background: #eef2f7;
}

.dash-kpi-top {
  color: var(--dash-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.dash-icon {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.tone-green .dash-icon { color: #087861; background: #e8faf5; box-shadow: inset 0 0 0 1px rgba(23, 168, 139, 0.18); }
.tone-blue .dash-icon { color: #275ce8; background: #eef4ff; box-shadow: inset 0 0 0 1px rgba(53, 109, 255, 0.16); }
.tone-purple .dash-icon { color: #594de6; background: #f2f0ff; box-shadow: inset 0 0 0 1px rgba(102, 88, 246, 0.16); }
.tone-orange .dash-icon { color: #c85750; background: #fff0ef; box-shadow: inset 0 0 0 1px rgba(229, 111, 104, 0.16); }

.dash-kpi-card strong {
  margin-top: 13px;
  color: var(--dash-ink);
  font-size: 29px;
  font-weight: 680;
}

.dash-kpi-card p {
  min-height: 18px;
  margin: 6px 0 12px;
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 450;
}

.dash-meter {
  height: 5px;
  background: #edf2f7;
}

.tone-green .dash-meter span { background: linear-gradient(90deg, #17a88b, #87decf); }
.tone-blue .dash-meter span { background: linear-gradient(90deg, #356dff, #8fb2ff); }
.tone-purple .dash-meter span { background: linear-gradient(90deg, #6658f6, #b8afff); }
.tone-orange .dash-meter span { background: linear-gradient(90deg, #e56f68, #f5aaa4); }

.dash-main-grid,
.dash-main-grid-secondary,
.dash-insight-grid {
  gap: 12px;
}

.dash-panel {
  padding: 16px;
}

.dash-panel-head {
  align-items: center;
  margin-bottom: 12px;
}

.dash-panel-head h3 {
  margin-top: 3px;
  color: var(--dash-ink);
  font-size: 16px;
  font-weight: 650;
}

.dash-chip {
  min-height: 27px;
  padding: 5px 9px;
  border-color: #e3e9f2;
  color: var(--dash-blue);
  background: #f4f7ff;
  font-size: 11px;
  font-weight: 600;
}

.dash-chart-wrap {
  height: 214px;
}

.dash-chart-tall {
  height: 252px;
}

.dash-donut-wrap {
  height: 162px;
}

.dash-status-legend,
.dash-source-list,
.dash-route-list,
.dash-activity-list {
  gap: 8px;
}

.dash-status-item,
.dash-source-item {
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 500;
}

.dash-status-item strong,
.dash-source-item strong {
  color: var(--dash-ink);
  font-weight: 650;
}

.dash-dot {
  width: 8px;
  height: 8px;
}

.dash-source-bar {
  height: 6px;
  background: #edf2f7;
}

.dash-source-bar span {
  background: linear-gradient(90deg, #356dff, #17a88b);
}

.dash-route-item,
.dash-activity-item {
  border-color: #e9eef5;
  border-radius: 9px;
  background: #fbfcfe;
}

.dash-route-item {
  padding: 10px 11px;
}

.dash-route-name,
.dash-activity-title,
.dash-agent-name {
  color: var(--dash-ink);
  font-size: 13px;
  font-weight: 620;
}

.dash-route-sub,
.dash-activity-sub,
.dash-agent-sub {
  color: var(--dash-muted);
  font-size: 11px;
  font-weight: 450;
}

.dash-route-badge,
.dash-log-action {
  color: #594de6;
  background: #f2f0ff;
  font-size: 11px;
  font-weight: 600;
}

.dash-activity-item {
  padding: 10px 11px;
  grid-template-columns: auto 1fr auto;
}

.dash-activity-amount,
.dash-money {
  color: var(--dash-indigo);
  font-size: 13px;
  font-weight: 650;
}

.dash-table-wrap {
  border-color: #e9eef5;
}

#leaderboardTable {
  min-width: 650px;
}

#leaderboardTable th {
  color: var(--dash-muted) !important;
  background: #f8fafc !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.05em !important;
}

#leaderboardTable td {
  color: var(--dash-soft-ink);
  font-size: 13px;
  font-weight: 450;
}

.dash-rank {
  width: 30px;
  height: 30px;
  color: #475467;
  background: #f2f4f7;
  font-size: 12px;
  font-weight: 650;
}

.dash-agent-cell {
  gap: 9px;
}

.dash-cartoon-avatar {
  transform: scale(0.86);
  transform-origin: left center;
}

.dash-help {
  width: 15px;
  height: 15px;
  border-color: #d9e6ff;
  color: var(--dash-blue);
  background: #f4f7ff;
  font-size: 9px;
  font-weight: 650;
}

.dash-floating-tip {
  border-color: #e3e9f2;
  color: var(--dash-soft-ink);
  box-shadow: 0 18px 45px rgba(31, 41, 55, 0.14);
  font-size: 12px;
  font-weight: 500;
}

.dash-empty-log {
  border-color: #d9e2ef;
  color: var(--dash-muted);
  background: #fbfcfe;
  font-weight: 500;
}

#recentActivity,
#topRoutes,
#sourceBreakdown,
.dash-status-legend {
  max-height: 278px;
}

#recentActivity {
  max-height: 312px;
}

.dash-table-wrap {
  max-height: 332px;
}

@media (max-width: 1100px) {
  .dash-hero,
  .dash-main-grid,
  .dash-main-grid-secondary,
  .dash-insight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dash-hero,
  .dash-panel,
  .dash-kpi-card {
    padding: 14px;
  }

  .dash-hero-copy h2 {
    font-size: 24px;
  }

  .dash-hero-actions {
    align-items: stretch;
  }

  .dash-hero-actions button,
  .dash-range-control {
    width: 100%;
  }

  .dash-hero-strip {
    grid-template-columns: 1fr;
  }

  .dash-hero-strip div {
    border-right: 0;
    border-bottom: 1px solid #eef2f7;
  }

  .dash-hero-strip div:last-child {
    border-bottom: 0;
  }
}