/* Маршрутизация ТК — тема «Песочный» (ASR and CO) */
:root{
  --bg:#e6ddd1; --panel:#f3ece2; --panel-2:#d8cab8;
  --accent:#b5591f; --accent-dark:#904010;
  --text:#33281f; --muted:#7c6b59;
  --danger:#cf3f34; --ok:#5b9b3d;
  --border:#d3c4b0; --hover:#e5d6c2; --return-bg:#ede2d1;
  --out:#1a56f0; --ret:#0aa63a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
#app{display:flex;height:100vh;overflow:hidden}

/* ── Сайдбар ─────────────────────────────── */
#sidebar{width:360px;min-width:360px;background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;height:100vh;overflow-y:auto}
.brandbar{display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:linear-gradient(135deg,var(--accent-dark),var(--accent));color:#fff}
.brand-logo{width:46px;height:46px;border-radius:10px;background:#fff;padding:4px;object-fit:contain;flex:0 0 auto}
.brand-title{font-size:18px;font-weight:700;line-height:1.1}
.brand-sub{font-size:12px;opacity:.9;margin-top:2px}

.controls{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
select,button{font-family:inherit;font-size:14px}
select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--text);cursor:pointer}
select:focus{outline:2px solid var(--accent)}

.days{display:flex;flex-wrap:wrap;gap:6px}
.day-btn{flex:1 1 30%;padding:7px 4px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);
  color:var(--text);cursor:pointer;text-align:center;font-size:13px;transition:.12s}
.day-btn:hover{background:var(--hover)}
.day-btn.active{background:var(--accent);border-color:var(--accent-dark);color:#fff;font-weight:700}
.day-btn.empty{opacity:.4;cursor:default}
.road-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;
  background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.road-label input{accent-color:var(--accent);cursor:pointer}

/* ── Метрики ─────────────────────────────── */
.metrics{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px}
.metric{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:12px}
.metric h4{margin:0 0 8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.metric .rows{display:flex;flex-direction:column;gap:4px}
.metric .row{display:flex;justify-content:space-between;font-size:14px}
.metric .row b{color:var(--accent-dark)}
.daybreak .row{cursor:pointer;padding:3px 6px;border-radius:6px}
.daybreak .row:hover{background:var(--hover)}
.daybreak .row.cur{background:var(--hover);font-weight:700}

/* ── Вкладки вида ─────────────────────────── */
.viewtabs{display:flex;gap:4px;padding:10px 16px 0}
.viewtab{flex:1;padding:8px 4px;border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;
  background:var(--panel-2);color:var(--muted);cursor:pointer;font-size:13px;font-weight:600}
.viewtab:hover{background:var(--hover)}
.viewtab.active{background:var(--accent);color:#fff;border-color:var(--accent-dark)}

/* ── Период (Месяц/Неделя/День) ───────────── */
.period-tabs{display:flex;gap:6px}
.ptab{flex:1;padding:7px 4px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);
  color:var(--text);cursor:pointer;font-size:13px}
.ptab:hover{background:var(--hover)}
.ptab.active{background:var(--accent);border-color:var(--accent-dark);color:#fff;font-weight:700}

.btn{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);
  color:var(--text);cursor:pointer;font-size:14px;font-weight:600}
.btn:hover{background:var(--hover)}
.btn-accent{background:var(--accent);border-color:var(--accent-dark);color:#fff}
.btn-accent:hover{background:var(--accent-dark)}

/* ── Основные виды (отчёт/факт) ───────────── */
.mainview{flex:1;height:100vh;overflow:auto;padding:20px 24px;background:var(--bg)}
.report-head h2{margin:0 0 6px;color:var(--accent-dark);font-size:20px}
.crumbs{color:var(--muted);font-size:13px;margin-bottom:14px}
.crumbs a{color:var(--accent);cursor:default}
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.rtable{border-collapse:collapse;width:100%;background:var(--panel);font-size:14px}
.rtable th,.rtable td{padding:9px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.rtable th{background:var(--panel-2);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0}
.rtable th.l,.rtable td.l{text-align:left}
.rtable th.r,.rtable td.r{text-align:right}
.rtable td.b{font-weight:700;color:var(--accent-dark)}
.rtable tr.clk{cursor:pointer}
.rtable tr.clk:hover td{background:var(--hover)}
.rtable tr.total td{background:var(--panel-2);font-weight:700;color:var(--accent-dark);border-top:2px solid var(--accent)}
.fp-note{font-size:13px;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:10px}
.fp-empty{max-width:520px;color:var(--muted)} .fp-empty h2{color:var(--accent-dark)}

/* ── Список точек доставки ────────────────── */
.points{padding:0 16px 14px}
.points-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.points-head h4{margin:0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.pt-btns{display:flex;gap:4px}
.mini{padding:3px 8px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2);color:var(--text);cursor:pointer;font-size:11px}
.mini:hover{background:var(--hover)}
.points-cols{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:0 4px 4px}
.points-list{max-height:320px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}
.pt-row{display:grid;grid-template-columns:20px 22px 1fr auto;align-items:center;gap:6px;
  padding:5px 8px;border-bottom:1px solid var(--border);font-size:13px}
.pt-row:last-child{border-bottom:none}
.pt-row input{cursor:pointer;accent-color:var(--accent)}
.pt-n{color:var(--accent-dark);font-weight:700;text-align:center;font-size:12px}
.pt-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pt-name:hover{color:var(--accent);text-decoration:underline}
.pt-km{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.pt-row.off{opacity:.5}
.pt-row.off .pt-name{cursor:pointer}
.pt-row.ret{background:var(--return-bg);font-style:italic}
.pt-row.ret .pt-n{color:var(--ok)}
.pt-row.man{background:rgba(91,155,61,.10)}
.pt-row.man .pt-n{color:var(--ok)}
.pt-del{margin-left:6px;border:none;background:transparent;color:var(--danger);font-size:15px;
  font-weight:700;cursor:pointer;line-height:1;padding:0 2px}
.pt-del:hover{color:#a02018}
.pin.off{background:var(--muted);width:16px;height:16px;border-width:1px;opacity:.7}
.pin.manual{background:var(--ok);border-color:#fff}
.pin.off.manual{background:var(--ok);opacity:.6}
.pin.visited{background:var(--ret);border-color:#fff}
.live-car{font-size:24px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));text-align:center}
.live-label input{accent-color:var(--danger)}
.live-status{font-size:12px;color:var(--text);background:var(--return-bg);border:1px solid var(--ok);
  border-radius:8px;padding:7px 9px;margin-top:2px}

/* окно «Проверить все ТП региона» */
#liveOverview{position:fixed;top:4%;bottom:4%;left:380px;right:4%;z-index:2000;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 44px rgba(0,0,0,.45);
  display:flex;flex-direction:column;overflow:hidden}
.lov-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  background:linear-gradient(135deg,var(--accent-dark),var(--accent));color:#fff;font-weight:700;font-size:15px}
.lov-head button{background:rgba(255,255,255,.22);border:none;color:#fff;border-radius:6px;
  width:30px;height:30px;cursor:pointer;font-size:16px}
.lov-head button:hover{background:rgba(255,255,255,.35)}
.lov-scroll{overflow:auto}
#lovBody tr.hot td{background:rgba(207,63,52,.12)}
#lovBody td.dev{font-weight:700;color:var(--danger)}
#lovBody td.note{color:var(--muted)}
#lovBody tr.clk{cursor:pointer}
#lovBody tr.clk:hover td{background:var(--hover)}

/* форма добавления точки */
.pt-add{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:8px}
.pt-add input,.pt-add select{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:7px;background:var(--panel);
  color:var(--text);font-size:13px;margin-bottom:6px}
.pt-add select{cursor:pointer}
.pt-or{text-align:center;font-size:11px;color:var(--muted);margin:2px 0 6px}
.pt-add-row{display:flex;gap:6px;margin-bottom:6px}
.pt-add-row input{margin-bottom:0}
.pt-add-row .mini{flex:1}
.pt-hint{font-size:11px;color:var(--muted);line-height:1.3}
.pt-restore{font-size:12px;color:var(--muted);background:var(--return-bg);border:1px solid var(--border);
  border-radius:8px;padding:6px 9px;margin-bottom:8px}
.pt-restore a{color:var(--accent);cursor:pointer;text-decoration:underline;white-space:nowrap}
.mini.add{background:var(--accent);color:#fff;border-color:var(--accent-dark)}
.mini.add:hover{background:var(--accent-dark)}

/* ── Карта ───────────────────────────────── */
#map{flex:1;height:100vh}
.leaflet-control-layers{background:var(--panel);border:1px solid var(--border)!important;border-radius:10px!important;
  box-shadow:0 2px 10px rgba(0,0,0,.15)!important;padding:6px 8px!important}
.leaflet-control-layers label{color:var(--text);font-size:13px;margin:2px 0}
.leaflet-control-layers-base input{accent-color:var(--accent);margin-right:6px}
.legend{position:absolute;z-index:1000;right:12px;bottom:22px;background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.legend .li{display:flex;align-items:center;gap:8px;margin:3px 0}
.legend .sw{width:22px;height:4px;border-radius:2px}
.status{padding:10px 16px;font-size:13px;color:var(--muted)}
.pin{background:var(--accent);color:#fff;border:2px solid #fff;border-radius:50%;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.depot-pin{background:#fff;color:inherit;border:2px solid var(--accent-dark);border-radius:9px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;box-shadow:0 2px 7px rgba(0,0,0,.4)}