/* ============================================================
   BORSA — light design system
   Bootstrap 5.3 tokens are overridden here; components below.
   ============================================================ */

:root {
  --b-bg:        #f4f6fb;
  --b-surface:   #ffffff;
  --b-surface-2: #fafbfd;
  --b-line:      #e6e9f0;
  --b-line-soft: #eef1f6;
  --b-ink:       #0f172a;
  --b-ink-2:     #475569;
  --b-ink-3:     #8a94a6;

  --b-brand:     #4f46e5;
  --b-brand-2:   #6366f1;
  --b-brand-soft:#eef0ff;
  --b-pos:       #0f9d58;
  --b-pos-soft:  #e7f6ee;
  --b-neg:       #e02424;
  --b-neg-soft:  #fdeaea;
  --b-warn:      #b45309;
  --b-warn-soft: #fff4e5;
  --b-info:      #0369a1;
  --b-info-soft: #e6f3fb;

  --b-radius:    14px;
  --b-radius-sm: 10px;
  --b-shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --b-shadow-lg: 0 10px 30px rgba(16, 24, 40, .10);
  --b-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --bs-body-bg: var(--b-bg);
  --bs-body-color: var(--b-ink);
  --bs-border-color: var(--b-line);
  --bs-secondary-color: var(--b-ink-2);
  --bs-primary: var(--b-brand);
  --bs-link-color: var(--b-brand);
  --bs-link-hover-color: #4338ca;
  --bs-border-radius: var(--b-radius-sm);
}

html, body { background: var(--b-bg); color: var(--b-ink); }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "tnum";
  -webkit-font-smoothing: antialiased;
}
.text-secondary { color: var(--b-ink-2) !important; }
.small, small { font-size: .8125rem; }

/* ── navbar ─────────────────────────────────────────────── */
.navbar {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--b-line);
  padding-block: .55rem;
}
.navbar-brand {
  font-weight: 800; letter-spacing: -.02em; color: var(--b-ink) !important;
  display: inline-flex; align-items: center; gap: .5rem;
}
.brand-dot {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--b-brand), #8b5cf6); color: #fff; font-size: .95rem;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .35);
}
.navbar .nav-link {
  color: var(--b-ink-2); font-weight: 600; font-size: .9rem;
  padding: .35rem .8rem !important; border-radius: 8px; margin-right: .15rem;
}
.navbar .nav-link:hover { color: var(--b-ink); background: var(--b-line-soft); }
.navbar .nav-link.active { color: var(--b-brand) !important; background: var(--b-brand-soft); }

/* ── cards ──────────────────────────────────────────────── */
.card {
  background: var(--b-surface);
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius);
  box-shadow: var(--b-shadow);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--b-line-soft);
  padding: .8rem 1rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--b-ink-2);
}
.card-header .fw-semibold { font-weight: 700 !important; }
.card-footer { background: var(--b-surface-2); border-top: 1px solid var(--b-line-soft); font-size: .8rem; }
.card-body { padding: 1rem; }

/* ── KPI tiles ──────────────────────────────────────────── */
.kpi { position: relative; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.kpi:hover { box-shadow: var(--b-shadow-lg); transform: translateY(-1px); }
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--b-brand), #8b5cf6);
  opacity: .85;
}
.kpi.kpi-pos::before { background: linear-gradient(90deg, var(--b-pos), #34d399); }
.kpi.kpi-neg::before { background: linear-gradient(90deg, var(--b-neg), #f87171); }
.kpi .card-body { padding: .85rem 1rem .8rem; }
.kpi .kpi-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--b-ink-3); margin-bottom: .3rem;
}
.kpi .kpi-value {
  font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--b-ink);
}
.kpi .kpi-sub { min-height: 1.05rem; font-size: .75rem; color: var(--b-ink-3); margin-top: .15rem; }
.flash { animation: flash .6s ease; }
@keyframes flash { 0% { background: var(--b-brand-soft); } 100% { background: transparent; } }

/* ── numbers ────────────────────────────────────────────── */
.text-pos { color: var(--b-pos) !important; }
.text-neg { color: var(--b-neg) !important; }
.num { font-variant-numeric: tabular-nums; }

/* ── buttons ────────────────────────────────────────────── */
.btn { font-weight: 600; border-radius: 9px; }
.btn-sm { padding: .35rem .75rem; font-size: .82rem; }
.btn-primary { background: var(--b-brand); border-color: var(--b-brand); }
.btn-primary:hover { background: #4338ca; border-color: #4338ca; }
.btn-success { background: var(--b-pos); border-color: var(--b-pos); }
.btn-danger { background: var(--b-neg); border-color: var(--b-neg); }
.btn-outline-secondary { color: var(--b-ink-2); border-color: var(--b-line); background: var(--b-surface); }
.btn-outline-secondary:hover { background: var(--b-line-soft); color: var(--b-ink); border-color: var(--b-line); }
.btn-ghost { background: var(--b-surface); border: 1px solid var(--b-line); color: var(--b-ink-2); }
.btn-ghost:hover { background: var(--b-line-soft); color: var(--b-ink); }
.btn:disabled { opacity: .45; }
.btn-live { background: var(--b-warn-soft); border: 1px solid #f2c98a; color: var(--b-warn); }
.btn-live:not(:disabled):hover { background: #fde9c8; color: #92400e; }

/* ── badges ─────────────────────────────────────────────── */
.badge { font-weight: 700; letter-spacing: .02em; border-radius: 7px; padding: .35em .6em; font-size: .72rem; }
.badge-soft { background: var(--b-line-soft); color: var(--b-ink-2); }
.badge-pos  { background: var(--b-pos-soft);  color: var(--b-pos); }
.badge-neg  { background: var(--b-neg-soft);  color: var(--b-neg); }
.badge-warn { background: var(--b-warn-soft); color: var(--b-warn); }
.badge-info { background: var(--b-info-soft); color: var(--b-info); }
.badge-brand{ background: var(--b-brand-soft);color: var(--b-brand); }

/* bot state badges (class name comes from the API state string) */
.badge[class*="state-"] { background: var(--b-line-soft); color: var(--b-ink-2); }
.badge.state-SAFE_MODE, .badge.state-API_ERROR { background: var(--b-neg-soft) !important; color: var(--b-neg) !important; }
.badge.state-PAUSED { background: var(--b-line-soft) !important; color: var(--b-ink-2) !important; }
.badge.state-POSITION_OPEN, .badge.state-SIGNAL_DETECTED, .badge.state-ORDER_PENDING { background: var(--b-brand-soft) !important; color: var(--b-brand) !important; }
.badge.state-TARGET_REACHED, .badge.state-PROFIT_PROTECTION { background: var(--b-pos-soft) !important; color: var(--b-pos) !important; }
.badge.state-SCANNING, .badge.state-ANALYZING, .badge.state-NO_TRADE { background: var(--b-info-soft) !important; color: var(--b-info) !important; }
.badge.state-STRATEGY_DEGRADED { background: var(--b-warn-soft) !important; color: var(--b-warn) !important; }

/* ── tables ─────────────────────────────────────────────── */
.table { font-variant-numeric: tabular-nums; margin-bottom: 0; --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-color: var(--b-line-soft); }
.table thead th {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--b-ink-3); background: var(--b-surface-2); border-bottom: 1px solid var(--b-line);
  padding: .55rem .75rem; white-space: nowrap;
}
.table tbody td { padding: .5rem .75rem; font-size: .85rem; vertical-align: middle; color: var(--b-ink); }
.table-hover tbody tr:hover > * { background: var(--b-brand-soft); }
.table-empty td { color: var(--b-ink-3); text-align: center; padding: 1.5rem !important; font-size: .85rem; }

/* ── forms ──────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--b-surface); border-color: var(--b-line); color: var(--b-ink);
  border-radius: 9px; font-size: .875rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--b-brand-2); box-shadow: 0 0 0 3px rgba(99, 102, 241, .14); background: var(--b-surface);
}
.form-label { font-weight: 600; font-size: .82rem; color: var(--b-ink); margin-bottom: .2rem; }
.form-check-input:checked { background-color: var(--b-brand); border-color: var(--b-brand); }
.form-switch .form-check-input { width: 2.4em; height: 1.25em; }

/* setting rows */
.setting { padding: .8rem 0; border-bottom: 1px solid var(--b-line-soft); }
.setting:last-child { border-bottom: 0; }
.setting .s-title { font-weight: 650; font-size: .9rem; color: var(--b-ink); }
.setting .s-key { font-family: var(--b-mono); font-size: .7rem; color: var(--b-ink-3); }
.setting .s-help { font-size: .8rem; color: var(--b-ink-2); margin-top: .15rem; line-height: 1.45; }
.setting .s-unit { font-size: .8rem; color: var(--b-ink-3); }
.group-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--b-brand); margin: 1.25rem 0 .35rem;
}
.group-title:first-child { margin-top: 0; }
.group-title .gi { width: 22px; height: 22px; border-radius: 6px; background: var(--b-brand-soft); display: grid; place-items: center; font-size: .75rem; }

/* ── alerts / notes ─────────────────────────────────────── */
.alert { border-radius: var(--b-radius-sm); border: 1px solid transparent; font-size: .85rem; }
.alert-warning { background: var(--b-warn-soft); border-color: #f5dcb3; color: #8a5200; }
.alert-secondary { background: var(--b-surface-2); border-color: var(--b-line); color: var(--b-ink-2); }
.alert-danger { background: var(--b-neg-soft); border-color: #f6c9c9; color: #a51b1b; }
.alert-info { background: var(--b-info-soft); border-color: #cbe6f5; color: #0b5d86; }
.note {
  background: var(--b-surface-2); border: 1px solid var(--b-line); border-left: 3px solid var(--b-brand);
  border-radius: var(--b-radius-sm); padding: .7rem .85rem; font-size: .82rem; color: var(--b-ink-2);
}

/* ── logs ───────────────────────────────────────────────── */
.log-box {
  max-height: 320px; overflow: auto; font-family: var(--b-mono); font-size: .74rem;
  padding: .6rem .85rem; background: var(--b-surface-2);
}
.log-line { white-space: nowrap; padding: .1rem 0; border-bottom: 1px solid var(--b-line-soft); }
.log-line:last-child { border-bottom: 0; }
.log-line .lv-ERROR { color: var(--b-neg); font-weight: 700; }
.log-line .lv-WARN  { color: var(--b-warn); font-weight: 700; }
.log-line .lv-INFO  { color: var(--b-ink-3); }
.log-line .lv-DEBUG { color: var(--b-ink-3); }

/* ── live indicator ─────────────────────────────────────── */
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--b-pos);
  box-shadow: 0 0 0 0 rgba(15, 157, 88, .6); animation: ping 1.6s infinite;
}
.live-dot.stale { background: var(--b-neg); animation: none; }
.live-dot.idle  { background: var(--b-ink-3); animation: none; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(15, 157, 88, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(15, 157, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 157, 88, 0); }
}
.pulse { animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { opacity: 1 } 50% { opacity: .5 } 100% { opacity: 1 } }

/* ── toasts ─────────────────────────────────────────────── */
.toast { border-radius: var(--b-radius-sm); box-shadow: var(--b-shadow-lg); border: 1px solid var(--b-line); }

/* ── misc ───────────────────────────────────────────────── */
code, .font-monospace { font-family: var(--b-mono); }
code { color: var(--b-brand); background: var(--b-brand-soft); padding: .1rem .3rem; border-radius: 5px; font-size: .82em; }
footer { color: var(--b-ink-3); font-size: .78rem; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #d3d8e2; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #bfc6d4; }
::-webkit-scrollbar-track { background: transparent; }

/* login */
.auth-wrap { width: 100%; max-width: 380px; }
.auth-card { border-radius: 18px; box-shadow: var(--b-shadow-lg); }
.auth-logo {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem;
  background: linear-gradient(135deg, var(--b-brand), #8b5cf6); color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, .32);
}

@media (max-width: 576px) {
  .kpi .kpi-value { font-size: 1.2rem; }
  .card-body { padding: .8rem; }
}