/* app/static/css/panel_extras.css */
@supports(padding:max(env(safe-area-inset-left))) {
  body { padding-left: max(15px, env(safe-area-inset-left));
         padding-right: max(15px, env(safe-area-inset-right)); }
}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:10px;font-size:12px;border:1px solid rgb(203 213 225/0.6)}
.card{border:1px solid rgb(226 232 240);border-radius:16px;background:#fff}
.dark .card{border-color:#334155;background:#1f2937}
.kpi{border:1px solid rgb(226 232 240);border-radius:14px;padding:12px 12px 10px;background:#fff}
.dark .kpi{background:#1f2937;border-color:#334155}
/* aktif TF butonu vurgusu */
#tf-controls [data-tf][aria-current="true"]{
  background:#2563eb;color:#fff;border-color:rgba(37,99,235,.5);
}
.dark #tf-controls [data-tf][aria-current="true"]{
  background:#3b82f6;border-color:rgba(59,130,246,.5);
}
.kpi h6{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.kpi div{font-weight:600;margin-top:6px}

dialog#ref-modal { padding: 0; border: 0; }
dialog#ref-modal[open] { position: fixed; inset: 0; margin: auto; }
dialog#ref-modal::backdrop { background: rgba(0,0,0,0.5); }

/* Kapanan işlemler scroll (dark uyumlu) */
#recent-trades{
  max-height: 16rem;          /* 12rem/20rem */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  /* Light vars */
  --sb-track: rgba(203,213,225,.12);  /* slate-300 */
  --sb-thumb: rgba(100,116,139,.55);  /* slate-500 */
  scrollbar-width: thin;                   /* Firefox */
  scrollbar-color: var(--sb-thumb) transparent;
}
.dark #recent-trades{
  /* Dark vars */
  --sb-track: rgba(30,41,59,.55);     /* slate-800 */
  --sb-thumb: rgba(148,163,184,.55);  /* slate-400 */
}
#recent-trades::-webkit-scrollbar{ width:8px; }
#recent-trades::-webkit-scrollbar-track{ background:transparent; }
#recent-trades::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);
  border-radius: 8px;
  border: 2px solid transparent;      /* iç boşluk (inset görünüm) */
  background-clip: content-box;
}
#recent-trades:hover::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);   /* hover’da biraz daha belirgin */
}

/* Açık işlemler scroll (dark uyumlu) */
#open-positions{
  max-height: 16rem;          /* 12rem/20rem */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  /* Light vars */
  --sb-track: rgba(203,213,225,.12);  /* slate-300 */
  --sb-thumb: rgba(100,116,139,.55);  /* slate-500 */
  scrollbar-width: thin;                   /* Firefox */
  scrollbar-color: var(--sb-thumb) transparent;
}
.dark #open-positions{
  /* Dark vars */
  --sb-track: rgba(30,41,59,.55);     /* slate-800 */
  --sb-thumb: rgba(148,163,184,.55);  /* slate-400 */
}
#open-positions::-webkit-scrollbar{ width:8px; }
#open-positions::-webkit-scrollbar-track{ background:transparent; }
#open-positions::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);
  border-radius: 8px;
  border: 2px solid transparent;      /* iç boşluk (inset görünüm) */
  background-clip: content-box;
}
#open-positions:hover::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);   /* hover’da biraz daha belirgin */
}


/* bot-telemetry-list scroll (dark uyumlu) */
#bot-telemetry-list{
  max-height: 16rem;          /* 12rem/20rem */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  /* Light vars */
  --sb-track: rgba(203,213,225,.12);  /* slate-300 */
  --sb-thumb: rgba(100,116,139,.55);  /* slate-500 */
  scrollbar-width: thin;                   /* Firefox */
  scrollbar-color: var(--sb-thumb) transparent;
}
.dark #bot-telemetry-list{
  /* Dark vars */
  --sb-track: rgba(30,41,59,.55);     /* slate-800 */
  --sb-thumb: rgba(148,163,184,.55);  /* slate-400 */
}
#bot-telemetry-list::-webkit-scrollbar{ width:8px; }
#bot-telemetry-list::-webkit-scrollbar-track{ background:transparent; }
#bot-telemetry-list::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);
  border-radius: 8px;
  border: 2px solid transparent;      /* iç boşluk (inset görünüm) */
  background-clip: content-box;
}
#bot-telemetry-list:hover::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);   /* hover’da biraz daha belirgin */
}

/* Dark temayı tabanda zorla: Tailwind sırası değişse de gövde koyu kalsın */
/* html.dark { color-scheme: dark; } */
/* html.dark body { background: #0f172a; color: #e2e8f0; } */ /* slate-900 / slate-200 */

/* Chart.js renk değişkenleri */
:root{
  --chart-grid: rgba(100,116,139,.22);   /* light: slate-500 ~ %22 opak */
  --chart-axis: rgba(100,116,139,.38);
  --chart-font: #334155;                 /* slate-700 */
  --chart-tt-bg: rgba(2,6,23,.96);       /* tooltip bg (almost-black) */
  --chart-tt-bd: rgba(100,116,139,.35);  /* tooltip border */
}

.dark{
  --chart-grid: rgba(148,163,184,.29);   /* dark: slate-400 ~ biraz daha açık */
  --chart-axis: rgba(148,163,184,.45);
  --chart-font: #75818F;                 /* slate-200 */
  --chart-tt-bg: rgba(2,6,23,.96);
  --chart-tt-bd: rgba(148,163,184,.45);
}

/* Özel genişlik sınıfı */
/* 1 rem = 16px Örnek: 1400px; */
/*
  .max-w-custom {
    max-width: 98rem;
}
*/

/* =======================================================================
   Tooltip v3 — viewport-ankrajlı (JS ile konum), taşma yok
   ======================================================================= */

.tooltip{
  display:inline-flex; align-items:center; gap:6px;
}

.tooltip > .circle-icon{
  position:relative;
  display:inline-grid; place-items:center;
  width:14px; height:14px; border-radius:9999px;
  background:rgba(2,6,23,.08); color:#0f172a;
  font-size:10px; font-weight:700; line-height:1;
  cursor:help; outline:none;
}
.dark .tooltip > .circle-icon{ background:rgba(148,163,184,.18); color:#e2e8f0; }

/* Tooltip kutusu: JS ile verilen koordinatlara (CSS var'ları) sabitlenir */
.tooltip > .circle-icon .tooltiptext{
  position:fixed;
  left:var(--tt-left,0px);
  top:var(--tt-top,0px);
  display:none;             /* icon[data-open="1"] olduğunda görünür */
  z-index:60;

  /* Okunabilirlik */
  font-size:0.875rem; line-height:1.45; font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;

  /* Genişlik: ekran içinde kal, sarma açık */
  width:min(28rem, calc(100vw - 24px));  /* ~max 448px, mobilde viewport'a göre */
  white-space:normal; overflow-wrap:break-word; word-break:normal;

  /* Görünüş */
  background:rgba(30,41,59,.92); color:#e2e6e9;
  border-radius:6px; padding:8px 10px;
  box-shadow:0 10px 20px rgba(2,6,23,.35);
}



/* Ok: X pozisyonu JS’ten gelir */
.tooltip > .circle-icon .tooltiptext::after{
  content:"";
  position:fixed;
  left:calc(var(--tt-arrow-x, 0px));
  top:calc(var(--tt-arrow-y, 0px));
  border:6px solid transparent; border-top-color:rgba(30,41,59,.92);
}

.tooltip > .circle-icon .tooltiptext[data-pos="below"]::after{
  border-top-color: transparent;
  border-bottom-color: rgba(30,41,59,.92);
  top: calc(var(--tt-arrow-y, 0px) - 12px);
}

/* Aç/kapa */
.tooltip > .circle-icon[data-open="1"] .tooltiptext{ display:block; }

/* (İsteğe bağlı) hafif animasyon */
@media (prefers-reduced-motion:no-preference){
  .tooltip > .circle-icon .tooltiptext{
    transition:opacity .12s ease, transform .12s ease;
  }
}