/* /opt/skynet-portal/app/static/css/fin.css */
/* v0.2.2 — возврат fin-компакта поверх .table.rep-table (inspectors v0.2.0): шрифт 0.76, паддинги 5/7 и 6/9, чекбокс-центр */
/* 03.08.2026: v0.2.1 компакт-фильтры .fin-filters; тренд .fin-trend без переноса */
/* ===== Предупреждение федерации ===== */
.fin-warn { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); border: var(--border-thin) solid var(--warning-text); background: rgba(234,179,8,0.10); color: var(--warning-text); font-size: var(--fs-sm); }
/* ===== Компакт-фильтры (перебивают .ff-дефолты inspectors.css) ===== */
.fin-filters { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.fin-filters .ff-label { font-size: 0.6rem; }
.fin-filters .ff .input,
.fin-filters .select { height: 33px; min-width: 0; font-size: 0.78rem; }
.fin-filters .select { width: 172px; }
.fin-filters .ff .dp-display { width: 122px; min-width: 122px; }
.fin-filters .ff-btn .btn { height: 33px; padding: 0 var(--sp-4); }
/* ===== KPI (компакт) ===== */
.fin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.fin-kpi { background: var(--bg-surface); border: var(--border-thin) solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--sp-3) var(--sp-4); position: relative; overflow: hidden; }
.fin-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
.fin-kpi-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-1); }
.fin-kpi-value { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1.15; }
.fin-kpi-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.fin-kpi-sub .pos { color: var(--success-text); font-weight: var(--fw-semibold); }
.fin-kpi-sub .neg { color: var(--danger-text); font-weight: var(--fw-semibold); }
.fin-nw { white-space: nowrap; }
.fin-trend { white-space: nowrap; font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.fin-trend.pos { color: var(--success-text); }
.fin-trend.neg { color: var(--danger-text); }
.fin-kpi-sub.pos { color: var(--success-text); }
.fin-kpi-sub.neg { color: var(--danger-text); }
.fin-kpi-dim { color: var(--text-muted); }
@media (max-width: 900px) { .fin-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fin-kpis { grid-template-columns: 1fr; } }
/* ===== Блоки аналитики ===== */
.fin-analytics { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.fin-tops { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (max-width: 1100px) { .fin-analytics, .fin-tops { grid-template-columns: 1fr; } }
.fin-chart-card, .fin-src-card, .fin-top-card { padding: var(--sp-3) var(--sp-4); }
.fin-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.fin-block-title { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
/* ===== Сплайн (эталон _cc_live, 2 оси) ===== */
.fin-legend { display: inline-flex; align-items: center; gap: 12px; font-size: 0.7rem; color: var(--text-secondary); }
.fin-key { display: inline-flex; align-items: center; gap: 5px; }
.fin-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fin-key.amt-k i { background: var(--accent); }
.fin-key.cnt-k i { background: var(--warning-text); }
.fin-svg { width: 100%; height: auto; display: block; }
.fin-grid2 { stroke: var(--border-subtle); stroke-width: 1; }
.fin-yt, .fin-xt { fill: var(--text-muted); font-size: 11px; font-family: var(--font-mono); }
.fin-yt.cnt { fill: var(--warning-text); opacity: 0.8; }
.fin-xt { text-anchor: middle; }
.fin-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.fin-l { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fin-l.amt { stroke: var(--accent); }
.fin-l.cnt { stroke: var(--warning-text); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.8; }
.fin-d { fill: var(--accent); stroke: var(--bg-surface); stroke-width: 1.5; }
.fin-hit { fill: transparent; }
.fin-hit:hover { fill: color-mix(in srgb, var(--accent) 6%, transparent); }
/* ===== Донат + палитра сегментов ===== */
.fin-src-flex { display: flex; align-items: center; gap: var(--sp-4); }
.fin-donut { width: 132px; height: 132px; flex: 0 0 auto; }
.fin-seg { fill: none; stroke-width: 16; }
.fin-seg-0 { stroke: var(--accent); }
.fin-seg-1 { stroke: var(--success-text); }
.fin-seg-2 { stroke: var(--warning-text); }
.fin-seg-3 { stroke: #3b82f6; }
.fin-seg-4 { stroke: #ec4899; }
.fin-seg-5 { stroke: #a855f7; }
.fin-seg-6 { stroke: #14b8a6; }
.fin-seg-7 { stroke: #64748b; }
.fin-seg-c-0 { --seg: var(--accent); }
.fin-seg-c-1 { --seg: var(--success-text); }
.fin-seg-c-2 { --seg: var(--warning-text); }
.fin-seg-c-3 { --seg: #3b82f6; }
.fin-seg-c-4 { --seg: #ec4899; }
.fin-seg-c-5 { --seg: #a855f7; }
.fin-seg-c-6 { --seg: #14b8a6; }
.fin-seg-c-7 { --seg: #64748b; }
.fin-donut-num { fill: var(--text-primary); font-size: 26px; font-weight: 700; font-family: var(--font-mono); }
.fin-donut-lbl { fill: var(--text-muted); font-size: 10px; }
.fin-src-list { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }
.fin-src-row { display: grid; grid-template-columns: 12px 1fr 36px 96px 46px; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); }
.fin-src-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--seg, var(--bg-surface-2)); }
.fin-src-name { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-src-cnt { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); text-align: right; }
.fin-src-amt { text-align: right; }
.fin-src-pct { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-xs); text-align: right; }
.fin-src-bar { grid-column: 2 / -1; height: 4px; border-radius: var(--radius-full); background: var(--bg-surface-2); overflow: hidden; }
.fin-src-bar i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--seg, var(--accent)); }
@media (max-width: 640px) { .fin-src-flex { flex-direction: column; } }
/* ===== TOP-5 с медалями ===== */
.fin-top-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.fin-top-row { display: grid; grid-template-columns: 26px 1fr 36px 100px; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); }
.fin-medal { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); font-family: var(--font-mono); background: var(--bg-surface-2); color: var(--text-secondary); }
.fin-medal.m1 { background: rgba(232,185,74,0.18); color: #e8b94a; box-shadow: inset 0 0 0 1px rgba(232,185,74,0.5); }
.fin-medal.m2 { background: rgba(154,164,178,0.16); color: #b8c0cc; box-shadow: inset 0 0 0 1px rgba(154,164,178,0.5); }
.fin-medal.m3 { background: rgba(176,113,60,0.18); color: #d08a52; box-shadow: inset 0 0 0 1px rgba(176,113,60,0.5); }
.fin-top-name { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-top-cnt { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); text-align: right; }
.fin-top-amt { text-align: right; }
.fin-top-bar { grid-column: 2 / -1; height: 3px; border-radius: var(--radius-full); background: var(--bg-surface-2); overflow: hidden; }
.fin-top-bar i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--accent); opacity: 0.7; }
/* ===== Шапка таблицы: счётчики + легенда F2 ===== */
.fin-tbl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-thin) solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-secondary); }
.fin-tbl-meta b { color: var(--text-primary); font-family: var(--font-mono); }
.fin-tbl-legend { font-size: var(--fs-xs); color: var(--text-muted); }
/* ===== Таблица ===== */
.fin-table { font-size: 0.76rem; }
.fin-table th, .fin-table td { padding: 5px 7px; }
.fin-table th.fin-col-chk, .fin-table td.fin-col-chk { width: 38px; text-align: center; }
.fin-table th.fin-col-amt { width: 104px; }
/* Возврат компакта поверх .table.rep-table (inspectors.css v0.2.0):
   специфичность равная 0-2-2, fin.css грузится позже — побеждает порядком */
.table.fin-table { font-size: 0.76rem; }
.table.fin-table thead th { padding: 6px 9px; font-size: 0.64rem; letter-spacing: 0; }
.table.fin-table tbody td { padding: 5px 7px; }
.table.fin-table thead th:first-child,
.table.fin-table tbody td:first-child,
.table.fin-table tfoot td:first-child { padding-left: 7px; }
.table.fin-table th.fin-col-chk,
.table.fin-table td.fin-col-chk { text-align: center; }
.fin-cust { color: var(--accent); font-weight: var(--fw-semibold); white-space: nowrap; }
a.fin-cust:hover { text-decoration: underline; }
.fin-srv-tag { font-size: 0.6rem; font-weight: var(--fw-bold); color: #3b82f6; background: rgba(59,130,246,0.12); border-radius: var(--radius-sm); padding: 1px 4px; vertical-align: middle; }
.fin-pid { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; }
.fin-addr { max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-src-badge { font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: var(--radius-sm); background: var(--bg-surface-2); color: var(--text-secondary); white-space: nowrap; }
.fin-info { max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
/* ===== Премиум-чекбокс ===== */
.fin-chk { display: inline-flex; cursor: pointer; }
.fin-chk input { display: none; }
.fin-chk i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--bg-input); display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-fast); position: relative; }
.fin-chk:hover i { border-color: var(--accent); }
.fin-chk i::after { content: ""; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); margin-top: -2px; opacity: 0; transition: opacity var(--transition-fast); }
.fin-chk input:checked + i { background: var(--success-text); border-color: var(--success-text); }
.fin-chk input:checked + i::after { opacity: 1; }
.fin-chk input:disabled + i { cursor: default; opacity: 0.85; }
.fin-chk:has(input:disabled) { cursor: default; }