/*
  Apex Guardian final system layer
  Scope: contrast, numeric polish support, declutter, and fluid responsive layout.
  This file intentionally preserves the Apex theme tokens and only standardizes usage.
*/

:root {
  --ag-safe-bg: color-mix(in srgb, var(--apex-success) 17%, var(--apex-surface) 83%);
  --ag-safe-bg-strong: color-mix(in srgb, var(--apex-success) 25%, var(--apex-bg-deep) 75%);
  --ag-safe-border: color-mix(in srgb, var(--apex-success) 45%, transparent);
  --ag-safe-text: var(--apex-ink);
  --ag-safe-text-strong: #ffffff;
  --ag-risk-danger-bg: color-mix(in srgb, var(--apex-danger) 17%, var(--apex-surface) 83%);
  --ag-risk-warning-bg: color-mix(in srgb, var(--apex-warning) 17%, var(--apex-surface) 83%);
  --ag-grid-min: 230px;
  --ag-grid-gap: clamp(12px, 1.55vw, 20px);
  --ag-card-pad: clamp(14px, 1.55vw, 22px);
  --ag-page-pad-x: clamp(12px, 2vw, 28px);
  --ag-page-pad-y: clamp(14px, 2vw, 26px);
  --ag-quiet-shadow: 0 1px 2px rgba(0, 0, 0, .24);
  --ag-elevated-shadow: 0 14px 34px rgba(0, 0, 0, .32);
}

html[data-theme="dark"] {
  --ag-safe-bg: color-mix(in srgb, var(--apex-success) 18%, var(--apex-surface) 82%);
  --ag-safe-bg-strong: color-mix(in srgb, var(--apex-success) 22%, var(--apex-bg-deep) 78%);
  --ag-safe-text: #f7fff9;
}

html,
body {
  width: 100%;
  min-width: 0;
}

body,
.app-shell,
.main-area,
.content-scroll,
.panel {
  min-width: 0;
}

/* ═════════════ Contrast: green surfaces must use readable neutral text ═════════════ */
.alert-banner.safe,
.guardian-side-status.active,
.guardian-topbar-badge.active-state,
.topbar-badge.active-state,
.guardian-status-pill.active-pill,
.status-pill.active,
.badge-green,
.badge-success,
.badge.connected,
.badge.active,
.pb-lock-badge.enforcing,
.inline-success{
  background: linear-gradient(180deg, var(--ag-safe-bg-strong), var(--ag-safe-bg)) !important;
  border-color: var(--ag-safe-border) !important;
  color: var(--ag-safe-text) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.alert-banner.safe *,
.guardian-side-status.active *,
.guardian-topbar-badge.active-state *,
.topbar-badge.active-state *,
.badge-green *,
.badge-success *{
  color: inherit !important;
}

html[data-theme="dark"] .alert-banner.safe,
html[data-theme="dark"] .guardian-side-status.active,
html[data-theme="dark"] .guardian-topbar-badge.active-state,
html[data-theme="dark"] .topbar-badge.active-state,
html[data-theme="dark"] .guardian-status-pill.active-pill,
html[data-theme="dark"] .status-pill.active,
html[data-theme="dark"] .badge-green,
html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .badge.connected,
html[data-theme="dark"] .badge.active,
html[data-theme="dark"] .pb-lock-badge.enforcing,
html[data-theme="dark"] .inline-success{
  color: var(--ag-safe-text-strong) !important;
}

.guardian-dot,
.dot.connected,
.pb-status-dot.tier-safe,
.gsb-indicator.ind-active{
  background: var(--apex-success) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--apex-success) 18%, transparent) !important;
}

.alert-banner.warn,
.badge-warning,
.badge.pending{
  background: var(--ag-risk-warning-bg) !important;
  border-color: color-mix(in srgb, var(--apex-warning) 45%, transparent) !important;
  color: var(--apex-ink) !important;
  box-shadow: none !important;
}

.alert-banner.danger,
.badge-danger,
.badge.failed,
.badge.error{
  background: var(--ag-risk-danger-bg) !important;
  border-color: color-mix(in srgb, var(--apex-danger) 45%, transparent) !important;
  color: var(--apex-ink) !important;
  box-shadow: none !important;
}

/* ═════════════ Account Non-Protected: Guardian off, or protection settings never
   configured. This is a risk state, not a transitional one, so it reads red rather
   than neutral. Transitional states (starting, stale, reconnecting) keep the
   neutral inactive styling because protection is configured and coming up. ═════════════ */
.guardian-topbar-badge.unprotected-state,
.topbar-badge.unprotected-state,
.guardian-status-pill.unprotected-pill,
.guardian-side-status.unprotected,
.guardian-status-bar.bar-unprotected {
  background: var(--ag-risk-danger-bg) !important;
  border-color: color-mix(in srgb, var(--apex-danger) 55%, transparent) !important;
  color: var(--apex-danger) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.guardian-topbar-badge.unprotected-state *,
.topbar-badge.unprotected-state *,
.guardian-side-status.unprotected *,
.guardian-status-bar.bar-unprotected .gsb-label {
  color: inherit !important;
}

.gsb-indicator.ind-unprotected,
.guardian-topbar-badge.unprotected-state .guardian-dot,
.guardian-side-status.unprotected .guardian-dot {
  background: var(--apex-danger) !important;
  border-color: var(--apex-danger) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .guardian-topbar-badge.unprotected-state,
html[data-theme="dark"] .topbar-badge.unprotected-state,
html[data-theme="dark"] .guardian-status-pill.unprotected-pill,
html[data-theme="dark"] .guardian-side-status.unprotected,
html[data-theme="dark"] .guardian-status-bar.bar-unprotected {
  color: var(--apex-danger) !important;
}

.ov-positive,
.green,
.money-positive,
.journal-pnl-profit{
  color: var(--apex-success) !important;
  text-shadow: none !important;
}

.ov-negative,
.red,
.money-negative,
.journal-pnl-loss{
  color: var(--apex-danger) !important;
  text-shadow: none !important;
}

.card small,
.card .muted,
.card .sub,
.card .stat-sub,
.card .metric-sub,
.card .text-muted,
.ov-meta,
.pb-remaining,
.pc-row .lbl{
  color: var(--apex-ink-soft) !important;
}

/* ═════════════ Financial precision: all money-like values align cleanly ═════════════ */
[id*="balance"],
[id*="Balance"],
[id*="equity"],
[id*="Equity"],
[id*="pnl"],
[id*="Pnl"],
[id*="Pnl"],
.ov-value,
.money-value,
.primary-cell,
.secondary-cell,
.pay-amount-highlight,
.price-row span:last-child,
.journal-stat-value,
.pc-profit,
.pb-used,
.pb-limit-text {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ═════════════ Declutter: keep Apex theme, remove excessive decoration ═════════════ */
.card,
.panel-card,
.stat-card,
.overview-metric-card,
.guardian-card,
.payment-card,
.journal-card,
.rules-card,
.pb-card,
.position-card,
.log-card,
.monitor-box,
#panel-payments .section-card,
#panel-payments .select-plan-card,
#panel-payments .hero-plan,
#panel-payments .invoice-card,
.journal-entry-card{
  box-shadow: var(--ag-quiet-shadow) !important;
  border-color: var(--apex-line) !important;
}

.card::before,
.card::after,
.stat-card::before,
.stat-card::after,
.overview-metric-card::before,
.overview-metric-card::after,
.panel-card::before,
.panel-card::after,
#panel-payments .section-card::before,
#panel-payments .section-card::after{
  opacity: .18 !important;
  box-shadow: none !important;
}

.dashboard-hero,
.guardian-hero,
.payments-hero,
#panel-payments .hero{
  box-shadow: var(--ag-elevated-shadow) !important;
}

.btn,
button,
.badge,
.chip,
.pill,
.status-pill,
.topbar-badge,
.guardian-topbar-badge,
.nav-item.active{
  text-shadow: none !important;
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-blue),
.btn-ghost,
.btn-secondary,
.top-btn {
  box-shadow: none !important;
}

table,
.table-wrap{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: none !important;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  color: var(--apex-ink-soft) !important;
}

tbody tr:hover {
  background: color-mix(in srgb, var(--apex-ink) 4%, transparent) !important;
}

/* ═════════════ Fluid desktop/tablet layout ═════════════ */
.content-scroll {
  padding: var(--ag-page-pad-y) var(--ag-page-pad-x) calc(var(--ag-page-pad-y) + 24px) !important;
}

.overview-metrics-grid,
.stat-cards-2up,
.monitor-grid,
.progress-grid-2x2,
.rules-grid,
.payment-methods-grid,
.invoices-grid,
#panel-payments .plan-grid,
#panel-payments .payment-methods,
#panel-payments .summary-grid{
  display: grid;
  gap: var(--ag-grid-gap) !important;
}

.overview-metrics-grid,
.monitor-grid,
.progress-grid-2x2,
.rules-grid,
.payment-methods-grid,
.invoices-grid,
#panel-payments .plan-grid,
#panel-payments .payment-methods,
#panel-payments .summary-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ag-grid-min)), 1fr)) !important;
}

.stat-cards-2up{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
}

.positions-grid,
#overviewPositionsGrid,
.journal-list,
.rules-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  gap: var(--ag-grid-gap) !important;
}

.card,
.overview-metric-card,
.stat-card,
.pb-card,
.position-card,
#panel-payments .section-card{
  padding: var(--ag-card-pad) !important;
}

.topbar {
  min-width: 0;
  gap: clamp(8px, 1.2vw, 16px) !important;
}

.topbar-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions,
.top-actions,
.login-actions,
.card-actions,
.guardian-lock-modal-actions,
#panel-payments .actions,
#panel-payments .payment-actions{
  flex-wrap: wrap;
  min-width: 0;
}

input,
select,
textarea,
button,
.btn {
  max-width: 100%;
}

img,
svg,
canvas {
  max-width: 100%;
}

/* ═════════════ Mobile: command-center stays usable on every screen ═════════════ */
@media (max-width: 900px) {
  :root {
    --ag-grid-min: 210px;
  }

  .topbar-badge,
  .guardian-topbar-badge {
    max-width: 100%;
  }

  .content-scroll {
    padding-left: clamp(10px, 2.5vw, 18px) !important;
    padding-right: clamp(10px, 2.5vw, 18px) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --ag-grid-min: 185px;
    --ag-card-pad: 14px;
  }

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  .main-area {
    height: 100dvh !important;
    min-height: 0;
  }

  .content-scroll {
    height: auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(var(--mobile-nav-height, 80px) + 26px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .topbar {
    min-height: 72px !important;
  }

  .topbar-title {
    flex: 1 1 100%;
    font-size: clamp(22px, 7vw, 32px) !important;
  }

  .alert-banner.safe,
  .alert-banner.warn,
  .alert-banner.danger {
    width: 100%;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  .overview-metrics-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stat-cards-2up,
.monitor-grid,
.progress-grid-2x2,
.positions-grid,
#overviewPositionsGrid,
#panel-payments .plan-grid,
#panel-payments .payment-methods,
#panel-payments .summary-grid{
    grid-template-columns: 1fr !important;
  }

  .overview-metric-card,
.stat-card,
.pb-card {
    min-width: 0;
  }

  .ov-value{
    font-size: clamp(20px, 7.5vw, 34px) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
  }

  .topbar .btn,
  .topbar-badge,
  .guardian-topbar-badge {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  :root {
    --mobile-gutter: 10px;
    --ag-grid-gap: 10px;
    --ag-card-pad: 12px;
  }

  .content-scroll {
    padding-top: 10px !important;
  }

  .overview-metrics-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .overview-metric-card,
.stat-card,
.pb-card{
    border-radius: 16px !important;
  }

  .ov-label{
    font-size: 10px !important;
    letter-spacing: .04em !important;
  }

  .btn,
  button {
    min-height: 42px;
  }

  .table-wrap table{
    min-width: 620px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}