/*
 * RingCraft Design V1 — minimalist dashboard
 * Dense, aligned, quiet surfaces. DOM IDs and click behavior are unchanged.
 */

#content:has(.dash-hero) {
  padding-top: 20px !important;
  padding-bottom: 58px !important;
}

#content:has(.dash-hero) > * {
  max-width: 1480px;
  margin-right: auto;
}

.dash-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 16px;
  padding: 0 2px;
}

.dash-hero-text { min-width: 0; }

.dash-hero-eyebrow,
.dash-filter-label,
.dash-leaderboard-label,
.dash-section-label {
  color: var(--rc-muted);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.dash-hero-greeting {
  margin: 5px 0 3px;
  color: var(--rc-ink);
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 760;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.dash-hero-subtitle {
  color: var(--rc-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* One compact control rail */
.dash-filter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  margin-bottom: 10px;
  padding: 5px;
  overflow-x: auto;
  background: var(--rc-surface);
  border: 1px solid var(--rc-line);
  border-radius: 10px;
  box-shadow: none;
  scrollbar-width: thin;
}

.dash-filter-label { padding: 0 7px; white-space: nowrap; }

.dash-filter-btn,
.dash-tab {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--rc-muted);
  font: 650 11px/1 var(--rc-font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rc-motion-fast), border-color var(--rc-motion-fast), color var(--rc-motion-fast);
}

.dash-filter-btn:hover,
.dash-tab:hover { background: var(--rc-surface-muted); color: var(--rc-ink); }

.dash-filter-btn.active,
.dash-tab.active {
  background: var(--rc-blue-soft);
  border-color: color-mix(in srgb, var(--rc-blue) 24%, var(--rc-line));
  color: var(--rc-blue);
}

.dash-refresh-btn {
  margin-left: auto;
  width: 30px;
  padding-inline: 0;
  font-size: 0;
}

.dash-refresh-btn::before {
  content: "";
  width: 13px;
  height: 13px;
  margin: auto;
  display: block;
  border: 1.6px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
}

.dash-date-inputs { display: flex; align-items: center; gap: 5px; }

.dash-date-input {
  min-height: 30px;
  padding: 5px 8px;
  background: var(--rc-surface);
  border: 1px solid var(--rc-line);
  border-radius: 7px;
  color: var(--rc-ink);
  font: 500 10px/1 var(--rc-font-mono);
}

.dash-tabs {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 10px;
  padding: 3px;
  background: var(--rc-surface-muted);
  border: 1px solid var(--rc-line);
  border-radius: 8px;
}

.dash-tab.inactive { color: var(--rc-muted); }

/* Quick actions stay useful, but quiet */
.dash-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.dash-quick-actions .btn {
  min-height: 32px;
  padding: 6px 10px;
  box-shadow: none;
  font-size: 11px;
}

.dash-quick-badge {
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--rc-danger-soft);
  color: var(--rc-danger);
  font-family: var(--rc-font-mono);
  font-size: 10px;
}

/* KPI row */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px;
  margin-bottom: 10px;
}

.stat-card {
  position: relative;
  min-width: 0;
  min-height: 116px;
  padding: 13px 14px 12px 16px;
  overflow: hidden;
  border-radius: 11px;
}

.stat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stat-card .label {
  color: var(--rc-muted);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .075em;
}

.stat-card-icon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--rc-line);
  border-radius: 7px;
  background: var(--rc-surface-muted);
  color: var(--rc-muted);
  font-size: 12px;
}

.stat-card .value {
  margin: 10px 0 4px;
  color: var(--rc-ink) !important;
  font-family: var(--rc-font-mono);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1;
}

.stat-card .sub {
  color: var(--rc-muted);
  font-size: 10px;
  line-height: 1.3;
}

.stat-card-indicator,
.stat-card-hint {
  margin-top: 7px;
  color: var(--rc-muted);
  font-size: 9px;
  font-weight: 650;
}

.stat-card-indicator-up { color: var(--rc-positive); }
.stat-card-indicator-warn { color: var(--rc-warning); }
.stat-card-clickable { cursor: pointer; }
.stat-card-clickable:hover {
  border-color: color-mix(in srgb, var(--rc-blue) 35%, var(--rc-line));
  box-shadow: var(--rc-shadow-sm);
}

/* Main two-column analytics row */
.dash-pipeline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr);
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
}

.dash-pipeline-grid > * { min-width: 0; }
.dash-pipeline-grid > div:not(.card) { display: contents; }
.dash-pipeline-grid > .card,
.dash-pipeline-grid > div > .card,
.dash-caller-table-card {
  padding: 0;
  overflow: hidden;
  border-radius: 11px;
  box-shadow: none;
}

.dash-pipeline-grid .card-header,
.dash-caller-table-card .card-header {
  min-height: 46px;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rc-line);
}

.dash-funnel-hint,
.dash-markets-hint,
.dash-caller-table-hint,
.dash-caller-table-subtitle {
  color: var(--rc-muted);
  font-size: 9px;
  font-weight: 550;
}

.dash-funnel-row {
  display: grid;
  grid-template-columns: 7px minmax(82px, .72fr) minmax(90px, 2fr) 48px;
  align-items: center;
  gap: 9px;
  min-height: 39px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--rc-line-soft);
  cursor: pointer;
  transition: background var(--rc-motion-fast);
}

.dash-funnel-row:last-child { border-bottom: 0; }
.dash-funnel-row:hover { background: color-mix(in srgb, var(--rc-blue-soft) 34%, transparent); }
.dash-funnel-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.dash-funnel-label { color: var(--rc-ink); font-size: 11px; font-weight: 650; }
.dash-funnel-track {
  height: 5px;
  overflow: hidden;
  background: var(--rc-surface-muted);
  border-radius: 99px;
}
.dash-funnel-fill { height: 100%; border-radius: inherit; transition: none !important; }
.dash-funnel-count,
.dash-market-count {
  font-family: var(--rc-font-mono);
  font-size: 10px;
  font-weight: 650;
  text-align: right;
}

.dash-market-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 39px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--rc-line-soft);
  color: var(--rc-ink);
  font-size: 11px;
}

.dash-market-row:last-child { border-bottom: 0; }
.dash-market-row > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Leaderboard */
.dash-leaderboard-section { margin: 0 0 10px; }
.dash-leaderboard-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}
.dash-leaderboard-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  padding: 10px 11px;
  background: var(--rc-surface);
  border: 1px solid var(--rc-line);
  border-radius: 10px;
  cursor: pointer;
}
.dash-leaderboard-card:hover { border-color: var(--rc-blue); }
.dash-leaderboard-medal,
.dash-leaderboard-rank { color: var(--rc-muted); font-family: var(--rc-font-mono); font-size: 10px; }
.dash-leaderboard-name { overflow: hidden; color: var(--rc-ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dash-leaderboard-stats { grid-column: 2; display: flex; gap: 5px; color: var(--rc-muted); font-size: 9px; }
.dash-leaderboard-stat-bold { color: var(--rc-ink); font-weight: 650; }
.dash-leaderboard-stat-success { color: var(--rc-positive); }
.dash-leaderboard-stat-warning { color: var(--rc-warning); }
.dash-leaderboard-sep { color: var(--rc-line-strong); }

/* Tables */
.dash-caller-table-card { margin-bottom: 10px; }
.dash-caller-table-card .table-wrap { margin: 0; }
.dash-caller-table-card th { background: var(--rc-surface-muted); }
.dash-caller-row { cursor: pointer; }
.dash-caller-name { color: var(--rc-ink); font-weight: 680; }
.dash-caller-role { margin-top: 2px; color: var(--rc-muted); font-size: 9px; text-transform: capitalize; }
.dash-caller-cell-link { cursor: pointer; font-family: var(--rc-font-mono); }
.dash-caller-cell-link:hover { color: var(--rc-blue) !important; text-decoration: underline; text-underline-offset: 3px; }
.dash-caller-cell-success { color: var(--rc-positive) !important; }
.dash-caller-cell-warn { color: var(--rc-warning) !important; }
.dash-caller-cell-danger { color: var(--rc-danger) !important; }
.dash-caller-cell-accent { color: var(--rc-booked) !important; }
.dash-caller-cell-muted { color: var(--rc-muted); }
.dash-chart-svg { display: block; width: 100%; min-width: 620px; padding: 12px 14px 2px; }
.dash-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 7px 14px 12px; }
.dash-chart-legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--rc-muted); font-size: 9px; }
.dash-chart-legend-swatch { width: 7px; height: 7px; border-radius: 2px; }
.dash-chart-empty { padding: 32px 14px; color: var(--rc-muted); font-size: 11px; text-align: center; }

/* Empty/locked states */
.dash-locked-container,
.dash-empty-container {
  max-width: 680px;
  margin: 5vh auto 0;
  padding: 38px 26px;
  text-align: center;
  background: var(--rc-surface);
  border: 1px solid var(--rc-line);
  border-radius: 14px;
}
.dash-locked-icon,
.dash-empty-icon { margin-bottom: 10px; font-size: 26px; }
.dash-locked-title,
.dash-empty-title { margin-bottom: 7px; color: var(--rc-ink); font-size: 20px; letter-spacing: -.025em; }
.dash-locked-msg,
.dash-empty-msg { max-width: 520px; margin: 0 auto 18px; color: var(--rc-muted); font-size: 12px; line-height: 1.55; }
.dash-locked-info { margin: 0 auto 18px; border: 1px solid var(--rc-line); border-radius: 9px; }
.dash-locked-row { display: flex; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--rc-line); }
.dash-locked-row:last-child { border-bottom: 0; }
.dash-locked-label { color: var(--rc-muted); font-size: 10px; }
.dash-empty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.dash-empty-btn { display: grid; justify-items: start; padding: 13px; text-align: left; }
.dash-empty-btn-icon { font-size: 15px; }
.dash-empty-btn-sub,
.dash-empty-footer { color: var(--rc-muted); font-size: 10px; }
.dash-empty-link { color: var(--rc-blue); font-weight: 650; text-decoration: none; }

@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dash-pipeline-grid { grid-template-columns: 1fr; }
  .dash-leaderboard-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #content:has(.dash-hero) { padding: 14px 12px 52px !important; }
  .dash-hero { align-items: start; margin-bottom: 12px; }
  .dash-hero-greeting { font-size: 25px; }
  .dash-filter-bar { margin-bottom: 8px; }
  .dash-filter-label { display: none; }
  .dash-quick-actions .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px; }
  .stat-card { min-height: 104px; padding: 12px; }
  .stat-card .value { font-size: 22px; }
  .dash-funnel-row { grid-template-columns: 7px 78px minmax(70px, 1fr) 38px; gap: 7px; padding-inline: 11px; }
  .dash-leaderboard-row { grid-template-columns: 1fr; }
  .dash-empty-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr !important; }
}