/*
 * app_mobile.css — Smartphone view (≤ 768 px)
 * Loaded exclusively via <link media="(max-width:768px)">.
 * Desktop layout is never touched.
 */

/* ── Prevent body scroll; content panels scroll internally ───── */
html, body {
  overflow: hidden !important;
  height: 100% !important;
}

/* ── TOPBAR: compact price bar ──────────────────────────────────
   Keep: logo, #live-price + #price-chg, .pmeta (bid/ask/spr), auth-btn
   Hide: vsep, account-info, app-rating-launch, spill, btn-tools, clock  */
#topbar {
  padding: 0 10px !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
#topbar .vsep,
#topbar #account-info,
#topbar #app-rating-launch,
#topbar #spill,
#topbar #btn-tools,
#topbar .clock,
#topbar .auth-sep,
#topbar #auth-user-info {
  display: none !important;
}
#topbar .logo {
  font-size: 10px !important;
  letter-spacing: .05em !important;
}
#topbar .logo em { display: none !important; }

/* Price number */
#topbar #live-price {
  font-size: 20px !important;
  line-height: 1 !important;
}
#topbar #price-chg {
  font-size: 9px !important;
}

/* Bid / Ask / Spread row — horizontal on mobile */
#topbar .pmeta {
  flex-direction: row !important;
  gap: 8px !important;
  font-size: 9px !important;
  flex-wrap: nowrap !important;
}
#topbar .pmeta div {
  white-space: nowrap !important;
}
#topbar .pmeta #stag { display: none !important; }

/* Push auth button to far right */
#topbar .topbar-right {
  margin-left: auto !important;
  gap: 4px !important;
}
/* Auth button moved to bottom nav on mobile */
#topbar #auth-btn,
#topbar #auth-user-info,
#topbar .auth-sep,
#topbar .topbar-right {
  display: none !important;
}

/* Desktop-Switch auf Mobil komplett ausblenden — die mobile Variante
   sitzt fest integriert in der Bottom-Nav (siehe #mob-inst-switch).
   Selektor deckt sowohl Topbar als auch Sysbar ab, falls die Pille
   irgendwo zwischen den Layouts hin- und herwandert. */
#instrument-switch{ display: none !important; }

/* SYSTEM-Pille in der Topbar auf Mobil — kompakt, rechts neben dem Preis. */
#topbar #sb-health.topbar-sb-item{
  margin-left: auto !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: 8.5px !important;
  flex-shrink: 0 !important;
}
#topbar #sb-health.topbar-sb-item .sbar-dot{ width:5px !important; height:5px !important; }

/* Mobile Instrument-Switch in der Bottom-Nav: erste Position, fester
   Footprint, klare visuelle Trennung von den Tab-Buttons. */
#mob-nav #mob-inst-switch{
  display: inline-flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  height: 36px !important;
  margin: 0 6px 0 8px !important;
  padding: 2px !important;
  background: var(--bg0, #0c0c0e) !important;
  border: 1px solid var(--bd1, #2a2a2a) !important;
  border-radius: 7px !important;
  border-right: 1px solid var(--border2) !important;
}
#mob-nav #mob-inst-switch .inst-seg{
  flex: 0 0 auto !important;       /* nicht von #mob-nav button{flex:1} stretchen */
  flex-direction: row !important;  /* horizontal */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 6px !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 0 !important;      /* die Tab-Buttons haben einen, hier nicht */
  border-radius: 5px !important;
  color: var(--t3, #d5dbea) !important;
  font-family: var(--cond, monospace) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
#mob-nav #mob-inst-switch .inst-seg.active{
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.4) !important;
}
#mob-nav #mob-inst-switch .inst-seg[data-key="dax"].active{
  background: linear-gradient(180deg,#4da6ff,#2070cc) !important;
}
#mob-nav #mob-inst-switch .inst-seg[data-key="nikkei"].active{
  background: linear-gradient(180deg,#ff5757,#c92c2c) !important;
}
#mob-nav #mob-inst-switch .inst-dot{
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset !important;
}
#mob-nav #mob-inst-switch .inst-dot-dax    { background: #4da6ff !important; }
#mob-nav #mob-inst-switch .inst-dot-nikkei { background: #ff5757 !important; }
#mob-nav #mob-inst-switch .inst-seg.active .inst-dot{
  background: #fff !important; box-shadow: 0 0 4px rgba(255,255,255,.6) !important;
}

/* Buchstaben-Marker (D / J) als Ersatz fuer den farbigen Punkt */
#mob-nav #mob-inst-switch .inst-letter{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important; height: 22px !important;
  padding: 0 !important;
  border-radius: 5px !important;
  font-family: var(--cond, monospace) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.5) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset !important;
}
#mob-nav #mob-inst-switch .inst-letter-dax{
  background: rgba(77,166,255,.18) !important;
  color: #4da6ff !important;
}
#mob-nav #mob-inst-switch .inst-letter-nikkei{
  background: rgba(255,87,87,.18) !important;
  color: #ff7e7e !important;
}
/* Aktiv: weisser Buchstabe auf gefuelltem Verlauf (Gradient kommt vom .inst-seg.active) */
#mob-nav #mob-inst-switch .inst-seg.active .inst-letter{
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.45) inset, 0 0 6px rgba(255,255,255,.35) !important;
}

/* ── SYSBAR: auf Mobil komplett ausgeblendet ─────────────────
   SYSTEM-Pille sitzt seit 2026-05-19 in der Topbar. MARKT, STRATEGIE-
   Warnung und ORPHAN sind auf Mobil bewusst ausgeblendet — die wichtigste
   Info (SYSTEM: OK) ist permanent oben rechts sichtbar. */
#sysbar { display: none !important; }

/* ── MAIN: single-column block, fixed height ────────────────── */
#main {
  display: block !important;
  /* 44px topbar + 48px bottom nav (sysbar ist auf Mobil ausgeblendet) */
  height: calc(100vh  - 44px - 48px) !important; /* fallback */
  height: calc(100dvh - 44px - 48px) !important; /* respects mobile browser chrome */
  overflow: hidden !important;
  gap: 0 !important;
  background: var(--bg1) !important;
}

/* All direct children: occupy full slot, hidden until tab activates */
#main > .panel,
#main > #right-col {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 !important;
  display: none !important;
}

/* Chart panel: always hidden on mobile */
#main > .panel:nth-child(2) {
  display: none !important;
}

/* ── Sections always hidden on mobile ───────────────────────── */
#econ-cal-wrap,
#econ-phdr,
#lr-cal-section,
.right-quick-btns,
#right-bottom-dock,
.right-sep,
#sbar /* chart status bar */ {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   TAB: PERF
   Show left panel. Visible: phdr.static + #perf-cards.
   Hidden: log section, econ section, separators.
   ───────────────────────────────────────────────────────────── */
body.mob-perf #main > .panel:nth-child(1) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.mob-perf #log-phdr,
body.mob-perf #log-out,
body.mob-perf #strategy-stats-wrap,
body.mob-perf #mob-status-phdr,
body.mob-perf #mob-status-panel {
  display: none !important;
}

/* Performance cards: natural height so chart appears directly below */
body.mob-perf #perf-cards {
  flex-shrink: 0 !important;
  padding: 10px !important;
}

/* ─────────────────────────────────────────────────────────────
   TAB: LOG
   Show left panel. Visible: #log-phdr + #log-out.
   Hidden: perf section, econ section, separators.
   ───────────────────────────────────────────────────────────── */
body.mob-log #main > .panel:nth-child(1) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.mob-log .phdr.static,
body.mob-log #perf-cards,
body.mob-log #strategy-stats-wrap,
body.mob-log #mob-status-phdr,
body.mob-log #mob-status-panel {
  display: none !important;
}

body.mob-log #log-phdr {
  display: flex !important;
  flex-shrink: 0 !important;
}

body.mob-log #log-out {
  display: block !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────────────
   TAB: STATUS  (mobile only — Detail-Übersicht der Systemchecks)
   ───────────────────────────────────────────────────────────── */
body.mob-status #main > .panel:nth-child(1) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.mob-status .phdr.static,
body.mob-status #perf-cards,
body.mob-status #log-phdr,
body.mob-status #log-out,
body.mob-status #mob-status-phdr,
body.mob-status #mob-status-panel {
  display: none !important;
}

body.mob-status #strategy-stats-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  border-top: 0 !important;
}

body.mob-status #strategy-stats-wrap .strategy-stats-phdr {
  display: flex !important;
}

body.mob-status #strategy-stats {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px !important;
}

body.mob-status .strategy-stats-head,
body.mob-status .strategy-stats-row {
  grid-template-columns: 46px 40px 39px 41px 41px 41px 41px !important;
  gap: 3px !important;
}

body.mob-status .strategy-stats-row {
  min-height: 34px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
}

body.mob-status .strategy-stats-name {
  font-size: 9px !important;
  font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────────
   TAB: ORDERS
   Show right column. Hide right-bottom-dock.
   ───────────────────────────────────────────────────────────── */
body.mob-orders #main > #right-col {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.mob-orders #right-bottom-dock {
  display: none !important;
}

/* Orders wrap fills remaining height */
body.mob-orders #orders-wrap {
  flex: 1 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Compact orders table for narrow screens */
#orders-table {
  font-size: 9px !important;
  width: 100% !important;
}
#orders-table th,
#orders-table td {
  padding: 4px 4px !important;
  white-space: nowrap !important;
}
/* Hide Mode column to save space */
#orders-table .col-mode,
#orders-table th:nth-child(3),
#orders-table td:nth-child(3) {
  display: none !important;
}

/* ── Mini chart (PERF tab only) ─────────────────────────────── */
#mob-chart-wrap {
  flex-shrink: 0 !important;
  background: var(--bg0) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 4px 0 2px !important;
}
body.mob-perf #mob-chart-wrap {
  display: block !important;
}
#mob-chart {
  display: block !important;
  width: 100% !important;
  height: 240px !important;
}

/* ── Performance cards — better mobile sizing ───────────────── */
.perf-pnl-val {
  font-size: 26px !important;
}
.perf-pnl-row {
  padding: 8px 0 !important;
}
.perf-row {
  min-height: 32px !important;
}

/* ── KONTO-LEISTE (über der Hauptleiste, nur nach Login) ─────── */
#mob-nav-konto {
  display: none; /* shown via JS when logged in */
  position: fixed !important;
  bottom: 48px !important;
  left: 0 !important;
  right: 0 !important;
  height: 36px !important;
  background: var(--bg2) !important;
  border-top: 1px solid var(--border2) !important;
  z-index: 200 !important;
  align-items: stretch !important;
}
#mob-nav-konto button {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: var(--t2) !important;
  font-family: var(--cond) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  -webkit-tap-highlight-color: transparent;
}
#mob-nav-konto button:active {
  background: rgba(77, 166, 255, .1) !important;
}
#mob-nav-konto .mob-nav-icon {
  font-size: 13px !important;
}
#mob-nav-konto .mob-nav-lbl {
  font-size: 9px !important;
  letter-spacing: .07em !important;
}

/* When Konto-Leiste is visible, shrink #main by its height (36px) */
body.mob-logged-in #main {
  height: calc(100vh  - 44px - 48px - 36px) !important;
  height: calc(100dvh - 44px - 48px - 36px) !important;
}

/* ── BOTTOM NAVIGATION ──────────────────────────────────────── */
#mob-nav {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 48px !important;
  background: var(--bg1) !important;
  border-top: 1px solid var(--border) !important;
  z-index: 200 !important;  /* below modals (z-index 9000) */
}

#mob-nav button {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--border2) !important;
  color: var(--t3) !important;
  font-family: var(--cond) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 6px 2px !important;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s, background .12s !important;
}
#mob-nav button:last-child {
  border-right: none !important;
}
#mob-nav button:active {
  background: rgba(77, 166, 255, .1) !important;
}
#mob-nav button.mob-active {
  color: var(--acc) !important;
  background: rgba(77, 166, 255, .07) !important;
}
#mob-nav .mob-nav-icon {
  font-size: 15px !important;
  line-height: 1 !important;
}
#mob-nav .mob-nav-lbl {
  font-size: 8px !important;
  letter-spacing: .06em !important;
}