:root { --bg:#f3f4f8; --card:#fff; --line:#e7e9f0; --text:#161b26; --mute:#7a8394; --accent:#4f46e5; --accent-soft:#eef0ff;
        --good:#0f9d6b; --bad:#d6453d; --warn:#b76e00; --warn-bg:#fff4dc; --side:#141826; --side-text:#a6aec2;
        --shadow:0 1px 2px rgba(20,24,38,.04), 0 4px 16px rgba(20,24,38,.05); }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
       display:flex; min-height:100vh; -webkit-font-smoothing:antialiased; }

/* боковое меню */
aside { width:212px; flex:0 0 212px; background:var(--side); color:var(--side-text); position:sticky; top:0; height:100vh;
        display:flex; flex-direction:column; padding:18px 12px; }
.logo { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:16px; padding:4px 10px 20px; }
.logo span { width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#6366f1,#a855f7); display:grid; place-items:center; font-size:15px; }
nav { display:flex; flex-direction:column; gap:2px; }
nav a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; color:var(--side-text); text-decoration:none; font-weight:500; transition:background .12s, color .12s; }
nav a svg { width:18px; height:18px; flex:0 0 18px; opacity:.85; }
nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
nav a.on { background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(79,70,229,.45); }
.side-foot { margin-top:auto; padding:12px; font-size:12px; line-height:1.5; color:#6d7690; border-top:1px solid rgba(255,255,255,.08); }

.content { flex:1; min-width:0; }
main { padding:28px 32px 60px; max-width:1560px; }
h1 { font-size:24px; margin:0 0 6px; letter-spacing:-.02em; } h2 { font-size:16px; margin:34px 0 10px; letter-spacing:-.01em; }
.sub { color:var(--mute); margin:0 0 18px; max-width:900px; }
.banner { background:var(--warn-bg); color:var(--warn); padding:9px 32px; font-size:13px; }
.card { background:var(--card); border-radius:14px; overflow-x:auto; box-shadow:var(--shadow); }
.pad { padding:16px 18px; }
code { background:#eef0f5; padding:1px 6px; border-radius:5px; font-size:13px; }

table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
th, td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th { font-size:11.5px; color:var(--mute); font-weight:600; background:#fafbfd; white-space:normal; vertical-align:bottom; text-transform:uppercase; letter-spacing:.03em; line-height:1.3; }
th:first-child, td:first-child, .l { text-align:left; }
th:first-child, td:first-child { padding-left:18px; } th:last-child, td:last-child { padding-right:18px; }
tr:last-child td { border-bottom:0; }
tbody tr:hover td, table tr:not(.head):not(.total):hover td { background:#fafaff; }
tr.head td { font-weight:650; background:#f7f8fb; } tr.total td { font-weight:700; background:var(--accent-soft); font-size:15px; }
tr.info td, tr.pct td, .mute { color:var(--mute); }
.good { color:var(--good); } .bad { color:var(--bad); } .warn { color:var(--warn); }
.tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600; background:#fde8e6; color:var(--bad); }
.tag.ok { background:#dff6ec; color:var(--good); } .tag.now { background:var(--accent-soft); color:var(--accent); }

/* товар с фото */
.art { display:flex; align-items:center; gap:11px; text-align:left; }
.art img, .art .noph { width:38px; height:50px; border-radius:7px; object-fit:cover; background:#eceef4; flex:0 0 38px; transition:transform .15s; }
.art img:hover { transform:scale(3.4); transform-origin:left center; position:relative; z-index:20; box-shadow:0 6px 24px rgba(0,0,0,.25); }
.art b { display:block; font-weight:600; } .art span { display:block; font-size:12px; color:var(--mute); max-width:170px; overflow:hidden; text-overflow:ellipsis; }

input.cell, select.cell { border:1px solid transparent; background:#f2f3f8; border-radius:7px; padding:5px 8px; font:inherit; text-align:right; width:76px; transition:background .12s, border-color .12s; }
input.cell.l, select.cell { text-align:left; }
input.cell:hover, select.cell:hover { background:#e9ebf3; }
input.cell:focus, select.cell:focus { border-color:var(--accent); background:#fff; outline:0; box-shadow:0 0 0 3px var(--accent-soft); }
input.cell.err { border-color:var(--bad); }
input[type=number].cell { -moz-appearance:textfield; } input.cell::-webkit-outer-spin-button, input.cell::-webkit-inner-spin-button { -webkit-appearance:none; }
input[type=checkbox] { accent-color:var(--accent); width:15px; height:15px; }

button, .btn { font:inherit; font-weight:500; padding:7px 14px; border-radius:9px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--text); text-decoration:none; display:inline-block; transition:background .12s, border-color .12s; }
button:hover, .btn:hover { background:#f6f7fb; border-color:#d5d9e4; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } button.primary:hover { background:#4338ca; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.x { border:0; background:none; color:#b3b9c7; padding:2px 6px; } button.x:hover { color:var(--bad); background:none; }
form.inline { display:inline; } .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.row > input, .row > select { font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; }

.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-bottom:20px; }
.kpi { background:var(--card); border-radius:14px; padding:14px 18px; box-shadow:var(--shadow); border-left:3px solid var(--accent); }
.kpi span { display:block; font-size:12px; color:var(--mute); margin-bottom:2px; } .kpi b { font-size:22px; letter-spacing:-.02em; }

.stages { display:flex; gap:6px; align-items:stretch; }
.stg { border:1px solid var(--line); border-radius:9px; padding:6px 10px; font-size:12px; text-align:left; min-width:112px; background:#fff; color:var(--mute); }
.stg.done { background:#e6f7ef; border-color:#c9ecdb; color:var(--good); } .stg.cur { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.stg input.cell { width:40px; padding:1px 4px; } .stg label { display:flex; gap:5px; align-items:center; font-weight:600; color:var(--text); margin-bottom:2px; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; }
.tabs a.on { background:var(--accent); color:#fff; border-color:var(--accent); }

@media (max-width: 520px) {
  body { flex-direction:column; }
  aside { width:100%; flex:none; height:auto; position:static; padding:10px; }
  nav { flex-direction:row; flex-wrap:wrap; } .side-foot { display:none; } .logo { padding-bottom:10px; }
  main { padding:18px 14px 40px; }
}

.step { display:inline-flex; align-items:center; background:#f2f3f8; border-radius:8px; }
.step button { border:0; background:none; padding:4px 9px; font-size:15px; color:var(--mute); border-radius:8px; }
.step button:hover { background:var(--accent); color:#fff; }
.step input.cell { background:none; text-align:center; padding:5px 2px; }
.stg .step input.cell { width:30px; } .stg .step button { padding:1px 6px; }
.stg .x { float:right; padding:0 2px; font-size:11px; }
.stg.add { display:grid; place-items:center; min-width:34px; border-style:dashed; padding:0; }
.stg.add button { border:0; background:none; color:var(--mute); font-size:16px; padding:6px 10px; }

/* выбор периода */
.dr { position:relative; display:inline-block; }
.dr-btn { display:inline-flex; align-items:center; gap:9px; font-weight:600; padding:9px 14px; box-shadow:var(--shadow); border-color:transparent; }
.dr-btn svg { width:17px; height:17px; color:var(--accent); }
.dr-pop { position:absolute; top:calc(100% + 8px); left:0; z-index:50; background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(20,24,38,.2); display:flex; padding:14px; gap:16px; }
.dr-presets { display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--line); padding-right:12px; min-width:150px; }
.dr-presets button { border:0; text-align:left; padding:7px 10px; background:none; white-space:nowrap; }
.dr-presets button:hover { background:var(--accent-soft); color:var(--accent); }
.dr-cals { display:flex; gap:20px; } .dr-month { width:224px; }
.dr-head { display:flex; justify-content:space-between; align-items:center; font-weight:650; margin-bottom:8px; text-transform:capitalize; height:28px; }
.dr-head button { border:0; padding:2px 9px; font-size:16px; color:var(--mute); }
.dr-grid { display:grid; grid-template-columns:repeat(7, 32px); row-gap:2px; }
.dr-grid i { font-style:normal; font-size:11px; color:var(--mute); text-align:center; padding:4px 0; }
.dr-grid b { font-weight:400; text-align:center; line-height:32px; height:32px; cursor:pointer; border-radius:8px; font-variant-numeric:tabular-nums; }
.dr-grid b:hover { background:#eceefa; } .dr-grid b.off { color:#c3c8d4; cursor:default; background:none; }
.dr-grid b.in { background:var(--accent-soft); border-radius:0; }
.dr-grid b.a, .dr-grid b.z { background:var(--accent); color:#fff; font-weight:600; }
.dr-grid b.a { border-radius:8px 0 0 8px; } .dr-grid b.z { border-radius:0 8px 8px 0; } .dr-grid b.a.z { border-radius:8px; }
.dr-grid b.today { box-shadow:inset 0 0 0 1px var(--accent); }
.dr-foot { display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:12px; color:var(--mute); font-size:13px; }
@media (max-width: 760px) { .dr-pop { flex-direction:column; } .dr-cals { flex-direction:column; } .dr-presets { border:0; flex-direction:row; flex-wrap:wrap; padding:0; } }

/* план производства */
.ctrls { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin-bottom:14px; }
.ctrl { background:var(--card); border-radius:14px; padding:14px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.ctrl > span { font-size:12px; color:var(--mute); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.ctrl em { font-style:normal; font-size:12px; color:var(--mute); }
.ctrl .step { background:var(--accent-soft); border-radius:10px; }
.ctrl .step button { font-size:20px; padding:4px 14px; color:var(--accent); }
.ctrl .step input.cell { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.summary { background:var(--accent-soft); border-radius:12px; padding:12px 18px; color:#3730a3; }
.batches { display:flex; flex-direction:column; gap:12px; }
.batch { background:var(--card); border-radius:14px; box-shadow:var(--shadow); padding:14px 18px; }
.batch-top { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.batch-top .art { min-width:230px; }
.batch-qty { display:flex; align-items:center; gap:6px; } .batch-qty input.cell { font-weight:700; font-size:15px; } .batch-qty em { font-style:normal; color:var(--mute); }
.batch-date span { display:block; font-size:11.5px; color:var(--mute); text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px; }
.batch-date b { font-size:17px; } .batch-top form.inline { margin-left:auto; }
.chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.chip { cursor:pointer; padding:7px 14px; border-radius:20px; border:1px solid var(--line); background:#fff; font-weight:500; user-select:none; transition:all .12s; }
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip input { display:none; }
.chip.done { background:#e6f7ef; border-color:#c9ecdb; color:var(--good); }
details.more { margin-top:34px; } details.more summary { cursor:pointer; font-weight:650; font-size:16px; margin-bottom:10px; }

/* карточки показателей БДР */
.mcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(238px, 1fr)); gap:10px; }
.mcard { border-radius:10px; padding:13px 15px 12px; background:#eceef3; box-shadow:0 1px 2px rgba(20,24,38,.06); min-height:108px; display:flex; flex-direction:column; gap:6px; }
.mcard.good { background:#d6e8d8; } .mcard.bad { background:#f3cfd0; }
.mc-title { font-size:13.5px; color:#2a3040; display:flex; align-items:center; gap:6px; }
.mc-title i { font-style:normal; font-size:10px; font-weight:700; width:14px; height:14px; border-radius:50%; background:#161b26; color:#fff; display:inline-grid; place-items:center; cursor:help; flex:0 0 14px; }
.mc-val { font-size:25px; font-weight:650; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums; }
.mc-val small { font-size:13px; font-weight:600; margin-left:3px; vertical-align:top; position:relative; top:3px; }
.mc-val span { font-weight:650; }
.mc-prev { font-size:13px; color:#4b5364; display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:auto; font-variant-numeric:tabular-nums; }
.mc-prev b { background:#fff; border-radius:7px; padding:1px 8px; font-weight:600; color:#161b26; }
.mcard.good .mc-prev b, .mcard.good .mc-prev em { color:#17834f; } .mcard.bad .mc-prev b, .mcard.bad .mc-prev em { color:#d0312d; }
.mc-prev em { font-style:normal; font-size:17px; line-height:1; }
.mcard, .mcard.good, .mcard.bad { color:var(--text); }
.filters select { font:inherit; font-weight:500; padding:9px 12px; border:0; border-radius:9px; background:#fff; box-shadow:var(--shadow); cursor:pointer; }
details.more + details.more { margin-top:14px; }

/* воронка: группы колонок как в сводных таблицах */
.funnel table th, .funnel table td { white-space:nowrap; }
.funnel .sticky { position:sticky; left:0; background:#fff; z-index:2; box-shadow:1px 0 0 var(--line); }
.funnel tr.total .sticky { background:var(--accent-soft); }
.funnel tr.grp th { text-align:center; color:#fff; font-size:12px; letter-spacing:.05em; }
.funnel tr.grp th.sticky { background:#fafbfd; color:var(--mute); text-align:left; }
.funnel th.first, .funnel td.first { border-left:2px solid var(--line); }
.funnel tr.grp th.g-key { background:#7c3aed; } .funnel tr.grp th.g-fun { background:#e8a33d; } .funnel tr.grp th.g-ad { background:#3b9be6; }
.funnel tr.grp th.g-fin { background:#46b07f; } .funnel tr.grp th.g-wb { background:#5b6bea; } .funnel tr.grp th.g-cr { background:#e0569b; }
.funnel tr:not(.grp) th.g-key { background:#efe7ff; } .funnel tr:not(.grp) th.g-fun { background:#fdf0dc; } .funnel tr:not(.grp) th.g-ad { background:#e2f0fc; }
.funnel tr:not(.grp) th.g-fin { background:#e0f4ea; } .funnel tr:not(.grp) th.g-wb { background:#e7e9fd; } .funnel tr:not(.grp) th.g-cr { background:#fce4f0; }
.funnel tr:not(.grp) th { color:#2a3040; text-transform:none; font-size:12.5px; letter-spacing:0; }

/* ---- правки поверх светлой темы ---- */
/* серая боковая панель */
aside { background:#eceef2; color:#4b5364; border-right:1px solid #dfe2e8; }
.logo { color:var(--text); }
.logo span { background:var(--accent); background-image:none; color:#fff; }
nav a { color:#4b5364; }
nav a:hover { background:rgba(20,24,38,.05); color:var(--text); }
nav a.on { background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(20,24,38,.08); }
nav a.on svg { color:var(--accent); opacity:1; }
.side-foot { color:#8a91a1; border-top:1px solid #dfe2e8; }

/* плитки фин отчёта: хорошо — синий, плохо — красный */
.mcard.good { background:#dbe7fb; }
.mcard.good .mc-prev b, .mcard.good .mc-prev em { color:#2f6fed; }

/* воронка: границы ячеек и разделители групп */
.funnel table { border-collapse:separate; border-spacing:0; }
.funnel th, .funnel td { border-right:1px solid var(--line); }
.funnel th:last-child, .funnel td:last-child { border-right:0; }
.funnel th.first, .funnel td.first { border-left:2px solid #d5d9e3; }
.funnel .sticky { border-right:1px solid #d5d9e3; }
.funnel tr:not(.grp) th { border-bottom:2px solid #d5d9e3; }
.funnel tr.grp th { border-bottom:0; padding:7px 10px; }
.funnel tr.total .sticky { background:#e6ecff; }

/* выделение строк и ячеек в таблицах-сводках */
.funnel tbody tr:nth-child(odd) td, .funnel tr:nth-child(odd):not(.grp):not(.total) td { background:#fafbfd; }
.funnel tr:not(.grp):not(.total):hover td { background:#eef3ff !important; }
.funnel td { border-bottom:1px solid #e3e6ee; }
.funnel td.strong { font-weight:650; }
.funnel td.key { background:#f1f5ff !important; }
.funnel tr:not(.grp):not(.total):hover td.key { background:#e3ebff !important; }
.funnel .sticky { background:#fff; }
.unit td { padding:10px 12px; }
/* простая таблица без цветовых групп */
.funnel.plain td.key { background:inherit !important; }
.search { font:inherit; padding:9px 13px; border:1px solid var(--line); border-radius:9px; width:320px; margin:0 0 12px; background:#fff; }
.search:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.funnel th.ref, .funnel td.ref { color:var(--mute); }
.rv { display:block; font-size:11.5px; color:var(--mute); margin-top:1px; }

/* юнитка: цифры и подписи ярче */
.plain td { color:#0b0f19; font-weight:500; }
.plain td b { font-weight:700; }
.plain tr:not(.grp) th { color:#1c2230; font-weight:650; }
.plain th.ref, .plain td.ref { color:#0b0f19; }
.plain .art b { color:#0b0f19; } .plain .art span, .plain .rv { color:#4f5767; }
.plain .mute { color:#4f5767; }
.side-foot .who { color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.side-foot .logout { padding:0; margin:2px 0 8px; color:var(--accent); font-size:12px; }