/* ============================================================================
   PANEL TEMASI (yalniz ana sayfa; index.html yukler, admin ETKILENMEZ)
   Amac: kompakt, profesyonel "trading terminali" gorunumu. style.css'teki temel
   kurallarin uzerine body[data-page="panel"] kapsamiyla biner (admin_theme.css
   deseninin panel karsiligi). Geri almak = index.html'den bu dosyanin link'ini sil.
   ========================================================================== */

body[data-page="panel"] {
  --bg: #0a0d13;
  --panel: #10141c;
  --panel2: #151b25;
  --border: #212836;
  --text: #d7dee8;
  --muted: #7d8798;
  --green: #2ea06b;
  --red: #d9524b;
  --blue: #4a8df0;
  --gray: #3c4454;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Ince kaydirma cubuklari ---------- */
body[data-page="panel"] ::-webkit-scrollbar { width: 7px; height: 7px; }
body[data-page="panel"] ::-webkit-scrollbar-track { background: transparent; }
body[data-page="panel"] ::-webkit-scrollbar-thumb { background: #262e3d; border-radius: 4px; }
body[data-page="panel"] ::-webkit-scrollbar-thumb:hover { background: #37415466; background: #374154; }

/* ---------- Ust bar: ince, sakin ---------- */
body[data-page="panel"] header {
  padding: 7px 14px;
  background: linear-gradient(180deg, #11161f, #0f131b);
}
body[data-page="panel"] .brand { gap: 8px; }
body[data-page="panel"] .logo { font-size: 16px; }
body[data-page="panel"] .brand h1 { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
body[data-page="panel"] .badge { font-size: 10px; padding: 2px 8px; border-radius: 4px; letter-spacing: .05em; }
body[data-page="panel"] .badge.on { background: rgba(46,160,107,.14); color: #4ec98d; box-shadow: inset 0 0 0 1px rgba(78,201,141,.25); }
body[data-page="panel"] .badge.off { background: rgba(217,82,75,.12); color: #e57373; box-shadow: inset 0 0 0 1px rgba(229,115,115,.25); }
body[data-page="panel"] .btn { padding: 5px 11px; font-size: 12px; border-radius: 5px; }

/* ---------- Metrik seridi: 6 buyuk kart yerine tek ince bar ---------- */
body[data-page="panel"] .stats {
  display: flex;
  gap: 0;
  padding: 8px 12px;
}
body[data-page="panel"] .stat {
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: 7px 14px;
  border-radius: 0;
  border: 1px solid var(--border);
  border-left-width: 0;
  background: var(--panel);
}
body[data-page="panel"] .stat:first-child,
body[data-page="panel"] .stats-cap + .stat { border-left-width: 1px; border-radius: 6px 0 0 6px; }
body[data-page="panel"] .stat:last-child { border-radius: 0 6px 6px 0; }

/* Simulasyon kapagi: seridin sanal portfoy oldugunu acikca soyler */
body[data-page="panel"] .stats-cap {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 7px 12px; margin-right: 8px; white-space: nowrap; cursor: help;
  border: 1px dashed rgba(210,165,58,.5); border-radius: 6px;
  background: rgba(210,165,58,.06);
  color: #d2a53a; font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
body[data-page="panel"] .stats-cap span {
  font-size: 8.5px; color: var(--muted); font-weight: 600; letter-spacing: .04em;
}

/* Simulasyon rozeti (islem sekmeleri basligi): veri sanal portfoye ait */
body[data-page="panel"] .sim-tag {
  padding: 2px 8px; border-radius: 4px; white-space: nowrap; cursor: help;
  border: 1px dashed rgba(210,165,58,.5);
  background: rgba(210,165,58,.06);
  color: #d2a53a; font-size: 9px; font-weight: 700; letter-spacing: .07em;
  align-self: center;
}

/* Binance kutusu basligi: GERCEK HESAP rozeti + kullanici adi */
body[data-page="panel"] .real-tag {
  margin-left: 6px; padding: 1px 7px; border-radius: 3px; vertical-align: 1px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .07em;
  background: rgba(46,160,107,.15); color: #4ec98d;
  box-shadow: inset 0 0 0 1px rgba(78,201,141,.3);
}
body[data-page="panel"] .mb-user {
  margin-left: 4px; color: var(--muted); font-size: 9.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: none;
}
body[data-page="panel"] .stat .label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
body[data-page="panel"] .stat .value { font-size: 14px; font-weight: 650; letter-spacing: .01em; }

/* ---------- Ana yerlesim: dar oluklar, daha cok veri alani ---------- */
body[data-page="panel"] main { grid-template-columns: 308px 1fr 320px; gap: 10px; padding: 0 12px 12px; }
body[data-page="panel"] .col { gap: 10px; }
body[data-page="panel"] .panel { border-radius: 6px; }
body[data-page="panel"] .panel-head { padding: 7px 11px; background: rgba(255,255,255,.015); }
body[data-page="panel"] .panel-head h2 {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}

/* Sekmeli panel basligi */
body[data-page="panel"] .panel-head.sub-tabs { padding: 5px 8px; gap: 3px; }
body[data-page="panel"] .sub-tab { font-size: 11.5px; padding: 4px 9px; border-radius: 4px; font-weight: 600; }
body[data-page="panel"] .sub-tab-badge { font-size: 10px; min-width: 16px; height: 15px; border-radius: 8px; }

/* ---------- Tablolar: yogun ve hizali ---------- */
body[data-page="panel"] th, body[data-page="panel"] td { padding: 5px 10px; font-size: 12px; }
body[data-page="panel"] th {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); background: var(--panel);
  border-bottom: 1px solid var(--border);
}
body[data-page="panel"] tbody tr { border-top: 1px solid rgba(33,40,54,.6); }
body[data-page="panel"] tbody tr:hover { background: rgba(74,141,240,.05); }
body[data-page="panel"] #histTable tr.hist-row { cursor: pointer; }
body[data-page="panel"] .table-wrap { max-height: 340px; }
body[data-page="panel"] .side-tag { font-size: 9.5px; padding: 1px 7px; border-radius: 3px; letter-spacing: .04em; }
body[data-page="panel"] .ai-cell { font-size: 11px; max-width: 200px; }
/* Acik pozisyon tablosunda AI gerekcesi 3-5 satira sarip satirlari sisiriyordu:
   2 satirla kirp (tam metin hover'da title ile). */
body[data-page="panel"] #openTable .ai-cell {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35; white-space: normal;
}
body[data-page="panel"] .sym a::after { content: ""; }
body[data-page="panel"] .pos { color: #46c07e; }
body[data-page="panel"] .neg { color: #e0655e; }

/* ---------- Sol sutun: hesap kutusu + gunluk ---------- */
body[data-page="panel"] .logcol { top: 100px; height: calc(100vh - 112px); min-height: 380px; }

/* Binance Hesabim */
body[data-page="panel"] .mybinance { padding: 8px 9px; }
body[data-page="panel"] .mb-stats { gap: 5px; }
body[data-page="panel"] .mb-stats > div { padding: 5px 4px; border-radius: 5px; }
body[data-page="panel"] .mb-stats span { font-size: 8.5px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }
body[data-page="panel"] .mb-stats b { font-size: 12px; font-weight: 650; }
body[data-page="panel"] .mb-pos { margin-top: 6px; gap: 3px; max-height: 200px; }
body[data-page="panel"] .mb-row { font-size: 11px; padding: 4px 7px; border-radius: 4px; gap: 2px; }
body[data-page="panel"] .mb-sub { font-size: 9.5px; gap: 8px; }
body[data-page="panel"] .mb-close { width: 16px; height: 16px; font-size: 10px; border-radius: 3px; }
body[data-page="panel"] .mb-empty, body[data-page="panel"] .mb-err { font-size: 11px; padding: 4px; margin-top: 6px; }

/* Islem gunlugu: terminal satirlari (kart degil, ince serit) */
body[data-page="panel"] .logbox { padding: 7px 9px; gap: 3px; }
body[data-page="panel"] .log-line, body[data-page="panel"] .log-trade, body[data-page="panel"] .log-error {
  font-size: 11px; line-height: 1.4; padding: 4px 8px; border-radius: 3px;
  background: rgba(255,255,255,.015);
  border: 0; border-left: 2px solid var(--gray);
}
body[data-page="panel"] .log-trade { border-left-color: var(--blue); }
body[data-page="panel"] .log-error { border-left-color: var(--red); }
body[data-page="panel"] .log-time { font-size: 9px; margin-bottom: 1px; letter-spacing: .04em; }

/* ---------- Sag sutun: AI sohbet ---------- */
body[data-page="panel"] .chat { height: calc(100vh - 112px); min-height: 380px; }
body[data-page="panel"] .chatbox { padding: 9px 10px; gap: 6px; }
body[data-page="panel"] .msg { font-size: 11.5px; line-height: 1.45; padding: 6px 9px; border-radius: 6px; }
body[data-page="panel"] .msg.ai { border-left: 2px solid var(--blue); background: rgba(255,255,255,.02); }
body[data-page="panel"] .act-time { font-size: 9px; }

/* Skor hucresi */
body[data-page="panel"] .score.pos { color: #46c07e; }
body[data-page="panel"] .score.warn { color: #d2a53a; }

/* ---------- Giris kutusu ---------- */
body[data-page="panel"] #userLoginBox { border-radius: 8px; padding: 26px 24px; }
body[data-page="panel"] #userLoginBox h2 { font-size: 17px; }

/* ---------- Dar ekran ---------- */
@media (max-width: 1100px) {
  body[data-page="panel"] .stats { flex-wrap: wrap; gap: 6px; }
  body[data-page="panel"] .stat { flex: 1 1 30%; border: 1px solid var(--border); border-radius: 6px; }
  body[data-page="panel"] .stats-cap { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 8px; margin-right: 0; }
  body[data-page="panel"] .logcol { height: auto; }
  body[data-page="panel"] .chat { height: 460px; }
}

/* ---------- Telefon (2026-07 eklendi; yalniz ana sayfa, yalniz bu genislik altinda —
   masaustu ve admin hic etkilenmez. Yerlesim/renk/tasarim degismez, sadece sigdirilir). ---------- */
@media (max-width: 640px) {
  body[data-page="panel"] header { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; }
  body[data-page="panel"] .brand { flex: 1 1 100%; }
  body[data-page="panel"] .brand h1 { font-size: 12.5px; }
  body[data-page="panel"] .controls { flex: 1 1 100%; justify-content: flex-end; }

  body[data-page="panel"] .stats { padding: 6px 8px; }
  body[data-page="panel"] .stat { flex: 1 1 47%; }

  /* Sirala: Binance Hesabim -> Alinanlar(sim) -> LS Canli Tarama -> AI Sohbet -> Islem Gunlugu.
     .col kutulari display:contents ile "eritilir" (kendi kutusu kaybolur, cocuklari main'in
     dogrudan flex ogesi olur) -> boylece 3 ayri sutuna dagilmis panelleri tek sutunda
     istedigimiz sirada dizebiliyoruz. Masaustu grid'ine (main>.col) hic dokunulmuyor,
     bu sadece <=640px altinda gecerli. */
  body[data-page="panel"] main { display: flex; flex-direction: column; padding: 0 8px 8px; gap: 8px; }
  body[data-page="panel"] .col { display: contents; }
  body[data-page="panel"] #myBinancePanel { order: 1; }
  body[data-page="panel"] main > .col:nth-of-type(2) > .panel:nth-of-type(1) { order: 2; }
  body[data-page="panel"] main > .col:nth-of-type(2) > .panel:nth-of-type(2) { order: 3; }
  body[data-page="panel"] .chat { order: 4; }
  body[data-page="panel"] .logpanel { order: 5; }

  body[data-page="panel"] .panel-head.sub-tabs { flex-wrap: wrap; row-gap: 5px; }
  body[data-page="panel"] .panel-head.sub-tabs .sim-tag { flex: 1 1 100%; text-align: center; }

  body[data-page="panel"] .mb-stats { grid-template-columns: repeat(2, 1fr); }
  body[data-page="panel"] .mb-main { flex-wrap: wrap; row-gap: 4px; }
  body[data-page="panel"] .mb-sym { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  body[data-page="panel"] th, body[data-page="panel"] td { padding: 4px 7px; font-size: 11px; }
  body[data-page="panel"] .table-wrap { max-height: 280px; }
  /* Alinanlar/Gecmis tablolari: dar ekranda tablo genisligi kolonlara ESIT dagitilinca
     kolon aralari asiri aciliyordu. Son kolon (AI) tum artik genisligi emsin -> diger
     kolonlar icerigine gore siki dizilir, masaustu etkilenmez. */
  body[data-page="panel"] #openTable th:last-child, body[data-page="panel"] #openTable td:last-child,
  body[data-page="panel"] #histTable th:last-child, body[data-page="panel"] #histTable td:last-child { width: 100%; }

  body[data-page="panel"] .chat { height: 380px; min-height: 320px; }
}