/*
  Apex Guardian Senior Polish Layer
  Purpose: fix typography discipline, dashboard density, IA visibility, and visual restraint
  without changing apex-theme.css or the existing Apex color palette.
*/

:root {
  --apex-sans: Inter, Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --apex-display: var(--apex-sans);
  --apex-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font: var(--apex-sans);
  --font-display: var(--apex-sans);
  --mono: var(--apex-mono);
}

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

.brand-name,
.topbar-title,
.card-title,
.section-heading,
.login-card h2,
.page-header h1,
.section-card h2,
.hero-plan strong,
.modal-head h3,
.sc-number,
.streak-num{
  font-family: var(--apex-sans) !important;
}

.sc-number,
.streak-num,
.ps-value,
.pc-profit,
.ov-value,
.ov-meta,
table,
.topbar-badge,
.guardian-topbar-badge,
.btn,
input,
select{
  font-variant-numeric: tabular-nums !important;
}

.brand-name {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

.logo-mark {
  font-family: var(--apex-sans) !important;
  font-weight: 800 !important;
}

.topbar-title {
  font-size: 18px !important;
  font-weight: 750 !important;
  letter-spacing: -.012em !important;
}

.card-title,
.section-heading,
.page-header h1,
.section-card h2 {
  font-size: clamp(16px, 1.4vw, 20px) !important;
  font-weight: 750 !important;
  letter-spacing: -.012em !important;
}

/* Information architecture: one sidebar item per panel. */
.sidebar-section-dashboard,
.sidebar-section-trading,
.sidebar-section-risk,
.sidebar-section-records,
.sidebar-section-account {
  padding-top: 14px !important;
  padding-bottom: 4px !important;
}

#navOverview,
#navMonitor,
#navRules,
#navJournal,
#navPayments{
  display: flex !important;
}

#navOverview .nav-icon::before,
#navMonitor .nav-icon::before,
#navRules .nav-icon::before,
#navJournal .nav-icon::before,
#navPayments .nav-icon::before{
  display: none !important;
  content: none !important;
}

.nav-item {
  min-height: 40px !important;
  margin-bottom: 5px !important;
  transform: none !important;
}

.nav-item:hover,
.nav-item.active {
  transform: none !important;
}

/* Visual discipline: keep Apex colors, remove excess motion and inconsistent elevations. */
.card,
.stat-card,
.position-card,
.inline-guardian-strip,
.guardian-status-bar,
.pb-card,
.pb-lock-row,
.log-card,
.monitor-box,
.risk-lock-strip,
.account-lock-actions,
.journal-entry-card,
.rule-history-card,
.section-card,
.select-plan-card{
  border-radius: var(--apex-radius) !important;
  box-shadow: var(--apex-shadow-sm) !important;
}

.card:hover,
.stat-card:hover,
.position-card:hover,
.inline-guardian-strip:hover,
.guardian-status-bar:hover,
.pb-card:hover,
.pb-lock-row:hover,
.log-card:hover,
.monitor-box:hover,
.risk-lock-strip:hover,
.account-lock-actions:hover,
.journal-entry-card:hover,
.rule-history-card:hover,
.section-card:hover,
.select-plan-card:hover{
  transform: none !important;
  box-shadow: var(--apex-shadow-sm) !important;
}

.btn,
.topbar-badge,
.guardian-topbar-badge,
.sc-tag,
.status-badge,
.sub-badge,
.pc-type-badge {
  box-shadow: none !important;
}

/* Dense overview: compact operational metrics above the fold. */
.overview-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 14px 0 18px !important;
}

.overview-metric-card {
  min-height: 96px !important;
  padding: 13px 14px !important;
  background: var(--apex-surface) !important;
  border: 1px solid var(--apex-line) !important;
  border-radius: var(--apex-radius) !important;
  box-shadow: var(--apex-shadow-sm) !important;
  color: var(--apex-ink) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}

.overview-metric-card:hover {
  transform: none !important;
  border-color: var(--apex-line-strong) !important;
  box-shadow: var(--apex-shadow-sm) !important;
}

.overview-metric-primary {
  min-height: 104px !important;
}

.ov-label {
  color: var(--apex-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.ov-value {
  color: var(--apex-ink) !important;
  font-family: var(--apex-sans) !important;
  font-size: clamp(20px, 2vw, 25px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}

.ov-prefix {
  color: var(--apex-muted) !important;
  margin-right: 2px !important;
}

.ov-meta {
  color: var(--apex-muted) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ov-positive {
  color: var(--apex-success) !important;
}

.ov-negative {
  color: var(--apex-danger) !important;
}

.ov-warning {
  color: var(--apex-warning) !important;
}

.positions-section-header {
  margin-top: 4px !important;
}

.positions-summary-strip {
  display: none !important;
}

.positions-grid {
  gap: 12px !important;
}

.position-card {
  padding: 14px !important;
}

.pc-rows {
  gap: 7px !important;
}

/* Dashboard tables/forms: tighter and more exchange-like without color changes. */
table th,
table td {
  font-size: 12px !important;
}

.card-header {
  padding-bottom: 14px !important;
}

.form-group label,
.sidebar-section-label {
  letter-spacing: .08em !important;
}

@media (max-width: 1280px) {
  .overview-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .overview-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .overview-metric-card {
    min-height: 88px !important;
    padding: 11px 12px !important;
  }

  .ov-value {
    font-size: 19px !important;
  }
}

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