/*
  Apex Senior Frontend Fixes
  Load this AFTER apex-polish.css.
  Solves: mobile density/nav truncation, hierarchy, spacing/card rhythm,
  chart presence, Journal/Risk form grouping.
*/

:root {
  --s0: 0;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --card-pad: 20px;
  --card-gap: 16px;
  --page-max: 1440px;
  --control-h: 44px;
}

/* 1) Stronger global rhythm: 8px spacing and consistent cards */
.content-scroll {
  padding: var(--s5) var(--s5) var(--s7) !important;
}
.panel.active {
  max-width: var(--page-max);
  margin-inline: auto;
}
.card,
.section-card,
.select-plan-card,
#panel-payments .section-card,
#panel-payments .select-plan-card,
#panel-rules .risk-settings-division,
.journal-entry-card{
  border-radius: 18px !important;
  border-color: var(--apex-line) !important;
  box-shadow: var(--apex-shadow-sm) !important;
}
.card-header,
#panel-payments .section-card-head{
  padding: var(--s4) var(--card-pad) !important;
}
.card > :not(.card-header):not(.table-wrap):not(table),
#panel-payments .section-card > :not(.section-card-head){
  margin-left: var(--card-pad) !important;
  margin-right: var(--card-pad) !important;
}

/* 2) Hierarchy: one dominant zone, smaller secondary metrics */
.overview-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--s3) !important;
  margin: 0 0 var(--s5) !important;
}
.overview-metric-card {
  grid-column: span 2;
  min-height: 108px !important;
  padding: var(--s4) !important;
  justify-content: space-between !important;
}
.overview-metric-card:nth-child(1),
.overview-metric-card:nth-child(2) {
  grid-column: span 3;
  min-height: 132px !important;
  padding: var(--s5) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--apex-surface) 96%, var(--apex-brand-soft)), var(--apex-surface)) !important;
  border-color: color-mix(in srgb, var(--apex-brand) 20%, var(--apex-line)) !important;
}
.overview-metric-card:nth-child(n+6) {
  grid-column: span 3;
}
.ov-label {
  font-size: 10px !important;
  letter-spacing: .06em !important;
  color: var(--apex-muted) !important;
}
.ov-value {
  font-size: clamp(22px, 2.1vw, 31px) !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
}
.overview-metric-card:nth-child(1) .ov-value,
.overview-metric-card:nth-child(2) .ov-value {
  font-size: clamp(32px, 3.4vw, 48px) !important;
}
.ov-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 4) Payments: make it less oversized and more dashboard-like */
#panel-payments .page {
  max-width: 1180px !important;
  padding: 0 !important;
  gap: var(--s4) !important;
}
#panel-payments .page-header {
  margin: 0 !important;
}
#panel-payments .page-header h1 {
  font-size: clamp(26px, 2.8vw, 36px) !important;
}
#panel-payments .hero {
  padding: var(--s5) !important;
  border-radius: 22px !important;
}
#panel-payments .days-num {
  font-size: clamp(58px, 8vw, 96px) !important;
  line-height: .88 !important;
}
#panel-payments .plans-grid {
  gap: var(--s3) !important;
}
#panel-payments .plan-card,
#panel-payments .section-card {
  padding: var(--s4) !important;
}

/* 5) Risk Settings: denser, clearer groups instead of sparse blocks */
#panel-rules > .card {
  max-width: 1180px;
  margin-inline: auto;
}
.risk-settings-shell {
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr) !important;
  gap: var(--s4) !important;
}
.risk-settings-division {
  padding: var(--s4) !important;
  background: var(--apex-surface-soft) !important;
}
.risk-settings-division-head {
  margin-bottom: var(--s3) !important;
}
.risk-settings-division-title {
  margin: var(--s1) 0 var(--s1) !important;
  font-size: 17px !important;
  letter-spacing: -.015em !important;
}
.risk-settings-division-eyebrow {
  font-size: 10px !important;
  letter-spacing: .06em !important;
}
.risk-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--s3) !important;
}
.risk-settings-grid-loss {
  grid-template-columns: 1fr !important;
}
#panel-rules .rules-actions-row {
  margin-top: var(--s4) !important;
  display: flex !important;
  gap: var(--s2) !important;
}

/* 6) Forms: better labels, helper text, sections, field hierarchy */
.form-group {
  gap: var(--s2) !important;
}
.form-group label,
.form-label,
#journalForm label,
#panel-rules label {
  color: var(--apex-ink-soft) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: var(--apex-sans) !important;
}
.form-group label span,
.form-label span,
#panel-rules .risk-settings-division-copy,
#panel-rules .risk-settings-inline-note{
  color: var(--apex-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=email],
input[type=tel],
select,
textarea,
#panel-payments .input-field,
#panel-payments .select-field{
  min-height: var(--control-h) !important;
  border-radius: 12px !important;
}
textarea {
  font-family: var(--apex-sans) !important;
  line-height: 1.55 !important;
}

/* Journal: group the existing form rows without changing HTML */
#journalForm {
  display: grid;
  gap: var(--s4);
}
#journalForm > .form-grid,
#journalForm > .form-group {
  position: relative;
  margin-bottom: 0 !important;
  padding: calc(var(--s5) + 12px) var(--s4) var(--s4) !important;
  border: 1px solid var(--apex-line) !important;
  border-radius: 18px !important;
  background: var(--apex-surface-soft) !important;
}
#journalForm > .form-grid::before,
#journalForm > .form-group::before {
  position: absolute;
  top: var(--s3);
  left: var(--s4);
  color: var(--apex-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#journalForm > .form-grid:nth-of-type(1)::before { content: "Trade identity"; }
#journalForm > .form-grid:nth-of-type(2)::before { content: "Execution"; }
#journalForm > .form-grid:nth-of-type(3)::before { content: "Strategy and outcome"; }
#journalForm > .form-grid:nth-of-type(4)::before { content: "Psychology notes"; }
#journalForm > .form-grid:nth-of-type(5)::before { content: "Replay review"; }
#journalForm > .form-group::before { content: "Chart screenshots"; }

/* 8) Mobile-first redesign: compact topbar, no nav truncation */
@media (max-width: 900px) {
  :root {
    --mobile-nav-height: 74px;
    --mobile-gutter: 12px;
    --card-pad: 16px;
    --card-gap: 12px;
  }
  .app-shell.is-visible {
    display: block !important;
    height: 100dvh !important;
  }
  .main-area {
    height: 100dvh !important;
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  }
  .content-scroll {
    padding: var(--s3) var(--mobile-gutter) var(--s5) !important;
  }

  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    gap: var(--s2) !important;
    align-items: center !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) var(--mobile-gutter) 8px !important;
    flex-wrap: nowrap !important;
  }
  .topbar-title {
    width: auto !important;
    min-width: 0 !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .topbar-spacer,
  .topbar-badge:nth-of-type(2) {
    display: none !important;
  }
  .guardian-topbar-badge,
  .topbar-badge,
  #apexThemeToggle {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 var(--s3) !important;
    font-size: 10px !important;
    max-width: 132px !important;
  }
  .guardian-topbar-badge {
    max-width: 118px !important;
  }
  #guardianTopbarLabel {
    display: inline-block;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #apexThemeToggle {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  #apexThemeToggle::before {
    content: "◐";
    font-size: 15px;
  }

  .sidebar {
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 7px max(10px, env(safe-area-inset-left, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px)) !important;
  }
  .nav-item {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    min-height: 58px !important;
    padding: 7px 4px !important;
    gap: 4px !important;
    border-radius: 16px !important;
  }
  .nav-item .nav-label {
    display: block !important;
    max-width: 58px !important;
    font-size: 0 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .nav-item .nav-label::after {
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: -.01em !important;
  }
  #navOverview .nav-label::after { content: "Home"; }
  #navMonitor .nav-label::after { content: "Monitor"; }
  
  #navRules .nav-label::after { content: "Risk"; }
  #navJournal .nav-label::after { content: "Journal"; }
  #navPayments .nav-label::after { content: "Billing"; }

  .overview-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--s2) !important;
  }
  .overview-metric-card,
  .overview-metric-card:nth-child(n+1) {
    grid-column: span 1 !important;
    min-height: 96px !important;
    padding: var(--s3) !important;
  }
  .overview-metric-card:nth-child(1),
  .overview-metric-card:nth-child(2) {
    min-height: 112px !important;
  }
  .overview-metric-card:nth-child(1) .ov-value,
  .overview-metric-card:nth-child(2) .ov-value,
  .ov-value {
    font-size: clamp(20px, 7vw, 28px) !important;
  }
  .risk-settings-shell,
  #panel-payments .plans-grid,
  #panel-payments .proof-grid{
    grid-template-columns: 1fr !important;
  }
  #journalForm > .form-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
  .topbar-badge:first-of-type {
    display: none !important;
  }
  .guardian-topbar-badge {
    max-width: 112px !important;
  }
  .overview-metrics-grid {
    grid-template-columns: 1fr !important;
  }
  #panel-payments .hero {
    padding: var(--s4) !important;
  }
}

.stat-cards-2up,
.progress-grid-2x2 {
  gap: var(--s3) !important;
}
.card,
.stat-card,
.monitor-box,
.position-card{
  overflow: hidden !important;
}

/* Tables stay usable on small screens without crushing columns. */
.table-wrap,
#panel-payments .table-wrap{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.table-wrap table,
#panel-payments table{
  min-width: 760px;
}

/* Topbar badge classes are added in index.html; :has() fallback keeps older markup safe. */
.topbar-email-badge,
.topbar-badge:has(#topbarUserEmail) {
  max-width: 220px;
}
.topbar-email-badge span,
.topbar-badge:has(#topbarUserEmail) span {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-monitor .card {
  border-color: var(--apex-line) !important;
}

/* Risk: group action strip and status strip more tightly. */
#panel-rules .risk-lock-strip,
#panel-rules .account-lock-actions,
#panel-rules .rule-history-card {
  margin-top: var(--s4) !important;
}

/* Journal: make tab controls behave like segmented controls instead of large buttons. */
#journal .journal-tabs,
.journal-tabs {
  gap: var(--s2) !important;
  flex-wrap: wrap !important;
}
.journal-tab,
#journal .journal-tab {
  min-height: 36px !important;
  padding: 0 var(--s4) !important;
  border-radius: 999px !important;
}

/* Mobile topbar: exactly one compact row. Email badge never appears; server disappears on narrow phones. */
@media (max-width: 900px) {
  .topbar-email-badge,
  .topbar-badge:has(#topbarUserEmail),
  .topbar-reset-btn {
    display: none !important;
  }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    backdrop-filter: blur(18px) !important;
  }
  .topbar-title span {
    display: inline !important;
  }
  .topbar-server-badge,
  .topbar-badge:has(#topbarServer) {
    max-width: 118px !important;
  }
  #topbarServer {
    max-width: 92px !important;
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .guardian-topbar-badge {
    max-width: 112px !important;
  }
  #guardianTopbarLabel {
    max-width: 72px !important;
  }

  /* Keep mobile information dense: two-up metrics above tiny-phone widths. */
  .overview-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--s2) !important;
  }
  .overview-metric-card,
  .overview-metric-card:nth-child(n+1) {
    grid-column: auto !important;
    min-height: 92px !important;
    padding: var(--s3) !important;
  }
  .overview-metric-card:nth-child(1),
  .overview-metric-card:nth-child(2) {
    min-height: 104px !important;
  }
  .ov-value,
  .overview-metric-card:nth-child(1) .ov-value,
  .overview-metric-card:nth-child(2) .ov-value {
    font-size: clamp(20px, 6vw, 27px) !important;
    letter-spacing: -.045em !important;
  }
  .ov-label { font-size: 9.5px !important; }
  .ov-meta { font-size: 10.5px !important; }

  

  

  

  /* Payments: same hero, less vertical waste. */
  #panel-payments .page {
    gap: var(--s3) !important;
  }
  #panel-payments .crumb { display: none !important; }
  #panel-payments .page-header p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  #panel-payments .hero {
    padding: var(--s4) !important;
    border-radius: 20px !important;
  }
  #panel-payments .hero-top {
    margin-bottom: var(--s3) !important;
    gap: var(--s2) !important;
  }
  #panel-payments .sub-badge {
    padding: 7px 10px !important;
    font-size: 11px !important;
  }
  #panel-payments .hero-plan strong { font-size: 14px !important; }
  #panel-payments .hero-plan span { font-size: 11px !important; }
  #panel-payments .days-row {
    align-items: center !important;
    gap: var(--s3) !important;
  }
  #panel-payments .days-num {
    font-size: clamp(44px, 17vw, 60px) !important;
    letter-spacing: -.08em !important;
  }
  #panel-payments .days-label {
    font-size: clamp(15px, 5vw, 19px) !important;
    margin-bottom: 0 !important;
    max-width: 190px !important;
  }
  #panel-payments .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: var(--s4) !important;
    gap: var(--s2) !important;
  }
  #panel-payments .timeline-line { display: none !important; }
  #panel-payments .date-chip {
    padding: var(--s3) !important;
    border-radius: 14px !important;
  }
  #panel-payments .date-chip span { font-size: 9.5px !important; }
  #panel-payments .date-chip strong { font-size: 13px !important; }
  #panel-payments .meter-wrap { margin-top: var(--s3) !important; }
  #panel-payments .select-plan-card {
    padding: var(--s4) !important;
    align-items: stretch !important;
  }
  #panel-payments .btn-select-plan { width: 100% !important; }

  /* Forms: keep controls comfortable but not oversized. */
  input[type=text],
  input[type=password],
  input[type=number],
  input[type=date],
  input[type=email],
  input[type=tel],
  select,
  textarea {
    min-height: 42px !important;
  }
  #journalForm > .form-grid,
  #journalForm > .form-group,
  .risk-settings-division {
    padding: calc(var(--s4) + 12px) var(--s3) var(--s3) !important;
    border-radius: 18px !important;
  }
  .risk-settings-grid {
    gap: var(--s3) !important;
  }
}

@media (max-width: 520px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
  .topbar-server-badge,
  .topbar-badge:has(#topbarServer) {
    display: none !important;
  }
  .guardian-topbar-badge {
    max-width: 70px !important;
    padding-inline: 10px !important;
  }
  #guardianTopbarLabel { display: none !important; }
  .guardian-topbar-badge.active-state::after {
    content: "Live";
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
  }
  .guardian-topbar-badge.inactive-state::after {
    content: "Off";
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
  }
  .overview-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  .overview-metrics-grid,
#panel-payments .timeline{
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   V8 mobile rescue fixes
   Fixes requested mobile defects without changing desktop layouts.
══════════════════════════════════════ */
@media (max-width: 900px) {
  .content-scroll {
    padding-bottom: calc(var(--mobile-nav-height, 74px) + 34px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ══════════════════════════════════════
   V9 final mobile numeric polish
   Financial values must never break across lines.
══════════════════════════════════════ */