/* ===== МЦ Дашборд — общая тема (светлая/тёмная) ===== */
:root{
  --radius: 14px;
  --radius-sm: 9px;
  --gap: 14px;
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PT Sans", sans-serif;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 20px -8px rgba(15,23,42,.14);
  --shadow-hover: 0 2px 6px rgba(15,23,42,.10), 0 14px 34px -12px rgba(15,23,42,.28);
}

/* --- Светлая тема (по умолчанию) --- */
:root, :root[data-theme="light"]{
  color-scheme: light;
  --bg: #eef1f6;
  --bg-grad-1: #eef2f8;
  --bg-grad-2: #e6ebf3;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --raised: #ffffff;
  --ink: #0f172a;
  --ink-2: #45526b;
  --muted: #8593a8;
  --border: #e3e8f0;
  --border-strong: #d2dae6;
  --accent: #2563eb;
  --accent-ink: #1d4ed8;
  --accent-soft: #e6efff;
  /* День (тёплый) */
  --day-ink: #b45309;
  --day-soft: #fff2d6;
  --day-dot: #f59e0b;
  --day-line: #f4b74a;
  /* Ночь (холодный) */
  --night-ink: #4338ca;
  --night-soft: #e7e9ff;
  --night-dot: #6366f1;
  --night-line: #8b8ff0;
  /* Города */
  --city-a-ink: #0f766e;   /* Ноябрьск */
  --city-a-soft: #d7f2ee;
  --city-b-ink: #7c3aed;   /* Тюмень */
  --city-b-soft: #eee2ff;
  /* Прочее */
  --placeholder-1: #64748b;
  --placeholder-2: #94a3b8;
  --warn-ink: #9a3412;
  --warn-soft: #ffe8d6;
}

/* --- Тёмная тема (подобрана отдельно, не автоинверсия) --- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0a0f1a;
  --bg-grad-1: #0b1220;
  --bg-grad-2: #0a1120;
  --panel: #131c2e;
  --panel-2: #0f1727;
  --raised: #1a2640;
  --ink: #e8eef8;
  --ink-2: #a3b4cf;
  --muted: #6a7c99;
  --border: #24314d;
  --border-strong: #33456b;
  --accent: #60a5fa;
  --accent-ink: #93c5fd;
  --accent-soft: rgba(96,165,250,.14);
  --day-ink: #fcd34d;
  --day-soft: rgba(245,158,11,.15);
  --day-dot: #fbbf24;
  --day-line: #b7841f;
  --night-ink: #b3bcff;
  --night-soft: rgba(99,102,241,.18);
  --night-dot: #818cf8;
  --night-line: #4d55b0;
  --city-a-ink: #2dd4bf;
  --city-a-soft: rgba(45,212,191,.14);
  --city-b-ink: #c4b5fd;
  --city-b-soft: rgba(139,92,246,.18);
  --placeholder-1: #334155;
  --placeholder-2: #1e293b;
  --warn-ink: #fdba74;
  --warn-soft: rgba(234,88,12,.16);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 26px -10px rgba(0,0,0,.6);
  --shadow-hover: 0 2px 8px rgba(0,0,0,.5), 0 18px 42px -14px rgba(0,0,0,.75);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 82% -8%, var(--accent-soft), transparent 60%),
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap{ max-width: 1680px; margin: 0 auto; padding: 20px clamp(14px,2.4vw,34px) 40px; }

/* ===== Шапка ===== */
.topbar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding: 6px 2px 18px;
}
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand .logo{
  width:46px; height:46px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px;
  background: linear-gradient(140deg, var(--accent), var(--night-dot));
  box-shadow: var(--shadow);
}
.brand h1{ font-size: clamp(16px,1.5vw,21px); margin:0; line-height:1.15; letter-spacing:-.01em; }
.brand .sub{ font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.brand .sub b{ color:var(--ink); font-variant-numeric: tabular-nums; }
.spacer{ flex:1 1 auto; }

.controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.seg{
  display:inline-flex; background:var(--panel-2); border:1px solid var(--border);
  border-radius:10px; padding:3px; gap:2px;
}
.seg a, .seg button{
  font: inherit; font-size:13px; border:0; background:transparent; color:var(--ink-2);
  padding:6px 12px; border-radius:8px; cursor:pointer; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.seg a.active, .seg button.active{ background:var(--raised); color:var(--ink); box-shadow: var(--shadow); font-weight:600; }
.seg a:hover:not(.active), .seg button:hover:not(.active){ color:var(--ink); }

.btn{
  font:inherit; font-size:13px; cursor:pointer; color:var(--ink-2);
  background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
  padding:8px 12px; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ color:var(--ink); border-color:var(--border-strong); }
.btn .ico{ font-size:15px; line-height:1; }

/* ===== KPI ===== */
.kpis{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:12px; margin: 4px 0 22px; }
.kpi{
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  padding:13px 16px; box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.85; }
.kpi.k-day::before{ background:var(--day-dot); }
.kpi.k-night::before{ background:var(--night-dot); }
.kpi.k-reserve::before{ background:var(--muted); }
.kpi .v{ font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric: tabular-nums; line-height:1; }
.kpi .l{ font-size:12px; color:var(--ink-2); margin-top:6px; }

/* ===== Бейджи ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:999px; white-space:nowrap; line-height:1.4;
}
.badge .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.b-day{ color:var(--day-ink); background:var(--day-soft); }
.b-day .dot{ background:var(--day-dot); }
.b-night{ color:var(--night-ink); background:var(--night-soft); }
.b-night .dot{ background:var(--night-dot); }
.b-city-a{ color:var(--city-a-ink); background:var(--city-a-soft); }
.b-city-b{ color:var(--city-b-ink); background:var(--city-b-soft); }
.b-warn{ color:var(--warn-ink); background:var(--warn-soft); }

/* ===== Заголовок города ===== */
.city-head{
  display:flex; align-items:center; gap:12px; margin: 26px 2px 14px;
}
.city-head .cname{ font-size:17px; font-weight:750; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.city-head .cbar{ flex:1 1 auto; height:1px; background:linear-gradient(90deg, var(--border-strong), transparent); }
.city-head .cmeta{ font-size:12.5px; color:var(--ink-2); font-variant-numeric: tabular-nums; }
.city-head .cdot{ width:10px; height:10px; border-radius:3px; }
.city-a .cdot{ background:var(--city-a-ink); }
.city-b .cdot{ background:var(--city-b-ink); }

/* ===== Фото / аватар ===== */
.ph{ position:relative; overflow:hidden; background:var(--panel-2); flex:0 0 auto; }
.ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.ph.noimg{
  display:grid; place-items:center; color:#fff; font-weight:800;
  background: linear-gradient(145deg, var(--placeholder-1), var(--placeholder-2));
}
.ph.noimg .ini{ font-size: 1.6em; letter-spacing:.02em; }
.ph .nolabel{
  position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:9.5px; font-weight:600;
  padding:2px; background:rgba(0,0,0,.35); color:#fff; letter-spacing:.03em; text-transform:uppercase;
}
.shift-chip{
  position:absolute; top:7px; left:7px; z-index:2;
  backdrop-filter: blur(4px);
}

/* ===== Резерв ===== */
.reserve-sec{ margin-top:30px; }
.reserve-head{ display:flex; align-items:center; gap:12px; margin: 0 2px 14px; }
.reserve-head .rname{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:9px; }
.reserve-head .cbar{ flex:1 1 auto; height:1px; background:linear-gradient(90deg, var(--border-strong), transparent); }
.reserve-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:var(--gap); }
.rcard{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; box-shadow:var(--shadow); text-align:center;
}
.rcard .ph{ width:84px; height:84px; border-radius:50%; margin:2px auto 10px; border:2px solid var(--border); }
.rcard .rn{ font-size:13.5px; font-weight:650; line-height:1.25; }
.rcard .rr{ font-size:11px; color:var(--muted); margin-top:5px; }

/* ===== Футер ===== */
.foot{ margin-top:34px; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.foot .spacer{ }
.legend{ display:flex; gap:14px; flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend .dot{ width:9px; height:9px; border-radius:50%; }

/* ===== Утилиты ===== */
.mono{ font-variant-numeric: tabular-nums; }
.tel{ color:var(--ink-2); text-decoration:none; }
.tel:hover{ color:var(--accent-ink); }

/* ===== Печать ===== */
@media print{
  body{ background:#fff !important; }
  .controls, .foot .btn{ display:none !important; }
  .wrap{ max-width:none; padding:0; }
  .card, .postcard, .kpi, .rcard{ box-shadow:none !important; break-inside: avoid; }
  .city-head{ break-after: avoid; }
}