/* BotPro (web) - tema visual portado do BotProPc (src/ui/styles.py, "Subs") */
:root {
  --bg-app: #020b13; --bg-frame: #03101a; --bg-panel: #06131e; --bg-panel-2: #081722;
  --bg-hover: #0b1d29; --bg-field: #0b1a26; --bg-log: #03101a;
  --border-dark: #152634; --border-med: #1c3040; --border-soft: rgba(92,125,145,0.18);
  --text: #f3f6f8; --text-2: #b1bac2; --text-muted: #7f8c97; --text-dim: #56636d;
  --green: #00e87a; --green-bright: #20f58f; --green-dark: #00bd68;
  --green-glow: rgba(0,232,122,0.28); --green-tint: rgba(0,232,122,0.10);
  --cyan: #00c8ff; --purple: #9c43ff; --yellow: #ffcf26; --orange: #ff7a21; --danger: #c8364a;
  --font-ui: 'Inter','Segoe UI',Arial,sans-serif;
  --font-log: 'JetBrains Mono','Consolas','Courier New',monospace;
}
html, body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }
body { background: var(--bg-app); color: var(--text); font-family: var(--font-ui); }
.bp-card { background: var(--bg-panel); border: 1px solid var(--border-dark); border-radius: 15px; }
.bp-field { background: var(--bg-field) !important; border: 1px solid var(--border-dark) !important; border-radius: 9px !important; color: var(--text) !important; }
.bp-field:focus { border-color: var(--green) !important; background: var(--bg-panel-2) !important; box-shadow: 0 0 0 1px var(--green); outline: none; }
#bottom-nav { background: rgba(3,11,16,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--green-dark); }
#bottom-nav .nav-btn { color: var(--text-muted); transition: color .15s ease; }
#bottom-nav .nav-btn.active-nav { color: var(--green); }
#bottom-nav .nav-btn i { font-size: 1.05rem; }
.tab-content { animation: fadein .15s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
#app-header { background: rgba(3,11,16,0.95) !important; border-bottom: 1px solid var(--border-dark) !important; }
#conn-badge, #ws-badge { background: var(--bg-field); border: 1px solid var(--border-dark); color: var(--text-muted); }
#conn-badge.bp-online, #ws-badge.bp-online { color: var(--green); border-color: var(--green-dark); }
#conn-badge.bp-online { background: var(--green-tint); }
#balance-card { background: linear-gradient(145deg, rgba(0,232,122,0.10), var(--bg-panel) 55%); border: 1px solid var(--green-dark); border-radius: 15px; }
#robot-radar-card { overflow: hidden; background: linear-gradient(145deg, rgba(0,232,122,.055), var(--bg-panel) 65%); }
.bot-radar { position: relative; width: 210px; height: 210px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 1px solid rgba(0,232,122,.65); background: radial-gradient(circle, rgba(0,232,122,.10) 0, rgba(2,18,24,.96) 64%); box-shadow: inset 0 0 30px rgba(0,232,122,.08), 0 0 18px rgba(0,232,122,.08); }
.radar-grid { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, transparent 49.5%, rgba(0,232,122,.30) 50%, transparent 50.5%), linear-gradient(transparent 49.5%, rgba(0,232,122,.30) 50%, transparent 50.5%), repeating-radial-gradient(circle, transparent 0 31px, rgba(0,232,122,.35) 32px 33px); }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 286deg, rgba(0,232,122,.02) 300deg, rgba(0,232,122,.50) 359deg, transparent 360deg); transform: rotate(0); opacity: .34; }
.bot-radar.is-running .radar-sweep { animation: radarSpin 2.2s linear infinite; opacity: 1; }
.radar-candles { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 38px; height: 92px; opacity: .58; }
.radar-candle { position: absolute; left: var(--x); bottom: 0; width: 7px; height: var(--h); border-radius: 1px; transform-origin: bottom center; box-shadow: 0 0 7px currentColor; animation: candleIdle 3.2s ease-in-out infinite var(--d); }
.radar-candle::before { content: ''; position: absolute; left: 3px; top: -10px; width: 1px; height: calc(100% + 20px); background: currentColor; z-index: -1; }
.radar-candle.up { color: #00e87a; background: #00d874; }
.radar-candle.down { color: #ff4f67; background: #e83c55; }
.bot-radar.is-running .radar-candle { animation-name: candleTrade; animation-duration: 1.35s; }
.radar-blip { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); opacity: .35; }
.bot-radar.is-running .radar-blip { animation: radarBlip 2.2s ease-in-out infinite; }
.blip-one { left: 24%; top: 34%; } .blip-two { right: 19%; top: 48%; animation-delay: .7s !important; } .blip-three { left: 45%; bottom: 15%; animation-delay: 1.35s !important; }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes radarBlip { 0%,35%,100% { opacity: .18; transform: scale(.7); } 48%,65% { opacity: 1; transform: scale(1.25); } }
@keyframes candleIdle { 0%,100% { transform: scaleY(.72) translateY(3px); opacity: .38; } 50% { transform: scaleY(1); opacity: .72; } }
@keyframes candleTrade { 0%,100% { transform: scaleY(.55) translateY(5px); opacity: .45; } 40% { transform: scaleY(1.08) translateY(-3px); opacity: 1; } 70% { transform: scaleY(.82); opacity: .75; } }
@media (max-width: 360px) { .bot-radar { width: 184px; height: 184px; } .radar-candles { bottom: 32px; transform: scale(.88); } }
#header-balance { color: var(--green); font-weight: 800; }
#btn-hide-balance { background: var(--bg-field); border: 1px solid var(--border-soft); color: var(--text-muted); }
#btn-hide-balance:hover { color: var(--green); border-color: var(--green-dark); }
#btn-start-bot, #btn-connect { background: linear-gradient(180deg, var(--green-bright), var(--green)); color: #06131e; font-weight: 800; border: none; box-shadow: 0 6px 24px var(--green-glow); }
#btn-start-bot:hover, #btn-connect:hover { filter: brightness(1.08); }
#btn-stop-bot { background: var(--danger); color: #fff; font-weight: 700; border: none; }
#btn-save-config { background: var(--bg-field); color: var(--text); border: 1px solid var(--green-dark) !important; font-weight: 700; }
#btn-save-config:hover { background: var(--green-tint); color: var(--green); }
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="time"],select,textarea { background: var(--bg-field); border: 1px solid var(--border-dark); color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--green) !important; box-shadow: 0 0 0 1px var(--green); outline: none; }
select option { background: var(--bg-field); color: var(--text); }
input[type="checkbox"] { appearance: none; width: 38px; height: 20px; min-width: 38px; background: #2a3d52; border: 1px solid var(--border-dark); border-radius: 10px; position: relative; cursor: pointer; transition: background .15s ease; }
input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted); transition: transform .15s ease, background .15s ease; }
input[type="checkbox"]:checked { background: var(--green-dark); border-color: var(--green); }
input[type="checkbox"]:checked::after { transform: translateX(18px); background: #fff; }
#log-list { background: var(--bg-log); border: 1px solid var(--border-soft); border-radius: 9px; font-family: var(--font-log); padding: 8px; }
.log-line { padding: 2px 6px; border-radius: 6px; word-break: break-word; }
.log-info { color: var(--text-2); }
.log-success { color: var(--green); background: var(--green-tint); }
.log-warn { color: var(--yellow); background: rgba(255,207,38,.08); }
.log-error { color: #ff6b7d; background: rgba(200,54,74,.12); }
.trade-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 8px; background: var(--bg-field); }
.trade-win { border-left: 3px solid var(--green); }
.trade-loss { border-left: 3px solid var(--danger); }
.trade-tie { border-left: 3px solid var(--text-muted); }
.asset-chip { display: flex; align-items: center; gap: 6px; background: var(--bg-field); border: 1px solid var(--border-dark); border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: pointer; user-select: none; color: var(--text-2); }
.asset-chip.selected { border-color: var(--green); background: var(--green-tint); color: var(--green); }
::-webkit-scrollbar { width: 6px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-dark); }
button:disabled { opacity: .5; pointer-events: none; }
.acc-type-btn { background: var(--bg-field); border-color: var(--border-dark); color: var(--text-muted); }
.acc-type-btn.acc-type-active { background: var(--green-tint); border-color: var(--green); color: var(--green); }
.sched-day-btn { background: var(--bg-field); border-color: var(--border-dark); color: var(--text-muted); transition: all .15s ease; cursor: pointer; user-select: none; }
.sched-day-btn.sched-day-active { background: rgba(0,200,255,.12); border-color: var(--cyan); color: var(--cyan); }
.balance-hidden { letter-spacing: 0.15em; color: var(--text-dim) !important; }
@keyframes balancePulse {
  0% { background: var(--green); box-shadow: 0 0 0 0 var(--green-glow); }
  70% { background: var(--green-dark); box-shadow: 0 0 0 6px rgba(0,232,122,0); }
  100% { background: var(--green); box-shadow: 0 0 0 0 rgba(0,232,122,0); }
}
.balance-pulse { animation: balancePulse 1.1s ease-out; }
#schedule-card.schedule-on { border-color: rgba(0,200,255,.4); }
.bp-stat { background: var(--bg-field); border: 1px solid var(--border-soft); border-radius: 9px; }
.bp-badge-v10 { background: rgba(156,67,255,.12); border: 1px solid var(--purple); color: var(--purple); }
#filter-stats-card .fs-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#filter-stats-card .fs-num { font-size: 1.05rem; font-weight: 800; }
#filter-stats-card .fs-lbl { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
#fs-funnel-track { background: var(--bg-field); border: 1px solid var(--border-dark); border-radius: 999px; height: 10px; overflow: hidden; }
#fs-funnel-bar { background: linear-gradient(90deg, var(--green-dark), var(--green-bright)); height: 100%; width: 0%; transition: width .35s ease; }
#fs-last-v10 { color: var(--text-2); font-family: var(--font-log); font-size: 10px; }
#candles-card canvas { width: 100%; height: 220px; display: block; border-radius: 9px; border: 1px solid var(--border-dark); background: var(--bg-log); }

/* ============================================================================
 * v12 — Cards colapsáveis (minimizar / expandir todas as janelas e menus)
 * ============================================================================
 * Aplicado a todo <article> dentro do #app-main (Painel, Config, Conexão,
 * Forex, Bot Deriv, Assistente). Cada card recebe um header clicável e um
 * botão de colapsar. Estado é persistido em localStorage por card.
 */
.bp-collapsible { position: relative; transition: box-shadow .2s ease; }
.bp-collapsible > .bp-collapse-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: -4px -4px 8px -4px; padding: 6px 8px;
  border-radius: 10px; cursor: pointer; user-select: none;
  transition: background .15s ease;
}
.bp-collapsible > .bp-collapse-header:hover { background: rgba(0,232,122,.06); }
.bp-collapse-header .bp-collapse-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 700; color: var(--text);
  font-size: 0.92rem; display: flex; align-items: center; gap: 8px;
}
.bp-collapse-header .bp-collapse-title i { color: var(--green); }
.bp-collapse-header .bp-collapse-btn {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-field);
  border: 1px solid var(--border-dark); color: var(--text-muted);
  transition: all .15s ease; cursor: pointer;
}
.bp-collapse-header .bp-collapse-btn:hover {
  color: var(--green); border-color: var(--green-dark);
  background: var(--green-tint);
}
.bp-collapse-header .bp-collapse-btn i { transition: transform .25s ease; }
.bp-collapsible.bp-collapsed > .bp-collapse-header .bp-collapse-btn i {
  transform: rotate(-90deg);
}
.bp-collapsible.bp-collapsed > .bp-collapse-header { margin-bottom: 0; }
.bp-collapsible > .bp-collapse-body {
  overflow: hidden;
  transition: max-height .28s ease, opacity .2s ease, margin .2s ease;
}
.bp-collapsible.bp-collapsed > .bp-collapse-body {
  max-height: 0 !important; opacity: 0; margin: 0; pointer-events: none;
}

/* Barra flutuante com botões "Recolher tudo / Expandir tudo" no topo de cada aba */
.bp-collapse-toolbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; margin: -4px 0 4px 0;
}
.bp-collapse-toolbar button {
  font-size: 11px; padding: 5px 10px; border-radius: 999px;
  background: var(--bg-field); border: 1px solid var(--border-dark);
  color: var(--text-muted); cursor: pointer; transition: all .15s ease;
}
.bp-collapse-toolbar button:hover {
  color: var(--green); border-color: var(--green-dark);
  background: var(--green-tint);
}
.bp-collapse-toolbar button i { margin-right: 4px; }