/* ═══════════════════════════════════════════════════════════════
   Deribit App — sdílené styly (Bybit-like visual language)
   Palette a komponenty 1:1 podle Bybit monolitu — uživatel nemá
   na první pohled rozeznat, že obchoduje na jiné burze.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Bybit exact palette */
  --bg0:#0b0e11;  --bg1:#161a1e;  --bg2:#1e2329;
  --bg3:#2b2f36;  --bg4:#363a45;
  --line:#363a45; --line2:#2b2f36;
  --t0:#eaecef;   --t1:#b7bdc6;   --t2:#848e9c;   --t3:#5e6673;
  --cyan:#1890ff;  --cyan2:#096dd9;
  --green:#02c076; --green2:#017a4a;
  --red:#f84960;   --red2:#c0392b;
  --yellow:#f0b90b;
  --orange:#f6851b;
  --purple:#a855f7;
  --sans:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;  /* platform-min-font-12px-v1: unified Inter */
  --r:4px;
  /* Font size scale */
  --fs-xs:14px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px;
}

/* Responsive font scale */
@media (max-width:1280px) {
  :root { --fs-xs:14px; --fs-sm:14px; --fs-md:15px; --fs-lg:17px; }
}
@media (max-width:768px) {
  :root { --fs-xs:14px; --fs-sm:14px; --fs-md:14px; --fs-lg:16px; }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  background:var(--bg0); color:var(--t0);
  font-family:var(--sans); font-size:var(--fs-md);
  -webkit-font-smoothing:antialiased;
}

/* ── SHELL — topbar + (optional sub-nav) + body, flex stack ─ */
/* autowrite-dr-nav-v6: změna z grid (52px 1fr) na flex column,
   protože při přidání 3. elementu (sub-nav) grid posouval main do auto-řádku
   a obsah stránky se zarovnal na spodek viewportu. */
.shell { display:flex; flex-direction:column; min-height:100vh; }
.shell > .body { flex:1; }

/* ── TOPBAR ────────────────────────────────────────────────── */
.topbar {
  display:flex; align-items:stretch;
  background: linear-gradient(180deg, rgba(77,142,255,0.18) 0%, rgba(77,142,255,0.10) 100%), var(--bg1); border-bottom:1px solid rgba(77,142,255,0.40);
  z-index:10; height:52px;
}
.topbar-brand {
  display:flex; align-items:center; flex-shrink:0;
  padding:0 10px 0 14px; gap:10px;
}
.brand-icon {
  width:30px; height:30px; border-radius:4px;
  background:var(--yellow);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:#000;
}
.brand-name {
  font-size:16px; font-weight:700; color:var(--t0);
  letter-spacing:-0.01em;
}
.brand-sub { font-size:14px; color:var(--t3); }

.top-nav {
  display:flex; align-items:stretch; flex:1;
  justify-content:flex-start; overflow:visible; flex-wrap:wrap;
}
.tn {
  font-size:16px; font-weight:500; padding:0 16px;
  border:none; background:transparent; color:var(--t2);
  transition:color .15s; white-space:nowrap;
  border-bottom:2px solid transparent;
  display:flex; align-items:center; text-decoration:none;
  font-family:inherit; cursor:pointer;
}
.tn:hover { color:var(--t0); }
.tn.active { color:var(--t0); font-weight:600; border-bottom-color:var(--yellow); }

.topbar-right {
  display:flex; align-items:center; gap:10px;
  flex-shrink:0; padding:0 14px;
}
.pill {
  font-size:14px; font-weight:700; letter-spacing:.04em;
  padding:3px 8px; border-radius:3px; text-transform:uppercase;
}
.pill-y { background:rgba(240,185,11,.12); color:var(--yellow);
          border:1px solid rgba(240,185,11,.3); }
.pill-g { background:rgba(2,192,118,.12); color:var(--green);
          border:1px solid rgba(2,192,118,.3); }
.pill-c { background:rgba(24,144,255,.12); color:var(--cyan);
          border:1px solid rgba(24,144,255,.3); }
.pill-r { background:rgba(248,73,96,.12); color:var(--red);
          border:1px solid rgba(248,73,96,.3); }

.user-name { font-size:14px; color:var(--t2); }
.logout-btn {
  font-size:14px; color:var(--red); background:transparent;
  border:1px solid rgba(248,73,96,.3); border-radius:3px;
  padding:3px 10px; text-decoration:none; cursor:pointer;
  font-family:inherit;
}
.logout-btn:hover { background:rgba(248,73,96,.12); }

/* ── BODY & page containers ─────────────────────────────── */
.body { overflow:auto; }
.page { padding:20px; max-width:1400px; margin:0 auto; }
.page-title {
  font-size:var(--fs-lg); font-weight:600; color:var(--t0);
  margin-bottom:18px;
}
.page-subtitle { font-size:var(--fs-xs); color:var(--t3); margin-top:-14px; margin-bottom:18px; }

/* ── PANELS ────────────────────────────────────────────── */
.panel {
  background:var(--bg1); border:1px solid var(--line);
  border-radius:var(--r); padding:14px;
  margin-bottom:14px;
}
.panel-title {
  font-size:var(--fs-sm); font-weight:600; color:var(--t1);
  text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.panel-title .count { color:var(--t3); font-weight:500; letter-spacing:0; }

/* ── KPI cards ─────────────────────────────────────────── */
.kpi-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin-bottom:14px;
}
.kpi {
  background:var(--bg1); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px;
}
.kpi-l { font-size:var(--fs-xs); color:var(--t3); margin-bottom:6px;
         text-transform:uppercase; letter-spacing:.05em; }
.kpi-v { font-family:var(--mono); font-size:20px; font-weight:700;
         line-height:1.1; color:var(--t0); }
.kpi-s { font-size:var(--fs-xs); color:var(--t3); margin-top:4px;
         font-family:var(--mono); }
.cyan   { color:var(--cyan)   !important; }
.green  { color:var(--green)  !important; }
.red    { color:var(--red)    !important; }
.yellow { color:var(--yellow) !important; }
.purple { color:var(--purple) !important; }
.orange { color:var(--orange) !important; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; font-family:var(--sans); font-size:var(--fs-sm);
  font-weight:600; padding:8px 14px; border-radius:var(--r);
  border:none; cursor:pointer; transition:filter .15s, background .15s;
}
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-primary { background:var(--cyan); color:#fff; }
.btn-primary:hover:not(:disabled) { background:#1a95f7; }
.btn-start   { background:var(--green); color:#fff; }
.btn-start:hover:not(:disabled) { filter:brightness(1.1); }
.btn-stop    { background:var(--red); color:#fff; }
.btn-stop:hover:not(:disabled) { filter:brightness(1.1); }
.btn-sec     { background:var(--bg3); color:var(--t1); border:1px solid var(--line); }
.btn-sec:hover:not(:disabled) { background:var(--bg4); }
.btn-ghost   { background:transparent; color:var(--t2); border:1px solid var(--line);
               padding:5px 10px; font-size:var(--fs-xs); }
.btn-ghost:hover:not(:disabled) { color:var(--t0); border-color:var(--cyan); }
.btn-danger  { background:transparent; color:var(--red);
               border:1px solid rgba(248,73,96,.3);
               padding:5px 10px; font-size:var(--fs-xs); }
.btn-danger:hover:not(:disabled) { background:rgba(248,73,96,.12); }
.btn-link    { background:transparent; color:var(--cyan); padding:0;
               text-decoration:none; font-weight:600; }
.btn-link:hover { text-decoration:underline; }

/* ── Forms ─────────────────────────────────────────────── */
.fg { margin-bottom:12px; }
.fl {
  font-size:var(--fs-xs); font-weight:500; color:var(--t2);
  display:block; margin-bottom:4px; letter-spacing:.04em;
  text-transform:uppercase;
}
.fc {
  width:100%; background:var(--bg3); border:1px solid var(--line);
  border-radius:var(--r); color:var(--t0);
  font-family:var(--sans); font-size:var(--fs-sm);
  padding:7px 10px; outline:none; transition:border-color .15s;
}
.fc:focus { border-color:var(--cyan); }
.fc.mono { font-family:var(--mono); }
select.fc {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23848e9c'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
  padding-right:24px;
}
.fc-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fc-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }

/* ── Segmented toggle (BUY/SELL style) ───────────────── */
.tog {
  display:flex; background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-bottom:8px;
}
.to {
  flex:1; text-align:center; font-size:var(--fs-sm); font-weight:500;
  padding:7px 4px; cursor:pointer; color:var(--t3);
  transition:all .15s; user-select:none;
  background:transparent; border:none; font-family:inherit;
}
.to.on          { background:var(--bg3); color:var(--t0); }
.to.on.to-buy   { background:rgba(2,192,118,.18); color:var(--green); }
.to.on.to-sell  { background:rgba(248,73,96,.18); color:var(--red); }
.to.on.to-btc   { color:var(--orange); }
.to.on.to-eth   { color:var(--cyan); }

/* ── Tables ────────────────────────────────────────────── */
.tw { width:100%; }
table.tbl {
  width:100%; border-collapse:collapse;
  font-family:var(--sans); font-size:var(--fs-sm);
}
table.tbl thead th {
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--t3);
  text-align:left; padding:10px 10px;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg2); z-index:2; white-space:nowrap;
}
table.tbl tbody tr { border-bottom:1px solid var(--line); transition:background .1s; }
table.tbl tbody tr:hover { background:rgba(43,47,54,.5); }
table.tbl tbody td { padding:8px 9px; color:var(--t0); }
table.tbl td.num { font-family:var(--mono); text-align:right; }
table.tbl td.mono { font-family:var(--mono); }
table.tbl td.dim { color:var(--t3); }
table.tbl .empty, .empty-row {
  color:var(--t3); padding:24px; text-align:center; font-style:italic;
}
.loading-row {
  color:var(--t3); padding:24px; text-align:center;
}

/* Badges / mini-pills inside tables */
.b {
  display:inline-block; font-size:var(--fs-xs); font-weight:600;
  padding:2px 7px; border-radius:3px;
}
.b-g { background:rgba(2,192,118,.1);  color:var(--green); }
.b-r { background:rgba(248,73,96,.1);  color:var(--red); }
.b-y { background:rgba(240,185,11,.1); color:var(--yellow); }
.b-c { background:rgba(24,144,255,.1); color:var(--cyan); }
.b-p { background:rgba(168,85,247,.1); color:var(--purple); }
.b-o { background:rgba(246,133,27,.1); color:var(--orange); }
.b-dim { background:var(--bg3); color:var(--t3); border:1px solid var(--line); }

/* Network pills */
.net-mainnet { background:rgba(248,73,96,.1); color:var(--red);
               border:1px solid rgba(248,73,96,.3); }
.net-testnet { background:rgba(24,144,255,.1); color:var(--cyan);
               border:1px solid rgba(24,144,255,.3); }
.net-demo    { background:rgba(240,185,11,.1); color:var(--yellow);
               border:1px solid rgba(240,185,11,.3); }

/* ── Direction labels ─────────────────────────────────── */
.dir-buy  { color:var(--green); font-weight:600; }
.dir-sell { color:var(--red);   font-weight:600; }

/* ── Modal ──────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  display:none; align-items:center; justify-content:center; z-index:100;
}
.modal-backdrop.show { display:flex; }
.modal-card {
  background:var(--bg1); border:1px solid var(--line);
  border-radius:8px; padding:24px; min-width:460px; max-width:560px;
  max-height:90vh; overflow-y:auto;
}
.modal-title {
  color:var(--t0); font-size:var(--fs-md); font-weight:600;
  margin-bottom:16px;
}
.modal-note { font-size:var(--fs-xs); color:var(--t3);
              margin-top:-4px; margin-bottom:12px; }
.modal-actions {
  display:flex; justify-content:flex-end; gap:10px; margin-top:12px;
}

/* ── Toast ──────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:24px; right:24px; z-index:200;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.toast-item {
  padding:10px 16px; border-radius:var(--r); font-size:var(--fs-sm);
  max-width:480px; border-left:3px solid;
  background:var(--bg1); box-shadow:0 8px 24px rgba(0,0,0,.5);
  pointer-events:auto;
  animation:toastIn .2s ease;
}
.toast-ok   { border-color:var(--green);  color:#6ee7b7; }
.toast-err  { border-color:var(--red);    color:#fca5a5; }
.toast-info { border-color:var(--cyan);   color:#93c5fd; }
.toast-warn { border-color:var(--yellow); color:#fcd34d; }
@keyframes toastIn {
  from { transform:translateX(20px); opacity:0; }
  to   { transform:translateX(0);   opacity:1; }
}

/* ── Utilities ─────────────────────────────────────────── */
.muted { color:var(--t2); }
.dim   { color:var(--t3); }
.mono  { font-family:var(--mono); }
.nowrap { white-space:nowrap; }
.dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:5px;
}
.dot-g { background:var(--green); box-shadow:0 0 6px var(--green); }
.dot-r { background:var(--red);   box-shadow:0 0 6px var(--red); }
.dot-y { background:var(--yellow);box-shadow:0 0 6px var(--yellow); }
.dot-pulse { animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Scrollbars */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
::-webkit-scrollbar-track { background:var(--bg0); }

/* ─── Top-nav dropdown (Opce ▸ Autowrite) ─────────────────────── */
.tn-group {
  position: relative;
  display: flex;
  align-items: stretch;
}
.tn-group .tn-parent {
  cursor: pointer;
}
.tn-group .tn-caret {
  margin-left: 4px;
  font-size:14px;
  color: var(--t3);
  transition: transform .15s, color .15s;
  display: inline-block;
}
.tn-group:hover .tn-caret,
.tn-group.open .tn-caret { color: var(--t1); }
.tn-group.open .tn-caret { transform: rotate(180deg); }

.tn-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  padding: 6px 0;
  display: none;
  z-index: 50;
}
.tn-group:hover .tn-sub,
.tn-group.open  .tn-sub { display: block; }

.tn-sub-item {
  display: block;
  padding: 8px 14px;
  font-size:14px;
  font-weight: 500;
  color: var(--t1);
  text-decoration: none;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.tn-sub-item:hover {
  background: var(--bg3);
  color: var(--t0);
}
.tn-sub-item.active {
  color: var(--t0);
  background: var(--bg3);
  border-left-color: var(--yellow);
  font-weight: 600;
}


/* ════════════════════════════════════════════════════════════
   responsive-mobile-tablet-v1: hamburger pro tablet / mobile
   Desktop > 1180px = původní behavior (nezasahujeme)
   ════════════════════════════════════════════════════════════ */

/* Hamburger button — schovaný na desktopu */
.nav-burger {
  display: none;
  background: transparent; border: none; cursor: pointer;
  padding: 0 14px; align-items: center; justify-content: center;
  color: var(--t1); font-size: 24px;
  flex-shrink: 0;
}
.nav-burger:hover { color: var(--t0); }
.nav-burger .nb-icon { display: inline-block; width: 22px; height: 22px; position: relative; }
.nav-burger .nb-icon::before,
.nav-burger .nb-icon::after,
.nav-burger .nb-icon span {
  content:''; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease;
}
.nav-burger .nb-icon::before { top: 4px; }
.nav-burger .nb-icon span    { top: 50%; transform: translateY(-50%); }
.nav-burger .nb-icon::after  { bottom: 4px; }
.nav-burger.open .nb-icon::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-burger.open .nb-icon span    { opacity: 0; }
.nav-burger.open .nb-icon::after  { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* Backdrop pod otevřeným menu (jen mobile/tablet) */
.nav-backdrop {
  display: none;
  position: fixed; inset: 52px 0 0 0;
  background: rgba(0,0,0,0.5);
  z-index: 9;
}
.nav-backdrop.open { display: block; }

/* ── TABLET + MOBILE (≤1180px) ─────────────────────────────── */
@media (max-width: 1180px) {
  .nav-burger { display: flex; }
  .topbar-brand { padding: 0 8px 0 12px; }
  .brand-name#topbar_equity { font-size: 17px !important; min-width: auto !important; }

  /* Top-nav přepnout na dropdown overlay */
  .top-nav {
    position: fixed; top: 52px; left: 0; right: 0;
    background: var(--bg1);
    border-bottom: 1px solid rgba(77,142,255,0.30);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    flex-direction: column; align-items: stretch;
    padding: 8px 0; gap: 0;
    z-index: 10;
    transform: translateY(-110%);
    transition: transform .25s ease;
    max-height: calc(100vh - 52px); overflow-y: auto;
  }
  .top-nav.open { transform: translateY(0); }
  .tn {
    padding: 12px 20px; font-size: 16px;
    border-bottom: 1px solid var(--line);
    width: 100%; box-sizing: border-box;
  }
  .tn:last-child { border-bottom: none; }
  .tn.active {
    background: rgba(77,142,255,0.12);
    border-bottom-color: var(--line);
    border-left: 3px solid var(--yellow);
    padding-left: 17px;
  }

  /* Topbar-right kompakt */
  .topbar-right { gap: 6px; padding: 0 10px; }
  .topbar-right .user-name { display: none; }  /* email zabírá místo */
  .aw-master-btn { font-size: 14px; padding: 4px 8px; }

  /* Sub-nav (Opce subpages) — horizontal scroll */
  .sub-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sub-nav::-webkit-scrollbar { height: 4px; }

  /* Tabulky — horizontal scroll wrapper */
  .panel { padding: 12px; }
  table.tbl, table.chain, table.st-tbl {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Forms — single column */
  .ctrl-row { flex-direction: column; align-items: stretch; }
  .ctrl-row .fg { width: 100%; }

  /* Dashboard grid → 1 column */
  .dash-grid, .opt-grid { grid-template-columns: 1fr !important; }

  /* mobile-overflow-fix-v1: zabraň horizontálnímu scrollu na celé stránce.
     Důvod: topbar má flex-shrink:0 na obou stranách (brand + topbar-right),
     na úzkých mobilech to způsobí přesah o pár pixelů.
     Defenzivní opatření: dovol obsahu shrink, body clipping jako pojistka. */
  html, body { overflow-x: hidden; }

  /* Topbar: dovol shrinking — bez wrap (kdyby wraplo, navBackdrop top:52px by neseděl) */
  .topbar-brand { min-width: 0; flex-shrink: 1; }
  .topbar-right { min-width: 0; flex-shrink: 1; }

  /* Spot ceny — zruš inline min-width 80/60px (jinak nutí topbar šířku) */
  #topbar_spot_btc, #topbar_spot_eth { min-width: 0 !important; }

  /* Grid items — dovol zmenšit pod jejich content width
     (nutné aby grid-template-columns:1fr fungovalo s mono čísly uvnitř) */
  .dash-grid > *, .opt-grid > * { min-width: 0; }

  /* Menší page padding na mobilu = víc místa pro panely */
  .page { padding: 12px 10px; }
}

/* ── MOBILE only (≤768px) ──────────────────────────────────── */
@media (max-width: 768px) {
  .topbar-brand { padding: 0 6px 0 10px; }
  .brand-name#topbar_equity { font-size: 15px !important; }
  .topbar-right { gap: 4px; padding: 0 6px; }
  .topbar-right .logout-btn { font-size: 14px; padding: 3px 6px; }
  .aw-master-btn .ge-label { display: none; }   /* jen tečka */

  .panel { padding: 8px; border-radius: 4px; }
  .page-title { font-size: 18px; padding: 8px 0; }

  /* Tlačítka v actions column kompaktní */
  .b-roll2d, .b-roll2ds, .b-hedge, .b-edit-pos, .b-tp-set, .b-close-pos {
    font-size: 14px; padding: 3px 6px;
  }

  /* Modal — full screen na mobilu */
  .modal-card { max-width: 100% !important; margin: 8px; max-height: 95vh; }
}

/* ── ULTRA-NARROW (≤480px) — nejužší telefony ───────────────── */
@media (max-width: 480px) {
  /* mobile-overflow-fix-v1: na nejužších telefonech schovej spot ceny
     z topbaru — jsou redundantní, dashboard má Spot v hlavičkách panelů
     a na ostatních stránkách jsou v sub-nav / table headerech. */
  #topbar_spot_btc, #topbar_spot_eth { display: none; }

  .page { padding: 8px 6px; }
  .page-title { font-size: 16px; }
  .dash-panel { padding: 10px 12px; }
}