/* trader.css — акцентні стилі KRYTSIA Trader поверх app.css.
   Тема: темний командний центр, акцент — смарагдово-бірюзовий (трейдинг/гроші). */

:root{
  --tr-accent:#2dd4bf;     /* бірюза — основний акцент Trader */
  --tr-accent2:#34d399;    /* смарагд — факт/прибуток */
  --tr-warn:#f59e0b;       /* бурштин — відхилення/ризик */
  --tr-danger:#ef4444;     /* дефіцит/критичне */
  --tr-bg:#0b1422;
  --tr-surface:#0f1a2b;
  --tr-border:rgba(159,179,200,.16);
  --tr-ink:#e6edf6;
  --tr-muted:#9fb3c8;
}

body{ background:var(--tr-bg); color:var(--tr-ink); }

.tr-page{ padding:26px 20px 60px; max-width:1240px; }
.tr-loading{ text-align:center; padding:80px 20px; color:var(--tr-muted); font-size:15px; }

.tr-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.tr-kicker{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--tr-accent); font-weight:700; }
.tr-title{ font-size:27px; font-weight:800; margin:6px 0 4px; line-height:1.15; }
.tr-sub{ font-size:13.5px; color:var(--tr-muted); }

.tr-controls{ display:flex; gap:8px; }
.tr-toggle{ background:var(--tr-surface); border:1px solid var(--tr-border); color:var(--tr-muted);
  padding:8px 16px; border-radius:9px; font-size:13px; cursor:pointer; transition:all .2s; font-family:inherit; }
.tr-toggle.on{ border-color:var(--tr-accent); color:var(--tr-accent); background:rgba(45,212,191,.08); }
.tr-toggle:hover{ border-color:var(--tr-accent); }

.tr-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
@media(max-width:760px){ .tr-kpis{ grid-template-columns:repeat(2,1fr); } }
.tr-kpi{ background:var(--tr-surface); border:1px solid var(--tr-border); border-radius:14px; padding:16px 18px; }
.tr-kpi .v{ font-size:26px; font-weight:800; line-height:1.1; }
.tr-kpi .l{ font-size:12px; color:var(--tr-muted); margin-top:6px; }
.tr-kpi.accent .v{ color:var(--tr-accent); }
.tr-kpi.danger .v{ color:var(--tr-danger); }
.tr-kpi.warn .v{ color:var(--tr-warn); }

.tr-card{ background:var(--tr-surface); border:1px solid var(--tr-border); border-radius:16px;
  padding:18px 20px; margin-bottom:18px; }
.tr-card-h{ font-size:14.5px; font-weight:700; margin-bottom:14px; color:var(--tr-ink); }

.tr-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:880px){ .tr-grid2{ grid-template-columns:1fr; } }

.tr-table-wrap{ overflow-x:auto; }
.tr-table{ width:100%; border-collapse:collapse; font-size:13px; }
.tr-table th{ text-align:right; padding:8px 12px; color:var(--tr-muted); font-weight:600;
  border-bottom:1px solid var(--tr-border); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.tr-table th:first-child, .tr-table td:first-child{ text-align:left; }
.tr-table td{ text-align:right; padding:8px 12px; border-bottom:1px solid rgba(159,179,200,.07); white-space:nowrap; }
.tr-table tbody tr:hover{ background:rgba(45,212,191,.04); }
.tr-row-warn{ background:rgba(245,158,11,.06); }
.tr-pos{ color:var(--tr-danger); }   /* дефіцит (факт>план) — червоний, треба докупити */
.tr-neg{ color:var(--tr-accent2); }  /* профіцит — зелений */

.tr-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; }
.tr-badge.low{ background:rgba(52,211,153,.14); color:#34d399; }
.tr-badge.mid{ background:rgba(245,158,11,.14); color:#fbbf24; }
.tr-badge.high{ background:rgba(249,115,22,.16); color:#fb923c; }
.tr-badge.crit{ background:rgba(239,68,68,.16); color:#f87171; }

.tr-origin{ font-size:11.5px; color:var(--tr-muted); margin-top:18px; padding:10px 14px;
  border:1px dashed var(--tr-border); border-radius:10px; background:rgba(159,179,200,.03); }

/* topbar акценти під Trader */
.topbar .brand .dot{ background:var(--tr-accent); box-shadow:0 0 8px var(--tr-accent); }
.topbar .nav a.active{ color:var(--tr-accent); }