/* =========================================================
   SY SABAA3 — Institutional Hybrid UI (Bloomberg × TradingView)
   Clean rebuild: Layout + Theme
   - Strong contrast (no faded colors)
   - RTL safe
   - No transforms / writing-mode hacks
   ========================================================= */

:root{
  --bg0:#070A10;
  --bg1:#0B1220;
  --bg2:#0F1B2E;
  --card:#0C1629;
  --card2:#0A1324;
  --stroke:rgba(130,170,255,.14);
  --stroke2:rgba(80,120,220,.20);

  --text:#EAF1FF;
  --muted:#9CB0D6;

  --cyan:#22D3EE;
  --blue:#3B82F6;
  --vio:#A78BFA;
  --green:#34D399;
  --amber:#FBBF24;
  --red:#FB7185;

  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.45);

  --r16:16px;
  --r12:12px;
  --r10:10px;

  --gap:14px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  margin:0;
  direction:rtl;
  font-family: "Cairo","Tajawal","Segoe UI",system-ui,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 75% -10%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(900px 500px at 10% 10%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, #060810);
  overflow-x:hidden;
}

a{color:inherit}
h2,h3{margin:0}
ul{margin:0;padding:0 18px}
li{margin:6px 0}

/* ===================== App shell ===================== */
.dashboard-root{
  width:100%;
}

/* ===================== Header ===================== */
#header-bar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background: linear-gradient(180deg, rgba(11,18,32,.95), rgba(8,12,18,.92));
  border-bottom:1px solid var(--stroke);
  backdrop-filter: blur(10px);
}

#engine-name{
  font-weight:800;
  letter-spacing:.2px;
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(34,211,238,.16), rgba(59,130,246,.10));
  border:1px solid rgba(34,211,238,.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

#mode-badges span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  background: rgba(255,255,255,.03);
  border:1px solid var(--stroke);
}
#mode-badges span.active{
  color:var(--text);
  background: linear-gradient(180deg, rgba(59,130,246,.18), rgba(34,211,238,.10));
  border-color: rgba(59,130,246,.28);
  box-shadow: 0 0 0 1px rgba(34,211,238,.12) inset;
}

#status-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
}

#status-badges .badge,
#engine-status-badge,
#market-status-badge,
#tick-status-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  background: rgba(255,255,255,.03);
  border:1px solid var(--stroke);
}

#heartbeat-indicator{
  width:9px;height:9px;border-radius:50%;
  background: rgba(52,211,153,.85);
  box-shadow: 0 0 14px rgba(52,211,153,.55);
}

/* ===================== Layout ===================== */
.layout-shell{
  padding: var(--gap);
}

.layout-top{
  margin-bottom: var(--gap);
}

.layout-main{
  display:grid;
  grid-template-columns: 2.3fr 1fr;
  gap: var(--gap);
  align-items:start;
}

.layout-center{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

.layout-side{
  position:sticky;
  top:62px; /* below header */
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

/* ===================== Panels & Cards ===================== */
section{
  border-radius: var(--r16);
  background: linear-gradient(180deg, rgba(15,27,46,.82), rgba(10,19,36,.86));
  border:1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 12px 12px 14px;
}

section > h2{
  font-size:13px;
  color: rgba(234,241,255,.92);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
section > h2::before{
  content:"";
  width:10px;height:10px;
  border-radius:4px;
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(167,139,250,.75));
  box-shadow: 0 0 14px rgba(34,211,238,.25);
}

/* Smaller inner cards */
.card{
  border-radius: var(--r12);
  background: linear-gradient(180deg, rgba(12,22,41,.92), rgba(10,19,36,.92));
  border:1px solid rgba(130,170,255,.16);
  padding: 10px;
}
.card h3{
  font-size:12.5px;
  color: rgba(34,211,238,.92);
  margin-bottom:8px;
}

/* Grid helpers used in HTML */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.grid-4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

/* Make grids responsive and avoid thin columns */
@media (max-width: 1400px){
  .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr; }
}

/* ===================== Decision Core (Hero) ===================== */
#decision-core-panel{
  position:relative;
  overflow:hidden;
  border-color: rgba(34,211,238,.22);
  background:
    radial-gradient(900px 300px at 85% -20%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(900px 300px at 15% 0%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg, rgba(15,27,46,.88), rgba(10,19,36,.90));
}

#decision-core-panel::after{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.10), transparent);
  transform: translateX(-35%);
  filter: blur(14px);
  opacity:.7;
}

.decision-core-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.4fr auto;
  gap: 12px;
  align-items:center;
}

@media (max-width: 1100px){
  .decision-core-grid{
    grid-template-columns: 1fr;
  }
}

.field-label{
  font-size:12px;
  color: rgba(156,176,214,.95);
  margin-bottom:6px;
}

.decision-status{
  font-weight:900;
  letter-spacing:.6px;
  padding:10px 12px;
  border-radius: 12px;
  text-align:center;
  border:1px solid rgba(130,170,255,.18);
  background: rgba(255,255,255,.03);
}
.decision-wait{ color: var(--amber); border-color: rgba(251,191,36,.25); }
.decision-buy{ color: var(--green); border-color: rgba(52,211,153,.25); }
.decision-sell{ color: var(--red); border-color: rgba(251,113,133,.25); }

.confidence-bar{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(130,170,255,.12);
  overflow:hidden;
}
.confidence-fill{
  height:100%;
  width:45%;
  background: linear-gradient(90deg, rgba(34,211,238,.95), rgba(59,130,246,.95), rgba(167,139,250,.85));
  box-shadow: 0 0 16px rgba(34,211,238,.25);
}
.confidence-value{
  margin-top:8px;
  font-size:12px;
  color: rgba(234,241,255,.92);
}

.decision-text{
  font-size:12px;
  color: rgba(234,241,255,.86);
  line-height:1.7;
}

.decision-actions{
  display:flex;
  gap:10px;
}
.decision-btn{
  appearance:none;
  border:1px solid rgba(130,170,255,.18);
  background: rgba(255,255,255,.03);
  color: rgba(234,241,255,.90);
  padding:10px 12px;
  border-radius: 12px;
  font-size:12px;
  cursor:pointer;
}
.decision-btn:hover{
  border-color: rgba(34,211,238,.28);
}
.decision-btn.primary{
  background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(59,130,246,.12));
  border-color: rgba(34,211,238,.28);
}
.decision-btn.danger{
  background: linear-gradient(180deg, rgba(251,113,133,.16), rgba(12,22,41,.92));
  border-color: rgba(251,113,133,.26);
}

.decision-core-details{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 900px){
  .decision-core-details{ grid-template-columns: 1fr; }
}
.field-pair{
  border-radius: 12px;
  border:1px solid rgba(130,170,255,.12);
  background: rgba(255,255,255,.02);
  padding:10px;
}

/* ===================== Chart (Hero) ===================== */
#mt5-live-chart-card{
  border-color: rgba(59,130,246,.24);
  background:
    radial-gradient(800px 300px at 80% 0%, rgba(59,130,246,.14), transparent 55%),
    linear-gradient(180deg, rgba(15,27,46,.88), rgba(10,19,36,.92));
}
#mt5-chart{
  height:460px;
  width:100%;
  background: #071022;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(59,130,246,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.45) inset;
}
#mt5-chart-status{
  margin:8px 0;
  font-size:12px;
  color: rgba(234,241,255,.80);
  opacity: .95;
}

/* ===================== Open trades ===================== */
#open-trades-card #open-trades{
  border-radius: 12px;
  border:1px dashed rgba(130,170,255,.16);
  background: rgba(255,255,255,.02);
  padding:12px;
  color: rgba(234,241,255,.80);
}

/* Monitor table */
#open-trades-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
  font-size:12px;
}
#open-trades-table thead th{
  color: rgba(156,176,214,.95);
  font-weight:700;
  padding:8px 8px;
  text-align:center;
}
#open-trades-table tbody td{
  background: rgba(7,10,16,.55);
  border:1px solid rgba(130,170,255,.14);
  padding:10px 8px;
  text-align:center;
  color: rgba(234,241,255,.82);
}
#open-trades-table tbody tr td:first-child{border-radius:0 12px 12px 0}
#open-trades-table tbody tr td:last-child{border-radius:12px 0 0 12px}

/* ===================== Side panels emphasis ===================== */
.layout-side section{
  padding: 12px;
}

#trading-control-panel{
  border-color: rgba(34,211,238,.20);
}
#risk-summary-card{
  border-color: rgba(251,191,36,.18);
}
#engine-status-section{
  border-color: rgba(167,139,250,.18);
}

button,
input,
select{
  font-family: inherit;
}

/* ===================== Footer ===================== */
#footer-bar{
  margin-top: 14px;
  padding: 12px 14px;
  border-top: 1px solid var(--stroke);
  color: rgba(156,176,214,.92);
  background: rgba(8,12,18,.65);
}

/* ===================== Responsive Layout ===================== */
@media (max-width: 1100px){
  .layout-main{
    grid-template-columns: 1fr;
  }
  .layout-side{
    position:static;
  }
  #mt5-chart{height:360px;}
}