/* ============================================================================
   app.css — ОБЩАЯ тема + токены + классы кабинета «рейтинг24·Полки»
   Источник темы: бывший inline <style> боевого index.html (вынесен 1:1, без дублей).
   Раздел 5А эталон-ТЗ: токены / .btn .card .chip .badge .tag .mx .plate / статусы / адаптив 820·560·460.
   Раздел 5Б: шелл (header + sidebar-меню + main #hash).
   Раздел 8А: общие состояния (loading / page-loading / empty / no-result / filtered-empty / error / partial).
   ============================================================================ */

/* ---- ТОКЕНЫ (5А) ---- */
:root{
  --bg:#0f1115; --card:#171a21; --mut:#8b93a7; --acc:#6c8cff;
  --ok:#39d98a; --warn:#ffb547; --bad:#ff5d5d; --line:#232838;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#e8ecf4;font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif}

/* ============================================================================
   ШЕЛЛ: header + layout(sidebar + main)   (5Б — один раз, ноль дублей)
   ============================================================================ */
header{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
header .logo{font-weight:700;font-size:18px}
.sub{color:var(--mut);font-size:13px}
header .reg{color:#cdd5e6;font-size:12px;background:#202637;padding:3px 10px;border-radius:20px}
header .live{margin-left:auto;color:var(--ok);font-size:12px}
header .lim{color:#cdd5e6;font-size:12px;background:#202637;padding:3px 10px;border-radius:20px}

/* двухколоночная сетка: левый сайдбар фикс 330px + основная область */
.layout{display:grid;grid-template-columns:330px 1fr;min-height:calc(100vh - 52px)}
.side{border-right:1px solid var(--line);padding:14px;overflow-y:auto;max-height:calc(100vh - 52px)}
.side input,.addrow input{width:100%;background:#0e1117;border:1px solid var(--line);color:#e8ecf4;border-radius:8px;padding:8px 10px}
.side input{margin-bottom:8px}
.main{padding:20px;overflow-x:hidden}

/* ---- меню инструментов в сайдбаре (5Б) ---- */
.navtitle{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin:4px 2px 8px}
.nav{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:#cdd5e6;text-decoration:none;font-size:13px;border:1px solid transparent}
.nav a:hover{background:#1a1f2b}
.nav a.active{background:#1c2433;border-color:var(--acc);color:#fff}
.nav a .ic{width:18px;text-align:center;flex:0 0 auto}
.navsep{height:1px;background:var(--line);margin:4px 0 12px}

/* ============================================================================
   ОБЩИЕ КЛАССЫ (5А) — вынесены 1:1 из боевого index.html
   ============================================================================ */
.flt{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.flt select{width:100%;background:#0e1117;border:1px solid var(--line);color:#e8ecf4;border-radius:8px;padding:7px 9px;font-size:12px}
.flt .row{display:flex;gap:6px;flex-wrap:wrap}

.btn{background:#202637;border:1px solid var(--line);color:#cdd5e6;border-radius:8px;padding:6px 11px;font-size:12px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--acc)}
.btn.active{border-color:var(--acc);color:#fff;background:#28304a}
.btn.alt{background:#243049}
.btn.xbtn{background:#1e3a2a;border-color:#2c5a40;color:#9fe0bb}

.pitem{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.pitem:hover{background:#1a1f2b}
.pitem.sel{background:#1c2433;border-color:var(--acc)}
.pitem img,td img,h2 img,.cmp img{width:40px;height:40px;object-fit:cover;border-radius:6px;background:#222}
td img,.cmp img{width:34px;height:34px}
.pitem .nm{font-size:11px;color:var(--mut)}
.pitem .tt{font-size:12.5px;max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.badge{margin-left:auto;font-weight:700;font-size:12px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.card.hl{border-color:var(--acc)}
.card .k{color:var(--mut);font-size:12px;text-transform:uppercase}
.card .v{font-size:26px;font-weight:700;margin-top:4px}
.card .v small{font-size:12px;color:var(--mut)}

h2{font-size:15px;margin:22px 0 10px;color:#cdd5e6;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
h2 .hint{font-size:11px;color:var(--mut);font-weight:400;text-transform:none}
h2 .sp{margin-left:auto;display:flex;gap:6px}

.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:420px}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line);font-size:13px;white-space:nowrap}
th{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase}
tr:last-child td{border-bottom:none}
tr.clk{cursor:pointer}
tr.clk:hover td{background:#1a1f2b}

/* статусы позиции/тренда (5А: .up .down .good .mid .bad) */
.pos{font-weight:700}
.pos.good{color:var(--ok)}
.pos.mid{color:var(--warn)}
.pos.bad{color:var(--bad)}
.nd{color:var(--mut)}
.up{color:var(--ok)}
.down{color:var(--bad)}
.warn{color:var(--warn)}
.good{color:var(--ok)}
.mid{color:var(--warn)}
.bad{color:var(--bad)}

/* плашка (5А .plate) — также база состояний 8А */
.plate{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--mut)}
.micro{color:var(--mut);font-size:12.5px;margin:-4px 0 10px;line-height:1.5}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 12px}
.chip{background:#202740;border:1px solid #2c3550;color:#cdd5e6;border-radius:14px;padding:4px 10px;font-size:12px;cursor:pointer}
.chip b{color:#7d93ff}
.chip.on,.chip:disabled{opacity:.45;cursor:default}

.ph{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:linear-gradient(135deg,#2a3550,#1d2436);color:#9fb0d4;font-weight:700;vertical-align:middle;flex:0 0 auto;border:1px solid #2b3346;letter-spacing:.5px}
.addrow{display:flex;gap:8px;margin:8px 0}
.addrow input{flex:1}

/* матрица истории: горизонтальный скролл + прилипающая левая шапка (5А .mx) */
.mx{overflow-x:auto;border:1px solid var(--line);border-radius:12px;max-width:100%;margin-bottom:8px}
.mx table{min-width:max-content;border:none;border-radius:0}
.mx th,.mx td{border-right:1px solid var(--line)}
.mx .stick{position:sticky;left:0;background:var(--card);min-width:215px;max-width:215px}
.mx thead th{position:sticky;top:0;background:#1b2030;z-index:1}
.mx thead .stick{z-index:3}
.mx tbody .stick{z-index:2}
.cellpos{text-align:center;font-variant-numeric:tabular-nums}

.cmp{display:flex;gap:8px;align-items:center}
.cmp .tt{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.cmp .nm2{font-size:10.5px;color:var(--mut)}

.tag{font-size:9.5px;padding:1px 5px;border-radius:8px;margin-left:5px;white-space:nowrap}
.tag.mk{background:#1e3a2a;color:#7fe0b0;border:1px solid #2c5a40}
.tag.yo{background:#2a2740;color:#b0a0e0;border:1px solid #403560}

/* ============================================================================
   СОСТОЯНИЯ 8А — рендер-хелперы (loading / page-loading / empty / no-result /
   filtered-empty / error / partial). Базовый вид — .plate, плюс акценты ниже.
   ============================================================================ */
.state{margin:8px 0}
.state-loading{display:flex;align-items:center;justify-content:center;gap:8px}
.state-loading .spin{display:inline-block;animation:st-pulse 1.1s ease-in-out infinite}
@keyframes st-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.state-error{border-color:#5a2c2c;color:#e8b3b3}
.state-error .btn{margin-top:10px}
.state-empty,.state-noresult,.state-filtered{color:var(--mut)}
.state-noresult{line-height:1.6;max-width:560px;margin-left:auto;margin-right:auto}

/* частичная плашка 8А «partial» — баннер над таблицей (границы честности, разд.7) */
.partial{background:#211c14;border:1px solid #4a3b1f;color:#e6c98a;border-radius:10px;padding:9px 13px;font-size:12.5px;margin:0 0 10px;display:flex;gap:8px;align-items:flex-start}
.partial .ic{flex:0 0 auto}

/* скелет строк (page-loading) */
.sk{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.sk .skrow{height:38px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.sk .skrow:last-child{border-bottom:none}
.sk .skrow::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#1d2333 40%,#222a3d 50%,#1d2333 60%,transparent);transform:translateX(-100%);animation:sk-shimmer 1.4s infinite}
@keyframes sk-shimmer{100%{transform:translateX(100%)}}

/* ---- заготовка модуля «инструмент в сборке» (фаза 2 наполнит) ---- */
.wip{background:var(--card);border:1px dashed var(--acc);border-radius:14px;padding:28px 22px;text-align:center;color:#cdd5e6;max-width:620px}
.wip h3{margin:0 0 8px;font-size:16px;color:#e8ecf4}
.wip p{margin:4px 0;color:var(--mut);font-size:13px;line-height:1.6}
.wip .route{display:inline-block;margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#7d93ff;background:#181d2c;border:1px solid #2c3550;border-radius:8px;padding:4px 9px}

/* заголовок инструмента (тулбар над контентом маршрута) */
.toolhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolhead h1{font-size:18px;margin:0}
.toolhead .crumb{color:var(--mut);font-size:12px}

/* ---- canvas-график (8.5) — резерв под фазу 2 ---- */
.chartwrap{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;overflow-x:auto}
.chartwrap canvas{display:block;max-width:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:8px 2px 0;font-size:12px;color:#cdd5e6}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ============================================================================
   АДАПТИВ 820 / 560 / 460 (5А)
   ============================================================================ */
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .side{max-height:none;border-right:none;border-bottom:1px solid var(--line)}
  .cards{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .opt{display:none}
}
@media(max-width:460px){
  .cards{grid-template-columns:1fr}
}