/* =========================================================
   Apex Guardian — targeted production update
   Scope: Overview card removal, light-mode CTA readability,
   and Profile section. Loaded last to avoid touching theme files.
========================================================= */

/* 1) Overview: stable hierarchy after Margin Level removal */
#panel-overview .overview-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin: 0 0 28px !important;
  width: 100% !important;
  max-width: 100% !important;
}

#panel-overview .overview-metric-card,
#panel-overview .overview-metric-card:nth-child(n+1),
#panel-overview .overview-metric-card:nth-child(3),
#panel-overview .overview-metric-card:nth-child(4),
#panel-overview .overview-metric-card:nth-child(5),
#panel-overview .overview-metric-card:nth-child(n+6) {
  grid-column: auto / span 2 !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 18px !important;
  background: color-mix(in srgb, var(--apex-surface, #101713) 88%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--apex-line, #26352e) 82%, transparent) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#panel-overview .overview-metric-primary,
#panel-overview .overview-metric-balance,
#panel-overview .overview-metric-equity,
#panel-overview .overview-metric-today {
  grid-column: auto / span 4 !important;
  min-height: 142px !important;
  padding: 22px !important;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--apex-brand, #69d9b5) 14%, transparent), transparent 36%),
    color-mix(in srgb, var(--apex-surface, #101713) 96%, transparent) !important;
  border-color: color-mix(in srgb, var(--apex-success, #49e0a7) 24%, var(--apex-line, #26352e)) !important;
}

#panel-overview .overview-metric-balance { order: 1 !important; }
#panel-overview .overview-metric-equity { order: 2 !important; }
#panel-overview .overview-metric-today { order: 3 !important; }
#panel-overview .overview-metric-daily-loss { order: 4 !important; grid-column: auto / span 3 !important; }
#panel-overview .overview-metric-open-trades { order: 5 !important; grid-column: auto / span 3 !important; }
#panel-overview .overview-metric-unrealized { order: 6 !important; }
#panel-overview .overview-metric-exposure { order: 7 !important; }

#panel-overview .overview-metric-primary .ov-value,
#panel-overview .overview-metric-balance .ov-value,
#panel-overview .overview-metric-equity .ov-value,
#panel-overview .overview-metric-today .ov-value {
  font-size: clamp(38px, 3vw, 52px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

#panel-overview .overview-metric-card:not(.overview-metric-primary) .ov-value {
  font-size: clamp(23px, 1.9vw, 31px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
}

/* 2) Light mode: make Overview primary CTA readable and brand-correct */
html[data-theme="light"] #panel-overview .overview-command-bar .overview-primary-action,
html:not([data-theme="dark"]) #panel-overview .overview-command-bar .overview-primary-action {
  background: var(--apex-brand, #0f3f35) !important;
  border-color: var(--apex-brand, #0f3f35) !important;
  color: #fffdf8 !important;
  text-shadow: none !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--apex-brand, #0f3f35) 18%, transparent) !important;
}

html[data-theme="light"] #panel-overview .overview-command-bar .overview-primary-action:hover:not(:disabled),
html:not([data-theme="dark"]) #panel-overview .overview-command-bar .overview-primary-action:hover:not(:disabled) {
  background: var(--apex-brand-strong, #082c25) !important;
  border-color: var(--apex-brand-strong, #082c25) !important;
  color: #fffdf8 !important;
}

/* 3) Profile section */
#panel-profile .profile-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

#panel-profile .profile-hero,
#panel-profile .profile-card,
#panel-profile .profile-panel-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--apex-surface) 96%, var(--apex-brand-soft)), var(--apex-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--apex-brand) 16%, var(--apex-line)) !important;
  border-radius: var(--apex-radius-lg, 24px) !important;
  box-shadow: var(--apex-shadow-sm) !important;
}

html[data-theme="dark"] #panel-profile .profile-hero,
html[data-theme="dark"] #panel-profile .profile-card,
html[data-theme="dark"] #panel-profile .profile-panel-card {
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--apex-brand) 10%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--apex-surface) 92%, transparent), var(--apex-surface-soft)) !important;
  border-color: color-mix(in srgb, var(--apex-brand) 22%, var(--apex-line)) !important;
}

#panel-profile .profile-hero {
  min-height: 168px;
  padding: clamp(20px, 2.2vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
}

#panel-profile .profile-hero-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

#panel-profile .profile-avatar {
  width: 76px;
  height: 76px;
  min-width: 76px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: var(--apex-brand) !important;
  color: #fffdf8 !important;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.05em;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--apex-brand) 20%, transparent);
}

html[data-theme="dark"] #panel-profile .profile-avatar {
  color: #0d1110 !important;
}

#panel-profile .profile-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--apex-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .12em;
}

#panel-profile .profile-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--apex-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--apex-success) 16%, transparent);
}

#panel-profile h1,
#panel-profile h2,
#panel-profile p {
  margin: 0;
}

#panel-profile .profile-hero h1 {
  color: var(--apex-ink);
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 900;
}

#panel-profile .profile-hero p {
  margin-top: 8px;
  color: var(--apex-muted);
  font-family: var(--apex-mono, monospace);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-profile .profile-hero-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

#panel-profile .profile-status-pill,
#panel-profile .profile-id-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--apex-line);
  background: color-mix(in srgb, var(--apex-surface) 74%, var(--apex-brand-soft)) !important;
  color: var(--apex-ink-soft);
  font-size: 12px;
  font-weight: 850;
  font-family: var(--apex-mono, monospace);
  white-space: nowrap;
}

#panel-profile .profile-status-pill {
  border-color: color-mix(in srgb, var(--apex-success) 34%, var(--apex-line));
  color: var(--apex-success);
  background: var(--apex-success-soft) !important;
}

#panel-profile .profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#panel-profile .profile-card {
  min-height: 132px;
  padding: 20px;
  overflow: hidden;
}

#panel-profile .profile-card-primary {
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--apex-brand) 12%, transparent), transparent 36%),
    var(--apex-surface) !important;
}

html[data-theme="dark"] #panel-profile .profile-card-primary {
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--apex-brand) 14%, transparent), transparent 36%),
    var(--apex-surface) !important;
}

#panel-profile .profile-card-label {
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--apex-ink-soft) 82%, transparent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#panel-profile .profile-card-value {
  color: var(--apex-ink);
  font-size: clamp(25px, 2.35vw, 38px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-profile .profile-card-sub {
  margin-top: 12px;
  color: var(--apex-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-profile .profile-data-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#panel-profile .profile-panel-card {
  padding: 20px;
  min-width: 0;
}

#panel-profile .profile-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--apex-line);
}

#panel-profile .profile-section-head h2 {
  color: var(--apex-ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
}

#panel-profile .profile-section-head p {
  margin-top: 5px;
  color: var(--apex-muted);
  font-size: 12px;
  line-height: 1.45;
}

#panel-profile .profile-data-list {
  display: grid;
  gap: 10px;
}

#panel-profile .profile-data-row {
  min-height: 48px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--apex-line) 84%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--apex-surface-soft) 82%, transparent);
}

#panel-profile .profile-data-row span {
  color: var(--apex-muted);
  font-size: 12px;
  font-weight: 750;
}

#panel-profile .profile-data-row strong {
  min-width: 0;
  color: var(--apex-ink);
  font-size: 12px;
  font-weight: 850;
  font-family: var(--apex-mono, monospace);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-profile .profile-positive { color: var(--apex-success) !important; }
#panel-profile .profile-warning { color: var(--apex-warning) !important; }
#panel-profile .profile-negative { color: var(--apex-danger) !important; }

@media (min-width: 761px) and (max-width: 1024px) {
  #panel-overview .overview-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #panel-overview .overview-metric-card,
  #panel-overview .overview-metric-card:nth-child(n+1),
  #panel-overview .overview-metric-daily-loss,
  #panel-overview .overview-metric-open-trades {
    grid-column: auto / span 1 !important;
  }

  #panel-overview .overview-metric-balance,
  #panel-overview .overview-metric-equity {
    grid-column: auto / span 1 !important;
  }

  #panel-overview .overview-metric-today {
    grid-column: 1 / -1 !important;
  }

  #panel-overview .overview-metric-primary .ov-value {
    font-size: clamp(34px, 5vw, 46px) !important;
  }

  #panel-profile .profile-grid,
  #panel-profile .profile-data-layout {
    grid-template-columns: 1fr !important;
  }
}

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

  #panel-overview .overview-metric-card,
  #panel-overview .overview-metric-card:nth-child(n+1),
  #panel-overview .overview-metric-daily-loss,
  #panel-overview .overview-metric-open-trades {
    grid-column: auto / span 1 !important;
    min-height: 104px !important;
    padding: 14px !important;
  }

  #panel-overview .overview-metric-balance,
  #panel-overview .overview-metric-equity,
  #panel-overview .overview-metric-today {
    grid-column: 1 / -1 !important;
    min-height: 124px !important;
  }

  #panel-overview .overview-metric-primary .ov-value {
    font-size: clamp(32px, 10vw, 44px) !important;
  }

  #panel-profile .profile-hero {
    flex-direction: column;
    align-items: stretch;
  }

  #panel-profile .profile-hero-main {
    align-items: flex-start;
  }

  #panel-profile .profile-avatar {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 20px;
    font-size: 20px;
  }

  #panel-profile .profile-hero-actions {
    justify-content: flex-start;
  }

  #panel-profile .profile-grid,
  #panel-profile .profile-data-layout {
    grid-template-columns: 1fr !important;
  }

  #panel-profile .profile-data-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  #panel-profile .profile-data-row strong {
    text-align: left;
  }
}

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

  #panel-overview .overview-metric-card,
  #panel-overview .overview-metric-card:nth-child(n+1) {
    grid-column: 1 / -1 !important;
  }
}

/* 4) Topbar controls: only protection label + theme toggle remain visible. */
.topbar-server-badge,
.topbar-email-badge {
  display: none !important;
}

body[data-active-panel] .guardian-topbar-badge,
body[data-active-panel="overview"] .guardian-topbar-badge {
  display: inline-flex !important;
}

.topbar .guardian-topbar-badge {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.topbar #apexThemeToggle {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .topbar .guardian-topbar-badge {
    max-width: calc(100vw - 150px) !important;
  }

  .topbar #guardianTopbarLabel {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* 5) Production-grade Profile account controls + logout. */
#panel-profile .profile-account-controls-card {
  grid-column: 1 / -1;
}

#panel-profile .profile-account-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--apex-line) 84%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--apex-surface-soft) 86%, transparent);
}

#panel-profile .profile-session-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

#panel-profile .profile-session-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--apex-success-soft);
  color: var(--apex-success);
  border: 1px solid color-mix(in srgb, var(--apex-success) 26%, var(--apex-line));
  font-weight: 900;
}

#panel-profile .profile-session-summary strong {
  display: block;
  color: var(--apex-ink);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.02em;
}

#panel-profile .profile-session-summary p {
  margin-top: 4px;
  color: var(--apex-muted);
  font-size: 12px;
  line-height: 1.45;
}

#panel-profile .profile-logout-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--apex-danger) 34%, var(--apex-line));
  background: color-mix(in srgb, var(--apex-danger) 8%, var(--apex-surface));
  color: var(--apex-danger);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}

#panel-profile .profile-logout-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--apex-danger) 58%, var(--apex-line));
  background: color-mix(in srgb, var(--apex-danger) 13%, var(--apex-surface));
}

#panel-profile .profile-logout-btn:disabled {
  cursor: wait;
  opacity: .68;
  transform: none;
}

#panel-profile .profile-logout-status {
  min-height: 18px;
  margin-top: 10px;
  color: var(--apex-muted);
  font-size: 12px;
  font-weight: 750;
}

#panel-profile .profile-logout-status.is-success {
  color: var(--apex-success);
}

#panel-profile .profile-logout-status.is-error {
  color: var(--apex-danger);
}

@media (max-width: 760px) {
  #panel-profile .profile-account-control-row {
    align-items: stretch;
    flex-direction: column;
  }

  #panel-profile .profile-logout-btn {
    width: 100%;
  }
}

/* =========================================================
   6) Final production patch — Profile avatar, sidebar cleanup,
   and desktop Overview value overflow fix.
   Scope is intentionally narrow. Loaded last.
========================================================= */

/* Sidebar: remove secondary account/MT5 labels below Profile completely. */
#appShell .sidebar-bottom,
#appShell .guardian-side-status,
#appShell .conn-pill {
  display: none !important;
}

/* Production Profile nav icon. */
#appShell .nav-icon-profile svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Profile photo upload control. */
#panel-profile .profile-avatar-control {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 88px;
  min-width: 88px;
}

#panel-profile .profile-avatar {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#panel-profile .profile-avatar.has-image {
  color: transparent !important;
  text-shadow: none !important;
}

#panel-profile .profile-avatar-upload {
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  min-height: 28px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--apex-success, #49e0a7) 34%, var(--apex-line, #26352e));
  background: color-mix(in srgb, var(--apex-surface, #101713) 92%, transparent) !important;
  color: var(--apex-success, #128460) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, #000 12%, transparent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

#panel-profile .profile-avatar-upload:hover {
  transform: translateX(-50%) translateY(-1px);
  border-color: color-mix(in srgb, var(--apex-success, #49e0a7) 58%, var(--apex-line, #26352e));
  background: color-mix(in srgb, var(--apex-success, #49e0a7) 10%, var(--apex-surface, #101713)) !important;
}

#panel-profile .profile-avatar-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

#panel-profile .profile-identity-block {
  min-width: 0;
}

#panel-profile .profile-avatar-hint {
  margin-top: 8px;
  min-height: 16px;
  color: var(--apex-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

#panel-profile .profile-avatar-hint.is-success {
  color: var(--apex-success) !important;
}

#panel-profile .profile-avatar-hint.is-error {
  color: var(--apex-danger) !important;
}

html[data-theme="light"] #panel-profile .profile-avatar-upload,
html:not([data-theme="dark"]) #panel-profile .profile-avatar-upload {
  background: #fffdf8 !important;
  color: var(--apex-brand, #0f3f35) !important;
  box-shadow: 0 12px 26px rgba(15, 63, 53, .12);
}

/* Desktop Overview: keep Balance/Equity readable by enforcing the intended
   post-Margin-Level hierarchy with stronger class selectors. */
@media (min-width: 1181px) {
  #appShell #panel-overview .overview-metrics-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  #appShell #panel-overview .overview-metric-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #appShell #panel-overview .overview-metric-card.overview-metric-balance {
    order: 1 !important;
    grid-column: auto / span 4 !important;
  }

  #appShell #panel-overview .overview-metric-card.overview-metric-equity {
    order: 2 !important;
    grid-column: auto / span 4 !important;
  }

  #appShell #panel-overview .overview-metric-card.overview-metric-today {
    order: 3 !important;
    grid-column: auto / span 4 !important;
  }

  #appShell #panel-overview .overview-metric-card.overview-metric-daily-loss {
    order: 4 !important;
    grid-column: auto / span 3 !important;
  }

  #appShell #panel-overview .overview-metric-card.overview-metric-open-trades {
    order: 5 !important;
    grid-column: auto / span 2 !important;
  }

  #appShell #panel-overview .overview-metric-card.overview-metric-unrealized {
    order: 6 !important;
    grid-column: auto / span 3 !important;
  }

  #appShell #panel-overview .overview-metric-card.overview-metric-exposure {
    order: 7 !important;
    grid-column: auto / span 2 !important;
  }

  #appShell #panel-overview .overview-metric-balance .ov-value,
  #appShell #panel-overview .overview-metric-equity .ov-value,
  #appShell #panel-overview .overview-metric-today .ov-value {
    display: flex !important;
    align-items: baseline !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: clamp(34px, 2.45vw, 46px) !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
    font-variant-numeric: tabular-nums !important;
  }

  #appShell #panel-overview .overview-metric-balance .ov-value span,
  #appShell #panel-overview .overview-metric-equity .ov-value span,
  #appShell #panel-overview .overview-metric-today .ov-value span {
    min-width: 0 !important;
  }

  #appShell #panel-overview .overview-metric-balance .ov-prefix,
  #appShell #panel-overview .overview-metric-equity .ov-prefix,
  #appShell #panel-overview .overview-metric-today #d-todayPl-prefix {
    flex: 0 0 auto !important;
    margin-right: 2px !important;
    font-size: .8em !important;
    letter-spacing: -0.02em !important;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  #appShell #panel-overview .overview-metric-balance,
  #appShell #panel-overview .overview-metric-equity,
  #appShell #panel-overview .overview-metric-today {
    grid-column: auto / span 6 !important;
  }

  #appShell #panel-overview .overview-metric-today {
    grid-column: 1 / -1 !important;
  }

  #appShell #panel-overview .overview-metric-balance .ov-value,
  #appShell #panel-overview .overview-metric-equity .ov-value,
  #appShell #panel-overview .overview-metric-today .ov-value {
    font-size: clamp(32px, 3.4vw, 42px) !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 760px) {
  #panel-profile .profile-avatar-control {
    width: 76px;
    min-width: 76px;
  }

  #panel-profile .profile-avatar-upload {
    bottom: -10px;
    min-height: 26px;
    padding: 6px 9px;
    font-size: 9px;
  }
}