* { box-sizing: border-box; }
:root {
  --navy: #1a3a8f;
  --good: #0ca30c;
  --bad: #d03b3b;
  --ink: #1a1a1a;
  --ink-muted: #888;
  --surface-2: #eef1f5;
  --grid: #d8dbe0;
}
body { font-family: -apple-system, Segoe UI, Arial, sans-serif; margin:0; background:#f6f7f9; color:var(--ink); }
.recovery-banner { background:#fff3cd; color:#7a5b00; border-bottom:1px solid #ffe29a; padding:6px 14px; font-size:12px; text-align:center; }

header { background:#fff; border-bottom:1px solid var(--grid); padding:8px 16px; }
.top-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hdr-left h1 { font-size:19px; margin:0; font-weight:800; line-height:1.15; }
.hdr-left .sub { font-size:11px; color:var(--ink-muted); }

.site-links { display:flex; gap:6px; flex-wrap:wrap; }
.site-link { padding:6px 12px; border-radius:7px; background:var(--surface-2); color:var(--ink); font-size:12px; text-decoration:none; white-space:nowrap; }
.site-link:hover { background:#e0e5ec; }

.date-widget { display:flex; align-items:center; gap:6px; position:relative; }
.date-icon { font-size:13px; }
.date-btn { border:1.5px solid var(--navy); border-radius:7px; background:#fff; color:var(--navy); font-weight:700; font-size:12px; padding:7px 12px; cursor:pointer; white-space:nowrap; }
.date-picker-hidden { position:absolute; left:-9999px; top:0; opacity:0; width:1px; height:1px; pointer-events:none; }
.info-text { font-size:11px; color:var(--ink-muted); white-space:nowrap; }

.btn { padding:7px 14px; border-radius:7px; border:1px solid #dce6f7; background:var(--surface-2); font-size:12px; cursor:pointer; color:var(--ink); white-space:nowrap; }
.btn:hover { background:#e0eafb; }

main { padding:12px 16px; }

/* --- Итого по всем филиалам: плашки --- */
.grand-row { display:flex; align-items:stretch; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.grand-label { font-weight:800; font-size:14px; line-height:1.25; align-self:center; min-width:110px; }
.gt-card { background:#fff; border:1px solid var(--grid); border-radius:9px; padding:8px 12px; min-width:118px; }
.gt-card-chart { background:#fff; border:1px solid var(--grid); border-radius:9px; padding:8px 12px; flex:1 1 220px; min-width:200px; }
.gt-head { display:flex; justify-content:space-between; font-size:10px; font-weight:700; color:var(--ink-muted); text-transform:uppercase; margin-bottom:2px; padding:0 4px; }
.gt-title { font-size:10px; font-weight:700; color:var(--ink-muted); text-transform:uppercase; text-align:center; margin-bottom:4px; }
.gt-row.gt-val { display:flex; justify-content:space-between; align-items:center; }
.gt-row.gt-val > span { width:68px; text-align:center; font-size:21px; font-weight:800; position:relative; }
.gt-val-num { display:inline-block; }
.gt-diff { text-align:center; font-size:11px; color:var(--ink-muted); margin-top:1px; }
.gt-row.gt-hist { display:flex; justify-content:space-between; }
.gt-row.gt-hist span { width:68px; text-align:center; }
.gt-row.gt-hist--y span { font-size:13px; opacity:.85; }
.gt-row.gt-hist--dy span { font-size:11px; opacity:.55; }
.val-good { color: var(--good); }
.val-bad { color: var(--bad); }
.val-na { color: var(--ink-muted); }
.val-neutral { color: var(--ink); font-weight: inherit; }
.gt-val-arrow { font-size:12px; margin-right:1px; }

.spark { width:100%; height:48px; display:block; }
.spark-labels { display:flex; justify-content:space-between; font-size:9px; color:var(--ink-muted); margin-top:2px; }

/* --- Филиалы --- */
.filials-row { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.filial-col { flex:1 1 320px; min-width:300px; background:#fff; border:1px solid var(--grid); border-radius:9px; overflow:hidden; }
.filial-hdr { background:var(--navy); color:#fff; padding:10px 12px; display:flex; align-items:center; gap:8px; }
.filial-name-block { min-width:90px; }
.filial-name-block .fname { font-weight:800; font-size:16px; line-height:1.15; }
.filial-name-block .fresp { font-size:11px; opacity:.85; margin-top:2px; }
.filial-stats { display:flex; gap:8px; flex:1; justify-content:flex-end; flex-wrap:wrap; }
.fstat { min-width:58px; }
.fstat .fhead { display:flex; justify-content:center; gap:10px; font-size:9px; opacity:.8; text-transform:uppercase; margin-bottom:1px; }
.fstat .fhead span { min-width:22px; text-align:center; }
.fstat .fval { display:flex; justify-content:center; gap:10px; }
.fstat .fval span { min-width:22px; text-align:center; font-weight:800; font-size:14px; white-space:nowrap; }
.fstat .fdiff { text-align:center; font-size:10px; opacity:.75; }

table.ploshadki { width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px; }
table.ploshadki th { background:var(--surface-2); color:#444; font-size:10px; font-weight:700; text-transform:uppercase; padding:5px 4px; text-align:center; border-bottom:1px solid var(--grid); }
table.ploshadki th.col-name { text-align:left; padding-left:10px; width:20%; }
table.ploshadki td { padding:2px 3px; text-align:center; vertical-align:middle; font-weight:700; white-space:nowrap; }
table.ploshadki td.col-name { text-align:left; padding-left:10px; vertical-align:top; padding-top:8px; font-weight:400; }
/* 3 строки на площадку (план/значения/расхождение) визуально — одна группа без внутренних границ */
table.ploshadki tr.ploshadka-group td { border-bottom:none; }
table.ploshadki tr.ploshadka-last td { border-bottom:1px solid var(--grid); }
table.ploshadki tr.ploshadka-group:first-child td { padding-top:8px; }
table.ploshadki tr.ploshadka-last td { padding-bottom:6px; }
table.ploshadki .pname { font-weight:700; font-size:13px; white-space:normal; }
table.ploshadki .presp { font-size:10.5px; color:var(--ink-muted); margin-top:1px; font-weight:400; }
table.ploshadki td.plan-cell { font-size:11px; font-weight:400; color:var(--ink-muted); padding-bottom:0; }
table.ploshadki td.plan-cell .plan-num { font-weight:400; }
table.ploshadki td.diff-cell { font-size:10px; font-weight:400; color:var(--ink-muted); min-height:12px; }
table.ploshadki tr.row-inactive td { opacity:.4; }
table.ploshadki .row-inactive { opacity:.4; }
.brick { color:#c0392b; font-weight:900; }

.arrow-good { color: var(--good); }
.arrow-bad { color: var(--bad); }

/* --- Футер / справки --- */
footer { text-align:center; padding:14px; }
.info-trigger { background:none; border:none; color:var(--navy); font-size:12px; cursor:pointer; text-decoration:underline; }

.modal-overlay { position:fixed; inset:0; background:rgba(20,25,40,.45); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px; }
.modal { background:#fff; border-radius:12px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; padding:22px 24px; position:relative; }
.modal-close { position:absolute; top:10px; right:14px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-muted); }
.trend-modal { max-width:736px; }
.trend-modal h2 { margin:0 0 10px; font-size:17px; }
.trend-legend { display:flex; gap:16px; font-size:12px; color:var(--ink-muted); margin-bottom:10px; }
.dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:middle; }
.dot-plan { background:#3b6fe0; }
.dot-fact { background:var(--good); }
.dot-over { background:#f0908c; }

.c-good { color: var(--good); }
.c-bad { color: var(--bad); }

@media (max-width: 1100px) {
  .filials-row { flex-direction:column; }
  .filial-col { width:100%; }
}
@media (max-width: 480px) {
  .grand-row { flex-direction:column; }
  .site-links { display:none; }
}