/* ================================================================
   mayorholding_pro.css — STAR SENTINEL FRONTEND MAX
   CSS BASE ÚNICO del sistema MayorHolding
   ================================================================
   Historia: fusión de main.css + dashboard.css + base.html inline
   + mayorholding_pro.css original.
   Fecha: 2026-07-01
   ================================================================ */

/* ─── VARIABLES ──────────────────────────────────────────────── */
:root{
  --mh-bg:#080d14;
  --mh-bg-2:#0d1420;
  --mh-panel:#111b2a;
  --mh-panel-2:#151f30;
  --mh-border:rgba(102, 197, 255, .16);
  --mh-border-strong:rgba(38, 232, 224, .34);
  --mh-text:#e8f1ff;
  --mh-muted:#8aa2bd;
  --mh-cyan:#26e8e0;
  --mh-blue:#5aa7ff;
  --mh-green:#2ef2a2;
  --mh-yellow:#ffd166;
  --mh-red:#ff4d5e;
  --mh-purple:#a78bfa;
  --mh-shadow: 0 18px 50px rgba(0,0,0,.38);
  --mh-radius: 20px;
  --mh-sidebar-bg: #101723;
  --mh-sidebar-width: 270px;
  --mh-sidebar-link: #cbd5e1;
  --mh-sidebar-link-hover: #ffffff;
  --mh-sidebar-active: #1ee8e0;
  --mh-sidebar-active-bg: #182a3c;
}

/* ─── RESET / BASE ───────────────────────────────────────────── */
html { scroll-behavior:smooth; }
html, body, input, select, button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  background:
    radial-gradient(circle at 18% -10%, rgba(38,232,224,.16), transparent 34rem),
    radial-gradient(circle at 82% 8%, rgba(90,167,255,.15), transparent 34rem),
    linear-gradient(140deg, #070b12 0%, #0b1220 48%, #070b12 100%) !important;
  color:var(--mh-text);
  font-family: 'Segoe UI', 'Inter', Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: .01em;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.75), transparent 85%);
  z-index:-1;
}

*:focus-visible {
    outline: 2px solid #00d07e !important;
    outline-offset: 1px;
}

::placeholder {
    color: #b9e6ff;
    opacity: 1;
}
.form-label, .small, label {
    color: #b9e6ff;
    font-weight: 500;
}

/* ─── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  min-height: 100vh;
  width: var(--mh-sidebar-width) !important;
  background:linear-gradient(180deg, rgba(13,20,32,.98), rgba(7,11,18,.98)) !important;
  border-right:1px solid var(--mh-border);
  box-shadow:18px 0 60px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
}

.sidebar .logo{
  color:var(--mh-text) !important;
  font-size:1.25rem !important;
  line-height:1.05;
  letter-spacing:.02em;
}
.sidebar .logo .brand-mark{
  width:42px;height:42px;border-radius:16px;
  display:inline-grid;place-items:center;
  background:linear-gradient(135deg, rgba(38,232,224,.22), rgba(90,167,255,.18));
  border:1px solid var(--mh-border-strong);
  box-shadow:0 0 24px rgba(38,232,224,.12);
}

.sidebar .nav-link{
  color:var(--mh-sidebar-link) !important;
  border:1px solid transparent;
  border-radius:14px !important;
  padding:.72rem .85rem !important;
  margin:.12rem 0;
  font-size:.96rem !important;
  transition: background 0.18s, color 0.18s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active{
  color:var(--mh-sidebar-link-hover) !important;
  background:linear-gradient(135deg, rgba(38,232,224,.15), rgba(90,167,255,.12)) !important;
  border-color:var(--mh-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 28px rgba(0,0,0,.20);
}
.sidebar .nav-link.admin-link {
  color: var(--mh-red) !important;
  font-weight: 700;
}

.sidebar .nav-section-title{
  margin-top: 1rem;
  margin-bottom: .35rem;
  font-size: .70rem !important;
  color:var(--mh-cyan) !important;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight: 800;
}

.sidebar .nav-section-separator {
  border-top: 1.5px solid #234;
  margin: 10px 0;
}

.sidebar-user{
  background:rgba(255,255,255,.035);
  border:1px solid var(--mh-border);
  border-radius:16px;
  padding:.75rem;
  color:#dce9ff !important;
  font-size: .92rem;
  margin-bottom: 6px;
}

.sidebar-scroll {
  overflow-y: auto;
  max-height: calc(100vh - 165px);
  padding-right: 2px;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, .35);
  border-radius: 10px;
}

/* ─── STATUSBAR (modo DEMO/REAL) ────────────────────────────── */
.statusbar-real {
  background: #220a0a;
  border-top: 2.5px solid #e63e3e;
  border-radius: 12px;
  padding: .35rem;
}
.statusbar-demo {
  background: #082217;
  border-top: 2.5px solid #20e091;
  border-radius: 12px;
  padding: .35rem;
}

.hydra-status-btn {
  border: none;
  background: transparent;
  color: #fff;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: .82rem;
  cursor: pointer;
}
.hydra-status-demo { color: #20e091; font-weight: bold; }
.hydra-status-real { color: #ff5c5c; font-weight: bold; }
.hydra-status-demo.active {
  background: #133e2b;
  color: #30ffc0;
  border: 1.5px solid #23cba3;
}
.hydra-status-real.active {
  background: #570e0e;
  color: #ff4f50;
  border: 1.5px solid #e63e3e;
}

/* ─── HEADER BAR ─────────────────────────────────────────────── */
.header-bar {
  position:sticky;top:0;z-index:40;
  min-height:68px;
  background:rgba(10,16,26,.78) !important;
  border-bottom:1px solid var(--mh-border) !important;
  backdrop-filter: blur(18px);
}
.header-bar-real {
  background:rgba(45,8,15,.84) !important;
  border-bottom: 2.5px solid #e63e3e !important;
}
.header-bar-demo {
  background:#182230 !important;
  border-bottom: 1.5px solid #223353 !important;
}

/* ─── GRADIENT TEXT (UNIFICADO) ──────────────────────────────── */
.gradient-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #b9e6ff !important;
  color: #b9e6ff !important;
  font-weight: 800;
  letter-spacing: .02em;
}


/* TITLES VISIBILITY */
h5:not(.gradient-text), h6:not(.gradient-text) {
  color: #93c5fd !important;
  font-weight: 700;
}
.card .card-header,
.card-hydra .card-header,
.card-hydra h5, .card-hydra h6,
.card h5, .card h6,
.mh-v3-card h5, .mh-v3-card h6 {
  color: #7dd3fc;
}

/* ─── CARDS ──────────────────────────────────────────────────── */
.card,
.card-hydra,
.card-ultra,
.mh-v3-card {
  background: linear-gradient(180deg, rgba(20,28,45,.98), rgba(10,14,26,.98)) !important;
  border: 1px solid rgba(96,165,250,.22) !important;
  border-radius: var(--mh-radius) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.18) !important;
  color: var(--mh-text);
}
.card-hydra:hover,
.card-hydra:focus-within {
  border-color: rgba(38,232,224,.28) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.45) !important;
}

.card .card-header,
.card-hydra .card-header,
.card-hydra h5,
.card-hydra h6 {
  background: rgba(255,255,255,.035) !important;
  border-bottom: 1px solid var(--mh-border) !important;
  color: #7dd3fc !important;
  font-weight: 700;
}

.mh-v3-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: #7dd3fc;
  margin-bottom: .75rem;
}
.mh-v3-card-tight {
  padding: 1rem;
}
.mh-v3-divider {
  border-top: 1px solid rgba(148, 163, 184, .16);
  margin: .7rem 0;
}

/* ─── BADGES ──────────────────────────────────────────────────── */
.badge,
.badge-soft {
  font-weight: 600 !important;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: .85rem;
  letter-spacing: .3px;
}
.badge.bg-secondary,
.badge.bg-info,
.badge.bg-primary {
  color: #b9e6ff !important;
  background: #223353 !important;
}
.badge.bg-warning,
.badge.bg-success {
  color: #111726 !important;
  background: linear-gradient(90deg, #ffe362 15%, #ffc107 85%) !important;
}
.badge.bg-danger {
  background: linear-gradient(90deg, #ff4848 10%, #db2828 90%) !important;
  color: #fff !important;
}

/* Status pills */
.mh-status-pill,
.badge-soft {
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.38rem .62rem;border-radius:999px;
  border:1px solid var(--mh-border);
  background:rgba(255,255,255,.04);
  color:var(--mh-text);
  font-size:.80rem;
  font-weight:700;
}
.status-ok{ color:var(--mh-green) !important; border-color:rgba(46,242,162,.3); background:rgba(46,242,162,.08); }
.status-error{ color:var(--mh-red) !important; border-color:rgba(255,77,94,.3); background:rgba(255,77,94,.08); }
.status-degraded,.status-warning{ color:var(--mh-yellow) !important; border-color:rgba(255,209,102,.3); background:rgba(255,209,102,.08); }
.status-pending{ color:var(--mh-blue) !important; border-color:rgba(90,167,255,.3); background:rgba(90,167,255,.08); }

/* ─── BOTONES ────────────────────────────────────────────────── */
.btn{
  border-radius:14px !important;
  font-weight:700;
}
.btn-primary, .btn-info{
  background:linear-gradient(135deg, var(--mh-cyan), var(--mh-blue)) !important;
  border:none !important;
  color:#061019 !important;
}
.btn-outline-info{
  border-color:rgba(38,232,224,.42) !important;
  color:var(--mh-cyan) !important;
}
.btn-outline-info:hover{
  background:rgba(38,232,224,.12) !important;
}

/* ─── PANIC BUTTON ────────────────────────────────────────────── */
#btn-panic, .btn-panic {
  background: linear-gradient(90deg, #ff4848 15%, #db2828 85%);
  color: #fff !important;
  font-size: 1.13rem;
  font-weight: bold;
  border-radius: 11px;
  box-shadow: 0 0 15px #ff484880;
  border: 2px solid #ff6565;
  padding: 12px 22px;
  animation: pulse 1.8s infinite;
  transition: filter 0.13s;
}
#btn-panic:hover, .btn-panic:hover {
  background: #ff2b2b !important;
  color: #fff !important;
  filter: brightness(1.21);
}

/* ─── FORMULARIOS ────────────────────────────────────────────── */
.form-control, .form-select {
  background:rgba(5,9,15,.72) !important;
  border:1px solid rgba(138,162,189,.20) !important;
  color:var(--mh-text) !important;
  border-radius:14px !important;
}
.form-control:focus, .form-select:focus {
  border-color:var(--mh-cyan) !important;
  box-shadow:0 0 0 .2rem rgba(38,232,224,.12) !important;
}

/* ─── TABLAS ──────────────────────────────────────────────────── */
.table{
  color:var(--mh-text) !important;
  border-color:rgba(138,162,189,.12) !important;
}
.table-dark{
  --bs-table-bg: rgba(6,10,18,.26) !important;
  --bs-table-striped-bg: rgba(255,255,255,.03) !important;
  --bs-table-hover-bg: rgba(38,232,224,.08) !important;
}
.table thead th{
  color:#cfe0f5 !important;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.09em;
  border-bottom:1px solid var(--mh-border) !important;
}
#positions-table, #order-history-table {
  font-size: 0.97rem;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 1px 8px #00b0ff14;
}
#positions-table tbody tr:hover,
#order-history-table tbody tr:hover {
  background-color: rgba(0, 170, 255, 0.15);
  cursor: pointer;
}

/* ─── ALERTAS ────────────────────────────────────────────────── */
.alert{
  border-radius:16px !important;
  border:1px solid var(--mh-border) !important;
}
.alert-warning{
  background:rgba(255,209,102,.11) !important;
  color:#ffe7a3 !important;
}
.alert-danger{
  background:rgba(255,77,94,.11) !important;
  color:#ffb5bd !important;
}
.alert-success{
  background:rgba(46,242,162,.10) !important;
  color:#b8ffdf !important;
}

/* ─── LOG BOXES ──────────────────────────────────────────────── */
.log-box, #logs-box, #mini-log {
  background:rgba(3,7,13,.55) !important;
  border:1px solid var(--mh-border) !important;
  border-radius:16px !important;
  padding: 1rem;
  font-family: 'Fira Mono', monospace;
  font-size: 0.98rem;
  color: #e3eaf3;
}
#logs-box, #mini-log {
  max-height: 600px;
  overflow-y: auto;
}
#logs-box::-webkit-scrollbar, #mini-log::-webkit-scrollbar {
  width: 8px;
  background: #1b2635;
}
#logs-box::-webkit-scrollbar-thumb, #mini-log::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00e0ff 0%, #7a8aff 100%);
  border-radius: 11px;
  border: 2px solid #1b2635;
}
pre{ color:#cfe0f5; }

/* ─── CHARTS ──────────────────────────────────────────────────── */
#chart, #equity-curve-chart, #roi_chart, #sentimentChart {
  background: #0e1420;
  border: 1.5px solid #27324a;
  border-radius: 12px;
  box-shadow: 0 3px 20px 0 rgba(0, 170, 255, 0.08);
  margin-top: 10px;
  padding: 10px;
}
#equity-curve-chart { min-height: 280px; }

/* ─── KPIs ────────────────────────────────────────────────────── */
.mh-kpi{
  min-height:132px;
  position:relative;
  overflow:hidden;
}
.mh-kpi::after{
  content:"";
  position:absolute;right:-28px;top:-34px;
  width:110px;height:110px;border-radius:50%;
  background:rgba(38,232,224,.08);
}
.mh-kpi .label{
  color:var(--mh-muted);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.mh-kpi .value{
  font-size:1.75rem;
  font-weight:800;
  letter-spacing:-.03em;
}
.mh-kpi .meta{ color:var(--mh-muted); font-size:.86rem; }

/* ─── HEATMAP & SIGNALS ──────────────────────────────────────── */
#signals-ia-panel, #heatmap-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 1rem;
}
.heatmap-cell {
  background: #1b2635;
  border-radius: 8px;
  padding: 10px 7px;
  text-align: center;
  color: #e3eaf3;
  border: 1px solid #27324a;
  transition: background-color 0.18s;
  font-family: 'Fira Mono', monospace;
}
.heatmap-cell:hover {
  background-color: rgba(0, 170, 255, 0.13);
}

/* ─── STRATEGY SWITCHES ──────────────────────────────────────── */
#strategy-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1rem;
}
.strategy-switch {
  background: #223353;
  color: #e3eaf3;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid #314262;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s;
  font-weight: 600;
}
.strategy-switch.active {
  background: #00d07e;
  color: #141b24;
  font-weight: bold;
  border-color: #00d07e;
  box-shadow: 0 2px 8px #00e0ff11;
}

/* ─── NOTIFICATION POPUP ──────────────────────────────────────── */
#notification-popup {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: #171f2b;
  color: #e3eaf3;
  padding: 13px 20px;
  border-radius: 8px;
  border: 1.5px solid #00d07e;
  box-shadow: 0 0 18px rgba(0, 170, 255, 0.45);
  display: none;
  z-index: 9999;
  font-size: 1.04rem;
  animation: fadeIn 0.4s;
  min-width: 220px;
  pointer-events: auto;
}

/* ─── ANIMACIONES ────────────────────────────────────────────── */
.fade-in { animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.93; }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── SCROLLBAR GENERAL ──────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; background: #151e2a; }
::-webkit-scrollbar-thumb { background: #314262; border-radius: 10px; }

/* ─── PANEL SOFT ──────────────────────────────────────────────── */
.panel-soft {
  background: rgba(8, 12, 22, .85);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
}

/* ─── mh-v3 LAYOUT (dashboard_layout_pro_v3 content) ────────── */
.mh-v3-shell {
  width: 100%;
  padding: 0.25rem 0.25rem 2rem;
}
.mh-v3-alert-zone {
  display: grid;
  gap: .5rem;
  margin-bottom: .8rem;
}
.mh-v3-alert {
  border-radius: 12px;
  padding: .65rem .9rem;
  font-size: .88rem;
  border: 1px solid rgba(148, 163, 184, .22);
}
.mh-v3-alert-warning {
  background: rgba(234, 179, 8, .13);
  color: #fde68a;
  border-color: rgba(234, 179, 8, .25);
}
.mh-v3-alert-danger {
  background: rgba(239, 68, 68, .13);
  color: #fecaca;
  border-color: rgba(239, 68, 68, .32);
}
.mh-v3-command-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  gap: .85rem;
  align-items: stretch;
  margin-bottom: 1.25rem;
  padding: .65rem;
  border: 1px solid rgba(96, 165, 250, .18);
  border-radius: 18px;
  background: rgba(8, 12, 22, .94);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 45px rgba(0, 0, 0, .22);
}
.mh-v3-command-card {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .6rem .85rem;
  border-radius: 13px;
  background: rgba(15, 23, 42, .82);
  border: 1px solid rgba(148, 163, 184, .14);
}
.mh-v3-command-card span {
  font-size: .75rem;
  color: #b9e6ff;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mh-v3-command-card strong {
  font-size: 1.05rem;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mh-v3-command-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 320px;
}
.mh-v3-section {
  margin-top: 1.25rem;
}
.mh-v3-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(96, 165, 250, .16);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(15, 23, 42, .92), rgba(8, 13, 28, .88));
}
.mh-v3-section-header h2 {
  font-size: 1.15rem;
  margin: 0;
  color: #b9e6ff;
  font-weight: 800;
}
.mh-v3-section-header p {
  margin: .18rem 0 0;
  color: #94a3b8;
  font-size: .82rem;
}
.mh-v3-grid {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.mh-v3-grid-2-1 {
  grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
}
.mh-v3-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mh-v3-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mh-v3-stack {
  display: grid;
  gap: .85rem;
  align-content: start;
}
.mh-v3-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}
.mh-v3-tabs {
  background: rgba(8, 12, 22, .72);
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 14px;
  padding: .35rem;
}
.mh-v3-tabs .nav-link {
  color: #cbd5e1;
  border-radius: 11px;
  font-size: .85rem;
}
.mh-v3-tabs .nav-link.active {
  background: rgba(14, 165, 233, .2);
  color: #67e8f9;
  border: 1px solid rgba(103, 232, 249, .2);
}
.mh-v3-tab-content {
  border-radius: 16px;
}
.mh-v3-log-box {
  background: #020617;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 12px;
  padding: 1rem;
  height: 260px;
  overflow: auto;
  font-size: .78rem;
}
.mh-v3-log-box pre {
  color: #dbeafe;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.mh-v3-mt {
  margin-top: .85rem;
}
.mh-v3-shell .card,
.mh-v3-shell .card-hydra {
  margin-bottom: 0 !important;
}
.mh-v3-shell table {
  font-size: .82rem;
}
.mh-v3-shell .table-responsive {
  max-height: 360px;
  overflow: auto;
}
.mh-v3-shell pre {
  max-height: 340px;
  overflow: auto;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (min-width: 1700px) {
  .mh-v3-grid-2-1 {
    grid-template-columns: minmax(0, 2.25fr) minmax(420px, 1fr);
  }
}
@media (max-width: 1399px) {
  .mh-v3-command-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mh-v3-command-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .mh-v3-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mh-v3-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1200px) {
  .mh-v3-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heatmap-cell, .strategy-switch { font-size: 0.93rem; }
  #chart, #roi_chart, #equity-curve-chart { height: 240px !important; }
  #signals-ia-panel, #heatmap-panel {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
}
@media (max-width: 991px) {
  .sidebar {
    width: 100vw !important;
    min-width: 100vw !important;
    position: relative;
  }
  .sidebar-scroll { max-height: none; }
  .mh-v3-command-bar,
  .mh-v3-grid-2-1,
  .mh-v3-grid-2,
  .mh-v3-grid-4,
  .mh-v3-kpi-row {
    grid-template-columns: 1fr;
  }
  .mh-v3-command-actions { min-width: unset; }
  .mh-v3-section-header { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
  .heatmap-cell, .strategy-switch { font-size: 0.90rem; padding: 6px; }
  #notification-popup { font-size: 0.84rem; padding: 8px 10px; min-width: 120px; }
  .sidebar { width: 100vw !important; min-width: unset; border-radius: 0; box-shadow: none; }
  .card-hydra { border-radius: 8px; }
  #logs-box, #mini-log { font-size: 0.91rem; }
}

/* ─── LOGIN PAGE ──────────────────────────────────────────────── */
.login-bg {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(circle at 18% -10%, rgba(38,232,224,.16), transparent 34rem),
    radial-gradient(circle at 82% 8%, rgba(90,167,255,.15), transparent 34rem),
    linear-gradient(140deg, #070b12 0%, #0b1220 48%, #070b12 100%);
}
.login-box {
  max-width: 410px;
  border-radius: 1.5rem;
  box-shadow: 0 6px 32px rgba(38,232,224,.28), 0 1.5px 0 rgba(90,167,255,.28);
  border: 1.5px solid rgba(38,232,224,.33);
  background: linear-gradient(180deg, rgba(20,28,45,.98), rgba(10,14,26,.98));
  padding: 2.5rem !important;
}
.login-box .gradient-brand {
  background: linear-gradient(90deg, var(--mh-cyan), var(--mh-blue), var(--mh-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 0.5rem;
}
.login-box .sentinel-badge {
  background: linear-gradient(90deg, var(--mh-cyan), var(--mh-blue));
  color: #101623;
  font-weight: 700;
  border-radius: 1rem;
  padding: 0.25em 1em;
  font-size: .98em;
  letter-spacing: .02em;
  margin-bottom: 0.5em;
  display: inline-block;
  box-shadow: 0 0 8px rgba(38,232,224,.33);
}
.login-box .brand-divider {
  height: 2px;
  width: 65%;
  margin: 1.5rem auto;
  background: linear-gradient(90deg, transparent 5%, var(--mh-cyan), var(--mh-blue), transparent 100%);
  border-radius: 2px;
  opacity: .8;
}

/* ─── SHADOW XL (legacy compat) ──────────────────────────────── */
.shadow-xl {
    box-shadow: 0 8px 36px rgba(0, 114, 250, 0.21) !important;
}

/* ─── MISC ────────────────────────────────────────────────────── */
.mh-shell{ min-height:100vh; display:flex; }
.mh-page-title{ font-weight:800; letter-spacing:-.03em; }
.mh-subtitle{ color:var(--mh-muted); }
.mh-grid{ display:grid; gap:1rem; }
.mh-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mh-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mh-command-strip{
  border:1px solid var(--mh-border);
  border-radius:var(--mh-radius);
  padding:1rem;
  background:linear-gradient(135deg, rgba(38,232,224,.07), rgba(90,167,255,.06));
}
.mh-section-title{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:1.25rem 0 .85rem;
}
.mh-section-title h2,.mh-section-title h3{
  margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;
}
.mh-scroll-x{ overflow-x:auto; }
.min-width-260 { min-width: 260px !important; }
.min-width-400 { min-width: 400px !important; }
@media (max-width: 1200px) {
  .min-width-400 { min-width: 320px !important; }
}

/* ─── FOOTER ──────────────────────────────────────────────────── */
footer {
  letter-spacing: .05em;
  color: var(--mh-muted);
}


/* ─── COMPREHENSIVE TITLE VISIBILITY ───────── */
/* Force ALL headings across ALL contexts to be visible */
h1, h2, h3, h4, h5, h6,
.card-title,
.modal-title,
.accordion-header button {
  color: #e8f1ff !important;
}
h1, h2, h3, h4 { font-weight: 700 !important; letter-spacing: .02em; }
h5 { font-size: 1rem !important; }
h6 { font-size: .9rem !important; }

/* Headings inside cards - brighter */
.card h5, .card h6,
.card-hydra h5, .card-hydra h6,
.mh-v3-card h5, .mh-v3-card h6 {
  color: #7dd3fc !important;
}

/* Gradient text on cards - keep original gradient */
/* Section headers - brighter */
.mh-v3-section-header h2 {
  color: #b9e6ff !important;
  font-size: 1.2rem !important;
}

/* Headers in admin/scaling pages */
#scaling-header h4, #scaling-header h5 {
  color: #7dd3fc !important;
}

/* Metrics panel - bold visible values */
#metrics-list .fw-semibold {
  color: #b9e6ff !important;
}
#metrics-list b {
  color: #e8f1ff !important;
  font-size: 1.1rem !important;
}

/* ML Settings headings */
.ml-section h5 {
  color: #7dd3fc !important;
}

/* Sentiment page */
#sentiment-page h5, #sentiment-page h6 {
  color: #7dd3fc !important;
}

/* TH elements in tables */
.table th {
  color: #7dd3fc !important;
  font-weight: 700 !important;
}

/* 
/* ─── ADDITIONAL SPACING & VISIBILITY FIXES ────────────────── */
/* Remove bottom margin from cards inside v3 grids - grid handles spacing */
.mh-v3-shell .card,
.mh-v3-shell .card-hydra,
.mh-v3-shell section.card-hydra {
  margin-bottom: 0 !important;
}

/* Better spacing for KPIs grid */
.mh-v3-kpi-row {
  gap: .85rem !important;
}

/* Ensure text-primary is visible on dark bg */
.text-primary {
  color: #7dd3fc !important;
}
.text-info {
  color: #67e8f9 !important;
}
.text-warning {
  color: #fbbf24 !important;
}
.text-success {
  color: #4ade80 !important;
}
.text-danger {
  color: #f87171 !important;
}

/* Panel headers inside cards */
.card-hydra .card-header h5,
.card-hydra .card-header h6 {
  color: #7dd3fc !important;
}

/* Better list spacing in metrics panels */
#metrics-list li {
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
#metrics-list li:last-child {
  border-bottom: none;
}
#metrics-list .fw-semibold {
  color: #94a3b8;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
#metrics-list b {
  font-size: 1.1rem !important;
}

/* Health check tables */
#healthcheck-panel table {
  font-size: .82rem;
}
#healthcheck-panel th {
  color: #7dd3fc;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 6px 8px !important;
}
#healthcheck-panel td {
  padding: 5px 8px !important;
}
#healthcheck-panel .status-ok,
#healthcheck-panel .badge.bg-success {
  color: #4ade80 !important;
}
#healthcheck-panel .status-error,
#healthcheck-panel .badge.bg-danger {
  color: #f87171 !important;
}

/* Shadow-xl and shadow-lg for legacy compat */
.shadow-xl,
.shadow-lg {
  box-shadow: 0 10px 35px rgba(0,0,0,.18) !important;
}

/* Account selector compact */
#mt5-account-selector,
.mh-v3-shell select.form-select {
  font-size: .85rem;
  padding: .35rem .5rem;
}

/* Trading panel spacing */
#trading-command-panel .row.g-2 {
  gap: .5rem 0;
}

/* News panel */
#market-news-panel .list-group-item {
  background: rgba(6, 10, 18, .5);
  border-color: rgba(148, 163, 184, .1);
  color: var(--mh-text);
  font-size: .82rem;
  padding: .5rem .75rem;
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL TEXT VISIBILITY FIX
   Force ALL text in the dashboard area to be clearly visible
   regardless of background layer or transparency issues.
   ═══════════════════════════════════════════════════════════════ */

/* Remove the noisy grid overlay that washes out text */
body::before {
  opacity: 0.3 !important;
}

/* ALL text nodes in the main content area - ensure visibility */
.container-fluid,
.mh-v3-shell,
.mh-v3-section,
.mh-v3-card,
.mh-v3-command-bar,
.card,
.card-hydra,
.card-ultra,
.panel-soft {
  color: #e8f1ff !important;
}

/* Every text element type that could exist */
.container-fluid p,
.container-fluid span,
.container-fluid div,
.container-fluid li,
.container-fluid label,
.container-fluid small,
.container-fluid strong,
.container-fluid b,
.container-fluid em,
.container-fluid td,
.container-fluid th,
.mh-v3-shell p,
.mh-v3-shell span,
.mh-v3-shell div,
.mh-v3-shell li,
.mh-v3-shell label,
.mh-v3-shell small,
.mh-v3-shell strong,
.mh-v3-shell b,
.mh-v3-shell td,
.mh-v3-shell th {
  color: #e8f1ff;
}

/* FIX: Removed dangerous universal text-shadow */
.card-header,
.card-body,
.card-footer,
.modal-content,
.modal-header,
.modal-body,
.list-group-item,
.accordion-item,
.accordion-header,
.accordion-body,
.dropdown-menu,
.dropdown-item,
.nav-link,
.nav-item,
.tab-pane,
.table,
.table tr,
.table td,
.table th,
.form-control,
.form-select,
.alert,
.progress,
.progress-bar {
  opacity: 1 !important;
}

/* Specific fix for elements that might inherit transparent colors from Bootstrap */
.text-secondary { color: #94a3b8 !important; }
.text-muted { color: #8aa2bd !important; }
.text-body { color: #e8f1ff !important; }
.text-dark { color: #e8f1ff !important; }

/* ═══════════════════════════════════════════════════════════════
   FINAL TEXT VISIBILITY OVERRIDE
   Forces ALL text in the dashboard area to be clearly readable.
   ═══════════════════════════════════════════════════════════════ */

/* Bootstrap text utilities - make them ALL bright enough for dark bg */
.text-secondary { color: #cbd5e1 !important; }  /* was #94a3b8 - much brighter now */
.text-muted { color: #94a3b8 !important; }       /* was #8aa2bd */
.text-dark { color: #e2e8f0 !important; }
.text-body { color: #e8f1ff !important; }
.text-black-50 { color: rgba(200, 215, 240, 0.6) !important; }
.text-white-50 { color: rgba(220, 235, 255, 0.6) !important; }

/* Subtitles and small text */
.small, small, .form-label, label, .text-label {
  color: #b9e6ff !important;
  font-weight: 500;
}

/* Every possible text container in the dashboard - force readable color */
.mh-v3-shell *,
.container-fluid *,
.card-body *,
.card *,
.panel-soft * {
  color: #e8f1ff;
}

/* Exceptions - keep colored/special elements */
/* Any loading/empty state text */
.py-3, .text-center {
  color: #b9e6ff !important;
}

/* Increase text-shadow for better contrast on complex backgrounds */
.container-fluid *:not(.gradient-text):not(.btn):not(.badge) {
  text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}
.gradient-text, .btn, .badge {
  text-shadow: none !important;
}