/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scrollbar-gutter:stable резервирует место под верт. скроллбар браузера —
так последняя колонка таблиц не наезжает на скроллбар, и контент не дёргается
при появлении/исчезновении скролла при ре-рендере. */
html{font-size:14px;scrollbar-gutter:stable}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
background:#f1f5f9;color:#1e293b;display:flex;min-height:100vh;overflow-x:hidden}
.sidebar{z-index:100}
.content{position:relative;z-index:10;background:transparent}
/* ===== Sidebar ===== */
.sidebar{width:240px;min-height:100vh;background:#1e293b;color:#cbd5e1;display:flex;flex-direction:column;
position:fixed;left:0;top:0;bottom:0;z-index:100;transition:width .22s ease}
/* Collapse toggle on the right edge of the sidebar (Notion/Gmail-style). */
.sidebar-collapse-btn{position:absolute;top:14px;right:-11px;width:22px;height:22px;
border-radius:50%;border:1px solid #334155;background:#1e293b;color:#94a3b8;
cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
z-index:101;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:background .15s,color .15s}
.sidebar-collapse-btn:hover{background:#334155;color:#e2e8f0}
.sidebar-collapse-btn .icon{font-size:1rem;transition:transform .25s}
body.sidebar-collapsed .sidebar-collapse-btn .icon{transform:rotate(180deg)}
.sidebar-header{padding:20px 16px 12px;border-bottom:1px solid #334155;text-align:center}
.sidebar-header h1{font-size:1.15rem;color:#f8fafc;letter-spacing:.5px}
.sidebar-header small{color:#64748b;font-size:.75rem}
.nav-menu{list-style:none;padding:8px 0;flex:1;overflow-y:auto}
.nav-menu li a{display:flex;align-items:center;gap:10px;padding:11px 20px;color:#94a3b8;
text-decoration:none;font-size:.92rem;transition:background .15s,color .15s;border-left:3px solid transparent}
.nav-menu li a:hover{background:#334155;color:#e2e8f0}
.nav-menu li a.active{background:#334155;color:#f8fafc;border-left-color:#3b82f6}
.nav-menu li a .icon{font-size:1.15rem;width:22px;text-align:center}
/* Sidebar nested groups */
.nav-group{margin-bottom:2px}
.nav-group-toggle{display:flex;align-items:center;gap:10px;padding:10px 20px;color:#94a3b8;cursor:pointer;
font-size:.88rem;font-weight:600;transition:background .15s,color .15s;border-left:3px solid transparent;user-select:none}
.nav-group-toggle:hover{background:#334155;color:#e2e8f0}
.nav-group-toggle .icon{font-size:1.15rem;width:22px;text-align:center}
.nav-group-toggle .nav-caret{margin-left:auto;font-size:.65rem;transition:transform .2s;color:#475569}
.nav-group.open > .nav-group-toggle .nav-caret{transform:rotate(0deg)}
.nav-group:not(.open) > .nav-group-toggle .nav-caret{transform:rotate(-90deg)}
.nav-group-toggle[data-page]{text-decoration:none}
a.nav-group-toggle{text-decoration:none}
a.nav-group-toggle.active{background:#334155;color:#f8fafc;border-left-color:#3b82f6}
.nav-children{list-style:none;padding:0;overflow:hidden;max-height:0;transition:max-height .25s ease-out}
.nav-group.open > .nav-children{max-height:500px;transition:max-height .35s ease-in}
.nav-children li a{padding:8px 20px 8px 52px;font-size:.84rem}
/* ===== Sidebar Preferences (bottom) ===== */
.sidebar-prefs{margin-top:auto;border-top:1px solid #334155;padding:10px 12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sp-version{flex-basis:100%;text-align:center;font-size:.65rem;color:#64748b;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.5px;padding:6px 0 0;border-top:1px dashed #334155;margin-top:4px;cursor:help;user-select:all}
.sp-version:hover{color:#94a3b8}
body.sidebar-collapsed .sp-version{font-size:.55rem;letter-spacing:0;padding:4px 0 0}
.sp-btn{display:flex;align-items:center;gap:5px;padding:6px 10px;border:none;border-radius:6px;
background:rgba(255,255,255,.06);color:#94a3b8;font-size:.78rem;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.sp-btn:hover{background:rgba(255,255,255,.12);color:#e2e8f0}
.sp-btn .icon{font-size:1rem;width:18px;text-align:center}
.sp-lang{position:relative}
.sp-lang .lang-dropdown{bottom:calc(100% + 6px);top:auto;right:auto;left:0}
/* ===== System Status Badge (bottom-left, всегда виден) ===== */
.sys-status{flex-basis:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;
border-radius:6px;font-size:.72rem;font-weight:600;line-height:1.3;
border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;
cursor:help}
.sys-status .sys-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;
background:currentColor;box-shadow:0 0 0 2px rgba(255,255,255,.06)}
.sys-status .sys-msg{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sys-status-idle{background:rgba(34,197,94,.08);color:#86efac;border-color:rgba(34,197,94,.25)}
.sys-status-warming{background:rgba(245,158,11,.10);color:#fbbf24;border-color:rgba(245,158,11,.35)}
.sys-status-warming .sys-dot{animation:sysPulse 1.2s ease-in-out infinite}
.sys-status-busy{background:rgba(56,189,248,.10);color:#7dd3fc;border-color:rgba(56,189,248,.35)}
.sys-status-busy .sys-dot{animation:sysPulse 1.2s ease-in-out infinite}
.sys-status-down{background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.45)}
@keyframes sysPulse{0%,100%{opacity:1}50%{opacity:.35}}
body.sidebar-collapsed .sys-status .sys-msg{display:none}
body.sidebar-collapsed .sys-status{justify-content:center;padding:6px 4px}
/* Faded/disabled state for refresh buttons during busy phase */
.sp-refresh-blocked,.btn-refresh-blocked{opacity:.5;cursor:not-allowed!important;pointer-events:auto!important}
/* ===== Content Area ===== */
.content{margin-left:240px;flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .22s ease}
/* ===== Sidebar collapsed state (toggled via #btnSidebarCollapse) =====
Mirrors the existing max-width:900px responsive shrink: 56px rail with
icons only, hidden labels, hidden nav-children. The toggle persists via
localStorage('sidebarCollapsed'). */
body.sidebar-collapsed .sidebar{width:56px}
body.sidebar-collapsed .content{margin-left:56px}
body.sidebar-collapsed .sidebar-header h1,
body.sidebar-collapsed .sidebar-header small{display:none}
body.sidebar-collapsed .sidebar-header{padding:14px 4px 10px}
body.sidebar-collapsed .nav-menu li a > span:not(.icon),
body.sidebar-collapsed .nav-group-toggle > span:not(.icon){display:none}
body.sidebar-collapsed .nav-menu li a,
body.sidebar-collapsed .nav-group-toggle{justify-content:center;padding:12px 0;border-left-width:2px}
body.sidebar-collapsed .nav-children{display:none}
body.sidebar-collapsed .sidebar-prefs{flex-direction:column;align-items:stretch;gap:4px;padding:8px 6px}
body.sidebar-collapsed .sp-btn{justify-content:center;padding:6px 4px}
body.sidebar-collapsed .sp-btn > span:not(.icon){display:none}
body.sidebar-collapsed .sp-lang .lang-dropdown{left:calc(100% + 6px);bottom:0}
/* ===== Top bar ===== */
.top-bar{background:rgba(255,255,255,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
padding:12px 24px;display:flex;align-items:center;gap:16px;
border-bottom:1px solid rgba(226,232,240,0.6);flex-wrap:wrap;position:sticky;top:0;z-index:50}
/* canon 2026-05-06: ранее top-bar прятали на MP-странице (snapshot воркера).
Теперь /api/material_prices/list поддерживает period_from/period_to →
live-overlay top_products[].sales_qty/revenue. Picker нужен. Убрали правило. */
/* ===== Search input with custom ✕ clear button =====
The native ::-webkit-search-cancel-button only renders while the field is
focused. Wrapping the input in `.search-with-clear` plus our own button
gives a persistent ✕ as long as the field has any text. JS attaches the
wrapper at boot (see app.js — attachSearchClears). */
.search-with-clear{position:relative;display:inline-flex;align-items:center}
.search-with-clear > .pp-search{width:100%;padding-right:30px}
.search-clear-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);
background:transparent;border:0;color:#94a3b8;cursor:pointer;
width:22px;height:22px;border-radius:50%;padding:0;line-height:1;
font-size:18px;font-weight:400;
display:flex;align-items:center;justify-content:center}
.search-clear-btn:hover{background:rgba(148,163,184,.15);color:#e2e8f0}
.top-bar label{font-size:.82rem;color:#64748b;display:flex;align-items:center;gap:4px}
.top-bar input[type=date]{padding:5px 8px;border:1px solid #cbd5e1;border-radius:6px;font-size:.85rem}
.btn{padding:7px 16px;border:none;border-radius:6px;font-size:.85rem;cursor:pointer;font-weight:500;
display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover{background:#2563eb}
.btn-outline{background:#fff;color:#475569;border:1px solid #cbd5e1}.btn-outline:hover{background:#f1f5f9}
.status-text{margin-left:auto;font-size:.78rem;color:#94a3b8}
/* ===== Page Containers ===== */
.page{display:none;padding:24px;flex:1}
.page.active{display:block}
/* ===== KPI Cards ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.kpi-card{background:rgba(255,255,255,0.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-radius:8px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.06);
border-left:none;border-top:3px solid #cbd5e1;position:relative;transition:transform .15s,box-shadow .15s}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.kpi-card h3{font-size:.62rem;text-transform:uppercase;letter-spacing:.6px;color:#64748b;margin-bottom:2px}
.kpi-card .kpi-value{font-size:1.05rem;font-weight:700;color:#1e293b}
.kpi-card .kpi-sub{font-size:.62rem;color:#94a3b8;margin-top:1px}
.kpi-purchase{border-top-color:#3b82f6} .kpi-purchase .kpi-value{color:#3b82f6}
.kpi-sales{border-top-color:#10b981} .kpi-sales .kpi-value{color:#10b981}
.kpi-revenue{border-top-color:#f59e0b} .kpi-revenue .kpi-value{color:#f59e0b}
.kpi-expenses{border-top-color:#ef4444} .kpi-expenses .kpi-value{color:#ef4444}
.kpi-profit{border-top-color:#8b5cf6} .kpi-profit .kpi-value{color:#8b5cf6}
.kpi-cost{border-top-color:#f97316} .kpi-cost .kpi-value{color:#f97316}
/* ===== KPI Sparklines & Badges ===== */
.kpi-spark{position:relative;height:40px;margin:4px -4px 2px}
.kpi-spark canvas{display:block;width:100%!important;height:40px!important}
.kpi-bottom{display:flex;align-items:center;gap:6px}
.kpi-badge{font-size:.58rem;font-weight:600;padding:1px 6px;border-radius:10px;white-space:nowrap;line-height:1.4}
.badge-up{background:#dcfce7;color:#16a34a}
.badge-down{background:#fef2f2;color:#ef4444}
/* ===== Breakdown / Progress Bars ===== */
.breakdown-list{padding:6px 0}
.breakdown-item{margin-bottom:14px}
.breakdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.breakdown-name{font-size:.78rem;font-weight:500;color:#1e293b;display:flex;align-items:center;gap:6px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.breakdown-name .bdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.breakdown-meta{font-size:.68rem;color:#94a3b8;display:flex;align-items:center;gap:8px;flex-shrink:0}
.breakdown-bar{height:6px;border-radius:3px;background:#e2e8f0;overflow:hidden;margin-top:3px}
.breakdown-fill{height:100%;border-radius:3px;transition:width .8s ease-out}
/* ===== Period Display (inline badge) ===== */
.period-display{font-size:.82rem;color:#64748b;background:rgba(255,255,255,0.75);border:1px solid rgba(226,232,240,0.6);
border-radius:8px;padding:6px 14px;font-weight:500;white-space:nowrap}
.period-display .period-dates{color:#1e293b;font-weight:700}
.period-display .period-days{color:#94a3b8;font-weight:400;margin-left:8px}
/* ===== Unified Range Picker ===== */
.range-picker-wrap{position:relative}
.range-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid #cbd5e1;border-radius:8px;
background:rgba(255,255,255,.85);backdrop-filter:blur(6px);cursor:pointer;font-size:.82rem;font-weight:500;
color:#1e293b;transition:all .15s;white-space:nowrap}
.range-btn:hover{background:#f1f5f9;border-color:#93c5fd}
.range-btn.open{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f622}
.range-icon{font-size:1rem;line-height:1}
.range-label{font-weight:600;color:#1e293b}
.range-days{font-size:.72rem;color:#94a3b8;margin-left:2px}
.range-caret{font-size:.65rem;color:#94a3b8;margin-left:2px;transition:transform .2s}
.range-btn.open .range-caret{transform:rotate(180deg)}
/* Dropdown panel */
.range-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:200;
background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.15);
overflow:hidden;animation:rangeIn .18s ease-out}
.range-dropdown.show{display:block}
@keyframes rangeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.range-dd-grid{display:flex}
/* Presets column */
.range-presets{width:160px;padding:10px 6px;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;gap:2px;
max-height:360px;overflow-y:auto}
.range-presets-title{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;padding:4px 8px;margin-bottom:2px}
.rp-btn{text-align:left;padding:5px 10px;border:none;background:none;border-radius:6px;font-size:.78rem;cursor:pointer;
color:#475569;transition:all .12s;white-space:nowrap}
.rp-btn:hover{background:#f1f5f9;color:#1e293b}
.rp-btn.active{background:#3b82f6;color:#fff}
/* canon 2026-05-06: цветные группы пресетов period picker'а — */
/* короткие slate, месяцы индиго, кварталы янтарь, длинные зелёные. */
.rp-group{display:flex;flex-direction:column;gap:2px}
.rp-group-short{color:#64748b}
.rp-group-short:hover{background:rgba(100,116,139,.18);color:#cbd5e1}
.rp-group-short.active{background:#475569;color:#fff}
.rp-group-months{color:#3b82f6;text-align:center;font-weight:600}
.rp-group-months:hover{background:rgba(59,130,246,.18);color:#60a5fa}
.rp-group-months.active{background:#3b82f6;color:#fff}
.rp-group-quarters{color:#f59e0b;text-align:center;font-weight:600}
.rp-group-quarters:hover{background:rgba(245,158,11,.18);color:#fbbf24}
.rp-group-quarters.active{background:#f59e0b;color:#fff}
.rp-group-long{color:#10b981}
.rp-group-long:hover{background:rgba(16,185,129,.18);color:#34d399}
.rp-group-long.active{background:#10b981;color:#fff}
/* Dual calendar area */
.range-calendars{padding:10px 14px 10px 10px;display:flex;flex-direction:column}
.range-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.rcn-btn{width:28px;height:28px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;
font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;color:#475569;transition:all .12s}
.rcn-btn:hover{background:#f1f5f9;border-color:#93c5fd}
.rcn-title{flex:1;text-align:center;font-size:.82rem;font-weight:600;color:#1e293b}
.range-cal-pair{display:flex;gap:16px}
.range-cal{width:252px}
.range-cal table{width:100%;border-collapse:collapse;table-layout:fixed}
.range-cal th{font-size:.62rem;text-transform:uppercase;color:#94a3b8;padding:2px 0;text-align:center;font-weight:500}
.range-cal td{text-align:center;padding:0}
.range-cal .rc-day{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;
border-radius:6px;font-size:.78rem;color:#475569;cursor:pointer;transition:all .1s;border:none;background:none}
.range-cal .rc-day:hover{background:#e0f2fe;color:#0369a1}
.range-cal .rc-day.other{color:#cbd5e1}
.range-cal .rc-day.today{font-weight:700;box-shadow:inset 0 0 0 1px #3b82f6}
.range-cal .rc-day.sel-start,.range-cal .rc-day.sel-end{background:#3b82f6!important;color:#fff!important;border-radius:6px}
.range-cal .rc-day.in-range{background:#dbeafe;color:#1e40af;border-radius:0}
.range-cal .rc-day.sel-start{border-radius:6px 0 0 6px}
.range-cal .rc-day.sel-end{border-radius:0 6px 6px 0}
.range-cal .rc-day.sel-start.sel-end{border-radius:6px}
.range-cal-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid #e2e8f0}
.rcf-label{font-size:.78rem;color:#64748b;font-weight:500}
.btn-sm{padding:5px 14px;font-size:.78rem}
/* ===== Chart Toggles ===== */
.chart-toggles{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;padding:8px 12px;
background:rgba(255,255,255,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(226,232,240,0.6);border-radius:10px}
.chart-toggle{display:flex;align-items:center;gap:3px;font-size:.65rem;color:#64748b;cursor:pointer;
padding:2px 6px;border-radius:4px;transition:all .12s;user-select:none;white-space:nowrap}
.chart-toggle:hover{background:#f1f5f9}
.chart-toggle input{width:12px;height:12px;accent-color:#3b82f6;cursor:pointer}
.chart-toggle.off{opacity:.4}
/* ===== Charts ===== */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.chart-panel{background:rgba(255,255,255,0.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(226,232,240,0.6);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s}
.chart-panel:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.chart-panel h3{font-size:.82rem;color:#475569;margin-bottom:8px}
.chart-panel .chart-subtitle{font-size:.68rem;color:#94a3b8;margin-bottom:8px}
.chart-panel .legend-row{display:flex;gap:14px;font-size:.68rem;color:#94a3b8;margin-bottom:8px;flex-wrap:wrap}
.chart-panel .ldot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;vertical-align:middle}
.chart-panel.wide{grid-column:1/-1}
.chart-panel.hidden{display:none}
.drill-back{display:inline-block;cursor:pointer;color:#3b82f6;font-size:.72rem;font-weight:600;padding:2px 8px;
margin-right:8px;border:1px solid #3b82f6;border-radius:4px;transition:all .15s;vertical-align:middle}
.drill-back:hover{background:#3b82f6;color:#fff}
.chart-wrap{position:relative;height:280px}
.chart-wrap canvas{display:block}
.pie-wrap{height:260px;display:flex;align-items:center;justify-content:center}
.pie-wrap canvas{max-height:260px}
/* ===== Tables ===== */
.data-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,0.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.data-table thead{background:rgba(248,250,252,0.85)}
.data-table th{padding:10px 14px;font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;
color:#64748b;text-align:left;font-weight:600;border-bottom:2px solid #e2e8f0;white-space:nowrap}
.data-table td{padding:10px 14px;font-size:.88rem;border-bottom:1px solid #f1f5f9}
.data-table tbody tr:hover{background:#f8fafc}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table .expand-btn{cursor:pointer;color:#3b82f6;font-weight:700;user-select:none;width:24px;text-align:center}
.sub-row{background:#f8fafc!important}
.sub-row td{padding-left:44px;font-size:.82rem;color:#475569}
/* ===== Search Box ===== */
.search-box{padding:8px 14px;border:1px solid #cbd5e1;border-radius:8px;font-size:.88rem;width:300px;
margin-bottom:16px;transition:border-color .15s}
.search-box:focus{outline:none;border-color:#3b82f6}
/* ===== Page heading ===== */
.page-heading{font-size:1.15rem;font-weight:600;margin-bottom:16px;color:#1e293b;display:flex;align-items:center;gap:10px}
/* ===== Spinner ===== */
.spinner{display:inline-block;width:20px;height:20px;border:2.5px solid #e2e8f0;border-top-color:#3b82f6;
border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ===== Settings ===== */
.settings-group{background:rgba(255,255,255,0.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06);max-width:600px;margin-bottom:16px}
.settings-group h3{font-size:.95rem;margin-bottom:12px;color:#1e293b}
.settings-group label{display:block;font-size:.82rem;color:#64748b;margin-bottom:4px}
.settings-group input[type=text]{width:100%;padding:8px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:.88rem;margin-bottom:12px}
.settings-group .hint{font-size:.75rem;color:#94a3b8;margin-bottom:12px}
/* ===== Toast ===== */
.toast{position:fixed;bottom:24px;right:24px;background:#1e293b;color:#f8fafc;padding:12px 24px;
border-radius:8px;font-size:.88rem;opacity:0;transition:opacity .3s;pointer-events:none;z-index:9999}
.toast.show{opacity:1}
/* ===== Responsive ===== */
@media(max-width:900px){
.sidebar{width:56px}.sidebar-header h1,.sidebar-header small,.nav-menu li a span{display:none}
.nav-menu li a{justify-content:center;padding:14px 0}.content{margin-left:56px}
.charts-grid{grid-template-columns:1fr}
}
/* ===== Dark Theme ===== */
body.dark{background:#0f172a;color:#e2e8f0}
body.dark .sidebar{background:#020617}
body.dark .sidebar-header{border-bottom-color:#1e293b}
body.dark .sidebar-header small{color:#475569}
body.dark .nav-menu li a{color:#64748b}
body.dark .nav-menu li a:hover{background:#1e293b;color:#cbd5e1}
body.dark .nav-menu li a.active{background:#1e293b;color:#f8fafc;border-left-color:#3b82f6}
body.dark .top-bar{background:rgba(30,41,59,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:rgba(51,65,85,0.6)}
body.dark .top-bar label{color:#94a3b8}
body.dark .top-bar input[type=date]{background:#0f172a;color:#e2e8f0;border-color:#475569}
body.dark .btn-outline{background:#1e293b;color:#cbd5e1;border-color:#475569}
body.dark .btn-outline:hover{background:#334155}
body.dark .kpi-card{background:rgba(30,41,59,0.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 3px rgba(0,0,0,.3);border-top-color:#475569}
body.dark .kpi-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.5)}
body.dark .kpi-card h3{color:#94a3b8}
body.dark .kpi-card .kpi-value{color:#f8fafc}
body.dark .kpi-card .kpi-sub{color:#64748b}
body.dark .kpi-purchase{border-top-color:#60a5fa} body.dark .kpi-purchase .kpi-value{color:#60a5fa}
body.dark .kpi-sales{border-top-color:#34d399} body.dark .kpi-sales .kpi-value{color:#34d399}
body.dark .kpi-revenue{border-top-color:#fbbf24} body.dark .kpi-revenue .kpi-value{color:#fbbf24}
body.dark .kpi-expenses{border-top-color:#f87171} body.dark .kpi-expenses .kpi-value{color:#f87171}
body.dark .kpi-profit{border-top-color:#a78bfa} body.dark .kpi-profit .kpi-value{color:#a78bfa}
body.dark .kpi-cost{border-top-color:#fb923c} body.dark .kpi-cost .kpi-value{color:#fb923c}
body.dark .badge-up{background:#064e3b;color:#34d399}
body.dark .badge-down{background:#450a0a;color:#f87171}
body.dark .breakdown-name{color:#e2e8f0}
body.dark .breakdown-meta{color:#64748b}
body.dark .breakdown-bar{background:#334155}
body.dark .period-display{background:rgba(30,41,59,0.75);border-color:rgba(51,65,85,0.6);color:#94a3b8}
body.dark .period-display .period-dates{color:#f8fafc}
body.dark .period-display .period-days{color:#64748b}
/* Dark mode: range picker */
body.dark .range-btn{background:rgba(30,41,59,.85);color:#e2e8f0;border-color:#475569}
body.dark .range-btn:hover{background:#334155;border-color:#60a5fa}
body.dark .range-btn.open{border-color:#3b82f6}
body.dark .range-label{color:#f8fafc}
body.dark .range-days{color:#64748b}
body.dark .range-caret{color:#64748b}
body.dark .range-dropdown{background:rgba(15,23,42,.97);border-color:#334155;box-shadow:0 12px 40px rgba(0,0,0,.5)}
body.dark .range-presets{border-right-color:#334155}
body.dark .range-presets-title{color:#64748b}
body.dark .rp-btn{color:#94a3b8}
body.dark .rp-btn:hover{background:#1e293b;color:#e2e8f0}
body.dark .rp-btn.active{background:#3b82f6;color:#fff}
/* dark-mode varianty цветных групп */
body.dark .rp-group-short{color:#94a3b8}
body.dark .rp-group-short:hover{background:rgba(100,116,139,.22);color:#e2e8f0}
body.dark .rp-group-short.active{background:#475569;color:#f1f5f9}
body.dark .rp-group-months{color:#60a5fa}
body.dark .rp-group-months:hover{background:rgba(59,130,246,.25);color:#bfdbfe}
body.dark .rp-group-months.active{background:#3b82f6;color:#fff}
body.dark .rp-group-quarters{color:#fbbf24}
body.dark .rp-group-quarters:hover{background:rgba(245,158,11,.25);color:#fde68a}
body.dark .rp-group-quarters.active{background:#f59e0b;color:#fff}
body.dark .rp-group-long{color:#34d399}
body.dark .rp-group-long:hover{background:rgba(16,185,129,.25);color:#a7f3d0}
body.dark .rp-group-long.active{background:#10b981;color:#fff}
body.dark .rcn-btn{background:#1e293b;color:#94a3b8;border-color:#334155}
body.dark .rcn-btn:hover{background:#334155;color:#e2e8f0;border-color:#60a5fa}
body.dark .rcn-title{color:#f8fafc}
body.dark .range-cal th{color:#64748b}
body.dark .range-cal .rc-day{color:#94a3b8}
body.dark .range-cal .rc-day:hover{background:#1e3a5f;color:#93c5fd}
body.dark .range-cal .rc-day.other{color:#334155}
body.dark .range-cal .rc-day.today{box-shadow:inset 0 0 0 1px #60a5fa}
body.dark .range-cal .rc-day.in-range{background:#1e3a5f;color:#93c5fd}
body.dark .range-cal .rc-day.sel-start,.range-cal .rc-day.sel-end{background:#3b82f6!important;color:#fff!important}
body.dark .range-cal-footer{border-top-color:#334155}
body.dark .rcf-label{color:#94a3b8}
body.dark .chart-toggles{background:rgba(30,41,59,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-color:rgba(51,65,85,0.6)}
body.dark .chart-toggle{color:#94a3b8}
body.dark .chart-toggle:hover{background:#334155}
body.dark .chart-panel{background:rgba(30,41,59,0.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(51,65,85,0.6);box-shadow:0 1px 3px rgba(0,0,0,.3)}
body.dark .chart-panel:hover{box-shadow:0 4px 16px rgba(0,0,0,.5)}
body.dark .chart-panel h3{color:#e2e8f0}
body.dark .drill-back{color:#60a5fa;border-color:#60a5fa}
body.dark .drill-back:hover{background:#60a5fa;color:#0f172a}
body.dark .chart-panel .chart-subtitle,body.dark .chart-panel .legend-row{color:#64748b}
body.dark .data-table{background:rgba(30,41,59,0.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 3px rgba(0,0,0,.3)}
body.dark .data-table thead{background:rgba(15,23,42,0.85)}
body.dark .data-table th{color:#94a3b8;border-bottom-color:#334155}
body.dark .data-table td{color:#cbd5e1;border-bottom-color:#1e293b}
body.dark .data-table tbody tr:hover{background:#334155}
body.dark .data-table .expand-btn{color:#60a5fa}
body.dark .sub-row{background:#0f172a!important}
body.dark .sub-row td{color:#94a3b8}
body.dark .search-box{background:#0f172a;color:#e2e8f0;border-color:#475569}
body.dark .search-box:focus{border-color:#3b82f6}
body.dark .page-heading{color:#f8fafc}
body.dark .settings-group{background:rgba(30,41,59,0.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 3px rgba(0,0,0,.3)}
body.dark .settings-group h3{color:#f8fafc}
body.dark .settings-group label{color:#94a3b8}
body.dark .settings-group input[type=text]{background:#0f172a;color:#e2e8f0;border-color:#475569}
body.dark .settings-group .hint{color:#64748b}
body.dark .toast{background:#f8fafc;color:#0f172a}
/* ===== AI Chat Page ===== */
.ai-session-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;
padding:8px 14px;background:rgba(255,255,255,0.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(226,232,240,0.5);border-radius:10px;flex-wrap:wrap;max-width:900px}
.ai-cost-display{display:flex;align-items:center;gap:10px;font-size:.75rem;color:#64748b;flex-wrap:wrap}
.ai-cost-label{font-weight:600;color:#475569}
.ai-cost-item{display:flex;align-items:center;gap:3px;white-space:nowrap}
.ai-cost-icon{font-size:.7rem}
.ai-cost-total{font-weight:700;color:#1e293b;padding:2px 8px;background:rgba(59,130,246,0.08);border-radius:4px}
.ai-session-actions{display:flex;gap:6px}
.btn-sm{padding:4px 10px;font-size:.72rem}
.ai-cost-inline{margin-top:8px;padding:6px 10px;background:rgba(59,130,246,0.05);border:1px solid rgba(59,130,246,0.15);
border-radius:6px;font-size:.72rem;color:#64748b;display:inline-flex;align-items:center;gap:6px}
.ai-cost-anthropic{color:#7c3aed;font-weight:500}
.ai-cost-openai{color:#059669;font-weight:500}
.ai-cost-query-total{font-weight:700;color:#1e293b}
.ai-training-badge{margin:8px 0;padding:6px 12px;background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.25);
border-radius:6px;font-size:.78rem;font-weight:600;color:#7c3aed;display:inline-block}
.ai-chat-container{display:flex;flex-direction:column;height:calc(100vh - 180px);max-width:900px}
.ai-chat-messages{flex:1;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:12px}
.ai-msg{display:flex;gap:10px;align-items:flex-start}
.ai-msg-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:1.1rem;flex-shrink:0}
.ai-msg-body{background:rgba(255,255,255,0.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-radius:12px;padding:12px 16px;font-size:.88rem;line-height:1.55;max-width:100%;
box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid rgba(226,232,240,0.5)}
.ai-msg.ai-user .ai-msg-body{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.25)}
.ai-msg.ai-system .ai-msg-body{background:rgba(139,92,246,0.08);border-color:rgba(139,92,246,0.2)}
.ai-msg.ai-error .ai-msg-body{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.25);color:#dc2626}
.ai-msg-body table{width:100%;border-collapse:collapse;margin:10px 0;font-size:.82rem}
.ai-msg-body table th{background:rgba(248,250,252,0.8);padding:6px 10px;text-align:left;border-bottom:2px solid #e2e8f0;
font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:#64748b}
.ai-msg-body table td{padding:6px 10px;border-bottom:1px solid #f1f5f9}
.ai-msg-body table .num{text-align:right;font-variant-numeric:tabular-nums}
.ai-msg-body .ai-chart-wrap{position:relative;height:220px;margin:10px 0}
.ai-msg-body .ai-charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin:12px 0}
.ai-msg-body .ai-chart-card{background:rgba(15,23,42,0.03);border:1px solid rgba(148,163,184,0.15);
border-radius:10px;padding:10px 12px 14px;transition:box-shadow .2s}
.ai-msg-body .ai-chart-card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.08)}
.ai-msg-body .ai-chart-card .ai-chart-wrap{height:200px;margin:0}
.ai-msg-body .ai-chart-title{font-size:.78rem;font-weight:600;color:#475569;margin-bottom:6px;
text-align:center;letter-spacing:.3px}
body.dark .ai-msg-body .ai-chart-card{background:rgba(30,41,59,0.5);border-color:rgba(148,163,184,0.12)}
body.dark .ai-msg-body .ai-chart-title{color:#cbd5e1}
.ai-msg-body .ai-thinking{color:#94a3b8;font-style:italic;display:flex;align-items:center;gap:8px}
.ai-msg-body .ai-thinking .spinner{width:14px;height:14px;border-width:2px}
.ai-msg-body em{color:#64748b}
.ai-msg-body strong{color:#1e293b}
.ai-feedback-btn{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 10px;
border:1px solid #cbd5e1;border-radius:6px;font-size:.72rem;color:#64748b;cursor:pointer;
background:rgba(255,255,255,0.5);transition:all .15s}
.ai-feedback-btn:hover{background:#3b82f6;color:#fff;border-color:#3b82f6}
.ai-chat-input-area{display:flex;gap:8px;padding:12px 0;align-items:flex-end;border-top:1px solid rgba(226,232,240,0.5)}
.ai-input{flex:1;resize:none;padding:10px 14px;border:1px solid #cbd5e1;border-radius:10px;font-size:.92rem;
font-family:inherit;background:rgba(255,255,255,0.82);backdrop-filter:blur(6px);transition:border-color .15s}
.ai-input:focus{outline:none;border-color:#3b82f6}
.ai-send-btn{height:42px;padding:0 20px;font-size:.92rem}
/* Voice recording button */
.ai-voice-btn{height:42px;width:42px;min-width:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
border:2px solid #cbd5e1;background:rgba(255,255,255,0.82);backdrop-filter:blur(6px);cursor:pointer;
color:#64748b;transition:all .2s ease;position:relative;padding:0}
.ai-voice-btn:hover{border-color:#3b82f6;color:#3b82f6;background:rgba(59,130,246,0.06)}
.ai-voice-btn.recording{border-color:#ef4444;color:#fff;background:#ef4444;
animation:voice-pulse 1.5s ease-in-out infinite}
.ai-voice-btn.recording:hover{background:#dc2626;border-color:#dc2626}
.ai-voice-btn .voice-timer{display:none;font-size:.62rem;font-weight:700;position:absolute;bottom:-14px;
left:50%;transform:translateX(-50%);white-space:nowrap;color:#ef4444;
font-family:monospace;letter-spacing:.5px}
.ai-voice-btn.recording .voice-timer{display:block}
.ai-voice-btn.recording .mic-icon{animation:mic-bounce .6s ease-in-out infinite alternate}
.ai-voice-btn.transcribing{border-color:#f59e0b;color:#f59e0b;background:rgba(245,158,11,0.08);
pointer-events:none;animation:none}
.ai-voice-btn.transcribing .voice-timer{display:block;color:#f59e0b}
@keyframes voice-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
@keyframes mic-bounce{0%{transform:scale(1)}100%{transform:scale(1.15)}}
body.dark .ai-voice-btn{border-color:#475569;background:rgba(15,23,42,0.8);color:#94a3b8}
body.dark .ai-voice-btn:hover{border-color:#3b82f6;color:#3b82f6}
body.dark .ai-voice-btn.recording{border-color:#ef4444;color:#fff;background:#ef4444}
/* Chat history */
.ai-history-separator{display:flex;align-items:center;justify-content:center;padding:8px 0;margin:4px 0}
.ai-history-separator span{font-size:.7rem;color:#94a3b8;background:rgba(148,163,184,0.08);padding:3px 14px;
border-radius:12px;border:1px dashed rgba(148,163,184,0.25);letter-spacing:.3px}
.ai-history-msg{opacity:0.75}
.ai-history-msg:hover{opacity:1}
body.dark .ai-history-separator span{color:#64748b;background:rgba(51,65,85,0.3);border-color:rgba(51,65,85,0.5)}
/* AI Logs in Settings */
.ai-logs-container{max-height:500px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:8px;padding:8px;
background:rgba(248,250,252,0.6)}
.ai-log-entry{padding:10px 12px;border-bottom:1px solid #f1f5f9;font-size:.78rem}
.ai-log-entry:last-child{border-bottom:none}
.ai-log-time{color:#94a3b8;font-size:.68rem;margin-bottom:4px;font-family:monospace}
.ai-log-label{display:inline-block;padding:1px 6px;border-radius:4px;font-size:.65rem;font-weight:600;margin-right:6px}
.ai-log-label.query{background:#dbeafe;color:#1d4ed8}
.ai-log-label.model1{background:#ede9fe;color:#7c3aed}
.ai-log-label.model2{background:#fef3c7;color:#b45309}
.ai-log-label.decision{background:#dcfce7;color:#16a34a}
.ai-log-label.error{background:#fef2f2;color:#dc2626}
.ai-log-label.email{background:#fce7f3;color:#be185d}
.ai-log-content{color:#475569;margin-top:4px;white-space:pre-wrap;word-break:break-word;max-height:120px;overflow-y:auto}
/* Dark theme AI */
body.dark .ai-session-bar{background:rgba(30,41,59,0.72);border-color:rgba(51,65,85,0.5)}
body.dark .ai-cost-label{color:#94a3b8}
body.dark .ai-cost-display{color:#94a3b8}
body.dark .ai-cost-total{color:#f8fafc;background:rgba(59,130,246,0.15)}
body.dark .ai-cost-inline{background:rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.2);color:#94a3b8}
body.dark .ai-cost-anthropic{color:#a78bfa}
body.dark .ai-cost-openai{color:#34d399}
body.dark .ai-cost-query-total{color:#f8fafc}
body.dark .ai-training-badge{background:rgba(139,92,246,0.15);border-color:rgba(139,92,246,0.3);color:#a78bfa}
body.dark .ai-msg-body{background:rgba(30,41,59,0.82);border-color:rgba(51,65,85,0.5);color:#e2e8f0}
body.dark .ai-msg-body strong{color:#f8fafc}
body.dark .ai-msg-body em{color:#94a3b8}
body.dark .ai-msg.ai-user .ai-msg-body{background:rgba(59,130,246,0.15);border-color:rgba(59,130,246,0.3)}
body.dark .ai-msg.ai-system .ai-msg-body{background:rgba(139,92,246,0.12);border-color:rgba(139,92,246,0.25)}
body.dark .ai-msg.ai-error .ai-msg-body{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.3);color:#f87171}
body.dark .ai-msg-body table th{background:rgba(15,23,42,0.8);color:#94a3b8;border-bottom-color:#334155}
body.dark .ai-msg-body table td{border-bottom-color:#1e293b;color:#cbd5e1}
body.dark .ai-input{background:rgba(15,23,42,0.8);color:#e2e8f0;border-color:#475569}
body.dark .ai-input:focus{border-color:#3b82f6}
body.dark .ai-chat-input-area{border-top-color:rgba(51,65,85,0.5)}
body.dark .ai-feedback-btn{background:rgba(30,41,59,0.5);border-color:#475569;color:#94a3b8}
body.dark .ai-feedback-btn:hover{background:#3b82f6;color:#fff;border-color:#3b82f6}
body.dark .ai-logs-container{background:rgba(15,23,42,0.6);border-color:#334155}
body.dark .ai-log-entry{border-bottom-color:#1e293b}
body.dark .ai-log-content{color:#94a3b8}
/* ================================================================
PIVOT / CUSTOM REPORT
================================================================ */
.pivot-controls{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
border-radius:14px;
padding:18px 22px;
display:flex;flex-direction:column;gap:12px;
margin-bottom:16px;
backdrop-filter:blur(12px);
}
.pivot-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pivot-section-title{
font-size:.82rem;font-weight:600;color:#94a3b8;
min-width:120px;text-transform:uppercase;letter-spacing:.5px;
}
.pivot-label{font-size:.82rem;font-weight:600;color:#94a3b8;margin-right:6px}
.pivot-select,
.pivot-group-select{
padding:6px 10px;border-radius:8px;font-size:.85rem;
background:rgba(15,23,42,0.55);color:#e2e8f0;
border:1px solid rgba(100,116,139,0.35);
outline:none;cursor:pointer;
min-width:130px;
}
.pivot-select:focus,
.pivot-group-select:focus{border-color:#3b82f6}
.pivot-select option,
.pivot-group-select option{background:#1e293b;color:#e2e8f0}
.pivot-slot{
display:flex;align-items:center;gap:4px;
background:rgba(15,23,42,0.3);
border:1px solid rgba(100,116,139,0.2);
border-radius:10px;padding:3px 6px 3px 3px;
}
.pivot-clear{
background:none;border:none;color:#94a3b8;font-size:1.1rem;
cursor:pointer;line-height:1;padding:2px 4px;border-radius:4px;
}
.pivot-clear:hover{background:rgba(239,68,68,0.18);color:#f87171}
.pivot-control-group{display:flex;align-items:center;gap:6px}
#btnPivotBuild{
padding:8px 22px;border-radius:10px;font-weight:600;font-size:.88rem;
background:linear-gradient(135deg,#3b82f6,#6366f1);
color:#fff;border:none;cursor:pointer;
transition:transform .15s,box-shadow .15s;
margin-left:auto;
}
#btnPivotBuild:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(59,130,246,0.35)}
.pivot-status{color:#f59e0b;font-size:.85rem;min-height:20px}
/* --- pivot table --- */
.pivot-table-wrap{
overflow-x:auto;border-radius:14px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
max-height:72vh;overflow-y:auto;
}
.pivot-table{
width:100%;border-collapse:collapse;font-size:.84rem;
font-variant-numeric:tabular-nums;
}
.pivot-table thead th{
position:sticky;top:0;z-index:2;
background:rgba(15,23,42,0.88);
color:#94a3b8;font-weight:600;text-align:right;
padding:10px 12px;border-bottom:2px solid rgba(100,116,139,0.25);
white-space:nowrap;
}
.pivot-table thead th.pivot-name-col{text-align:left;min-width:260px}
.pivot-table thead th.pivot-total-col{background:rgba(15,23,42,0.92);color:#e2e8f0}
.pivot-table td{
padding:7px 12px;text-align:right;
border-bottom:1px solid rgba(100,116,139,0.1);
color:#cbd5e1;white-space:nowrap;
}
.pivot-table td.pivot-name-col{text-align:left;color:#e2e8f0;font-weight:500}
.pivot-table td.pivot-total-col{font-weight:600;color:#f8fafc;background:rgba(15,23,42,0.18)}
.pivot-row:hover td{background:rgba(59,130,246,0.06)}
/* Hierarchy levels */
.pivot-level-0 td.pivot-name-col{font-weight:700}
.pivot-level-1 td{opacity:.92}
.pivot-level-2 td{opacity:.84}
.pivot-level-3 td{opacity:.78}
.pivot-indent{display:inline-block}
.pivot-toggle{
display:inline-block;width:18px;text-align:center;
cursor:pointer;color:#60a5fa;font-size:.75rem;
margin-right:4px;user-select:none;
transition:color .15s;
}
.pivot-toggle:hover{color:#93c5fd}
.pivot-toggle-spacer{display:inline-block;width:22px}
/* Grand total row */
.pivot-grand td{
font-weight:700;color:#f8fafc;
background:rgba(59,130,246,0.08);
border-top:2px solid rgba(59,130,246,0.3);
padding:10px 12px;
}
/* --- suggest popup --- */
.pivot-suggest-popup{
position:fixed;z-index:100;
background:rgba(15,23,42,0.95);
border:1px solid rgba(100,116,139,0.35);
border-radius:12px;padding:12px 16px;
box-shadow:0 8px 32px rgba(0,0,0,0.4);
min-width:180px;
backdrop-filter:blur(16px);
}
.pivot-suggest-title{font-size:.82rem;color:#94a3b8;margin-bottom:8px;font-weight:600}
.pivot-suggest-list{display:flex;flex-direction:column;gap:4px}
.pivot-suggest-item{
padding:6px 12px;border-radius:8px;cursor:pointer;
color:#e2e8f0;font-size:.84rem;
transition:background .15s;
}
.pivot-suggest-item:hover{background:rgba(59,130,246,0.18)}
/* --- light theme overrides --- */
.pivot-controls{background:rgba(248,250,252,0.7);border-color:rgba(148,163,184,0.2)}
body.dark .pivot-controls{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12)}
body.dark .pivot-table-wrap{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}
/* ===== Language Picker ===== */
.lang-picker{position:relative}
.lang-btn{display:flex;align-items:center;gap:4px;font-size:.78rem}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:210;
background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border:1px solid #e2e8f0;
border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden;min-width:140px}
.lang-dropdown.show{display:block}
.lang-opt{display:block;width:100%;text-align:left;padding:8px 14px;border:none;background:none;
cursor:pointer;font-size:.82rem;color:#334155;transition:background .12s}
.lang-opt:hover{background:#f1f5f9}
.lang-opt.active{background:#3b82f6;color:#fff}
body.dark .lang-dropdown{background:rgba(30,41,59,.97);border-color:rgba(100,116,139,.3)}
body.dark .lang-opt{color:#e2e8f0}
body.dark .lang-opt:hover{background:rgba(59,130,246,.15)}
body.dark .lang-opt.active{background:#3b82f6;color:#fff}
/* ===== Excel Tree Report ===== */
.excel-report-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.excel-report-period{font-size:.82rem;color:#64748b;margin-left:auto}
body.dark .excel-report-period{color:#94a3b8}
.excel-tree-table{border-collapse:collapse;width:100%;font-size:.82rem;white-space:nowrap}
.excel-tree-table th{position:sticky;top:0;z-index:2;background:#f1f5f9;border:1px solid #e2e8f0;
padding:4px 8px;text-align:center;font-weight:600;font-size:.78rem}
body.dark .excel-tree-table th{background:#1e293b;border-color:rgba(100,116,139,.3);color:#e2e8f0}
.excel-tree-table td{border:1px solid #e2e8f0;padding:3px 8px}
body.dark .excel-tree-table td{border-color:rgba(100,116,139,.2);color:#e2e8f0}
.excel-tree-table .xl-num{text-align:right;font-variant-numeric:tabular-nums}
.excel-tree-table .xl-name{text-align:left;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.excel-tree-table .xl-toggle{cursor:pointer;user-select:none;display:inline-block;width:16px;
text-align:center;font-weight:700;color:#3b82f6;margin-right:2px;font-size:.85rem}
.excel-tree-table .xl-toggle:hover{color:#2563eb}
/* Level-based indentation */
.excel-tree-table tr[data-lv="1"] .xl-name{padding-left:4px;font-weight:700;font-size:.88rem}
.excel-tree-table tr[data-lv="2"] .xl-name{padding-left:18px;font-weight:700}
.excel-tree-table tr[data-lv="3"] .xl-name{padding-left:32px;font-weight:600}
.excel-tree-table tr[data-lv="4"] .xl-name{padding-left:46px}
.excel-tree-table tr[data-lv="5"] .xl-name{padding-left:60px;font-size:.78rem;color:#64748b}
.excel-tree-table tr[data-lv="6"] .xl-name{padding-left:74px;font-size:.76rem;color:#94a3b8}
/* Level background stripes */
.excel-tree-table tr[data-lv="1"]{background:#e0f2fe}
.excel-tree-table tr[data-lv="2"]{background:#f0f9ff}
.excel-tree-table tr[data-lv="3"]{background:#fafcff}
body.dark .excel-tree-table tr[data-lv="1"]{background:rgba(56,189,248,.12)}
body.dark .excel-tree-table tr[data-lv="2"]{background:rgba(56,189,248,.06)}
body.dark .excel-tree-table tr[data-lv="3"]{background:rgba(56,189,248,.03)}
body.dark .excel-tree-table tr[data-lv="5"] .xl-name{color:#94a3b8}
body.dark .excel-tree-table tr[data-lv="6"] .xl-name{color:#64748b}
/* Negative values highlight */
.excel-tree-table .xl-neg{color:#ef4444}
/* ===== Product Prices Tree ===== */
.pp-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.pp-search{flex:1;max-width:480px;padding:9px 14px;border:1px solid #cbd5e1;border-radius:8px;font-size:.88rem;
background:rgba(255,255,255,0.8);transition:border-color .15s}
.pp-search:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.12)}
/* Native ✕ clear button for . Chromium hides it by
default on dark themes; we draw our own so it's always visible. */
.pp-search::-webkit-search-cancel-button{
-webkit-appearance:none;appearance:none;
height:14px;width:14px;margin-left:6px;cursor:pointer;
background:transparent;border-radius:50%;
background-image:url("data:image/svg+xml;utf8,");
background-size:12px 12px;background-position:center;background-repeat:no-repeat;
}
.pp-search::-webkit-search-cancel-button:hover{background-color:rgba(148,163,184,0.15)}
body.dark .pp-search::-webkit-search-cancel-button{
background-image:url("data:image/svg+xml;utf8,");
}
.pp-stats{font-size:.78rem;color:#94a3b8}
.pp-tree-container{background:rgba(255,255,255,0.75);backdrop-filter:blur(8px);border-radius:10px;
border:1px solid rgba(226,232,240,0.6);padding:16px;max-height:calc(100vh - 200px);overflow-y:auto}
.pp-loading{text-align:center;padding:40px;color:#94a3b8;font-size:.88rem}
.pp-tree{font-size:.88rem}
.pp-node{border-bottom:1px solid rgba(226,232,240,0.4)}
.pp-node:last-child{border-bottom:none}
.pp-row{display:flex;align-items:center;gap:6px;padding:3px 8px;cursor:pointer;border-radius:4px;transition:background .1s;font-size:.82rem}
.pp-row:hover{background:rgba(59,130,246,0.06)}
.pp-toggle{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.7rem;
color:#94a3b8;transition:transform .2s;flex-shrink:0;border-radius:4px}
.pp-toggle:hover{background:rgba(59,130,246,0.1);color:#3b82f6}
.pp-toggle.expanded{transform:rotate(90deg)}
.pp-toggle.leaf{visibility:hidden}
.pp-icon{font-size:.85rem;flex-shrink:0}
.pp-name{flex:1;color:#1e293b;font-weight:400}
.pp-name.folder{font-weight:600;color:#334155}
.pp-code{font-size:.72rem;color:#94a3b8;font-family:monospace;flex-shrink:0}
.pp-children{padding-left:18px;display:none}
.pp-children.open{display:block}
.pp-highlight{background:#fef3c7;border-radius:2px;padding:0 2px}
.pp-row.selected{background:rgba(59,130,246,0.12);border-left:3px solid #3b82f6}
/* Flat product list table.
── overflow:auto ── horizontal scrollbar appears at the bottom edge of
the wrap (which sits at the bottom of the viewport thanks to the
body:has() lock further below). No more invisible clipping when
columns don't fit at higher browser zoom levels. */
.pp-table-wrap{background:rgba(255,255,255,0.75);border:1px solid rgba(226,232,240,0.6);border-radius:10px;padding:4px;overflow:auto;flex:1 1 auto;min-height:0;min-width:0;scrollbar-gutter:stable;position:relative}
/* Let the PP catalog occupy whatever vertical space is left under the
toolbar + cache banner, and scroll internally (no big grey gap below).
`flex:none` overrides the generic `.page{flex:1}` rule — without it
the page would grow to fit all rows and our explicit height calc
would be ignored. Scoped to .active to leave inactive pages alone. */
#page-productPrices.active{display:flex;flex-direction:column;flex:none;height:calc(100vh - 16px);padding-bottom:4px;min-width:0}
#page-productPrices > #ppCatalogView{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}
/* Detail view fills the rest of the page when shown — vertical scroll
internally, horizontal scroll handled per-table via .pp-detail-section. */
#page-productPrices > #ppDetailView{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}
/* Same treatment for the new materials page — flex layout so the table
scrolls inside the page instead of pushing the footer off-screen. */
#page-materialPrices.active{display:flex;flex-direction:column;flex:none;height:calc(100vh - 16px);padding-bottom:4px;min-width:0}
#page-materialPrices > #mpTableWrap{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}
/* On both PP/MP pages, lock body/.content height to viewport so the
page's height:calc(100vh-…) actually wins and the table-wrap can
compute its remaining-space height. Without this lock, `.content`
keeps `min-height:100vh` and grows with content, which made the
wrap inherit ~30000px height (= all 2591 rows) and pushed the
horizontal scrollbar far off-screen. */
body:has(#page-productPrices.active),
body:has(#page-materialPrices.active){height:100vh;overflow:hidden}
body:has(#page-productPrices.active) .content,
body:has(#page-materialPrices.active) .content{height:100vh;min-height:0;min-width:0;overflow:hidden}
/* min-width:max-content keeps fixed column widths intact — table grows to
its natural size when the wrap is narrower (so the wrap shows a
horizontal scrollbar) but uses 100% when there is room to spare. */
.pp-list-table{width:100%;min-width:max-content;border-collapse:collapse}
/* canon 2026-05-11: компактные числовые колонки. Headers оборачиваются на
2-3 строки (white-space:normal + vertical-align:bottom) — ширина колонки
уплотняется до самого длинного слова заголовка. Tbody-числа nowrap,
узкий padding. Это даёт «МАКС. ФАКТ. СЕБЕСТ.» в 3 строки шириной ≈
"СЕБЕСТ." (7 chars), а не одной длинной строкой 22 chars. Σ ширина
таблицы сжимается → больше колонок влезает без горизонтального скролла. */
.pp-list-table thead th{position:sticky;top:0;background:#f1f5f9;padding:5px 6px;text-align:left;font-size:.7rem;text-transform:uppercase;color:#475569;font-weight:600;border-bottom:1px solid #e2e8f0;z-index:5;line-height:1.15;vertical-align:bottom;white-space:normal;word-spacing:100vw}
.pp-list-table thead th.sortable{cursor:pointer;user-select:none}
.pp-list-table thead th.sortable:hover{background:#e2e8f0}
.pp-list-table thead th.num{text-align:right}
.pp-list-table tbody td{padding:4px 6px;border-bottom:1px solid rgba(226,232,240,.4);font-size:.78rem}
.pp-list-table tbody td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-list-table tbody tr{cursor:pointer;transition:background .1s}
.pp-list-table tbody tr:hover{background:rgba(59,130,246,0.06)}
.pp-list-table tbody tr.selected{background:rgba(59,130,246,0.15)}
/* Last-viewed marker: persists across re-renders and tab returns so the user
can spot which row they last drilled into / opened a chart for. Subtle on
purpose — a thin teal left border + faint tint, never competes with .selected. */
.pp-list-table tbody tr.last-viewed{background:rgba(20,184,166,0.07);box-shadow:inset 3px 0 0 #14b8a6}
.pp-list-table tbody tr.last-viewed.selected{background:rgba(59,130,246,0.18);box-shadow:inset 3px 0 0 #14b8a6}
/* canon 2026-05-06: розовая подсветка row если есть внутри-колонное расхождение
Σ visible vs ⭐ ПОЛНАЯ > 0.5 грн (сигнал «незакрытая Калькуляция в 1С» или
1С structural drift). Намеренно subtle — fg розоватый, bg чуть rose. */
.pp-list-table tbody tr[data-has-drift="1"] .pp-prod-name-drift{color:#fb7185}
.pp-list-table tbody tr[data-has-drift="1"]{background:rgba(251,113,133,0.04)}
.pp-list-table tbody tr[data-has-drift="1"]:hover{background:rgba(251,113,133,0.08)}
.pp-row.last-viewed{background:rgba(20,184,166,0.10);border-left:3px solid #14b8a6}
.pp-list-table .pp-prod-name{font-weight:500;color:#1e293b}
.pp-list-table .pp-prod-code{color:#94a3b8;font-family:monospace;font-size:.7rem}
.pp-list-table .pp-prod-group{color:#64748b;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;display:inline-block;vertical-align:middle}
body.dark .pp-table-wrap{background:rgba(30,41,59,0.6);border-color:#334155}
body.dark .pp-list-table thead th{background:#1e293b;color:#94a3b8;border-color:#334155}
body.dark .pp-list-table tbody td{border-color:rgba(51,65,85,.5)}
body.dark .pp-list-table .pp-prod-name{color:#e2e8f0}
/* ── Semantic column colors (mirrors fmt MCP intent) ──
Sales = slightly red, Revenue = green, Cost = yellow/amber, Price = neutral */
.pp-list-table td.pp-col-sales,
.pp-list-table th.pp-col-sales{background:rgba(248,113,113,.08);color:#b91c1c}
.pp-list-table td.pp-col-revenue,
.pp-list-table th.pp-col-revenue{background:rgba(16,185,129,.08);color:#047857}
.pp-list-table td.pp-col-cost,
.pp-list-table th.pp-col-cost{background:rgba(245,158,11,.10);color:#b45309}
.pp-list-table td.pp-col-price,
.pp-list-table th.pp-col-price{color:#1e293b}
body.dark .pp-list-table td.pp-col-sales,
body.dark .pp-list-table th.pp-col-sales{background:rgba(248,113,113,.12);color:#fca5a5}
body.dark .pp-list-table td.pp-col-revenue,
body.dark .pp-list-table th.pp-col-revenue{background:rgba(16,185,129,.15);color:#6ee7b7}
body.dark .pp-list-table td.pp-col-cost,
body.dark .pp-list-table th.pp-col-cost{background:rgba(245,158,11,.15);color:#fcd34d}
body.dark .pp-list-table td.pp-col-price{color:#e2e8f0}
/* canon 2026-05-11: «МАКС. ФАКТ. СЕБЕСТ.» (последняя/самая дорогая Калькуляция
месяца) сформирована из давальческой Калькуляции (DH1365.SP5622=1) — материалы
заказчика, цифра не сопоставима с обычной производственной. Перебиваем
стандартный amber-цвет/фон голубым акцентом. Бейдж 📦 справа дублирует сигнал.
Селектор не привязан к конкретной колонке — может применяться где угодно. */
.pp-list-table td.pp-cost-davalch{
background:rgba(59,130,246,.18) !important;
color:#1d4ed8 !important;
font-weight:600;
border-left:2px solid #3b82f6;
}
body.dark .pp-list-table td.pp-cost-davalch{
background:rgba(59,130,246,.22) !important;
color:#93c5fd !important;
border-left:2px solid #60a5fa;
}
.pp-davalch-badge{
display:inline-block;
margin-left:4px;
font-size:.78em;
opacity:.85;
}
/* «Жирный» бейдж в шапках PP-detail (Базовая калькуляция, Состав+себест.) —
виден на расстоянии, объясняет почему числа по сырью могут выглядеть иначе. */
.pp-davalch-badge-strong{
display:inline-block;
margin-left:8px;
padding:2px 8px;
font-size:.72rem;
font-weight:700;
letter-spacing:.02em;
color:#1d4ed8;
background:rgba(59,130,246,.15);
border:1px solid rgba(59,130,246,.45);
border-radius:4px;
cursor:help;
white-space:nowrap;
}
body.dark .pp-davalch-badge-strong{
color:#bfdbfe;
background:rgba(59,130,246,.22);
border-color:rgba(96,165,250,.55);
}
/* Тонкая голубая полоса слева на секциях PP-detail когда активная Калькуляция
давальческая (одновременно с бейджем в h4). Сигнал считывается даже если
бейдж за пределами viewport-а (длинный заголовок). */
.pp-detail-section.pp-section-davalch{
border-left:3px solid #3b82f6;
padding-left:10px;
}
/* canon 2026-05-10: голубой акцент на ВСЮ шапку breadcrumb (имя продукта +
иконки) когда активная Калькуляция давальческая. Сигнал «карточка
нестандартная» сразу при открытии, до скролла к деталям. */
.pp-detail-breadcrumb.pp-breadcrumb-davalch{
background:rgba(59,130,246,.10);
border:1px solid rgba(59,130,246,.40);
border-left:4px solid #3b82f6;
border-radius:5px;
padding:6px 12px;
box-shadow:0 0 0 1px rgba(59,130,246,.10);
}
body.dark .pp-detail-breadcrumb.pp-breadcrumb-davalch{
background:rgba(59,130,246,.16);
border-color:rgba(96,165,250,.50);
border-left-color:#60a5fa;
}
/* Top-20 Калькуляций — голубая подсветка строк давальч-калькуляций (SP5622=1).
Перебиваем ВСЕ ячейки (включая amber-цвет cex_per_unit/cex_full/full с inline
style). Юзер: «там и там голубым» — голубой фон должен быть однозначным сигналом
даже для активной (= обычно жёлтая полоса в Top-20) если она давальческая. */
.pp-calc-table tbody tr.pp-calc-row-davalch > td{
background:rgba(59,130,246,.22) !important;
color:#1d4ed8 !important;
}
.pp-calc-table tbody tr.pp-calc-row-davalch{
box-shadow:inset 3px 0 0 #3b82f6;
}
body.dark .pp-calc-table tbody tr.pp-calc-row-davalch > td{
background:rgba(59,130,246,.28) !important;
color:#bfdbfe !important;
}
/* Δ себест. column: value + pill with arrow & percent */
.pp-list-table td.pp-col-cost-delta{background:rgba(148,163,184,.06);white-space:nowrap}
body.dark .pp-list-table td.pp-col-cost-delta{background:rgba(148,163,184,.08)}
.pp-delta-val{font-variant-numeric:tabular-nums;font-weight:600}
.pp-delta-pct{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:.68rem;font-weight:600;letter-spacing:.02em;vertical-align:baseline}
/* MP «Цены материалов» — компактный режим. Базовая .pp-list-table уже узкая,
но 18 колонок с 4-знаковыми ценами требуют ещё меньшего паддинга, иначе
значения отжимают «Материал» в очень узкую полосу и появляется большой
пустой gap слева перед первой ценой. */
#mpListTable thead th{padding:5px 5px}
#mpListTable tbody td{padding:3px 5px}
/* Canon 2026-05-13: точные ширины через в index.html. Таблица
= table-layout:fixed (через атрибут ставим Σ колгруппы) →
ширины из , контент обрезается через ellipsis. width: явно 1338px =
18+240+72+72+56+64+64+58+46+64+58+46+64+58+46+64+56+56+56+80.
min-width:0 отменяет наследованное .pp-list-table min-width:max-content,
которое раньше тянуло таблицу до Σ длиннейших строк → ~8700px overflow. */
#mpListTable{width:1338px;min-width:0;table-layout:fixed}
/* th в этой таблице — НЕ wrap-by-words как у .pp-list-table. word-spacing:100vw
там делал каждое слово отдельной строкой, но при table-layout:fixed это
расширяло cells (cell-content вылазил из колонки). Возвращаем нормальный
word-spacing → текст внутри будет на 2-3 строки через обычный wrap. */
#mpListTable thead th{word-spacing:normal;white-space:normal;line-height:1.15}
/* td содержат overflow:hidden — длинные значения не раздувают колонку. */
#mpListTable tbody td{overflow:hidden;text-overflow:ellipsis}
#mpListTable .mp-subhead td{padding:6px 5px 2px !important}
/* Узкие 4-знаковые цифры — пусть монопространство будет ещё чуть плотнее. */
#mpListTable .num{font-feature-settings:"tnum" 1}
/* «Себест. по сост.» / «Δ к сост.» — выделенный фиолетовый акцент.
На строках-материалах эти ячейки рендерятся как «—» в .mp-prod-only
стилях (приглушённый), чтобы не путать с реальной метрикой по продукту. */
#mpListTable th.mp-prod-only{background:rgba(167,139,250,.06)}
body.dark #mpListTable th.mp-prod-only{background:rgba(167,139,250,.08)}
/* Drag-to-scroll: курсор «хват» по шапке таблицы, «грабе» когда тянут.
Канон 2026-05-12: пользователь может ухватить шапку (или любое место
контейнера, кроме форменных элементов) и потянуть влево-вправо.
Реализовано в mp-list.js → wireDragScroll(). */
#mpTableWrap{cursor:grab}
#mpTableWrap.mp-dragging{cursor:grabbing;user-select:none}
#mpTableWrap.mp-dragging *{cursor:grabbing !important}
/* ── Compact calculation rows (2x denser than default data-table) ── */
.pp-calc-block{border:1px solid #e2e8f0;border-radius:8px;padding:6px 8px;margin-bottom:4px;background:rgba(248,250,252,.5)}
.pp-calc-head{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.76rem;line-height:1.15}
.pp-calc-head strong{font-size:.78rem}
.pp-calc-head .pp-calccar{color:#94a3b8;width:10px}
.pp-calc-head .pp-calc-qty{color:#64748b}
.pp-calc-head .pp-calc-mat{color:#10b981}
.pp-calc-head .pp-calc-svc{color:#3b82f6}
.pp-calc-head .pp-calc-cost{color:#ef4444;font-weight:600}
.pp-calc-table{font-size:.7rem;line-height:1.1;margin-top:4px}
.pp-calc-table thead th{padding:3px 6px !important;font-size:.62rem;text-transform:uppercase;color:#475569;background:#f1f5f9;border-bottom:1px solid #e2e8f0}
.pp-calc-table tbody td{padding:2px 6px !important;border-bottom:1px solid rgba(226,232,240,.3);vertical-align:middle;font-variant-numeric:tabular-nums}
.pp-calc-table tbody tr{height:auto}
.pp-calc-table tbody tr:nth-child(odd){background:rgba(248,250,252,.5)}
.pp-calc-table .pp-note{font-size:.62rem;color:#94a3b8;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-kind-badge{display:inline-block;padding:0 5px;border-radius:8px;font-size:.58rem;font-weight:600;letter-spacing:.02em;line-height:1.4}
.pp-kind-tmc{background:rgba(16,185,129,.15);color:#047857}
.pp-kind-exp{background:rgba(245,158,11,.15);color:#b45309}
.pp-kind-unk{background:rgba(148,163,184,.15);color:#64748b}
body.dark .pp-calc-block{background:rgba(30,41,59,.4);border-color:#334155}
body.dark .pp-calc-table thead th{background:#1e293b;color:#94a3b8;border-color:#334155}
body.dark .pp-calc-table tbody td{border-color:rgba(51,65,85,.4)}
body.dark .pp-calc-table tbody tr:nth-child(odd){background:rgba(30,41,59,.3)}
body.dark .pp-kind-tmc{background:rgba(16,185,129,.25);color:#6ee7b7}
body.dark .pp-kind-exp{background:rgba(245,158,11,.25);color:#fcd34d}
body.dark .pp-kind-unk{background:rgba(148,163,184,.25);color:#cbd5e1}
/* Context menu */
.pp-context-menu{position:fixed;z-index:500;background:#fff;border:1px solid #e2e8f0;border-radius:8px;
box-shadow:0 8px 24px rgba(0,0,0,0.15);padding:4px;min-width:200px}
.pp-ctx-item{padding:8px 14px;font-size:.82rem;cursor:pointer;border-radius:4px;color:#1e293b}
.pp-ctx-item:hover{background:#f1f5f9}
body.dark .pp-context-menu{background:#1e293b;border-color:#334155}
body.dark .pp-ctx-item{color:#e2e8f0}
body.dark .pp-ctx-item:hover{background:#334155}
/* Detail nav */
.pp-detail-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pp-detail-breadcrumb{font-size:.82rem;color:#64748b;display:inline-flex;align-items:center;gap:6px}
.pp-copy-ref{background:transparent;border:1px solid #cbd5e1;border-radius:6px;padding:2px 7px;cursor:pointer;font-size:.82rem;line-height:1;color:#64748b;transition:all .15s}
.pp-copy-ref:hover{background:#e0e7ff;border-color:#6366f1;color:#4338ca}
.pp-copy-ref.pp-copy-ok{background:#dcfce7;border-color:#16a34a;color:#166534}
body.dark .pp-copy-ref{border-color:#475569;color:#cbd5e1}
body.dark .pp-copy-ref:hover{background:#312e81;border-color:#818cf8;color:#c7d2fe}
body.dark .pp-copy-ref.pp-copy-ok{background:#14532d;border-color:#22c55e;color:#bbf7d0}
/* Inline 1C reference copy button inside tables — smaller, hidden until row hover */
.pp-copy-ref-1c{background:transparent;border:1px solid transparent;border-radius:4px;padding:0 4px;cursor:pointer;font-size:.68rem;line-height:1.2;color:#94a3b8;opacity:.35;transition:opacity .12s,background .12s,border-color .12s,color .12s;vertical-align:middle;margin-left:2px}
tr:hover > td .pp-copy-ref-1c,td:hover .pp-copy-ref-1c{opacity:.85}
.pp-copy-ref-1c:hover{opacity:1;background:#e0e7ff;border-color:#6366f1;color:#4338ca}
.pp-copy-ref-1c.pp-copy-ok{opacity:1;background:#dcfce7;border-color:#16a34a;color:#166534}
body.dark .pp-copy-ref-1c{color:#cbd5e1}
body.dark .pp-copy-ref-1c:hover{background:#312e81;border-color:#818cf8;color:#c7d2fe}
body.dark .pp-copy-ref-1c.pp-copy-ok{background:#14532d;border-color:#22c55e;color:#bbf7d0}
/* Filter checkbox */
.pp-filter-check{display:flex;align-items:center;gap:4px;font-size:.78rem;color:#475569;cursor:pointer;
padding:5px 10px;border:1px solid #cbd5e1;border-radius:6px;white-space:nowrap}
.pp-filter-check:hover{background:#f1f5f9}
.pp-filter-check input{margin:0}
/* Excluded item in modal */
.pp-excl-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid #f1f5f9;font-size:.82rem}
.pp-excl-item button{margin-left:auto;padding:2px 8px;font-size:.7rem}
body.dark .pp-search{background:rgba(30,41,59,0.6);border-color:#334155;color:#e2e8f0}
body.dark .pp-tree-container{background:rgba(30,41,59,0.6);border-color:#334155}
body.dark .pp-row:hover{background:rgba(59,130,246,0.1)}
body.dark .pp-name{color:#e2e8f0}
body.dark .pp-name.folder{color:#f8fafc}
body.dark .pp-node{border-color:rgba(51,65,85,0.5)}
/* ===== User Admin ===== */
.ua-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.ua-info{font-size:.78rem;color:#94a3b8}
.ua-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;
display:flex;align-items:center;justify-content:center}
.ua-modal{background:#fff;border-radius:12px;padding:24px;width:520px;max-width:90vw;max-height:85vh;overflow-y:auto;
box-shadow:0 20px 60px rgba(0,0,0,0.2)}
.ua-modal h3{font-size:1.1rem;margin-bottom:16px;color:#1e293b}
.ua-modal label{display:block;font-size:.82rem;color:#475569;margin-top:12px;margin-bottom:4px;font-weight:500}
.ua-modal input,.ua-modal select{width:100%;padding:8px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:.88rem}
.ua-modal input:focus,.ua-modal select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.12)}
.ua-tabs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.ua-tab-check{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#475569;padding:4px 8px;
border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:background .1s}
.ua-tab-check:hover{background:#f1f5f9}
.ua-tab-check.checked{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
.ua-tab-check input{display:none}
.ua-modal-actions{display:flex;gap:8px;margin-top:16px}
.ua-status-active{color:#16a34a;font-weight:500}
.ua-status-disabled{color:#ef4444;font-weight:500}
body.dark .ua-modal{background:#1e293b;color:#e2e8f0}
body.dark .ua-modal h3{color:#f8fafc}
body.dark .ua-modal input,body.dark .ua-modal select{background:#0f172a;border-color:#334155;color:#e2e8f0}
body.dark .ua-tab-check{border-color:#334155;color:#94a3b8}
body.dark .ua-tab-check.checked{background:rgba(59,130,246,0.2);border-color:#3b82f6;color:#93c5fd}
/* Permission Matrix */
.perm-matrix-wrap{overflow-x:auto}
.perm-matrix{border-collapse:collapse;width:100%;font-size:.82rem}
.perm-matrix th,.perm-matrix td{padding:6px 10px;border:1px solid #e2e8f0;text-align:center;vertical-align:middle}
.perm-matrix thead th{position:sticky;top:0;background:#f8fafc;z-index:2;font-weight:600;white-space:nowrap}
.perm-matrix .pm-role-head{cursor:pointer;transition:background .15s;min-width:90px}
.perm-matrix .pm-role-head:hover{background:#e2e8f0}
.perm-matrix .pm-role-color{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}
.perm-matrix .pm-role-sys{font-size:.6rem;color:#94a3b8;display:block;font-weight:400}
.perm-matrix .pm-role-del{font-size:.65rem;color:#ef4444;cursor:pointer;display:block;margin-top:2px}
.perm-matrix .pm-role-del:hover{text-decoration:underline}
.perm-matrix .pm-group-row td{background:#f1f5f9;font-weight:600;text-align:left;font-size:.76rem;
text-transform:uppercase;color:#475569;letter-spacing:.5px;padding:8px 10px}
.perm-matrix .pm-page-label{text-align:left;padding-left:28px;font-weight:400;color:#1e293b;white-space:nowrap}
.perm-matrix .pm-page-icon{margin-right:6px}
.perm-matrix td.pm-check{cursor:pointer;transition:background .1s}
.perm-matrix td.pm-check:hover{background:#dbeafe}
.perm-matrix td.pm-check.checked{background:#dbeafe}
.perm-matrix td.pm-check input{width:16px;height:16px;cursor:pointer;accent-color:#3b82f6}
.perm-matrix .pm-col-all{font-size:.7rem;cursor:pointer;color:#3b82f6;display:block;margin-top:2px}
.perm-matrix .pm-col-all:hover{text-decoration:underline}
body.dark .perm-matrix th,body.dark .perm-matrix td{border-color:#334155}
body.dark .perm-matrix thead th{background:#1e293b}
body.dark .perm-matrix .pm-group-row td{background:rgba(30,41,59,0.8);color:#94a3b8}
body.dark .perm-matrix .pm-page-label{color:#e2e8f0}
body.dark .perm-matrix .pm-role-head:hover{background:#334155}
body.dark .perm-matrix td.pm-check:hover{background:rgba(59,130,246,.15)}
body.dark .perm-matrix td.pm-check.checked{background:rgba(59,130,246,.15)}
/* Product detail panel */
.pp-detail{margin-top:16px;padding:20px;background:rgba(255,255,255,0.85);border-radius:10px;border:1px solid #e2e8f0}
/* Dim overlay during refetch (mode toggle, period change) — keep context visible, not blank */
#ppDetailContent.pp-refreshing{position:relative;opacity:.4;pointer-events:none;transition:opacity .15s}
#ppDetailContent.pp-refreshing::after{content:'обновляю данные…';position:absolute;top:14px;right:20px;background:#2563eb;color:#fff;padding:4px 12px;border-radius:12px;font-size:.72rem;font-weight:600;box-shadow:0 2px 8px rgba(37,99,235,.25);z-index:10}
.pp-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pp-detail-header h3{font-size:1.05rem;color:#1e293b;flex:1}
.pp-detail-header .btn{flex-shrink:0}
.pp-detail-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.pp-detail-kpi{background:#f8fafc;border-radius:8px;padding:10px 12px;border-top:3px solid #cbd5e1}
.pp-detail-kpi h4{font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;color:#64748b;margin-bottom:2px}
.pp-detail-kpi .val{font-size:1rem;font-weight:700;color:#1e293b}
.pp-detail-section{margin-bottom:16px;max-width:100%}
.pp-detail-section h4{font-size:.88rem;color:#334155;margin-bottom:8px;font-weight:600}
/* Each detail-section becomes the horizontal scroll container for the
table(s) it holds — so wide tables on the PP detail page (BOM, cost
tree, calculations top-N, monthly breakdown, sales-by-customer,
price-by-client) get their own scrollbar instead of bleeding out and
getting clipped by body{overflow-x:hidden}. Vertical scroll lives on
#ppDetailView (one per page). Each table inside is forced to its
intrinsic width via min-width:max-content. */
.pp-detail-section > table.data-table,
.pp-detail-section .pp-bom-view > table,
.pp-detail-section .pp-cost-view > table,
.pp-detail-section .pp-sec-body > table{min-width:max-content}
.pp-detail-section .pp-bom-view,
.pp-detail-section .pp-cost-view,
.pp-detail-section .pp-sec-body{overflow-x:auto}
/* Catch-all: any direct table child of a detail-section gets a horizontal
scroll wrapper via the section itself. */
.pp-detail-section.pp-scrollable{overflow-x:auto}
/* Header rows in scroll containers use grab cursor to hint draggability —
the JS in app.js wires the actual drag-to-pan behaviour. */
.pp-table-wrap > table > thead,
.pp-detail-section .pp-bom-view > table > thead,
.pp-detail-section .pp-cost-view > table > thead,
.pp-detail-section .pp-sec-body > table > thead,
.pp-detail-section > table.data-table > thead{cursor:grab}
.pp-table-wrap.pp-dragging > table > thead,
.pp-detail-section .pp-bom-view.pp-dragging > table > thead,
.pp-detail-section .pp-cost-view.pp-dragging > table > thead,
.pp-detail-section .pp-sec-body.pp-dragging > table > thead,
.pp-detail-section.pp-dragging > table.data-table > thead{cursor:grabbing}
.pp-table-wrap.pp-dragging *,
.pp-detail-section .pp-dragging *,
.pp-detail-section.pp-dragging *{user-select:none}
/* Compact mode for the «Состав + себестоимость на 1 ед.» cost/BOM table.
This table is forced to min-width:max-content (rule above) so it never
squishes — it just scrolls. To let the page get genuinely narrow before
the horizontal scrollbar appears we shrink its intrinsic width: tighter
cell padding + smaller font. The numeric/value cells are right-aligned
and carry inline padding (e.g. "padding:5px 8px"), so we override their
horizontal padding with !important via the [style*="text-align:right"]
attribute selector. Left-aligned name cells are deliberately NOT touched
here because their inline padding-left encodes the tree depth/indent. */
.pp-tu-compact td[style*="text-align:right"]{
padding-left:3px!important;padding-right:5px!important}
.pp-tu-compact th{padding-left:3px!important;padding-right:4px!important}
.pp-tu-compact td[style*="text-align:left"]{padding-right:4px!important}
/* Column model: table-layout:fixed driven by an explicit
(built in pp-detail.js). Why fixed instead of the old auto-layout +
max-width:0 trick: that trick gave the «Материал» column a ZERO preferred
width, so it collapsed to «…» even on a wide screen while the numeric
columns greedily ate all the slack (user: «сырьё крохотное, цена эпично
широкая»). With fixed layout the colgroup decides the proportions: the
«Материал» column is the widest by far and the numeric columns stay
compact at every window size. width:100% + min-width:0 → the whole table
scales with its container (numerics never become «epic», name never
collapses while there is room). */
.pp-detail-section .pp-bom-view > table.pp-tu-compact,
.pp-detail-section .pp-cost-view > table.pp-tu-compact{
min-width:0;table-layout:fixed}
/* Only the two free-text columns truncate with «…» when the window is
genuinely narrow. Numeric/Δ cells are NOT clipped — they wrap (the «(+34%)»
drops to a 2nd line) so a value is never hidden. Full name/supplier text
stays in the cell's title= tooltip. */
.pp-tu-compact td:first-child,
.pp-tu-compact th:first-child,
.pp-tu-compact td.pp-tu-sup,
.pp-tu-compact th.pp-tu-sup{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.dark .pp-detail{background:rgba(30,41,59,0.7);border-color:#334155}
body.dark .pp-detail-header h3{color:#f8fafc}
body.dark .pp-detail-kpi{background:#1e293b}
body.dark .pp-detail-kpi .val{color:#e2e8f0}
/* ===== Login Overlay ===== */
.login-overlay{position:fixed;top:0;left:0;right:0;bottom:0;
background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);
z-index:2000;display:flex;align-items:center;justify-content:center}
.login-box{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-radius:20px;padding:48px 40px;
width:400px;max-width:90vw;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,0.4)}
.login-logo{font-size:3rem;margin-bottom:8px;filter:drop-shadow(0 2px 4px rgba(59,130,246,0.3))}
.login-box h2{font-size:1.4rem;color:#1e293b;margin-bottom:4px;font-weight:700}
.login-box .login-sub{font-size:.78rem;color:#94a3b8;margin-bottom:28px;letter-spacing:.3px}
.login-field{text-align:left;margin-bottom:16px}
.login-field label{display:block;font-size:.75rem;font-weight:600;color:#475569;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.login-box input{width:100%;padding:11px 14px;border:1px solid #e2e8f0;border-radius:10px;font-size:.92rem;
background:#f8fafc;transition:border-color .15s,box-shadow .15s}
.login-box input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.15);background:#fff}
.login-box .btn{width:100%;justify-content:center;padding:12px;font-size:.95rem;border-radius:10px;
margin-top:8px;font-weight:600;letter-spacing:.3px}
.login-error{font-size:.82rem;color:#ef4444;margin-top:12px;min-height:20px}
.pwd-wrap{position:relative;display:flex}
.pwd-wrap input{flex:1;padding-right:40px}
.pwd-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;
font-size:1.1rem;cursor:pointer;padding:4px;line-height:1;opacity:.5;transition:opacity .15s}
.pwd-eye:hover{opacity:1}
.login-toggle{text-align:center;font-size:.82rem;color:#64748b;margin-top:16px}
.login-toggle a{color:#3b82f6;text-decoration:none;font-weight:600}
.login-toggle a:hover{text-decoration:underline}
.login-footer{font-size:.68rem;color:#94a3b8;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:4px}
.login-footer::before{content:'🔒';font-size:.8rem}
/* Role Preview Banner */
.role-preview-banner{position:fixed;top:0;left:240px;right:0;z-index:200;background:#f59e0b;color:#1e293b;
padding:8px 24px;display:flex;align-items:center;gap:12px;font-size:.88rem;font-weight:500;
box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.role-preview-banner .rpb-label{flex:1}
.role-preview-banner .rpb-exit{padding:4px 14px;border:2px solid #1e293b;border-radius:6px;background:transparent;
color:#1e293b;font-weight:600;cursor:pointer;font-size:.82rem}
.role-preview-banner .rpb-exit:hover{background:#1e293b;color:#f59e0b}
.role-preview-active .top-bar{top:38px}
/* ────────────────────────────────────────────────────────────── */
/* 1C Document viewer modal (📂 button on PP detail) */
/* ────────────────────────────────────────────────────────────── */
.pp-open-doc-1c{display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;padding:0;margin-left:4px;border:none;background:transparent;
font-size:1rem;cursor:pointer;opacity:.6;border-radius:3px;vertical-align:middle;transition:all .15s ease}
.pp-open-doc-1c:hover{opacity:1;background:rgba(59,130,246,.15)}
.doc-viewer-overlay{position:fixed;inset:0;background:rgba(2,6,23,.68);
z-index:10000;display:flex;align-items:center;justify-content:center;
animation:dvFadeIn .15s ease-out}
@keyframes dvFadeIn{from{opacity:0}to{opacity:1}}
.doc-viewer-dialog{background:#fff;color:#0f172a;width:min(1280px,96vw);
max-height:92vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.45);
display:flex;flex-direction:column;overflow:hidden}
body.dark .doc-viewer-dialog{background:#0f172a;color:#e2e8f0}
.doc-viewer-header{display:flex;justify-content:space-between;align-items:flex-start;
padding:14px 20px;border-bottom:1px solid #e2e8f0;background:linear-gradient(to right,#f8fafc,#fff)}
body.dark .doc-viewer-header{border-bottom-color:#334155;background:linear-gradient(to right,#1e293b,#0f172a)}
.doc-viewer-title{font-size:1.05rem;font-weight:700;color:#1e40af;display:flex;align-items:center;gap:8px}
body.dark .doc-viewer-title{color:#60a5fa}
.doc-viewer-copy-ref{background:transparent;border:1px solid #cbd5e1;border-radius:4px;
cursor:pointer;font-size:.85rem;line-height:1;padding:3px 7px;color:inherit}
.doc-viewer-copy-ref:hover{background:rgba(59,130,246,.08);border-color:#3b82f6}
body.dark .doc-viewer-copy-ref{border-color:#334155}
body.dark .doc-viewer-copy-ref:hover{background:rgba(96,165,250,.12);border-color:#60a5fa}
.doc-viewer-sub{font-size:.82rem;color:#64748b;margin-top:2px}
.doc-viewer-close{background:transparent;border:none;font-size:1.6rem;line-height:1;
cursor:pointer;color:#64748b;padding:0 6px;border-radius:4px}
.doc-viewer-close:hover{color:#dc2626;background:rgba(220,38,38,.08)}
.doc-viewer-body{overflow:auto;padding:16px 20px;flex:1;min-height:200px}
.doc-viewer-loading,.doc-viewer-empty{padding:20px;text-align:center;color:#64748b;font-style:italic}
.doc-viewer-error{padding:16px;color:#dc2626;background:#fef2f2;border-radius:6px}
body.dark .doc-viewer-error{background:#7f1d1d;color:#fecaca}
.doc-viewer-section{margin-bottom:18px}
.doc-viewer-section h3{margin:0 0 8px;font-size:.92rem;color:#0f172a;
border-bottom:2px solid #3b82f6;padding-bottom:4px;display:flex;justify-content:space-between;align-items:baseline}
body.dark .doc-viewer-section h3{color:#e2e8f0}
.dv-meta{font-size:.72rem;color:#64748b;font-weight:400;letter-spacing:.02em}
.dv-header-table{border-collapse:collapse;width:100%;font-size:.82rem}
.dv-header-table td{padding:4px 10px;border-bottom:1px solid #f1f5f9;vertical-align:top}
body.dark .dv-header-table td{border-bottom-color:#1e293b}
.dv-code{color:#64748b;font-family:'Consolas','Courier New',monospace;font-size:.76rem;white-space:nowrap;width:110px}
.dv-val{color:#0f172a;word-break:break-word}
body.dark .dv-val{color:#e2e8f0}
.dv-table-wrap{overflow-x:auto;border:1px solid #e2e8f0;border-radius:6px}
body.dark .dv-table-wrap{border-color:#334155}
.dv-lines-table{border-collapse:collapse;font-size:.78rem;min-width:100%}
.dv-lines-table th{background:#f1f5f9;padding:6px 9px;text-align:left;font-weight:600;
color:#334155;border-bottom:2px solid #cbd5e1;white-space:nowrap;font-family:'Consolas',monospace;font-size:.72rem}
body.dark .dv-lines-table th{background:#1e293b;color:#cbd5e1;border-bottom-color:#475569}
.dv-lines-table td{padding:4px 9px;border-bottom:1px solid #f1f5f9;white-space:nowrap}
body.dark .dv-lines-table td{border-bottom-color:#1e293b}
.dv-lines-table tbody tr:hover{background:#fef9c3}
body.dark .dv-lines-table tbody tr:hover{background:#1e3a8a}
.dv-lineno{color:#94a3b8;font-weight:600;text-align:right;font-family:'Consolas',monospace}
.dv-blank{color:#cbd5e1;text-align:center}
.dv-ref{display:inline-block;font-size:.68rem;color:#7c3aed;margin-left:4px;padding:1px 5px;
background:rgba(124,58,237,.08);border-radius:3px;letter-spacing:.02em;font-family:'Consolas',monospace}
body.dark .dv-ref{color:#a78bfa;background:rgba(124,58,237,.18)}
.doc-viewer-footer-note{color:#94a3b8;font-size:.72rem;text-align:center;padding:8px 0 0;font-style:italic}
/* ──── Doc viewer: card layout for header ──── */
.dv-cards{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.dv-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;
padding:7px 10px 5px;min-height:48px;display:flex;flex-direction:column;
justify-content:space-between;transition:border-color .12s,box-shadow .12s}
body.dark .dv-card{background:#1e293b;border-color:#334155}
.dv-card:hover{border-color:#3b82f6;box-shadow:0 0 0 1px rgba(59,130,246,.15)}
.dv-w-s{flex:0 0 180px}
.dv-w-m{flex:0 0 260px}
.dv-w-l{flex:1 1 360px;max-width:480px}
.dv-w-xl{flex:1 1 100%;max-width:none}
.dv-card-label{font-size:.7rem;color:#64748b;text-transform:uppercase;
letter-spacing:.04em;font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:6px}
body.dark .dv-card-label{color:#94a3b8}
.dv-card-value{font-size:.92rem;color:#0f172a;font-weight:500;
min-height:18px;word-break:break-word;line-height:1.3}
body.dark .dv-card-value{color:#e2e8f0}
.dv-empty{color:#cbd5e1;font-weight:400}
body.dark .dv-empty{color:#475569}
.dv-type{display:inline-block;font-size:.6rem;padding:1px 4px;background:#e2e8f0;
color:#64748b;border-radius:3px;font-weight:700;letter-spacing:.04em;font-family:'Consolas',monospace}
body.dark .dv-type{background:#334155;color:#94a3b8}
.dv-warn{color:#f59e0b;font-size:1rem;margin-right:6px}
.dv-tail{margin-top:12px;border-top:1px dashed #e2e8f0;padding-top:10px}
body.dark .dv-tail{border-top-color:#334155}
.dv-tail summary{cursor:pointer;color:#64748b;font-size:.78rem;margin-bottom:10px;user-select:none}
.dv-tail summary:hover{color:#3b82f6}
/* Lines table now uses Russian labels, keep font readable */
.dv-lines-table th{font-family:inherit;font-size:.74rem;text-transform:none;letter-spacing:0}
/* ──── Context menu ──── */
.dv-context-menu{position:fixed;z-index:10050;background:#fff;border:1px solid #cbd5e1;
border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.25);padding:4px;min-width:240px;
animation:dvFadeIn .1s ease-out}
body.dark .dv-context-menu{background:#1e293b;border-color:#475569}
.dv-ctx-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;
background:transparent;border:none;cursor:pointer;text-align:left;font-size:.88rem;
color:#0f172a;border-radius:5px;font-family:inherit}
body.dark .dv-ctx-item{color:#e2e8f0}
.dv-ctx-item:hover{background:#e0e7ff;color:#1e40af}
body.dark .dv-ctx-item:hover{background:#1e3a8a;color:#dbeafe}
.dv-ctx-item.dv-admin{border-top:1px solid #e2e8f0;margin-top:2px;padding-top:10px}
body.dark .dv-ctx-item.dv-admin{border-top-color:#334155}
.dv-ctx-icon{font-size:1rem;width:20px;text-align:center;flex:0 0 auto}
.dv-ctx-label{flex:1;min-width:0}
/* ──── Submodal (attachments / visibility) ──── */
.doc-viewer-sub-overlay{position:fixed;inset:0;background:rgba(2,6,23,.72);
z-index:10040;display:flex;align-items:center;justify-content:center;
animation:dvFadeIn .15s ease-out}
.doc-viewer-sub-dialog{background:#fff;color:#0f172a;width:min(840px,92vw);
max-height:86vh;border-radius:10px;box-shadow:0 18px 48px rgba(0,0,0,.5);
display:flex;flex-direction:column;overflow:hidden}
body.dark .doc-viewer-sub-dialog{background:#0f172a;color:#e2e8f0}
.doc-viewer-sub-header{display:flex;justify-content:space-between;align-items:center;
padding:12px 18px;border-bottom:1px solid #e2e8f0;background:#f1f5f9}
body.dark .doc-viewer-sub-header{border-bottom-color:#334155;background:#1e293b}
.doc-viewer-sub-title{font-weight:700;font-size:.95rem;color:#1e40af}
body.dark .doc-viewer-sub-title{color:#60a5fa}
.doc-viewer-sub-body{padding:16px 20px;overflow:auto;flex:1;min-height:120px}
/* «÷ на единицу» + «📊 разбивка» (Калькуляция doc-viewer) */
.dv-hero-ctrl-pu{font-weight:600}
.dv-hero-actions .dv-breakdown-btn{margin-left:6px;padding:2px 8px;border:1px solid #475569;
background:#1e293b;color:#fde68a;border-radius:4px;cursor:pointer;font-size:.78rem}
.dv-hero-actions .dv-breakdown-btn:hover{background:#334155;color:#fef08a}
.dv-pu-tag{margin-left:4px;font-size:.62rem;color:#94a3b8;font-weight:600;opacity:.8;
vertical-align:super}
.dv-card-value.dv-pu-on{color:#fde68a}
body.dark .dv-card-value.dv-pu-on{color:#fde68a}
.dvb-head{font-size:.82rem;color:#cbd5e1;margin-bottom:10px;line-height:1.5}
.dvb-table{width:100%;border-collapse:collapse}
.dvb-table th,.dvb-table td{padding:4px 10px;border-bottom:1px solid #1e293b;white-space:nowrap}
.dvb-table td:first-child,.dvb-table th:first-child{white-space:normal}
.dvb-table .dv-num{text-align:right;font-variant-numeric:tabular-nums;
font-family:'Consolas','Courier New',monospace}
.dvb-grp td{font-weight:800;background:rgba(148,163,184,.10);padding-top:7px}
.dvb-item td:first-child{padding-left:24px;color:#cbd5e1}
.dvb-pu{color:#fde68a;font-weight:700}
.dvb-ov td{font-weight:700;color:#fcd34d;background:rgba(161,98,7,.12)}
.dvb-cexfull td{font-weight:900;color:#fde68a;background:rgba(16,185,129,.18);
border-top:2px solid #10b981}
.dvb-full td{font-weight:900;color:#e2e8f0;background:rgba(30,58,138,.35);
border-top:2px solid #3b82f6}
.dvb-note{margin-top:10px;font-size:.72rem;color:#94a3b8;line-height:1.5}
/* Attachments list */
.dv-att-table{border-collapse:collapse;width:100%;font-size:.84rem;margin-top:10px}
.dv-att-table td{padding:7px 10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
body.dark .dv-att-table td{border-bottom-color:#1e293b}
.dv-att-thumb{width:64px;height:48px;object-fit:cover;border-radius:4px;border:1px solid #e2e8f0}
body.dark .dv-att-thumb{border-color:#334155}
.dv-att-icon{display:inline-block;width:64px;text-align:center;font-size:1.6rem;color:#94a3b8}
.dv-muted{color:#94a3b8;font-size:.78rem}
.dv-path{font-family:'Consolas',monospace;font-size:.74rem;word-break:break-all;
background:#f1f5f9;padding:6px 10px;border-radius:4px;margin-bottom:8px;color:#475569}
body.dark .dv-path{background:#1e293b;color:#94a3b8}
/* Visibility editor */
.dv-vis-hint{font-size:.82rem;color:#64748b;margin-bottom:12px;padding:8px 12px;
background:#fef3c7;border-left:3px solid #f59e0b;border-radius:4px}
body.dark .dv-vis-hint{background:#451a03;color:#fde68a;border-left-color:#f59e0b}
.dv-vis-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-bottom:14px;
max-height:56vh;overflow:auto;padding:4px;border:1px solid #e2e8f0;border-radius:6px}
body.dark .dv-vis-list{border-color:#334155}
.dv-vis-row{display:grid;grid-template-columns:auto 80px 1fr auto;gap:8px;align-items:center;
padding:5px 9px;cursor:pointer;border-radius:4px;font-size:.82rem}
.dv-vis-row:hover{background:#f1f5f9}
body.dark .dv-vis-row:hover{background:#1e293b}
.dv-vis-row input{cursor:pointer}
.dv-vis-code{font-family:'Consolas',monospace;font-size:.72rem;color:#94a3b8}
.dv-vis-label{color:#0f172a;font-size:.82rem}
body.dark .dv-vis-label{color:#e2e8f0}
.dv-vis-type{font-size:.62rem;background:#e2e8f0;color:#64748b;padding:1px 5px;
border-radius:3px;font-family:'Consolas',monospace;font-weight:700}
body.dark .dv-vis-type{background:#334155;color:#94a3b8}
.dv-vis-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px;
border-top:1px solid #e2e8f0}
body.dark .dv-vis-actions{border-top-color:#334155}
.dv-btn-primary,.dv-btn-secondary{padding:7px 18px;border-radius:5px;cursor:pointer;
font-weight:600;font-size:.86rem;font-family:inherit;border:1px solid transparent}
.dv-btn-primary{background:#3b82f6;color:#fff}
.dv-btn-primary:hover{background:#2563eb}
.dv-btn-secondary{background:transparent;color:#475569;border-color:#cbd5e1}
.dv-btn-secondary:hover{background:#f1f5f9}
body.dark .dv-btn-secondary{color:#cbd5e1;border-color:#475569}
body.dark .dv-btn-secondary:hover{background:#1e293b}
/* Hide old rule that overrode lines header font to monospace */
/* ──── Line-table column drag-and-drop (admin) ──── */
.dv-col-drag[draggable="true"]{cursor:grab;position:relative;user-select:none}
.dv-col-drag[draggable="true"]:hover{background:#dbeafe}
body.dark .dv-col-drag[draggable="true"]:hover{background:#1e3a8a}
.dv-col-drag[draggable="true"]:active{cursor:grabbing}
.dv-col-drag.dv-dragging{opacity:.45}
/* Drop indicator — a 3px line on the insertion side */
.dv-col-drag.dv-drop-before{box-shadow:inset 3px 0 0 0 #3b82f6}
.dv-col-drag.dv-drop-after{box-shadow:inset -3px 0 0 0 #3b82f6}
.dv-lineno-col{background:#f1f5f9}
body.dark .dv-lineno-col{background:#1e293b}
.dv-toast{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
background:#dc2626;color:#fff;padding:9px 16px;border-radius:6px;font-size:.84rem;
box-shadow:0 6px 18px rgba(0,0,0,.3);animation:dvFadeIn .15s ease-out;z-index:50}
/* Visibility submodal — prominent save status banners (success / failure).
Sized large enough that the user can't miss them when the save silently
fails (e.g. session expired, role downgraded). */
.dv-vis-status{margin-top:14px;padding:12px 16px;border-radius:6px;font-size:.92rem;
font-weight:600;line-height:1.35;animation:dvFadeIn .15s ease-out}
.dv-vis-status-ok{background:#dcfce7;color:#14532d;border-left:4px solid #16a34a}
.dv-vis-status-err{background:#fee2e2;color:#7f1d1d;border-left:4px solid #dc2626}
body.dark .dv-vis-status-ok{background:#052e16;color:#bbf7d0;border-left-color:#22c55e}
body.dark .dv-vis-status-err{background:#450a0a;color:#fecaca;border-left-color:#ef4444}
/* ─── Doc viewer v3: card restyle (label outside, value as input-like box) ─── */
.doc-viewer-dialog .dv-card{background:transparent;border:none;padding:0;min-height:unset}
.doc-viewer-dialog .dv-card:hover{box-shadow:none}
.doc-viewer-dialog .dv-card-label{font-size:.74rem;color:#475569;text-transform:none;
letter-spacing:0;font-weight:500;margin-bottom:3px;line-height:1.25;white-space:normal}
body.dark .doc-viewer-dialog .dv-card-label{color:#94a3b8}
.doc-viewer-dialog .dv-card-value{background:#fff;border:1px solid #cbd5e1;border-radius:4px;
padding:6px 9px;min-height:32px;font-size:.9rem;color:#0f172a;font-weight:500;
display:flex;align-items:center;justify-content:flex-start;gap:6px;line-height:1.3;
word-break:break-word;transition:border-color .1s}
body.dark .doc-viewer-dialog .dv-card-value{background:#0f172a;border-color:#334155;color:#e2e8f0}
.doc-viewer-dialog .dv-card:hover .dv-card-value{border-color:#94a3b8}
body.dark .doc-viewer-dialog .dv-card:hover .dv-card-value{border-color:#64748b}
/* Numeric values — right-aligned, tabular figures */
.doc-viewer-dialog .dv-card-value.dv-num{justify-content:flex-end;
font-variant-numeric:tabular-nums;font-family:'Consolas','Courier New',monospace;font-size:.88rem}
/* Date values — subtle tint */
.doc-viewer-dialog .dv-card-value.dv-date{font-variant-numeric:tabular-nums;color:#475569}
body.dark .doc-viewer-dialog .dv-card-value.dv-date{color:#cbd5e1}
/* Reference values — slight accent */
.doc-viewer-dialog .dv-card-value.dv-val-ref{background:#f8fafc}
body.dark .doc-viewer-dialog .dv-card-value.dv-val-ref{background:#131a2c}
/* Empty values — muted */
.doc-viewer-dialog .dv-card-value.dv-empty-val{color:#cbd5e1;background:#f8fafc}
body.dark .doc-viewer-dialog .dv-card-value.dv-empty-val{color:#475569;background:#131a2c}
/* Boolean values — compact pill instead of "0"/"1" */
.doc-viewer-dialog .dv-card-value.dv-bool-val{min-height:32px;padding:2px 9px}
.dv-bool{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
border-radius:50%;font-weight:700;font-size:.9rem}
.dv-bool-on{background:#dcfce7;color:#15803d}
.dv-bool-off{background:#f1f5f9;color:#94a3b8}
body.dark .dv-bool-on{background:#14532d;color:#86efac}
body.dark .dv-bool-off{background:#1e293b;color:#475569}
/* Widths got a touch tighter now that we don't pad the card border */
.doc-viewer-dialog .dv-w-s{flex:0 0 160px}
.doc-viewer-dialog .dv-w-m{flex:0 0 240px}
.doc-viewer-dialog .dv-w-l{flex:1 1 340px;max-width:460px}
.doc-viewer-dialog .dv-w-xl{flex:1 1 100%;max-width:none}
/* Gap between cards */
.dv-cards{gap:12px 14px;row-gap:14px}
/* ─── Doc viewer hero strip: doc type · № · дата · фирма ─── */
.dv-hero{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
padding:12px 16px;margin:0 0 14px;border-radius:8px;
background:linear-gradient(95deg,#1e40af 0%,#2563eb 55%,#3b82f6 100%);
color:#fff;border:1px solid #1e3a8a;
box-shadow:0 2px 8px rgba(30,64,175,.12)}
body.dark .dv-hero{background:linear-gradient(95deg,#1e3a8a 0%,#1e40af 55%,#2563eb 100%);
border-color:#3b82f6;box-shadow:0 2px 10px rgba(59,130,246,.18)}
.dv-hero-icon{font-size:1.25rem;filter:grayscale(1) brightness(1.6) contrast(1.1);opacity:.9}
.dv-hero-type{font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:.1px}
.dv-hero-docno{font-size:1rem;font-weight:600;color:#fff;
font-variant-numeric:tabular-nums;background:rgba(255,255,255,.15);
padding:3px 10px;border-radius:12px}
.dv-hero-date{font-size:.92rem;color:rgba(255,255,255,.9);
font-variant-numeric:tabular-nums}
.dv-hero-firm{margin-left:auto;font-size:.88rem;font-weight:600;color:#fff;
background:rgba(255,255,255,.18);padding:4px 12px;border-radius:14px;
max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «Вид учёта» — pill внутри карточки-реквизита «Основное».
Торг=синий, Бух=янтарный, Совместный=фиолетовый. */
.dv-mode-pill{display:inline-block;font-size:.9rem;font-weight:700;
padding:3px 12px;border-radius:12px;line-height:1.3}
.dv-mode-val{display:flex;align-items:center}
.dv-mode-torg{background:#dbeafe;color:#1e3a8a;border:1px solid #93c5fd}
body.dark .dv-mode-torg{background:#1e3a8a;color:#dbeafe;border-color:#3b82f6}
.dv-mode-buh{background:#fef3c7;color:#78350f;border:1px solid #fcd34d}
body.dark .dv-mode-buh{background:#78350f;color:#fef3c7;border-color:#f59e0b}
.dv-mode-joint{background:#ede9fe;color:#4c1d95;border:1px solid #c4b5fd}
body.dark .dv-mode-joint{background:#4c1d95;color:#ede9fe;border-color:#8b5cf6}
.dv-mode-none{background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1}
body.dark .dv-mode-none{background:#334155;color:#e2e8f0;border-color:#64748b}
/* ─── Смысловые секции шапки (Основное / Контрагент / Суммы / …) ─── */
.dv-sec{margin:0 0 14px}
.dv-sec-title{margin:0 0 6px;font-size:.78rem;font-weight:700;
color:#1e40af;text-transform:uppercase;letter-spacing:.5px;
padding:2px 0 4px;border-bottom:1px solid #dbeafe}
body.dark .dv-sec-title{color:#93c5fd;border-bottom-color:#1e3a8a}
/* Символ валюты слева от значения в полях «Валюта / Валюта перевозки» */
.dv-cur-sym{display:inline-block;min-width:1.1em;color:#059669;font-weight:700;
margin-right:2px}
body.dark .dv-cur-sym{color:#34d399}
/* Кликабельная ссылка на документ (поля «Заказ / Заказ2 / ЗаказПерезачета») */
.dv-doc-link{cursor:pointer;text-decoration:underline;
text-decoration-style:dotted;text-decoration-color:#3b82f6;
text-underline-offset:2px}
.dv-doc-link:hover{color:#1e40af;background:#eff6ff}
body.dark .dv-doc-link:hover{color:#93c5fd;background:#1e293b}
.dv-doc-link:focus{outline:2px solid #3b82f6;outline-offset:2px}
/* ─── Doc viewer controls (Скрыть пустые / Компактный вид) ─── */
.dv-controls{display:flex;gap:16px;flex-wrap:wrap;padding:6px 12px;margin:0 0 12px;
background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:.82rem}
body.dark .dv-controls{background:#0f172a;border-color:#334155}
.dv-ctrl{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#334155;user-select:none}
body.dark .dv-ctrl{color:#cbd5e1}
.dv-ctrl input[type=checkbox]{margin:0;cursor:pointer}
/* ─── Doc viewer compact list: label: value pairs in multi-column flow ─── */
.dv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:3px 14px;align-content:start}
.dv-list .dv-row{display:flex;align-items:baseline;gap:6px;padding:3px 0;
border-bottom:1px dotted #e2e8f0;min-width:0}
body.dark .dv-list .dv-row{border-bottom-color:#1e293b}
.dv-list .dv-row-k{flex:0 0 auto;font-size:.78rem;color:#64748b;white-space:nowrap;
max-width:50%;overflow:hidden;text-overflow:ellipsis}
body.dark .dv-list .dv-row-k{color:#94a3b8}
.dv-list .dv-row-k::after{content:':';margin-left:2px;color:#cbd5e1}
body.dark .dv-list .dv-row-k::after{color:#475569}
.dv-list .dv-row-v{flex:1 1 auto;font-size:.85rem;color:#0f172a;font-weight:500;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;min-width:0}
body.dark .dv-list .dv-row-v{color:#e2e8f0}
.dv-list .dv-row-v.dv-num{font-variant-numeric:tabular-nums;font-family:'Consolas','Courier New',monospace}
.dv-list .dv-row-v.dv-date{font-variant-numeric:tabular-nums;color:#475569}
body.dark .dv-list .dv-row-v.dv-date{color:#cbd5e1}
.dv-list .dv-row-v.dv-empty-val{color:#cbd5e1;font-weight:400}
body.dark .dv-list .dv-row-v.dv-empty-val{color:#475569}
.dv-list .dv-row:hover{background:rgba(59,130,246,.05)}
/* Pinned rows — firma/№/date/контрагент: emphasized, span 2 cols on wider screens */
.dv-list .dv-row-pin{grid-column:span 2;padding:5px 8px;background:#fefce8;
border-radius:4px;border-bottom:none;border:1px solid #fde68a}
body.dark .dv-list .dv-row-pin{background:#1f1d12;border-color:#92400e}
.dv-list .dv-row-pin .dv-row-k{font-size:.82rem;color:#713f12;font-weight:600}
body.dark .dv-list .dv-row-pin .dv-row-k{color:#fcd34d}
.dv-list .dv-row-pin .dv-row-v{font-size:.95rem;font-weight:700}
/* Fallback: on very narrow screens pin rows take one col */
@media (max-width:640px){.dv-list .dv-row-pin{grid-column:span 1}}
/* ─── Lines table sort (click header to sort, click № to reset) ─── */
.dv-lines-table th.dv-col-sort{cursor:pointer;user-select:none}
.dv-lines-table th.dv-col-sort:hover{background:#e0e7ff}
body.dark .dv-lines-table th.dv-col-sort:hover{background:#312e81}
.dv-lines-table th.dv-sort-asc,.dv-lines-table th.dv-sort-desc{background:#dbeafe;color:#1e40af}
body.dark .dv-lines-table th.dv-sort-asc,body.dark .dv-lines-table th.dv-sort-desc{background:#1e3a8a;color:#bfdbfe}
.dv-sort-glyph{display:inline-block;margin-left:4px;font-size:.65rem;color:#2563eb;vertical-align:middle}
body.dark .dv-sort-glyph{color:#93c5fd}
.dv-lines-table th.dv-sort-reset{cursor:pointer}
.dv-lines-table th.dv-sort-reset:hover{background:#fef3c7}
body.dark .dv-lines-table th.dv-sort-reset:hover{background:#78350f}
/* ─── Lines table v3: multiline headers, narrow numeric, right-align numbers ─── */
.dv-lines-table th{white-space:normal;word-break:break-word;line-height:1.2;
font-weight:600;font-size:.72rem;text-align:left;vertical-align:bottom;padding:5px 8px;
max-width:180px;min-width:60px}
.dv-lines-table th.dv-col-num{text-align:right;max-width:110px;min-width:62px}
.dv-lines-table th.dv-col-date{text-align:center;max-width:100px}
.dv-lines-table th.dv-lineno-col{max-width:36px;min-width:28px;text-align:right;color:#94a3b8}
.dv-lines-table td.dv-num{text-align:right;font-variant-numeric:tabular-nums;
font-family:'Consolas','Courier New',monospace;font-size:.78rem}
.dv-lines-table td.dv-date{text-align:center;font-variant-numeric:tabular-nums}
.dv-lines-table .dv-empty-cell{color:#cbd5e1}
body.dark .dv-lines-table .dv-empty-cell{color:#475569}
/* ─── Boolean cells in line table — narrow + centered ─── */
.dv-lines-table th.dv-col-bool{text-align:center;max-width:58px;min-width:42px;padding:5px 4px}
.dv-lines-table td.dv-bool-cell{text-align:center;padding:3px 4px}
.dv-lines-table td.dv-bool-cell .dv-bool{width:20px;height:20px;font-size:.82rem}
/* ─── Synthetic computed column (yellow) — explicit exception to the
«documents = native DBF only» rule. Used today only by the «Цена»
column in Калькуляция (DT1365), where 1С itself shows it as a
computed-on-the-fly value (Сумма ÷ Количество). ─── */
.dv-lines-table th.dv-col-synth{background:#fef3c7;color:#78350f;
border-bottom:2px solid #f59e0b}
.dv-lines-table td.dv-cell-synth{background:#fffbeb;color:#78350f;
text-align:right;font-variant-numeric:tabular-nums;
font-family:'Consolas','Courier New',monospace;font-size:.78rem;
font-style:italic}
.dv-synth-mark{font-family:'Cambria Math','STIX Two Math',serif;
color:#92400e;font-weight:700;margin-right:2px;font-style:italic}
body.dark .dv-lines-table th.dv-col-synth{background:#3b2c0a;color:#fbbf24;
border-bottom-color:#d97706}
body.dark .dv-lines-table td.dv-cell-synth{background:#2a210b;color:#fcd34d}
body.dark .dv-synth-mark{color:#fbbf24}
/* ─── Doc viewer redesign 2026-04-25 ─── */
/* 1) Скрыть всё лишнее: дубль-шапку, group titles, «Прочее», старые controls,
SC-бейджи, section h3 («Шапка документа · DH1102.DBF»). */
.doc-viewer-header{display:none}
.doc-viewer-section h3{display:none}
.dv-sec-title{display:none}
.dv-tail{display:none}
.dv-controls{display:none}
.dv-ref{display:none}
.doc-viewer-section{margin-bottom:8px}
.doc-viewer-body{padding:10px 14px}
/* 2) Hero — теперь несёт всё: тип/№/дата/Фирма + pills (Вид торг/Направление/
Валюта) + controls + close. Padding меньше. */
.dv-hero{padding:8px 12px;gap:8px 12px;margin:0 0 8px;align-items:center}
.dv-hero-pill{display:inline-flex;align-items:baseline;gap:5px;
background:rgba(255,255,255,.16);padding:2px 9px;border-radius:11px;
font-size:.82rem;line-height:1.5;color:#fff;white-space:nowrap}
.dv-hero-pill-k{font-size:.66rem;text-transform:uppercase;letter-spacing:.4px;
opacity:.78;font-weight:500}
.dv-hero-pill-v{font-weight:600}
.dv-hero-pill-cur .dv-cur-sym{color:#a7f3d0;font-weight:700}
body.dark .dv-hero-pill-cur .dv-cur-sym{color:#34d399}
/* Actions block (pinned right): controls + close in one neat group. */
.dv-hero-actions{margin-left:auto;display:inline-flex;align-items:center;
gap:6px;flex-wrap:nowrap}
.dv-hero-ctrl{display:inline-flex;align-items:center;gap:3px;cursor:pointer;
user-select:none;font-size:.74rem;color:rgba(255,255,255,.85);
background:rgba(255,255,255,.12);padding:2px 8px;border-radius:10px}
.dv-hero-ctrl:hover{background:rgba(255,255,255,.22);color:#fff}
.dv-hero-ctrl input[type=checkbox]{margin:0;cursor:pointer;
accent-color:#fff;width:11px;height:11px}
.dv-hero .doc-viewer-close{background:rgba(255,255,255,.14);border:none;
color:#fff;font-size:1.15rem;line-height:1;width:26px;height:26px;
border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;
justify-content:center;padding:0}
.dv-hero .doc-viewer-close:hover{background:rgba(220,38,38,.7)}
/* Hero firm pill — overrides inherited margin-left:auto so actions can sit right. */
.dv-hero-firm{margin-left:0}
/* Hero copy-ref button (📋) — match dark hero theme. */
.dv-hero .doc-viewer-copy-ref{border-color:rgba(255,255,255,.4);color:#fff;
background:rgba(255,255,255,.08)}
.dv-hero .doc-viewer-copy-ref:hover{background:rgba(255,255,255,.22);
border-color:rgba(255,255,255,.7)}
/* 📊 — postings (RA12627 register) button — same hero look as copy-ref */
.dv-postings-btn,.dv-subordinates-btn{background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.4);
border-radius:4px;color:#fff;cursor:pointer;font-size:.85rem;line-height:1;
margin-left:6px;padding:3px 7px;vertical-align:middle}
.dv-postings-btn:hover,.dv-subordinates-btn:hover{background:rgba(255,255,255,.22);
border-color:rgba(255,255,255,.7)}
/* 📑 — Подчинённые документы submodal */
.doc-viewer-sub-overlay .doc-viewer-sub-dialog:has(.dv-subordinates-body){
max-width:760px;width:760px}
.dv-subordinates-body{padding:12px 16px}
.dv-sub-route-info{background:#f0f9ff;border:1px solid #bae6fd;border-radius:6px;
padding:10px 14px;margin-bottom:12px;font-size:.85rem;line-height:1.6}
body.dark .dv-sub-route-info{background:#0c4a6e;border-color:#0369a1;color:#e0f2fe}
.dv-sub-route-row{margin:2px 0}
.dv-sub-route-k{display:inline-block;min-width:88px;font-weight:600;color:#475569}
body.dark .dv-sub-route-k{color:#94a3b8}
.dv-sub-src{display:inline-block;font-size:.72rem;padding:1px 6px;border-radius:10px;
background:#e0e7ff;color:#3730a3;margin-left:4px;cursor:help}
.dv-sub-src-1c{background:#dcfce7;color:#166534}
.dv-sub-src-osrm{background:#fef9c3;color:#854d0e}
.dv-sub-src-haver{background:#fee2e2;color:#991b1b}
.dv-sub-note{font-size:.78rem;color:#64748b;margin-bottom:8px}
body.dark .dv-sub-note{color:#94a3b8}
.dv-sub-wrap{overflow:auto;border:1px solid #e2e8f0;border-radius:6px;max-height:60vh}
body.dark .dv-sub-wrap{border-color:#334155}
.dv-sub-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem}
.dv-sub-table thead th{position:sticky;top:0;background:#f8fafc;z-index:1;
border-bottom:1px solid #cbd5e1;padding:6px 10px;text-align:left;font-weight:600;
color:#1e293b}
body.dark .dv-sub-table thead th{background:#0f172a;color:#e2e8f0;border-bottom-color:#334155}
.dv-sub-table tbody td{padding:6px 10px;border-bottom:1px solid #f1f5f9;cursor:pointer}
body.dark .dv-sub-table tbody td{border-bottom-color:#1e293b;color:#cbd5e1}
.dv-sub-table .dv-sub-row:hover td{background:#eff6ff}
body.dark .dv-sub-table .dv-sub-row:hover td{background:#1e3a8a}
.dv-sub-row-unposted td{color:#94a3b8;font-style:italic}
.dv-sub-flag{color:#dc2626;font-size:.85rem}
/* Postings table — wider sub-modal, dense rows like a register report.
2026-05-12: bumped width 1500→1700, max-height 86→94vh; шапка-handle для
перетаскивания (cursor:grab задаётся JS-ом, см. _modalEnableDrag). */
.doc-viewer-sub-overlay .doc-viewer-sub-dialog:has(.dv-postings-body){
max-width:98vw;width:1700px;max-height:94vh}
.doc-viewer-sub-overlay .doc-viewer-sub-dialog:has(.dv-postings-body) .doc-viewer-sub-header{
user-select:none}
.dv-postings-body{padding:10px 14px}
.dv-postings-note{font-size:.78rem;color:#64748b;margin-bottom:6px}
body.dark .dv-postings-note{color:#94a3b8}
.dv-postings-note code{background:#f1f5f9;padding:1px 5px;border-radius:3px;
font-family:'Consolas',monospace;font-size:.76rem;color:#0f172a}
body.dark .dv-postings-note code{background:#1e293b;color:#e2e8f0}
/* Wrap скроллится сам; padding-bottom удерживает горизонтальный
scrollbar НИЖЕ последнего ряда, а не поверх него. overscroll-behavior
останавливает «прокрутку фона» при достижении конца таблицы. */
.dv-postings-wrap{overflow:auto;max-height:82vh;border:1px solid #e2e8f0;
border-radius:6px;padding-bottom:14px;overscroll-behavior:contain;
scrollbar-gutter:stable}
body.dark .dv-postings-wrap{border-color:#334155}
.dv-postings-table{width:100%;border-collapse:separate;border-spacing:0;
font-size:.78rem}
.dv-postings-table thead th{position:sticky;top:0;background:#f8fafc;
z-index:1;border-bottom:1px solid #cbd5e1;padding:5px 8px;text-align:left;
font-weight:600;color:#1e293b;white-space:nowrap}
body.dark .dv-postings-table thead th{background:#0f172a;color:#e2e8f0;
border-bottom-color:#334155}
.dv-postings-table tbody td{padding:3px 8px;border-bottom:1px solid #f1f5f9;
vertical-align:top;white-space:nowrap}
body.dark .dv-postings-table tbody td{border-bottom-color:#1e293b;color:#cbd5e1}
.dv-postings-table tbody tr:hover td{background:#f8fafc}
body.dark .dv-postings-table tbody tr:hover td{background:#1e293b}
.dv-postings-table .dv-postings-ref{color:#1e3a8a;font-weight:500}
body.dark .dv-postings-table .dv-postings-ref{color:#93c5fd}
/* Кликабельные ссылки в таблице движений: ТМЦ — стиль .dv-tmc-cell выше,
а doc/партия — отдельный голубой акцент с пунктирным подчёркиванием. */
.dv-postings-doc-cell{cursor:pointer;color:#0e7490;text-decoration:underline dotted;
text-underline-offset:3px;transition:background .12s}
.dv-postings-doc-cell:hover{background:rgba(34,211,238,.10);color:#0891b2}
body.dark .dv-postings-doc-cell{color:#67e8f9}
body.dark .dv-postings-doc-cell:hover{background:rgba(34,211,238,.18);color:#22d3ee}
.dv-postings-table .dv-debkred-plus{color:#16a34a;font-weight:700;text-align:center}
.dv-postings-table .dv-debkred-minus{color:#dc2626;font-weight:700;text-align:center}
body.dark .dv-postings-table .dv-debkred-plus{color:#4ade80}
body.dark .dv-postings-table .dv-debkred-minus{color:#f87171}
/* 3) Hero subline: основания + комментарии (поднятые из «диспутов»). */
.dv-hero-reasons{margin:-4px 0 10px;padding:6px 10px;background:#fefce8;
border:1px solid #fde68a;border-radius:6px;display:flex;flex-direction:column;
gap:2px}
body.dark .dv-hero-reasons{background:#1f1d12;border-color:#92400e}
.dv-hero-reason{font-size:.84rem;color:#1f2937;line-height:1.35}
body.dark .dv-hero-reason{color:#e5e7eb}
.dv-hero-reason-k{color:#a16207;font-weight:600;font-size:.74rem;
text-transform:uppercase;letter-spacing:.3px;margin-right:4px}
body.dark .dv-hero-reason-k{color:#fcd34d}
.dv-hero-reason-v{font-weight:500;white-space:pre-wrap}
/* 4) Lines counter (плотный, без полноценной h3 «Табличная часть»). */
.dv-lines-note{font-size:.7rem;color:#94a3b8;margin:0 0 4px;text-align:right;
font-style:italic}
.dv-lines-hidden{color:#64748b;font-style:italic;margin-left:4px;font-weight:500}
body.dark .dv-lines-hidden{color:#94a3b8}
/* 5) Уплотнение: cards / list rows */
.dv-cards{gap:6px 8px;row-gap:6px}
.doc-viewer-dialog .dv-card{padding:4px 8px 3px;min-height:36px}
.doc-viewer-dialog .dv-card-label{font-size:.7rem;letter-spacing:.2px}
.doc-viewer-dialog .dv-card-value{font-size:.86rem;padding:3px 7px;min-height:24px}
.dv-list{gap:1px 14px}
.dv-list .dv-row{padding:2px 0}
.dv-list .dv-row-pin{background:transparent;border:none;border-radius:0;
padding:2px 0;grid-column:auto}
.dv-list .dv-row-pin .dv-row-k{color:#64748b;font-size:.78rem;font-weight:500}
.dv-list .dv-row-pin .dv-row-v{font-size:.85rem;font-weight:500}
body.dark .dv-list .dv-row-pin{background:transparent;border:none}
body.dark .dv-list .dv-row-pin .dv-row-k{color:#94a3b8}
/* ─── Doc viewer 1C-style compact: section frames + field chips ───── */
/* Каждая смысловая секция шапки — тонкий fieldset-фрейм с маленьким
legend'ом (иконка + Russian-tag) в верхнем-левом углу. Внутри —
chip'ы [иконка-секции][подпись:][значение], плавно переносятся
(flex-wrap), как поля в плотной форме 1С. */
.dv-section-frame{
border:1px solid #e2e8f0;border-radius:6px;
padding:4px 8px 6px;margin:0 0 6px;
background:#fff;min-width:0;
}
body.dark .dv-section-frame{background:#0b1220;border-color:#1e293b}
.dv-section-tag{
padding:0 6px;font-size:.66rem;color:#64748b;
text-transform:uppercase;letter-spacing:.5px;line-height:1;font-weight:600;
display:inline-flex;align-items:center;gap:4px;
}
body.dark .dv-section-tag{color:#94a3b8}
.dv-section-tag-icon{font-size:.78rem;opacity:.85}
.dv-section-tag-label{}
/* Per-section subtle tints — like 1C's coloured group boxes (Поставщик,
Перевозка, и т.д.). Light enough not to clash with the white chips. */
.dv-section-frame[data-section="main"] {background:#f8fafc;border-color:#cbd5e1}
.dv-section-frame[data-section="partner"]{background:#fefce8;border-color:#fde68a}
.dv-section-frame[data-section="dates"] {background:#f5f3ff;border-color:#ddd6fe}
.dv-section-frame[data-section="money"] {background:#ecfdf5;border-color:#a7f3d0}
.dv-section-frame[data-section="stock"] {background:#eff6ff;border-color:#bfdbfe}
.dv-section-frame[data-section="account"]{background:#fff7ed;border-color:#fed7aa}
.dv-section-frame[data-section="dispute"]{background:#fef2f2;border-color:#fecaca}
.dv-section-frame[data-section="service"]{background:#f1f5f9;border-color:#e2e8f0}
body.dark .dv-section-frame[data-section="main"] {background:#0f172a;border-color:#334155}
body.dark .dv-section-frame[data-section="partner"]{background:#1f1d12;border-color:#92400e}
body.dark .dv-section-frame[data-section="dates"] {background:#1e1b3a;border-color:#4c1d95}
body.dark .dv-section-frame[data-section="money"] {background:#0f2620;border-color:#065f46}
body.dark .dv-section-frame[data-section="stock"] {background:#0b1d2e;border-color:#1e3a8a}
body.dark .dv-section-frame[data-section="account"]{background:#2a1505;border-color:#7c2d12}
body.dark .dv-section-frame[data-section="dispute"]{background:#2a0a0a;border-color:#7f1d1d}
body.dark .dv-section-frame[data-section="service"]{background:#0f172a;border-color:#1e293b}
.dv-section-frame[data-section="partner"] .dv-section-tag{color:#a16207}
.dv-section-frame[data-section="dates"] .dv-section-tag{color:#5b21b6}
.dv-section-frame[data-section="money"] .dv-section-tag{color:#047857}
.dv-section-frame[data-section="stock"] .dv-section-tag{color:#1d4ed8}
.dv-section-frame[data-section="account"] .dv-section-tag{color:#9a3412}
.dv-section-frame[data-section="dispute"] .dv-section-tag{color:#b91c1c}
body.dark .dv-section-frame[data-section="partner"] .dv-section-tag{color:#fcd34d}
body.dark .dv-section-frame[data-section="dates"] .dv-section-tag{color:#c4b5fd}
body.dark .dv-section-frame[data-section="money"] .dv-section-tag{color:#6ee7b7}
body.dark .dv-section-frame[data-section="stock"] .dv-section-tag{color:#93c5fd}
body.dark .dv-section-frame[data-section="account"] .dv-section-tag{color:#fdba74}
body.dark .dv-section-frame[data-section="dispute"] .dv-section-tag{color:#fca5a5}
/* Chip row — flex-wrap, мелкий gap. */
.dv-chip-row{display:flex;flex-wrap:wrap;gap:3px 4px;align-items:stretch}
/* Chip — [icon][label:][value]. White background, тонкая рамка, маленький
радиус. Hover — синяя рамка как фокус-input в 1С. */
.dv-chip{
display:inline-flex;align-items:center;gap:3px;
background:#fff;border:1px solid #cbd5e1;border-radius:3px;
padding:1px 6px 1px 4px;height:24px;font-size:.78rem;line-height:1;
max-width:100%;min-width:0;
transition:border-color .1s, box-shadow .1s;
}
body.dark .dv-chip{background:#1e293b;border-color:#334155}
.dv-chip:hover{border-color:#3b82f6;box-shadow:0 0 0 1px rgba(59,130,246,.18)}
body.dark .dv-chip:hover{border-color:#60a5fa;box-shadow:0 0 0 1px rgba(96,165,250,.22)}
.dv-chip-icon{
font-size:.7rem;color:#94a3b8;line-height:1;flex:0 0 auto;
width:13px;text-align:center;opacity:.75;
}
body.dark .dv-chip-icon{color:#64748b}
.dv-chip-k{
color:#64748b;font-size:.7rem;font-weight:500;
white-space:nowrap;flex:0 0 auto;
max-width:140px;overflow:hidden;text-overflow:ellipsis;
}
body.dark .dv-chip-k{color:#94a3b8}
.dv-chip-k::after{content:':';opacity:.55;margin-right:1px}
.dv-chip-v{
color:#0f172a;font-weight:500;font-size:.8rem;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
min-width:0;flex:0 1 auto;
}
body.dark .dv-chip-v{color:#e2e8f0}
.dv-chip-v.dv-num{
font-variant-numeric:tabular-nums;
font-family:'Consolas','Courier New',monospace;font-size:.78rem;
}
.dv-chip-v.dv-date{font-variant-numeric:tabular-nums;color:#475569}
body.dark .dv-chip-v.dv-date{color:#cbd5e1}
.dv-chip-v.dv-empty-val{color:#cbd5e1;font-weight:400}
body.dark .dv-chip-v.dv-empty-val{color:#475569}
.dv-chip-v.dv-bool-val .dv-bool{width:16px;height:16px;font-size:.72rem}
/* Doc-link chip — кликабельное значение (ссылка на другой документ). */
.dv-chip-v.dv-doc-link{
cursor:pointer;color:#1e40af;
text-decoration:underline;text-decoration-style:dotted;
text-decoration-color:#3b82f6;text-underline-offset:2px;
}
.dv-chip-v.dv-doc-link:hover{background:#eff6ff;color:#1e3a8a}
body.dark .dv-chip-v.dv-doc-link{color:#93c5fd}
body.dark .dv-chip-v.dv-doc-link:hover{background:#1e293b;color:#dbeafe}
/* Width hints — compact-mode max-width per type for value cell. Override
the card-style fixed widths (.dv-w-* { flex:0 0 N px }) — chips size to
their content, only the inner value cell is capped + ellipsised. */
.dv-chip.dv-w-s,
.dv-chip.dv-w-m,
.dv-chip.dv-w-l{flex:0 0 auto;max-width:100%}
.dv-chip.dv-w-s .dv-chip-v{max-width:130px}
.dv-chip.dv-w-m .dv-chip-v{max-width:200px}
.dv-chip.dv-w-l .dv-chip-v{max-width:320px}
.dv-chip.dv-w-xl{flex:0 0 auto}
.dv-chip.dv-w-xl .dv-chip-v{max-width:480px}
/* Currency-symbol chip variant — green ₴ symbol stays prominent. */
.dv-chip-v .dv-cur-sym{margin-right:2px}
/* ─── PP cache banner + refresh progress ───────────────────────────── */
.pp-cache-bar{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
background:#1e293b;border:1px solid #334155;border-radius:6px;
padding:8px 14px;margin-bottom:8px;font-size:.8rem;color:#cbd5e1;
}
.pp-cache-bar .pp-cache-info{flex:1 1 auto}
.pp-cache-bar .pp-cache-actions{flex:0 0 auto}
.pp-cache-bar .pp-dim{opacity:.5;padding:0 4px}
.pp-cache-bar .pp-err{color:#f87171;font-weight:500}
.pp-cache-bar .pp-ok{color:#34d399}
.pp-cache-bar .btn-primary{
background:#2563eb;border:0;color:#fff;padding:6px 14px;
border-radius:4px;font-size:.82rem;cursor:pointer;
}
.pp-cache-bar .btn-primary:disabled{opacity:.55;cursor:progress}
.pp-cache-bar .btn-primary:hover:not(:disabled){background:#1d4ed8}
.pp-cache-bar .pp-progress{
width:100%;font-size:.78rem;
display:flex;flex-direction:column;gap:8px;
margin-top:4px;padding-top:8px;border-top:1px solid #1e293b;
}
/* ─── Stale-data alert (failed background refresh) ────────────────── */
/* Shown above PP / MP / Settings cache cards when the last refresh run
failed and the user is now looking at data from the previous good run.
Loud red so the user does NOT silently consume stale numbers.
Uses solid background with high-contrast text so it reads equally well
on the light Settings page and the dark PP/MP pages. */
.stale-alert{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
background:#fee2e2;
border:1px solid #fca5a5;
border-left:5px solid #dc2626;
border-radius:6px;
padding:12px 16px;margin-bottom:10px;
color:#7f1d1d;font-size:.85rem;line-height:1.4;
box-shadow:0 1px 4px rgba(220,38,38,0.18);
}
.stale-alert__icon{font-size:1.25rem;line-height:1;flex:0 0 auto}
.stale-alert__body{flex:1 1 auto;min-width:240px}
.stale-alert__title{color:#7f1d1d;font-weight:700;margin-bottom:3px;font-size:.9rem}
.stale-alert__meta{color:#991b1b;font-size:.76rem;opacity:.92}
.stale-alert__btn{
flex:0 0 auto;
background:#dc2626;border:0;color:#fff;
padding:8px 16px;border-radius:4px;font-size:.82rem;font-weight:600;
cursor:pointer;letter-spacing:.01em;
box-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.stale-alert__btn:hover:not(:disabled){background:#b91c1c}
.stale-alert__btn:disabled{opacity:.6;cursor:progress}
/* Compact variant when used inside small cards (Settings) */
.stale-alert--compact{padding:9px 12px;margin:8px 0 4px;font-size:.78rem;gap:10px}
.stale-alert--compact .stale-alert__title{font-size:.82rem}
.stale-alert--compact .stale-alert__btn{padding:6px 12px;font-size:.76rem}
/* ── Phase pipeline ──────────────────────────────────────────────── */
.pp-pipe{display:flex;align-items:center;flex-wrap:wrap;gap:2px;font-size:.7rem}
.pp-pipe-chip{
display:inline-flex;align-items:center;gap:4px;
padding:3px 8px;border-radius:11px;
border:1px solid transparent;line-height:1;
transition:background .25s,color .25s,border-color .25s;
}
.pp-pipe-chip .pp-pipe-icon{font-size:.8rem;line-height:1}
.pp-pipe-chip .pp-pipe-label{white-space:nowrap}
.pp-pipe-chip.done{background:#064e3b;color:#6ee7b7;border-color:#065f46}
.pp-pipe-chip.active{
background:#1e3a8a;color:#bfdbfe;border-color:#3b82f6;
box-shadow:0 0 0 2px rgba(59,130,246,.25);
font-weight:600;
}
.pp-pipe-chip.pending{background:transparent;color:#475569;border-color:#1e293b}
.pp-pipe-sep{
flex:0 0 12px;height:2px;background:#1e293b;border-radius:1px;
margin:0 2px;transition:background .25s;
}
.pp-pipe-sep.done{background:#065f46}
/* ── Big phase header ────────────────────────────────────────────── */
.pp-phase-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
flex-wrap:wrap;
}
.pp-phase-head-left{display:flex;align-items:center;gap:8px;min-width:0}
.pp-phase-head-right{display:flex;align-items:baseline;gap:10px}
.pp-phase-icon{font-size:1.05rem;line-height:1}
.pp-phase-name{font-size:.95rem;font-weight:700;color:#e2e8f0;letter-spacing:.01em}
.pp-phase-count{
font-variant-numeric:tabular-nums;color:#cbd5e1;
font-size:.85rem;font-weight:600;
}
.pp-phase-pct{
font-variant-numeric:tabular-nums;font-weight:800;font-size:1.1rem;
color:#60a5fa;letter-spacing:.01em;
}
/* ── Animated spinner (CSS-only) ─────────────────────────────────── */
.pp-spinner{
display:inline-block;width:14px;height:14px;
border:2px solid #1e40af;border-top-color:#60a5fa;border-radius:50%;
animation:pp-spin .9s linear infinite;
}
@keyframes pp-spin{to{transform:rotate(360deg)}}
/* ── Big progress bar ────────────────────────────────────────────── */
.pp-bar{width:100%;height:6px;background:#0f172a;border-radius:3px;overflow:hidden}
.pp-bar-big{
height:14px;border-radius:7px;position:relative;
background:#0b1220;box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.pp-bar-fill{
height:100%;border-radius:inherit;
background:linear-gradient(90deg,#2563eb,#60a5fa);
transition:width .4s ease;
position:relative;overflow:hidden;
}
/* Animated sheen — shows the bar is alive even when pct doesn't change */
.pp-bar-big .pp-bar-fill::after{
content:'';position:absolute;inset:0;
background:repeating-linear-gradient(
-45deg,
rgba(255,255,255,.14) 0 12px,
rgba(255,255,255,0) 12px 24px
);
animation:pp-barber 1s linear infinite;
}
@keyframes pp-barber{from{background-position:0 0}to{background-position:34px 0}}
/* Indeterminate: red-herring 100% bar, but pulsing so user sees it's live */
.pp-bar-big.indeterminate .pp-bar-fill{
background:linear-gradient(90deg,#1e40af,#3b82f6,#1e40af);
background-size:200% 100%;
animation:pp-indeterm 2s ease-in-out infinite;
}
@keyframes pp-indeterm{
0%{background-position:0% 0}
50%{background-position:100% 0}
100%{background-position:0% 0}
}
/* ── Time line ───────────────────────────────────────────────────── */
.pp-time-line{
display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;
font-size:.76rem;color:#cbd5e1;font-variant-numeric:tabular-nums;
}
.pp-time-line b{color:#e2e8f0}
.pp-time-lbl{color:#64748b}
.pp-time-dim{color:#64748b}
.pp-time-dim b{color:#94a3b8;font-weight:500}
/* ── Sub-stage label (inside materials_list) ─────────────────────── */
.pp-substage{
font-size:.78rem;color:#cbd5e1;
background:#0b1220;border-left:3px solid #3b82f6;
padding:5px 9px;border-radius:0 4px 4px 0;
margin-top:-2px;
}
.pp-substage b{color:#e2e8f0;font-weight:600}
.pp-substage-arrow{color:#3b82f6;margin-right:2px}
.pp-substage-count{color:#94a3b8;font-variant-numeric:tabular-nums}
.pp-substage-eta{color:#94a3b8;font-variant-numeric:tabular-nums}
/* ── Sidebar pill sub-stage row ──────────────────────────────────── */
.gri-sub{
font-size:.62rem;color:#94a3b8;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
line-height:1.2;
}
/* ── Completed-phase timings (muted strip) ───────────────────────── */
.pp-phase-timings{
font-size:.7rem;color:#64748b;line-height:1.5;
padding-top:4px;border-top:1px dashed #1e293b;
}
.pp-phase-timings b{color:#94a3b8;font-variant-numeric:tabular-nums}
.pp-phase-timings .pp-phase-timing.pp-active{color:#60a5fa}
.pp-phase-timings .pp-phase-timing.pp-active b{color:#bfdbfe}
/* ─── Per-product refresh bar inside detail view ─────────────────── */
.pp-detail-refresh-bar{display:flex;align-items:center;gap:10px;margin-left:auto}
.pp-detail-refresh-bar .btn{font-size:.78rem;padding:5px 12px}
.pp-detail-refresh-bar .pp-built-at{font-size:.72rem;color:#94a3b8}
.pp-timings{
margin-top:8px;background:#0b1324;border:1px solid #1e293b;border-radius:6px;
padding:8px 10px;font-size:.72rem;color:#cbd5e1;
display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 14px;
}
.pp-timings b{color:#e2e8f0;margin-right:4px}
.pp-timings .pp-slow{color:#fbbf24}
.pp-timings .pp-very-slow{color:#f87171;font-weight:600}
/* ─── Global refresh indicator (lives in sidebar, every page) ──────── */
#globalRefreshIndicator{
margin:8px 10px 4px;
}
.gri-pill{
background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);
border:1px solid #1e3a8a;border-radius:8px;
padding:7px 9px;
color:#e2e8f0;font-size:.7rem;
box-shadow:0 0 0 1px rgba(59,130,246,.18);
display:flex;flex-direction:column;gap:5px;
font-family:inherit;
animation:gri-slidein .3s ease-out;
transition:border-color .2s ease, box-shadow .2s ease;
}
.gri-pill:hover{
border-color:#3b82f6;
box-shadow:0 0 0 1px rgba(59,130,246,.4);
}
@keyframes gri-slidein{
from{transform:translateX(-12px);opacity:0}
to{transform:translateX(0);opacity:1}
}
.gri-row1{display:flex;align-items:center;gap:5px;min-width:0}
.gri-icon{font-size:.85rem;line-height:1;flex-shrink:0}
.gri-lbl{
font-weight:700;color:#e2e8f0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
min-width:0;flex:1;font-size:.72rem;
}
.gri-step{
font-size:.6rem;color:#94a3b8;font-weight:500;flex-shrink:0;
background:#1e293b;padding:1px 5px;border-radius:6px;
font-variant-numeric:tabular-nums;
}
.gri-pct{
font-variant-numeric:tabular-nums;font-weight:800;
font-size:.78rem;color:#60a5fa;flex-shrink:0;
}
.gri-bar{
width:100%;height:4px;background:#0b1220;border-radius:2px;overflow:hidden;
box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
.gri-bar-fill{
height:100%;border-radius:inherit;
background:linear-gradient(90deg,#2563eb,#60a5fa);
transition:width .6s ease;position:relative;overflow:hidden;
}
.gri-bar.indeterminate .gri-bar-fill{
background:linear-gradient(90deg,#1e40af,#3b82f6,#1e40af);
background-size:200% 100%;
animation:pp-indeterm 2.4s ease-in-out infinite;
}
.gri-row3{
display:flex;align-items:baseline;justify-content:space-between;
gap:6px;font-size:.66rem;color:#94a3b8;
font-variant-numeric:tabular-nums;
}
.gri-count{color:#cbd5e1;font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gri-tm{color:#94a3b8;flex-shrink:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Completion variants */
.gri-ok{
background:#064e3b;border-color:#10b981;color:#a7f3d0;
font-weight:600;text-align:center;padding:9px 10px;font-size:.72rem;
}
.gri-err{
background:#7f1d1d;border-color:#ef4444;color:#fca5a5;
font-weight:600;text-align:center;padding:9px 10px;font-size:.72rem;
}
/* Sidebar collapsed state — shrink to icon-only pill */
.sidebar.collapsed #globalRefreshIndicator{margin:8px 6px}
.sidebar.collapsed .gri-pill{padding:6px;align-items:center}
.sidebar.collapsed .gri-lbl,
.sidebar.collapsed .gri-step,
.sidebar.collapsed .gri-row3{display:none}
.sidebar.collapsed .gri-row1{justify-content:center;gap:3px}
/* ─── BOM table row hover — подсветка всей строки при наведении ──── */
/* Lights the entire row (material name → supplier date) so eye can
follow start/end of a single record. Keeps the amber supplier-block
tint by compositing with a translucent highlight. */
.pp-bom-item > td,
.pp-tree-row > td{
transition:background-color .08s linear;
}
.pp-bom-item:hover > td,
.pp-tree-row:hover > td{
/* !important needed because supplier cells use inline background
(amber tint) and inline styles outrank any class selector. */
background-color:rgba(96,165,250,0.11) !important;
box-shadow:inset 0 1px 0 rgba(96,165,250,0.22),
inset 0 -1px 0 rgba(96,165,250,0.22);
}
/* ═══════════════════════════════════════════════════════════════════
PP-TREE polish (build #10) — каретки 24×24, вертикальные линии,
сворачиваемые группы, banner-алерт, breakdown-каретка на цене
═══════════════════════════════════════════════════════════════════ */
/* Универсальная крупная каретка 24×24 — заменяет inline 14/16/18px */
.pp-caret-lg{
display:inline-block; width:24px; height:24px; line-height:22px;
font-size:1.05rem; font-weight:800; text-align:center; cursor:pointer;
border-radius:4px; vertical-align:middle; margin-right:6px;
transition:background .12s, transform .12s;
user-select:none;
}
.pp-caret-lg:hover{ filter:brightness(1.3); transform:scale(1.08); }
/* Цвет = «цвет строки» (поведенчески: класс с цветом ставится на сам caret) */
.pp-caret-lg.c-cyan{ color:#22d3ee; background:rgba(34,211,238,0.10); border:1px solid rgba(34,211,238,0.4); }
.pp-caret-lg.c-green{ color:#4ade80; background:rgba(74,222,128,0.10); border:1px solid rgba(74,222,128,0.4); }
.pp-caret-lg.c-amber{ color:#fbbf24; background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.45); }
.pp-caret-lg.c-violet{ color:#a78bfa; background:rgba(167,139,250,0.10); border:1px solid rgba(167,139,250,0.4); }
.pp-caret-lg.c-slate{ color:#94a3b8; background:rgba(148,163,184,0.10); border:1px solid rgba(148,163,184,0.35); }
/* Tree-view: вертикальные линии связи parent→child (file-tree style) */
.pp-tree-indent{
display:inline-flex; align-items:center; vertical-align:middle;
}
.pp-tree-indent .pp-tline{
display:inline-block; width:18px; height:24px; position:relative;
}
.pp-tree-indent .pp-tline.pp-tline-pipe::before{
content:""; position:absolute; left:8px; top:0; bottom:0;
border-left:1px solid rgba(148,163,184,0.30);
}
.pp-tree-indent .pp-tline.pp-tline-elbow::before{
content:""; position:absolute; left:8px; top:0; height:12px;
border-left:1px solid rgba(148,163,184,0.30);
}
.pp-tree-indent .pp-tline.pp-tline-elbow::after{
content:""; position:absolute; left:8px; top:12px; right:2px;
border-top:1px solid rgba(148,163,184,0.30);
}
.pp-tree-indent .pp-tline.pp-tline-tee::before{
content:""; position:absolute; left:8px; top:0; bottom:0;
border-left:1px solid rgba(148,163,184,0.30);
}
.pp-tree-indent .pp-tline.pp-tline-tee::after{
content:""; position:absolute; left:8px; top:12px; right:2px;
border-top:1px solid rgba(148,163,184,0.30);
}
/* Сворачиваемая группа flat-view */
.pp-bom-hdr{ user-select:none; }
.pp-bom-hdr:hover{ filter:brightness(1.15); }
.pp-bom-caret{
display:inline-block; width:18px; text-align:center;
font-size:.85rem; transition:transform .15s ease;
color:rgba(203,213,225,0.9);
}
tr.pp-group-collapsed + tr,
tr.pp-group-collapsed ~ tr.pp-bom-item[data-group="mat"],
tr.pp-group-collapsed ~ tr.pp-bom-item[data-group="exp"]{
/* реальное скрытие через JS data-collapsed-group атрибут на tbody */
}
tbody[data-collapsed-mat="1"] .pp-bom-item[data-group="mat"],
tbody[data-collapsed-mat="1"] .pp-bom-item[data-group="mat"] + tr.pp-flat-partia,
tbody[data-collapsed-exp="1"] .pp-bom-item[data-group="exp"]{ display:none; }
/* Banner-алерт алгоритмической ошибки decomposition */
.pp-alert-banner{
background:rgba(239,68,68,0.16);
border:2px solid #ef4444;
color:#fecaca;
padding:12px 16px;
margin:8px 0 12px;
border-radius:8px;
font-size:.86rem; font-weight:600;
display:flex; align-items:flex-start; gap:10px;
box-shadow:0 2px 8px rgba(239,68,68,0.20);
}
.pp-alert-banner .pp-alert-icon{ font-size:1.4rem; line-height:1; }
.pp-alert-banner .pp-alert-body{ flex:1; }
.pp-alert-banner .pp-alert-title{ color:#fca5a5; font-size:.95rem; margin-bottom:4px; }
.pp-alert-banner .pp-alert-detail{ color:#fcd34d; font-weight:400; font-size:.8rem; }
/* Hover-popover на BOM-цене (build #11) — раскрывает источники цены при наведении */
.pp-price-host{
position:relative;
cursor:pointer;
text-decoration:underline dotted #475569;
}
.pp-price-host .pp-price-pop{
display:none;
position:absolute;
right:0; top:calc(100% + 6px);
z-index:9999;
min-width:380px; max-width:520px;
padding:8px 10px;
background:#0f172a;
border:1px solid rgba(251,191,36,0.5);
border-radius:6px;
box-shadow:0 6px 20px rgba(0,0,0,0.5);
font-size:.74rem;
color:#cbd5e1;
text-align:left;
text-decoration:none;
white-space:normal;
line-height:1.5;
font-weight:400;
pointer-events:none;
}
.pp-price-host:hover .pp-price-pop{ display:block; }
.pp-price-pop .pp-pop-row{
display:grid;
grid-template-columns:130px 1fr auto;
gap:8px;
padding:4px 4px;
border-bottom:1px dashed rgba(148,163,184,0.15);
align-items:baseline;
}
.pp-price-pop .pp-pop-row:last-of-type{ border-bottom:none; }
.pp-price-pop .pp-pop-row.pp-pop-win{
background:rgba(251,191,36,0.10);
color:#fde68a;
font-weight:600;
border-radius:3px;
}
.pp-price-pop .pp-pop-lbl{ color:#94a3b8; font-size:.72rem; white-space:nowrap; }
.pp-price-pop .pp-pop-row.pp-pop-win .pp-pop-lbl{ color:#fcd34d; }
.pp-price-pop .pp-pop-meta{ color:#94a3b8; font-size:.7rem; font-style:italic; }
.pp-price-pop .pp-pop-val{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pp-price-pop .pp-pop-note{
display:block;
margin-top:6px;
padding-top:6px;
border-top:1px solid rgba(148,163,184,0.20);
color:#94a3b8;
font-size:.7rem;
font-style:italic;
}
/* ═══ Refresh button (build #16) — материальная иконка + spin при загрузке ═══ */
@keyframes pp-spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.pp-refresh-btn{
padding:6px 10px !important;
line-height:1 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
.pp-refresh-btn:hover{ background:rgba(34,211,238,0.10) !important; }
.pp-refresh-btn:disabled{ opacity:0.7; cursor:wait !important; }
.pp-refresh-btn .material-icons-round{ display:inline-block; transition:transform .15s ease; }
.pp-refresh-btn:hover .material-icons-round{ transform:rotate(60deg); color:#22d3ee; }
/* ──── TMC Card modal — модалка-в-модалке поверх doc-viewer ──── */
.dv-tmc-cell{cursor:pointer;color:#1d4ed8;text-decoration:underline dotted;
text-underline-offset:3px;transition:background .12s}
.dv-tmc-cell:hover{background:rgba(34,211,238,.10);color:#0e7490}
body.dark .dv-tmc-cell{color:#7dd3fc}
body.dark .dv-tmc-cell:hover{background:rgba(34,211,238,.18);color:#22d3ee}
.tmc-card-overlay{position:fixed;inset:0;background:rgba(2,6,23,.78);
z-index:10100;display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(4px);animation:dvFadeIn .15s ease-out}
.tmc-card-dialog{background:#fff;color:#0f172a;width:min(1480px,96vw);
max-height:92vh;border-radius:12px;
box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(99,102,241,.15);
display:flex;flex-direction:column;overflow:hidden}
/* Canon 2026-05-14: расширили с 880px → 1480px чтобы вместить таблицу
per-Калькуляция аналитики (14 колонок: Партия/Калькуляция, Доля, Кво,
Σ Прод., Цена/ед, Σ Себест., Себест./ед, Σ Доход, Доход/ед, Доходн.%,
Сырьё/ед, Σ Сырьё, Осн. сырьё). При 880px горизонтальный скролл. */
body.dark .tmc-card-dialog{background:#0b1220;color:#e2e8f0;
box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 0 1px rgba(99,102,241,.30)}
.tmc-card-header{padding:14px 18px;border-bottom:1px solid #e2e8f0;
background:linear-gradient(180deg,#eff6ff 0%,#f8fafc 100%)}
body.dark .tmc-card-header{border-bottom-color:#1e293b;
background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%)}
.tmc-card-title-row{display:flex;align-items:flex-start;gap:14px}
.tmc-card-icon{font-size:1.8rem;line-height:1;flex:0 0 auto}
.tmc-card-titles{flex:1;min-width:0}
.tmc-card-title{font-size:1.05rem;font-weight:700;color:#1e3a8a;
line-height:1.25;margin-bottom:4px;word-wrap:break-word}
body.dark .tmc-card-title{color:#bfdbfe}
.tmc-card-subtitle{font-size:.78rem;color:#64748b;display:flex;
align-items:center;gap:4px;flex-wrap:wrap}
body.dark .tmc-card-subtitle{color:#94a3b8}
.tmc-card-mode-badge{display:inline-block;padding:2px 8px;border-radius:10px;
font-size:.72rem;font-weight:600;letter-spacing:.02em}
.tmc-mode-purchase{background:#dbeafe;color:#1e40af}
.tmc-mode-sales{background:#fee2e2;color:#991b1b}
.tmc-mode-calc{background:#fef3c7;color:#92400e}
.tmc-mode-unified{background:#e0e7ff;color:#3730a3}
body.dark .tmc-mode-purchase{background:#1e3a8a;color:#bfdbfe}
body.dark .tmc-mode-sales{background:#7f1d1d;color:#fecaca}
body.dark .tmc-mode-calc{background:#78350f;color:#fde68a}
body.dark .tmc-mode-unified{background:#3730a3;color:#c7d2fe}
.tmc-card-close{background:transparent;border:0;color:#64748b;
font-size:1.6rem;line-height:1;cursor:pointer;width:32px;height:32px;
border-radius:6px;flex:0 0 auto;transition:background .12s,color .12s}
.tmc-card-close:hover{background:#fee2e2;color:#dc2626}
body.dark .tmc-card-close:hover{background:#7f1d1d;color:#fecaca}
.tmc-card-body{padding:14px 18px;overflow:auto;flex:1;min-height:200px;
display:flex;flex-direction:column;gap:14px}
.tmc-card-loading{padding:40px 0;text-align:center;color:#64748b;font-size:.9rem}
.tmc-card-empty{padding:30px 20px;text-align:center;color:#64748b;
font-size:.88rem;line-height:1.5}
.tmc-card-error{padding:14px 18px;background:#fee2e2;color:#991b1b;
border-radius:8px;font-size:.86rem;border-left:3px solid #dc2626}
body.dark .tmc-card-error{background:#450a0a;color:#fecaca;border-left-color:#dc2626}
.tmc-card-idline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:6px 10px;background:#f8fafc;border-radius:6px;font-size:.78rem}
body.dark .tmc-card-idline{background:#0f172a}
.tmc-vidtmc{font-weight:600;color:#1e40af;letter-spacing:.02em}
body.dark .tmc-vidtmc{color:#93c5fd}
.tmc-code{color:#64748b;font-family:'Consolas',monospace;font-size:.74rem}
.tmc-flags{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.tmc-flag{display:inline-block;padding:1px 7px;border-radius:8px;
font-size:.68rem;font-weight:600}
.tmc-flag-sales{background:#fee2e2;color:#991b1b}
.tmc-flag-calc{background:#fef3c7;color:#92400e}
.tmc-flag-mat{background:#dcfce7;color:#166534}
body.dark .tmc-flag-sales{background:#7f1d1d;color:#fecaca}
body.dark .tmc-flag-calc{background:#78350f;color:#fde68a}
body.dark .tmc-flag-mat{background:#14532d;color:#bbf7d0}
.tmc-section{display:flex;flex-direction:column;gap:8px}
.tmc-section-title{font-size:.82rem;font-weight:700;color:#1e3a8a;
margin:0;letter-spacing:.01em}
body.dark .tmc-section-title{color:#93c5fd}
.tmc-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:8px}
.tmc-kpi{background:#f8fafc;padding:8px 10px;border-radius:6px;
border-left:3px solid #cbd5e1;display:flex;flex-direction:column;gap:2px}
body.dark .tmc-kpi{background:#0f172a;border-left-color:#334155}
.tmc-kpi-label{font-size:.7rem;color:#64748b;font-weight:600;
text-transform:uppercase;letter-spacing:.04em}
.tmc-kpi-value{font-size:1.05rem;font-weight:700;color:#0f172a;
font-variant-numeric:tabular-nums}
body.dark .tmc-kpi-value{color:#e2e8f0}
.tmc-kpi-hint{font-size:.66rem;color:#94a3b8;font-style:italic}
.tmc-c-sales{border-left-color:#ef4444}
.tmc-c-sales .tmc-kpi-value{color:#b91c1c}
body.dark .tmc-c-sales .tmc-kpi-value{color:#fca5a5}
.tmc-c-rev{border-left-color:#22c55e}
.tmc-c-rev .tmc-kpi-value{color:#15803d}
body.dark .tmc-c-rev .tmc-kpi-value{color:#86efac}
.tmc-c-cost{border-left-color:#f59e0b}
.tmc-c-cost .tmc-kpi-value{color:#b45309}
body.dark .tmc-c-cost .tmc-kpi-value{color:#fde68a}
.tmc-empty{color:#cbd5e1;font-size:.9em}
body.dark .tmc-empty{color:#475569}
.tmc-pos{color:#15803d}
.tmc-neg{color:#b91c1c}
body.dark .tmc-pos{color:#86efac}
body.dark .tmc-neg{color:#fca5a5}
.tmc-mini-row{font-size:.76rem;color:#64748b;padding-top:2px}
.tmc-doc-link{color:#1d4ed8;text-decoration:underline dotted;cursor:pointer}
.tmc-doc-link:hover{color:#1e40af;text-decoration-style:solid}
body.dark .tmc-doc-link{color:#7dd3fc}
body.dark .tmc-doc-link:hover{color:#bae6fd}
.tmc-prod-link{color:#0e7490;text-decoration:underline dotted;cursor:pointer}
.tmc-prod-link:hover{color:#155e75;text-decoration-style:solid}
body.dark .tmc-prod-link{color:#67e8f9}
body.dark .tmc-prod-link:hover{color:#a5f3fc}
.tmc-buyers-table{width:100%;border-collapse:collapse;font-size:.78rem;
background:#fff;border-radius:6px;overflow:hidden}
body.dark .tmc-buyers-table{background:#0b1220}
.tmc-buyers-table th{text-align:left;padding:6px 10px;background:#f1f5f9;
color:#475569;font-size:.7rem;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;border-bottom:1px solid #e2e8f0}
body.dark .tmc-buyers-table th{background:#1e293b;color:#94a3b8;border-bottom-color:#334155}
.tmc-buyers-table td{padding:6px 10px;border-bottom:1px solid #f1f5f9;
vertical-align:middle}
body.dark .tmc-buyers-table td{border-bottom-color:#1e293b}
.tmc-buyers-table td.dv-num{font-variant-numeric:tabular-nums}
.tmc-buyers-table tr:last-child td{border-bottom:0}
.tmc-buyers-table tr:hover td{background:#f8fafc}
body.dark .tmc-buyers-table tr:hover td{background:#0f172a}
.tmc-card-footer{padding:8px 18px;border-top:1px solid #e2e8f0;
background:#f8fafc;display:flex;justify-content:space-between;
align-items:center;font-size:.72rem;color:#94a3b8}
body.dark .tmc-card-footer{border-top-color:#1e293b;background:#0f172a;color:#64748b}