/* ════════════════════════════════════════════════════════════════════
   /schedule («График работы») — шапка-карточка, как на /settings и /users,
   и сводка отпусков на год: плитки, фильтры, таблица «сотрудник × месяц»
   с полосами отделов, «Итого» и подсказкой. Год, «+»/«−» и импорт — прежние
   (стили в самой странице). Подключается после dark-theme.css.
   ════════════════════════════════════════════════════════════════════ */

.schx-head, .vx, .vx-tip{ --vx-card:#fff; --vx-brd:rgba(165,180,252,.35); --vx-line:#eef0f6; --vx-tx:#0f172a; --vx-tx2:#334155; --vx-mu:#64748b; --vx-mu2:#94a3b8;
  --vx-trk:#eef1f7; --vx-field:#fff; --vx-fieldb:#e3e8f2;
  --vx-sh:0 2px 6px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.10);
  font-family:"Segoe UI",Arial,system-ui,sans-serif; }
html[data-theme="dark"] .schx-head, html[data-theme="dark"] .vx, html[data-theme="dark"] .vx-tip{ --vx-card:#1b2433; --vx-brd:rgba(148,163,184,.2); --vx-line:#2c3a4f;
  --vx-tx:#e5e7eb; --vx-tx2:#cbd5e1; --vx-mu:#94a3b8; --vx-mu2:#64748b; --vx-trk:#243145; --vx-field:#141c29; --vx-fieldb:#2c3a4f;
  --vx-sh:0 2px 6px rgba(0,0,0,.3), 0 14px 36px rgba(0,0,0,.45); }
.vx [hidden], .vx[hidden]{ display:none !important; }

/* страница не уже 1180px: ниже — горизонтальная прокрутка вместо сломанной раскладки */
body{ min-width:1180px; }

/* ── шапка ── */
.schx-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px; padding:18px 22px; border-radius:16px; background:var(--vx-card);
  border:1px solid var(--vx-brd); box-shadow:var(--vx-sh); }
.schx-head .toolbar{ margin:0; gap:8px; }
.schx-hl{ display:flex; align-items:center; gap:14px; margin-right:auto; }
.schx-tile{ flex:none; width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#4f46e5;
  background:linear-gradient(180deg,#f5f7ff,#e0e7ff); border:1px solid #c7d2fe; box-sizing:border-box; }
html[data-theme="dark"] .schx-tile{ color:#c7d2fe; background:linear-gradient(180deg,rgba(99,102,241,.16),rgba(99,102,241,.1)); border-color:rgba(129,140,248,.32); }
.schx-tile svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.schx-head .toolbar h1.schx-title, html[data-theme="dark"] .schx-head .toolbar h1.schx-title{ font-size:24px; font-weight:800; letter-spacing:-.01em; color:var(--vx-tx); margin:0; line-height:1.2; }
.schx-sub{ margin-top:4px; font-size:13.5px; color:var(--vx-mu); }
.schx-div{ width:1px; height:26px; background:var(--vx-line); margin:0 6px; }
/* экспорт — светлая кнопка, «+ Сотрудник» — основная; импорт — прежний (зелёный) */
.schx-head .btn-export, html[data-theme="dark"] .schx-head .btn-export{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px;
  border:1px solid #c7d2fe; background:#f5f7ff; color:#3730a3; font:600 13px "Segoe UI",Arial,system-ui,sans-serif; box-shadow:none; transform:none; cursor:pointer; }
.schx-head .btn-export:hover{ background:#e0e7ff; border-color:#a5b4fc; box-shadow:none; transform:none; }
.schx-head .btn-export svg{ width:14px; height:14px; vertical-align:0 !important; }
html[data-theme="dark"] .schx-head .btn-export{ border-color:rgba(129,140,248,.32); background:rgba(99,102,241,.16); color:#c7d2fe; }
html[data-theme="dark"] .schx-head .btn-export:hover{ background:rgba(99,102,241,.26); border-color:rgba(129,140,248,.5); color:#e0e7ff; }
.schx-head #addEmpBtn{ padding:10px 18px; border-radius:10px; border:none; background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff;
  font:600 13.5px "Segoe UI",Arial,system-ui,sans-serif; box-shadow:0 2px 8px rgba(79,70,229,.3); cursor:pointer; }
.schx-head #addEmpBtn:hover{ background:linear-gradient(180deg,#5458ee,#4338ca); }
/* месяцы — один переключатель на всю ширину */
.schx-row{ padding-top:14px; border-top:1px solid var(--vx-line); }
.schx-head .month-tabs{ display:flex; flex-wrap:nowrap; gap:2px; padding:4px; margin:0; border-radius:12px; background:#eef1f7; }
html[data-theme="dark"] .schx-head .month-tabs{ background:#141c29; }
.schx-head .month-tab, html[data-theme="dark"] .schx-head .month-tab:not(.active){ flex:1; text-align:center; padding:8px 6px; border:none; border-radius:9px;
  background:transparent; color:#334155; font:600 13px "Segoe UI",Arial,system-ui,sans-serif; box-shadow:none; transform:none; }
html[data-theme="dark"] .schx-head .month-tab:not(.active){ color:#cbd5e1; }
.schx-head .month-tab:not(.active):hover{ background:rgba(255,255,255,.7); }
html[data-theme="dark"] .schx-head .month-tab:not(.active):hover{ background:rgba(255,255,255,.06); }
.schx-head .month-tab.active, html[data-theme="dark"] .schx-head .month-tab.active{ background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff; border:none; box-shadow:none; }

/* ══ Отпуска ══ */
.vx{ display:flex; flex-direction:column; gap:14px; margin-top:16px; padding:22px 22px 18px; border-radius:18px; background:var(--vx-card);
  border:1px solid var(--vx-brd); box-shadow:var(--vx-sh); }
.vx svg, .vx-tip svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vx-title{ display:flex; align-items:center; gap:14px; }
.vx-title::before, .vx-title::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,#cbd5e1,transparent); }
html[data-theme="dark"] .vx-title::before, html[data-theme="dark"] .vx-title::after{ background:linear-gradient(90deg,transparent,#334155,transparent); }
.vx .vx-pill{ display:inline-flex; align-items:center; gap:8px; margin:0; padding:8px 20px; border-radius:999px; background:linear-gradient(180deg,#fff3c4,#fde68a);
  border:1px solid #fbbf24; color:#92400e; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 4px 12px rgba(245,158,11,.22); }
.vx .vx-pill svg{ width:16px; height:16px; color:#d97706; }
.vx .vx-pill span{ position:relative; top:-0.5px; }
html[data-theme="dark"] .vx .vx-pill{ background:linear-gradient(180deg,#78350f,#5b2a0b); border-color:#b45309; color:#fde68a; box-shadow:none; }
html[data-theme="dark"] .vx .vx-pill svg{ color:#fbbf24; }

/* аватар в строке: фото или инициалы на тоне отдела */
.vx-av{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; box-sizing:border-box; border-radius:10px; overflow:hidden;
  font-size:11px; font-weight:700; color:var(--c); background:color-mix(in srgb,var(--c) 14%,var(--vx-card)); border:1px solid color-mix(in srgb,var(--c) 32%,transparent); }
.vx-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.vx-av:has(img){ border:none; background:transparent; }

/* ── плитки ── */
.vx-kp{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.vx-kt{ min-width:0; padding:14px 16px; border-radius:14px; border:1px solid var(--vx-brd); background:var(--vx-card);
  box-shadow:0 2px 6px rgba(15,23,42,.05), 0 8px 20px rgba(15,23,42,.06); }
html[data-theme="dark"] .vx-kt{ box-shadow:0 2px 6px rgba(0,0,0,.25); }
.vx-kt.hot{ background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%); border-color:#fcd34d; }
html[data-theme="dark"] .vx-kt.hot{ background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(245,158,11,.06)); border-color:rgba(245,158,11,.45); }
.vx-kt.warn{ border-color:#fecaca; } html[data-theme="dark"] .vx-kt.warn{ border-color:rgba(239,68,68,.35); }
.vx-ktop{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--vx-tx2); }
.vx-tile{ flex:none; width:36px; height:36px; box-sizing:border-box; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:#4f46e5;
  background:linear-gradient(180deg,#f5f7ff,#e0e7ff); border:1px solid #c7d2fe; }
.vx-tile svg{ width:17px; height:17px; }
html[data-theme="dark"] .vx-tile{ color:#c7d2fe; background:linear-gradient(180deg,rgba(99,102,241,.16),rgba(99,102,241,.1)); border-color:rgba(129,140,248,.32); }
.vx-kt.hot .vx-tile{ color:#fff; background:linear-gradient(180deg,#fbbf24,#f59e0b); border-color:#f59e0b; }
.vx-tile.y{ color:#b45309; background:linear-gradient(180deg,#fffbeb,#fef3c7); border-color:#fde68a; }
html[data-theme="dark"] .vx-tile.y{ color:#fcd34d; background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.3); }
.vx-tile.r{ color:#dc2626; background:linear-gradient(180deg,#fef2f2,#fee2e2); border-color:#fecaca; }
html[data-theme="dark"] .vx-tile.r{ color:#fca5a5; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.32); }
.vx-tile.g{ color:#15803d; background:linear-gradient(180deg,#f0fdf4,#dcfce7); border-color:#bbf7d0; }
html[data-theme="dark"] .vx-tile.g{ color:#86efac; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.3); }
.vx-kv{ margin-top:10px; font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--vx-tx); line-height:1; }
.vx-kv small{ font-size:14px; font-weight:600; letter-spacing:0; color:var(--vx-mu); }
.vx-kt.hot .vx-kv{ color:#b45309; } html[data-theme="dark"] .vx-kt.hot .vx-kv{ color:#fbbf24; }
.vx-kt.warn .vx-kv{ color:#dc2626; } html[data-theme="dark"] .vx-kt.warn .vx-kv{ color:#f87171; }
.vx-ks{ display:flex; align-items:center; gap:8px; min-height:30px; margin-top:8px; font-size:12px; color:var(--vx-mu); }
.vx-ks > span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-kbar{ flex:none; width:70px; height:6px; border-radius:3px; background:#c7d2fe; overflow:hidden; }
.vx-kbar i{ display:block; height:100%; background:linear-gradient(90deg,#818cf8,#6366f1); }
html[data-theme="dark"] .vx-kbar{ background:rgba(129,140,248,.4); }
/* стопка лиц в плитке — 1 в 1 как в строке «сегодня» над графиком (.today-stack) */
.vx-ks .today-stack{ flex:none; }

/* ── панель ── */
.vx-tb{ display:flex; align-items:center; gap:10px; }
.vx-seg{ position:relative; flex:none; display:inline-flex; gap:2px; padding:4px; border-radius:12px; background:var(--vx-trk); }
/* подсветка выбранной вкладки переезжает под нажатую (placeVacSegInd) */
.vx-seg-ind{ position:absolute; top:4px; bottom:4px; left:4px; width:0; border-radius:9px; background:linear-gradient(180deg,#6366f1,#4f46e5);
  box-shadow:0 2px 6px rgba(79,70,229,.25); pointer-events:none; }
.vx-seg.ready .vx-seg-ind{ transition:transform .28s cubic-bezier(.2,.7,.2,1), width .28s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){ .vx-seg.ready .vx-seg-ind{ transition:none; } }
html[data-theme="dark"] .vx-seg{ background:#141c29; }
.vx .vx-sg{ position:relative; z-index:1; transition:color .2s; display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:none; border-radius:9px; background:transparent; cursor:pointer;
  font:600 13px "Segoe UI",Arial,system-ui,sans-serif; color:var(--vx-tx2); box-shadow:none; white-space:nowrap; }
.vx .vx-sg:not(.on):hover{ background:rgba(255,255,255,.7); }
html[data-theme="dark"] .vx .vx-sg:not(.on):hover{ background:rgba(255,255,255,.06); }
.vx .vx-sg em{ transition:background .2s, color .2s; display:inline-flex; align-items:center; justify-content:center; height:18px; min-width:18px; padding:0 6px 1px; box-sizing:border-box; line-height:1;
  font-style:normal; font-size:11px; font-weight:700; color:var(--vx-mu); background:var(--vx-card); border-radius:999px; }
.vx .vx-sg.on{ background:transparent; color:#fff; }
.vx .vx-sg.on em{ background:rgba(255,255,255,.25); color:#fff; }
.vx .vx-sg > span{ position:relative; top:-1.5px; }
.vx-dd{ position:relative; flex:none; }
.vx .vx-f{ display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; box-sizing:border-box; border-radius:10px; border:1px solid var(--vx-fieldb);
  background:var(--vx-field); font:400 13.5px "Segoe UI",Arial,system-ui,sans-serif; color:var(--vx-tx); white-space:nowrap; cursor:pointer; box-shadow:none; }
.vx .vx-f:hover, .vx .vx-f[aria-expanded="true"]{ border-color:#a5b4fc; }
.vx .vx-f svg{ width:15px; height:15px; color:var(--vx-mu); }
.vx-cv{ flex:none; margin-left:6px; width:7px; height:7px; border-right:1.6px solid var(--vx-mu); border-bottom:1.6px solid var(--vx-mu); transform:translateY(-2px) rotate(45deg); }
.vx-kdot{ flex:none; display:inline-block; width:9px; height:9px; border-radius:50%; }
.vx-menu{ position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:100%; max-height:320px; overflow:auto; padding:6px; box-sizing:border-box;
  border-radius:12px; border:1px solid var(--vx-brd); background:var(--vx-card); box-shadow:0 14px 36px rgba(15,23,42,.18); display:flex; flex-direction:column; gap:2px; }
html[data-theme="dark"] .vx-menu{ box-shadow:0 14px 36px rgba(0,0,0,.55); }
.vx .vx-mi{ display:flex; align-items:center; gap:9px; padding:8px 10px; border:none; border-radius:8px; background:transparent; text-align:left; cursor:pointer;
  font:400 13.5px "Segoe UI",Arial,system-ui,sans-serif; color:var(--vx-tx); white-space:nowrap; box-shadow:none; }
.vx .vx-mi:hover{ background:var(--vx-trk); }
.vx .vx-mi.on{ background:#eef2ff; color:#4338ca; font-weight:600; }
html[data-theme="dark"] .vx .vx-mi.on{ background:rgba(99,102,241,.18); color:#c7d2fe; }
.vx-s{ flex:1; min-width:140px; display:flex; align-items:center; gap:8px; height:38px; padding:0 13px; box-sizing:border-box; border-radius:10px;
  border:1px solid var(--vx-fieldb); background:var(--vx-field); color:var(--vx-mu2); cursor:text; transition:border-color .15s, box-shadow .15s; }
.vx-s:hover{ border-color:#a5b4fc; }
.vx-s:focus-within{ border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.vx-s svg{ flex:none; width:15px; height:15px; }
.vx .vx-s input, html[data-theme="dark"] .vx .vx-s input{ flex:1; min-width:0; height:100%; padding:0; border:none; outline:none; background:transparent; box-shadow:none;
  font:400 13.5px "Segoe UI",Arial,system-ui,sans-serif; color:var(--vx-tx); }
.vx .vx-s input::placeholder{ color:var(--vx-mu2); }
.vx-sw{ flex:none; display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--vx-tx2); white-space:nowrap; cursor:pointer; user-select:none; }
.vx-sw input{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.vx-swi{ position:relative; flex:none; width:36px; height:20px; border-radius:999px; background:#cbd5e1; transition:background .15s; }
html[data-theme="dark"] .vx-swi{ background:#334155; }
/* кружок — строго по середине дорожки при любом масштабе: рисуем его
   радиальным градиентом по центру слоя размером с дорожку. Отдельный кружок
   (top:2px или top:50%) браузер округлял до пикселя экрана, и при масштабе
   страницы 0.9–0.94 он съезжал вниз на 0.4–0.7px. */
@property --vx-kx{ syntax:"<length>"; inherits:false; initial-value:10px; }
.vx-swi::after{ content:""; position:absolute; inset:0; border-radius:inherit; --vx-kx:10px;
  background:radial-gradient(circle at var(--vx-kx) 50%, #fff 0 7.6px, rgba(255,255,255,0) 8.1px);
  filter:drop-shadow(0 0 1.2px rgba(15,23,42,.35)); transition:--vx-kx .15s; }
.vx-sw input:checked + .vx-swi{ background:linear-gradient(180deg,#6366f1,#4f46e5); }
.vx-sw input:checked + .vx-swi::after{ --vx-kx:26px; }
.vx-swt{ position:relative; top:-2px; }   /* строчные — вровень с серединой переключателя */
.vx-sw input:focus-visible + .vx-swi{ box-shadow:0 0 0 3px rgba(99,102,241,.25); }

/* ── таблица ── */
.vx-tbl{ position:relative; border-radius:14px; overflow-anchor:none; border:1px solid var(--vx-brd); background:var(--vx-card); overflow:hidden; }
.vx-r{ display:grid; grid-template-columns:250px repeat(12,minmax(0,1fr)) 96px; column-gap:4px; align-items:center; padding:0 0 0 12px; }   /* зазор = VAC_COL_GAP в schedule.js */
.vx-h{ min-height:44px; border-bottom:1px solid var(--vx-line); background:linear-gradient(180deg,#f8faff,#f1f4fb); }
html[data-theme="dark"] .vx-h{ background:linear-gradient(180deg,#1f2a3b,#18212f); }
.vx-h > span{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--vx-tx2); }
.vx-mh{ align-self:stretch; display:flex; align-items:center; justify-content:center; padding:12px 0; }
.vx-mh.cur{ color:#4338ca !important; background:linear-gradient(180deg,#e0e7ff,#c7d2fe); box-shadow:inset 0 -3px 0 #6366f1; }
html[data-theme="dark"] .vx-mh.cur{ color:#c7d2fe !important; background:rgba(99,102,241,.25); }
.vx-h .vx-t{ border-left:1px solid #e0e7ff; background:linear-gradient(180deg,#f5f7ff,#eef2ff); color:#4338ca; }
html[data-theme="dark"] .vx-h .vx-t{ background:rgba(99,102,241,.14); border-left-color:rgba(129,140,248,.25); color:#c7d2fe; }

/* полоса отдела: цвет отдела слева и в подложке; точка — прежняя (.vac-dept-dot), только цветом отдела */
.vx-g{ position:relative; display:flex; align-items:center; gap:10px; margin-top:10px; padding:11px 20px 11px 24px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--dc) 12%,var(--vx-card)),color-mix(in srgb,var(--dc) 4%,var(--vx-card)) 60%);
  border-top:1px solid color-mix(in srgb,var(--dc) 35%,transparent); border-bottom:1px solid color-mix(in srgb,var(--dc) 22%,transparent); }
.vx-g::before{ content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:4px; background:var(--dc); }
.vx-g.first{ margin-top:0; border-top:none; }
.vx-gd{ flex:none; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,color-mix(in srgb,var(--dc) 70%,#fff),var(--dc));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dc) 15%,transparent); }
/* точка и название — по базовой линии: низ точки на линии букв, середина
   точки (4px) — на середине прописных (0.7 × 11px / 2 ≈ 3.9px) при любом
   масштабе страницы, без ручных сдвигов */
.vx-gn{ display:inline-flex; align-items:baseline; gap:10px; }
.vx-g b{ font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#4338ca; }
html[data-theme="dark"] .vx-g b{ color:#c7d2fe; }
.vx-gp{ flex:none; padding:1px 8px 3px; border-radius:999px; background:#f1f5f9; font-size:10px; font-weight:600; color:#94a3b8; }
html[data-theme="dark"] .vx-gp{ background:#243145; }
.vx-gm{ font-size:12px; color:var(--vx-mu); white-space:nowrap; }
.vx-gw{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:4px 10px; border-radius:8px; background:#fef2f2; border:1px solid #fecaca;
  font-size:12px; font-weight:600; color:#b91c1c; white-space:nowrap; }
html[data-theme="dark"] .vx-gw{ background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.35); color:#fca5a5; }
.vx-gw svg{ width:14px; height:14px; }
.vx-gw > span{ position:relative; top:-1.5px; }

.vx-e{ min-height:64px; background:color-mix(in srgb,var(--vx-trk) 45%,var(--vx-card)); }
.vx-e.alt{ background:var(--vx-card); }
.vx-n{ display:flex; align-items:center; gap:10px; min-width:0; }
.vx-nt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vx-nt b{ font-size:14px; font-weight:600; color:var(--vx-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-sub{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--vx-mu); white-space:nowrap; }
.vx-sub svg{ flex:none; width:12px; height:12px; }
/* Segoe UI садит строчные ниже середины строки, и значки выглядели
   приподнятыми. Опускаем их — transform не округляется до пикселя, поэтому
   одинаково при любом масштабе; величина сдвига — на глаз, по просьбе
   на 1px выше середины строчных */
.vx-sub.now svg{ transform:translateY(0.5px); }
.vx-sub.done svg{ transform:translateY(1px); }
.vx-sub.now{ color:#b45309; font-weight:600; } html[data-theme="dark"] .vx-sub.now{ color:#fbbf24; }
.vx-sub.soon{ color:#4338ca; font-weight:600; } html[data-theme="dark"] .vx-sub.soon{ color:#a5b4fc; }
.vx-sub.done{ color:#15803d; } html[data-theme="dark"] .vx-sub.done{ color:#86efac; }

.vx-d{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; align-self:stretch; padding:12px 0; }
.vx-d.span{ flex-direction:row; gap:6px; }
.vx-d.cur{ background:linear-gradient(180deg,rgba(99,102,241,.07),rgba(99,102,241,.12)); }
html[data-theme="dark"] .vx-d.cur{ background:rgba(99,102,241,.1); }
.vx-dot{ width:4px; height:4px; border-radius:50%; background:#cbd5e1; }
html[data-theme="dark"] .vx-dot{ background:#334155; }
.vx-c{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; width:86%; padding:6px 4px 7px; box-sizing:border-box; border-radius:10px; cursor:default; }
/* объединённая ячейка: плашки стоят по датам (vacPlace) */
.vx-c.pos{ position:absolute; top:50%; transform:translateY(-50%); }
.vx-curbg{ position:absolute; top:0; bottom:0; background:linear-gradient(180deg,rgba(99,102,241,.07),rgba(99,102,241,.12)); pointer-events:none; }
html[data-theme="dark"] .vx-curbg{ background:rgba(99,102,241,.1); }
/* «прошедшие» выключены: прошедшие плашки гаснут, на их месте — точка */
.vx-c{ transition:opacity .2s, visibility .2s; }
.vx-nopast .vx-c.past{ opacity:0; visibility:hidden; }
.vx-dot.alt{ position:absolute; top:50%; margin:-2px 0 0 -2px; opacity:0; transition:opacity .2s; }
.vx-nopast .vx-d.allpast .vx-dot.alt{ opacity:1; }
/* строки, появившиеся после фильтра или поиска, — проявляются */
.vx-e.vx-appear{ animation:vxAppear .28s ease both; }
@keyframes vxAppear{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .vx-e.vx-appear{ animation:none; } }
.vx-c b{ font-size:14px; font-weight:800; line-height:1.1; }
.vx-c small{ font-size:10.5px; font-weight:600; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.vx-c.past{ background:linear-gradient(180deg,#eef1f6,#e2e8f0); border:1px solid #cbd5e1; box-shadow:0 1px 2px rgba(15,23,42,.06); }
.vx-c.past b{ color:#475569; } .vx-c.past small{ color:#64748b; }
.vx-c.past > svg{ position:absolute; top:4px; right:5px; width:11px; height:11px; color:#64748b; }
html[data-theme="dark"] .vx-c.past{ background:linear-gradient(180deg,#2a3547,#232d3d); border-color:#3a4a61; }
html[data-theme="dark"] .vx-c.past b{ color:#cbd5e1; } html[data-theme="dark"] .vx-c.past small, html[data-theme="dark"] .vx-c.past > svg{ color:#94a3b8; }
.vx-c.next{ background:linear-gradient(180deg,#fff7d6,#fde68a); border:1px solid #fbbf24; box-shadow:0 2px 6px rgba(245,158,11,.18); }
.vx-c.next b{ color:#92400e; } .vx-c.next small{ color:#b45309; }
html[data-theme="dark"] .vx-c.next{ background:linear-gradient(180deg,rgba(251,191,36,.28),rgba(245,158,11,.18)); border-color:rgba(251,191,36,.6); box-shadow:none; }
html[data-theme="dark"] .vx-c.next b{ color:#fde68a; } html[data-theme="dark"] .vx-c.next small{ color:#fcd34d; }
.vx-c.now{ background:linear-gradient(180deg,#fbbf24,#f59e0b); border:1px solid #d97706; box-shadow:0 4px 12px rgba(245,158,11,.38); }
.vx-c.now b, .vx-c.now small{ color:#fff; }
.vx-c u{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); padding:1px 7px; border-radius:999px; background:#b45309; color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.vx-in{ position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); padding:0 7px 2px; border-radius:999px; background:#6366f1; color:#fff;
  font-size:9.5px; font-weight:700; white-space:nowrap; }
.vx-c.ov{ box-shadow:0 0 0 2px #ef4444, 0 2px 6px rgba(239,68,68,.25); }
.vx-ovb{ position:absolute; top:-8px; right:-6px; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#ef4444; color:#fff; }
.vx-ovb svg{ width:11px; height:11px; }

.vx-t{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; align-self:stretch; padding:0 10px;
  border-left:1px solid #e0e7ff; background:rgba(99,102,241,.045); }
html[data-theme="dark"] .vx-t{ border-left-color:rgba(129,140,248,.2); background:rgba(99,102,241,.07); }
.vx-e .vx-t b{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:26px; padding:0 8px 1.5px; box-sizing:border-box; border-radius:999px;
  background:#f5f7ff; border:1px solid #c7d2fe; font-size:13.5px; font-weight:800; color:#4338ca; }
html[data-theme="dark"] .vx-e .vx-t b{ background:rgba(99,102,241,.16); border-color:rgba(129,140,248,.42); color:#c7d2fe; }
.vx-tb2{ display:flex; width:56px; height:5px; border-radius:3px; overflow:hidden; background:#e0e7ff; }
.vx-tb2 i{ display:block; height:100%; }
.vx-tb2 .p{ background:linear-gradient(90deg,#818cf8,#6366f1); } .vx-tb2 .n{ background:#c7d2fe; }
html[data-theme="dark"] .vx-tb2{ background:rgba(129,140,248,.18); } html[data-theme="dark"] .vx-tb2 .n{ background:rgba(129,140,248,.4); }
.vx-t small{ font-size:10.5px; color:var(--vx-mu); }
.vx-empty{ padding:28px 16px; text-align:center; font-size:13px; color:var(--vx-mu); }

/* ── подсказка у плашки отпуска — тёмная, как системные (.sla-tooltip, SLA) ── */
/* Бейджи и подписи: Segoe UI садит строчные ниже середины — снизу отступ
   больше, чем сверху (или текст на 1px выше), по замеру x-высоты и цифр. */
.vx-tip{ position:fixed; z-index:10050; left:0; top:0; width:330px; padding:10px 12px; box-sizing:border-box; border-radius:8px;
  background:rgba(15,23,42,.94); color:#e2e8f0; box-shadow:0 10px 28px rgba(15,23,42,.28); display:flex; flex-direction:column; gap:6px; pointer-events:none;
  opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.vx-tip.below{ transform:translateY(-4px); }
.vx-tip.on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.vx-tip::after{ content:""; position:absolute; left:var(--ax,50%); top:100%; margin-left:-6px; border:6px solid transparent; border-top-color:rgba(15,23,42,.94); }
.vx-tip.below::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:rgba(15,23,42,.94); }
html[data-theme="dark"] .vx-tip{ background:#0b1220; border:1px solid #2c3a4f; box-shadow:0 12px 30px rgba(0,0,0,.55); }
html[data-theme="dark"] .vx-tip::after{ border-top-color:#0b1220; }
html[data-theme="dark"] .vx-tip.below::after{ border-top-color:transparent; border-bottom-color:#0b1220; }
@media (prefers-reduced-motion: reduce){ .vx-tip{ transition:none; transform:none; } }
.vx-tip-h{ display:flex; align-items:center; gap:10px; padding-bottom:8px; margin-bottom:1px; border-bottom:1px solid rgba(148,163,184,.25); }
.vx-tip-h > span:nth-child(2){ flex:1; min-width:0; display:flex; flex-direction:column; }
.vx-tip-h b{ font-size:12.5px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-tip-h small{ font-size:11px; color:#94a3b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-tip .vx-av{ color:color-mix(in srgb,var(--c) 45%,#fff); background:color-mix(in srgb,var(--c) 28%,#0f172a); border-color:color-mix(in srgb,var(--c) 55%,transparent); }
.vx-tip .vx-av:has(img){ background:transparent; }
.vx-tip-s{ flex:none; padding:0.5px 8px 3.5px; border-radius:999px; background:#6366f1; color:#fff; font-size:11px; font-weight:700; white-space:nowrap; }
.vx-tip-s.now{ background:#d97706; } .vx-tip-s.past{ background:#475569; }
.vx-tip-r{ display:flex; justify-content:space-between; gap:10px; font-size:11.5px; line-height:1.5; color:#94a3b8; }
.vx-tip-r b{ color:#fff; font-weight:600; text-align:right; }
.vx-tip-r b.bad{ color:#fca5a5; }

/* ── легенда ── */
.vx-leg{ display:flex; flex-wrap:wrap; gap:18px; font-size:12px; color:var(--vx-mu); }
.vx-leg > span{ display:inline-flex; align-items:center; gap:7px; }
.vx-lg{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:26px; height:16px; box-sizing:border-box; border-radius:5px; }
.vx-lg.past{ background:linear-gradient(180deg,#eef1f6,#e2e8f0); border:1px solid #cbd5e1; }
.vx-lg.past svg{ width:10px; height:10px; color:#64748b; }
html[data-theme="dark"] .vx-lg.past{ background:#2a3547; border-color:#3a4a61; } html[data-theme="dark"] .vx-lg.past svg{ color:#94a3b8; }
.vx-lg.now{ background:linear-gradient(180deg,#fbbf24,#f59e0b); border:1px solid #d97706; }
.vx-lg.next{ background:linear-gradient(180deg,#fff7d6,#fde68a); border:1px solid #fbbf24; }
html[data-theme="dark"] .vx-lg.next{ background:rgba(251,191,36,.28); border-color:rgba(251,191,36,.6); }
.vx-lg.ov{ background:var(--vx-card); box-shadow:0 0 0 2px #ef4444; }
.vx-lg.tb{ width:40px; height:6px; border-radius:3px; overflow:hidden; display:flex; }
.vx-lg.tb .p{ flex:2; height:100%; background:#6366f1; } .vx-lg.tb .n{ flex:1; height:100%; background:#c7d2fe; }
html[data-theme="dark"] .vx-lg.tb .n{ background:rgba(129,140,248,.4); }

/* ══ Таблица смен — прежняя разметка, компактная сетка ══
   Строки, клетки, правка по клику и двойному клику — как были. Плашку смены
   рисует ::before клетки (мягкие тона — переменные из applyShiftCSS), а
   подложку «выходной» / «сегодня» — фон самой клетки: так они не мешают
   друг другу. Число и день недели в шапке — две строки таблицы, но одна
   скруглённая плашка: верх рисует ::before числа, низ — ::before дня недели. */
.glass-card .schedule-wrap{ border-radius:14px; background:#fff; border:1px solid rgba(165,180,252,.35); }
html[data-theme="dark"] .glass-card .schedule-wrap{ background:#1b2433; border-color:rgba(148,163,184,.2); }
.schedule-table{ border-collapse:separate; border-spacing:0; font-family:"Segoe UI",Arial,system-ui,sans-serif; }
.schedule-table th, .schedule-table td,
html[data-theme="dark"] .schedule-table th, html[data-theme="dark"] .schedule-table td{ border:none; }

/* шапка: число и день недели — одна плашка; цифры мягче, выходные — приглушённым красным */
.schedule-table thead tr:first-child > *{ position:sticky; top:0; z-index:2; padding:10px 2px 1px; font-size:12.5px; font-weight:600; color:#475569;
  background:#fafbff; vertical-align:bottom; }
.schedule-table thead th.col-name{ z-index:3; padding-left:14px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#334155; }
.schedule-table thead .weekday-row td{ position:relative; z-index:0; padding:1px 0 9px; font-size:10px; font-weight:400; color:#94a3b8; background:#f5f7fc;
  border-bottom:1px solid #eef0f6; vertical-align:top; }
.schedule-table thead .weekday-row td.col-name{ position:sticky; left:0; z-index:3; }
.schedule-table thead tr:first-child > th:not(.col-name):not(.col-total):not(.col-del)::before,
.schedule-table thead .weekday-row td:not(.col-name):not(.col-total):not(.col-del)::before{ content:""; position:absolute; z-index:-1; left:1.5px; right:1.5px; }
.schedule-table thead tr:first-child > th::before{ top:5px; bottom:0; border-radius:9px 9px 0 0; }
.schedule-table thead .weekday-row td::before{ top:0; bottom:4px; border-radius:0 0 9px 9px; }
.schedule-table thead .weekend{ color:#e57373 !important; }
.schedule-table thead .weekday-row td.weekend{ color:#eb9a9a !important; }
.schedule-table thead .weekend::before{ background:#fdf3f4; }
/* сегодня — индиго-плашка с тенью, без каёмки снизу */
.schedule-table thead th.today-col, .schedule-table thead .weekday-row td.today-col{ color:#fff !important; background:inherit !important; border:none !important; }
.schedule-table thead th.today-col{ font-weight:700; background:#fafbff !important; }
.schedule-table thead .weekday-row td.today-col{ background:#f5f7fc !important; }
.schedule-table thead th.today-col::before{ background:linear-gradient(180deg,#6d70f3,#5f5ef0); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.schedule-table thead .weekday-row td.today-col::before{ background:linear-gradient(180deg,#5f5ef0,#4f46e5); box-shadow:0 6px 12px -3px rgba(79,70,229,.45); }
.schedule-table thead .col-total{ color:#4338ca; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
html[data-theme="dark"] .schedule-table thead tr:first-child > *{ color:#aab4c3; background:#1f2a3b; }
html[data-theme="dark"] .schedule-table thead th.col-name{ color:#cbd5e1; }
html[data-theme="dark"] .schedule-table thead .weekday-row td{ color:#64748b; background:#1c2637; border-bottom-color:#2c3a4f; }
html[data-theme="dark"] .schedule-table thead .weekend{ color:#e58c8c !important; }
html[data-theme="dark"] .schedule-table thead .weekday-row td.weekend{ color:#b97777 !important; }
html[data-theme="dark"] .schedule-table thead .weekend::before{ background:rgba(239,68,68,.08); }
html[data-theme="dark"] .schedule-table thead th.today-col{ color:#fff !important; background:#1f2a3b !important; }
html[data-theme="dark"] .schedule-table thead .weekday-row td.today-col{ color:#e0e7ff !important; background:#1c2637 !important; }
html[data-theme="dark"] .schedule-table thead th.today-col::before{ background:linear-gradient(180deg,#6366f1,#5450df); box-shadow:none; }
html[data-theme="dark"] .schedule-table thead .weekday-row td.today-col::before{ background:linear-gradient(180deg,#5450df,#4338ca); box-shadow:0 6px 12px -3px rgba(0,0,0,.6); }
html[data-theme="dark"] .schedule-table thead .col-total{ color:#c7d2fe; }

/* строка отдела — полоса цвета отдела: заметная, но тише цветов смен */
.schedule-table tr.dept-row td, html[data-theme="dark"] .schedule-table tr.dept-row td{ padding:8px 12px 8px 18px; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#4338ca;
  background:linear-gradient(90deg,color-mix(in srgb,var(--dc,#6366f1) 9%,#fff),color-mix(in srgb,var(--dc,#6366f1) 3%,#fff));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--dc,#6366f1) 26%,transparent), inset 0 -1px 0 color-mix(in srgb,var(--dc,#6366f1) 15%,transparent); }
.schedule-table tr.dept-row td.emp-name, html[data-theme="dark"] .schedule-table tr.dept-row td.emp-name{ max-width:none;
  box-shadow:inset 4px 0 0 var(--dc,#6366f1), inset 0 1px 0 color-mix(in srgb,var(--dc,#6366f1) 26%,transparent), inset 0 -1px 0 color-mix(in srgb,var(--dc,#6366f1) 15%,transparent); }
.schedule-table tr.dept-row td.col-del{ background:color-mix(in srgb,var(--dc,#6366f1) 3%,#fff); }
/* точка — на базовой линии названия: середина точки на середине прописных */
.schedule-table tr.dept-row td.emp-name::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--dc,#6366f1) 70%,#fff),var(--dc,#6366f1)); box-shadow:0 0 0 3px color-mix(in srgb,var(--dc,#6366f1) 15%,transparent); }
.schedule-table tbody tr.dept-row:not(:first-child) td{ border-top:8px solid #fff; }
.schedule-table tbody tr.dept-row td{ border-bottom:2px solid #fff; }
html[data-theme="dark"] .schedule-table tr.dept-row td{ color:#c7d2fe;
  background:linear-gradient(90deg,color-mix(in srgb,var(--dc,#6366f1) 13%,#1b2433),color-mix(in srgb,var(--dc,#6366f1) 4%,#1b2433)); }
html[data-theme="dark"] .schedule-table tr.dept-row td.col-del{ background:color-mix(in srgb,var(--dc,#6366f1) 4%,#1b2433); }
html[data-theme="dark"] .schedule-table tbody tr.dept-row:not(:first-child) td{ border-top-color:#1b2433; }
html[data-theme="dark"] .schedule-table tbody tr.dept-row td{ border-bottom-color:#1b2433; }

/* строка сотрудника: компактная, имя жирнее, график в скобках — серым */
.schedule-table tbody tr:not(.dept-row) > td{ background-color:#fff; }
.schedule-table tbody tr:not(.dept-row):hover > td{ background-color:#f6f6fe; }
html[data-theme="dark"] .schedule-table tbody tr:not(.dept-row) > td{ background-color:#1b2433; }
html[data-theme="dark"] .schedule-table tbody tr:not(.dept-row):hover > td{ background-color:#20293f; }
.schedule-table tbody tr:not(.dept-row) td.emp-name{ max-width:300px; padding:0 12px 0 14px !important; font-weight:400; color:#64748b; font-size:11.5px; }
.schedule-table td.emp-name b{ font-size:13px; font-weight:600; color:#0f172a; }
html[data-theme="dark"] .schedule-table tbody tr:not(.dept-row) td.emp-name{ color:#94a3b8; }
html[data-theme="dark"] .schedule-table td.emp-name b{ color:#e5e7eb; }
.schedule-table th.col-name{ min-width:290px; }

/* клетка смены: плашка 26px, скругление 7px, зазор 3px; буква по центру */
.schedule-table td.shift-cell{ position:relative; z-index:0; width:32px; height:32px; padding:0 0 1.5px; font-size:11.5px; font-weight:700;
  color:var(--sh-fg,#94a3b8); outline:none !important; box-shadow:none; transition:none; }
.schedule-table td.shift-cell::before{ content:""; position:absolute; inset:3px 1.5px; z-index:-1; border-radius:7px; background:var(--sh-bg,transparent); transition:box-shadow .12s; }
/* кольца наведения и выбора — внутренние: внешние выходили за клетку, и
   соседка справа (она рисуется позже) срезала их край. */
.schedule-table td.shift-cell:hover::before{ box-shadow:inset 0 0 0 2px #6366f1; }
.schedule-table td.shift-cell.picking::before{ box-shadow:inset 0 0 0 2px #4f46e5, inset 0 0 0 4px rgba(99,102,241,.22); }
body.readonly .schedule-table td.shift-cell:hover::before{ box-shadow:none; }
/* сегодня: плашки дня приподняты — крупнее, с мягкой индиго-тенью и тонкой
   обводкой. Столбцы «сегодня» и выходных клетки не заливают: под овалами
   проступали квадраты. Выходные видны по красным дням в шапке. */
/* приподнятая плашка выходит за клетку на ~1px: клетка дня — над соседями,
   иначе фон правой соседки срезает обводку; имена (sticky) — ещё выше */
.schedule-table td.shift-cell.today-col{ z-index:1; }
.schedule-table tbody td.emp-name{ z-index:2; }
.schedule-table td.shift-cell.today-col::before{ transform:scale(1.08); box-shadow:0 4px 10px -2px rgba(79,70,229,.35), 0 0 0 1.5px rgba(99,102,241,.55); }
.schedule-table td.shift-cell.today-col:hover::before{ box-shadow:0 4px 10px -2px rgba(79,70,229,.35), 0 0 0 2px #6366f1; }
html[data-theme="dark"] .schedule-table td.shift-cell{ color:var(--sh-dfg,#64748b); }
html[data-theme="dark"] .schedule-table td.shift-cell::before{ background:var(--sh-dbg,transparent); }
html[data-theme="dark"] .schedule-table td.shift-cell.today-col::before{ box-shadow:0 4px 12px -2px rgba(0,0,0,.6), 0 0 0 1.5px rgba(129,140,248,.6); }

/* «Всего» — в одном ряду с сеткой: линии слева и справа, число в мягкой индиго-плашке */
.schedule-table .col-total, .schedule-table td.total-cell{ min-width:64px; box-shadow:inset 1px 0 0 #e6e9f3, inset -1px 0 0 #e6e9f3; }
.schedule-table tr.dept-row .col-total{ box-shadow:none; }
.schedule-table td.total-cell b{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:24px; padding:0 8px 1.5px; box-sizing:border-box;
  border-radius:8px; background:#eef2ff; font-size:13px; font-weight:800; color:#4338ca; vertical-align:middle; }
html[data-theme="dark"] .schedule-table .col-total, html[data-theme="dark"] .schedule-table td.total-cell{ box-shadow:inset 1px 0 0 #2c3a4f, inset -1px 0 0 #2c3a4f; }
html[data-theme="dark"] .schedule-table td.total-cell b{ background:rgba(99,102,241,.18); color:#c7d2fe; }
.schedule-table .emp-del{ color:#cbd5e1; }
.schedule-table tr:hover .emp-del{ color:#ef4444; }
html[data-theme="dark"] .schedule-table .emp-del{ color:#475569; }
html[data-theme="dark"] .schedule-table tr:hover .emp-del{ color:#f87171; }